阮一峰博客转载记录

大家好，欢迎来到IT知识分享网。

把看过的认为有点意思的，做个链接记录。

2009年
一、学习JavaScript 闭包详见阮一峰链接
有一个可以作为面试题：

　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){ 
   
　　　　　　return function(){ 
   
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());
　　// 2
　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){ 
   
　　　　　　var that = this;
　　　　　　return function(){ 
   
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());

二、用Javascript获取页面元素的位置参见链接
讲述浏览器元素位置相关的信息 （相对位置，绝对位置 ，滚动位置）。

2010年
一、JavaScript 面向对象编程（封装）参见链接

明白constructor \ instanceof \ prototype原型 \ isPrototypeOf \ hasOwnProperty 就没啥看 的了。
二、JavaScript 面向对象编程（构照函数的继承）参见链接
重点看看，这个可以作为面试题 ☆

三、JavaScript 面向对象编程（非构照函数的继承）参见链接
2011年
一、 JavaScript 快速 排序的实现 参见链接

“快速排序”的排序过程：

1. 在数据集之中，选择一个元素作为“基准”。
2. 所有小于“基准”的元素，都移到“基准”的左边； 所有大于“基准”的元素，都移到“基准”的右边。
3. 对“基准”左边和右边的两个子集，不断重复第一步和第二部，直到只剩最后一个元素。
   算法如下：

var quickSort = function(arr){ 
   
    if(arr.length <=1 ){  return arr ; }
    var pivotIndex = Math.floor( arr.length /2 );
    var pivot = arr.splice( pivotIndex ,1 )[0];
    var left = [];
    var right = [];
    for( var i=0;i<arr.length;i++ ){
       if( arr[i] < pivot ){
            left.push( arr[i] );
       } else{
            right.push(arr[i]);
        }
    }
    return quickSort( left ).concat( [pivot],quickSort(right) );
};

可以作为面试题 ☆
还有一个要留意的， JavaScript 会自动插入行尾分号(阮一峰那有误)。参看链接

    function aa(){ 
   
          return 
              { 
                i:1
              };
    }
// undefined
    function aa(){ 
   
          return { 
                    i:1
                 };
     }
// { i:1 }

数字和对象的区分：（道格拉斯 ）

if( arr && typeof arr === 'object' && typeof arr.length === 'number' && !arr.propertyIsEnumerable('length')){
  // 是数组
}

// 现在可以用 
Array.isArray( arr  )  // 返回布尔值。

二、 新版jquery 的ajax 新写法： ☆
jQuery.Deferred 符合 Promises/A+ 规范和 ES2015 规范
参见链接

　　$.ajax("test.html")
　　.done(function(){ 
    alert("哈哈，成功了！");} )
　　.fail(function(){ 
    alert("出错啦！"); } )
　　.done(function(){ 
    alert("第二个回调函数！");} );

新版jQuery 更新的那些功能
对于新版需要注意按需引入对应的js.
1、如果你要兼容更广泛的浏览器，包括IE8，Opera 12，Safari 5等，使用jQuery-Compat 3.0.0包。我们推荐大多数站点使用这个版本，因为它为最多的网站访问者提供了最佳的兼容性。
2、如果你的网站是专为领先的浏览器搭建的，或者是一个webview（例如PhoneGap或Cordova）容器中的HTML应用，并且你知道哪些浏览器引擎会使用它，那就使用jQuery 3.0.0包。

github参看
这种写法可以学习一下。 ！

jQuery Api

2012年
一、 JavaScript 编程风格 参见链接
就简单的几个风格和常见的风格。
二、 JavaScript 定义类的三种方法参见链接
重点 Object.create 遇到不支持的Object.create 则如下实现：

if( !Object.create ){
    Object.create = function(o){ 
   
        function F(){ 
   } 
        F.prototype = o;
        return new F();
    };
}

还讲到了一种，极简主义法 感觉挺新颖的。 可以学习下。

var Cat = {
    createNew:function(){ 
   
        // some code here.
    }
}

// eg 
var Cat = {
    createNew:function(){ 
   
        var cat = {};
        cat.name = 'aa';
        cat.makeSound = function{ 
    alert('123') };
        return cat;
    }
}

var cat1 = Cat.createNew();
    cat1.makeSound();

文中还模拟了 继承、私有属性和私有方法、数据共享 。
可以面试说出装B神器。
三、 文件上传的渐进式增强参见链接
如果遇到文件上传的时候，可以看看学习下，（ajax 上传、进度条、拖放上传）。
四、 XMLHttpRequest Level 2 使用指南 。参见链接
讲了ajax 2.0 的变化。还是还可以看看
比如新增：

　　* 可以设置HTTP请求的时限。
　　* 可以使用FormData对象管理表单数据。
　　* 可以上传文件。
　　* 可以请求不同域名下的数据（跨域请求）。
　　* 可以获取服务器端的二进制数据。
　　* 可以获得数据传输的进度信息。

五、 模块化编程的演变。
Javascript模块化编程（一）：模块的写法
Javascript模块化编程（二）：AMD规范
Javascript模块化编程（三）：require.js的用法
学会合理使用异步编程（promise） ☆

2013年
一、Javascript 严格模式详解 参见链接
二、如何让搜索引擎抓取AJAX内容？（在单页面盛行的今天）这里写链接内容
值得注意的是谷歌曾经提出“井号+感叹号”的结构

http://example.com#!1
http://twitter.com/#!/ruanyf

结果用户不接受。
最后采用的是* History API。*

window.history.pushState(state object, title, url);

Event Loop是一个程序结构，用于等待和发送消息和事件。

2014年
一、ES6 出书 《ECMAScript 6入门》
二、前端模块管理器简介
讲到了Bower，Browserify，Component和Duo。
最终以推荐Duo 为结尾。
三、重谈 Event Loop？
JavaScript 运行机制详解：再谈Event Loop详情看 ☆☆

2015年

一、强类型 JavaScript 的解决方案这里写链接内容

TypeScript 是微软2012年推出的一种编程语言，属于 JavaScript 的超集，可以编译为 JavaScript 执行。 它的最大特点就是支持强类型和 ES6 Class。

这个得好好学习看看。

二、JavaScript 有多灵活？

给原型上加方法

(8).double().square()
//  如果要改写，该怎么弄
(8).double.suqare

重点来了，
ES5规定，每个对象的属性都有一个取值方法get，用来自定义该属性的读取操作。

Number.prototype = Object.defineProperty(
  Number.prototype, "double", {
    get: function (){ 
   return (this + this)} 
  }
);

Number.prototype =  Object.defineProperty(
  Number.prototype, "square", {
    get: function (){ 
   return (this * this)} 
  }
);

上面代码在Number.prototype 上定义了两个属性 double and square ,以及他们的取值方法get.
这样就可以采用上面的方法写了

(8).double.square
// 256

三、React 入门实例教程
react 更新神速，这篇的demo 有点过时了，不过可以敲一敲，多一点点感觉。