把看過的認為有點意思的，做個連結記錄。
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 快速 排序的實作 參見連結
“快速排序”的排序過程：
- 在資料集之中，選擇一個元素作為“基準”。
- 所有小于“基準”的元素，都移到“基準”的左邊； 所有大于“基準”的元素，都移到“基準”的右邊。
-
對“基準”左邊和右邊的兩個子集，不斷重複第一步和第二部，直到隻剩最後一個元素。
算法如下：
var quickSort = function(arr){
if(arr.length <= ){ return arr ; }
var pivotIndex = Math.floor( arr.length / );
var pivot = arr.splice( pivotIndex , )[];
var left = [];
var right = [];
for( var i=;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:
};
}
// undefined
function aa(){
return {
i:
};
}
// { 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。*
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 有多靈活？
給原型上加方法
().double().square()
// 如果要改寫，該怎麼弄
().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.
這樣就可以采用上面的方法寫了
().double.square
// 256
三、React 入門執行個體教程
react 更新神速，這篇的demo 有點過時了，不過可以敲一敲，多一點點感覺。
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)