XMLHttpRequest 学习笔记

AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。

Ajax 技术的核心是 XMLHttpRequest 对象,起初 IE 首先引入这个特性,后面其他浏览器供应商也提供了相同的实现。

XMLHttpRequest 对象

XMLHttpRequest 是一个API, 它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页面刷新。

JavaScript 继承的那些事

众所周知,JavaScript 的继承是实现继承,而没有 Java 中的接口继承。这是因为 JavaScript 中函数没有签名,而实现继承依靠的是原型链来实现的。

原型链继承

JavaScript 中通过修改对象原型指向的对象来实现继承,即是将一个对象的原型指向要继承的对象实例,从而实现继承对象的属性及方法。

JavaScript 创建对象的一些姿势

工厂模式

在函数中创建 Object 对象,并为对象添加属性。函数返回添加属性之后的对象。

function createPerson(name, age) {
var o = new Object()
o.name = name
o.age = age
o.sayName = function () {
console.log(this.name)
}
return o
}
var p = createPerson("ahonn", 21)

JavaScript 数据类型判断

最近开始读之前没有读完的 underscore 的源码,刚把 Object 部分读完。对 JavaScript 中类型判断部分的总结。

Object.prototype.toString()

在进行类型判断时,使用到最多的当属 Object.prototype.toString()

toString() 方法返回一个代表该对象的字符串。每个对象都会继承 Object 上的 toString 方法,如果该方法没有被同名方法覆盖的话。使用 toString() 方法将会返回字符串 "[object type]"。其中 type 根据对象的类型的不同而不同。

关于 Object.prototype.toString() 的详细描述可以查看:Object.prototype.toString() - JavaScript | MDN

React 路由跳转后回到页面顶部

在 React 组件间进行页面跳转后,发现页面的位置并不在页面顶部,而是在页面跳转前的位置。就是说浏览器的滚动条并没有回到顶部的位置。

经过搜索之后找到了解决方案:Scroll to the top of the page after render in react.js

可以使用下面这种解决,但是这种方式不是一种很好的解决方法。而且 scrollIntoView() 方法并不回到页面的顶部,应该使用 scrollTop = 0 的方式。

componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }

所以得到的解决方案是:

componentDidUpdate() {
ReactDOM.findDOMNode(this).scrollTop = 0
}

React 生命周期函数小结

生命周期函数是指,在组件生命周期上的特定点上执行的各个函数。
React 的组件声明周期函数分为三种:挂载,更新以及卸载。

挂载

组件挂载的生命周期函数都在初始化渲染前后被调用。

componentWillMount

只调用一次,在客户端与服务端都执行。在初始化渲染之前被调用。

正则表达式备忘录

JavaScript 创建正则表达式有两种方式:

  • 使用正则表达式字面量:var re = /abc/;
  • 调用 RegExp 对象的构造函数:var re = new RegExp("abc");

什么时候使用构造函数?

当正则表达式的模式会变发生改变,或者需要从其他地方得到时(例如用户输入),适合使用构造函数的方式。

JavaScript 最佳实践

翻译自:JavaScript Best Practices: Tips & Tricks to Level Up Your Code
没有严格的按照原文翻译,删减修改了部分内容。

在这个教程中,会列出一些重要的 JavaScript 的最佳实践,学习这些并不会很困难。

避免污染全局作用域

声明变量是很有趣的,有时候你会在你不知情的情况下声明了全局变量。在现在的浏览器中,全局变量将会存储在 window 变量中。在全局作用域中的变量可能在不经意间被覆盖。

如何减少浏览器回流

什么是浏览器回流

浏览器在显示网页时,需要计算每一个元素应该放置的位置,这个计算过程就称为浏览器回流(browser reflow)。回流会重新计算页面的布局,在回流中会重新计算元素的尺寸与位置,并且也会触发对子元素的回流。

触发浏览器回流的操作:

  • 在 DOM 中插入,移除或者更新元素
  • 修改页面上的内容
  • 移动 DOM 元素
  • 修改元素 CSS 样式
  • 修改元素的类名
  • 调整窗口的大小

Sass 初探

为什么学 Sass

说起来其实很早就知道 Sass 这东西。刚开始写 Even 这个博客主题的时候就有在考虑是要用 Less 还是Sass,最后用了变量名用 @ 开头的 Less(可能是 PHP 的原因,对 $ 开头的变量名没什么好感)。

最近正在看 Foundation,源码是用 Sass 写的。Bootstrap 之前也是用 Less 的,不过后来也转向了 Sass。然后发现 Foundation 写得挺不错的,看看博客主题写的代码,简直不能看。正好打算把主题给重构重构,就顺手学学 Sass,用 Sass 写。

123