摘要：個人總結的比較全面的前端面試知識點。主要是一些個人認為面試時容易考到以及平時需要注意的一些知識點。如果需要進行深入了解可以根據知識點查詢相關的技術文章。

個人總結的比較全面的前端面試知識點。主要是一些個人認為面試時容易考到以及平時需要注意的一些知識點。

本人只是對這些知識進行了一個大概的總結，還有一部分技術還沒開始涉及，后期會持續添加。如果需要進行深入了解可以根據知識點查詢相關的技術文章。

本文涵蓋了以下各個方面的知識:

HTML, CSS, JS基礎知識

網站性能優化知識

前端項目自動化構建相關知識

算法相關知識

網絡與HTTP協議相關知識

前端的安全相關知識

插件編寫相關知識

JS模塊化編程相關知識

Github Repo：
https://github.com/Erichain/Front-End-Interview-Points

持續更新中。歡迎fork和star進行完善。

關于前端是什么，以及需要學習什么，移步這里：

Front-End Developer Handbook

HTML部分 docType

混雜模式

標準模式

準標準模式

標簽語義化

去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構

有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重

方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁

便于團隊開發和維護，語義化更具可讀性，是下一步網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化

塊級標簽，行內標簽

塊級：div, ul, li, ol, table, th, tbody, tfoot, tr, pre, fieldset, form, h1-6, p等

a, abbr, b, br, code, em, img, input, label, select, textarea, strong等

meta標簽

如何在不使用JS的情況下刷新頁面(http-equiv="refresh", content="time")

設置頁面緩存

移動端設置

etc.

HTML代碼優化

標簽嵌套層級不要太深，標簽盡量簡潔化.如懶加載后將data屬性去除

大量圖片的懶加載策略，以及一些元素利用ajax在onload后實行延遲加載

對一些js的異步加載

搜索引擎優化SEO CSS部分 浮動，清除浮動的方法和原理(4種方法)

使用空標簽設置clear: both;

為父級元素設置overflow: hidden;(利用BFC的原理)

使用偽元素，為要清除浮動的元素添加.clearfix類(推薦)

使用min-height: contain-floats;(不推薦，兼容性不好)

CSS塊級格式化上下文

觸發條件

position屬性不為static或者relative

float屬性不為none

非塊級的塊級元素(inline-block, table-cell)

overflow不為visible

特性

內部的Box會在垂直方向，從頂部開始一個接一個地放置

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生疊加

BFC的區域不會與float box疊加

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然

計算BFC的高度時，浮動元素也參與計算

用處

解決margin邊距疊加問題。為元素多帶帶創建一個BFC來防止外邊距的折疊

布局

清除浮動。為包含浮動元素的container創建BFC來清除浮動

盒子模型(IE盒子模型的區別)

總寬度 ＝ margin＋padding＋border＋content，IE的盒子模型的寬度不計padding和border

css3的box-sizing屬性，詳見https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

content-box，border和padding不計算入width之內

border-box，border和padding計算入width之內

定位

定位和浮動的區別

什么時候使用定位，什么時候使用浮動

樣式繼承

可繼承的樣式

font-size font-family color text-indent

z-index屬性

理解 CSS 的 z-index 屬性

IE瀏覽器的hack

條件hack

屬性hack

_ IE6

*+IE7

+IE6/7

.IE8

選擇符hack

*IE7

_IE6

CSS sprite

減少請求

布局模型

雙飛翼布局

圣杯布局

CSS優先級

行內樣式 > 內聯樣式 > 外部樣式，ID > Class > Element

設置了!important的樣式優先級更高

Flexbox

A Complete Guide to Flexbox

各個單位的區別(px, em, rem, 百分比)

Understanding Font sizing in CSS: em – px – pt – percent – rem

REM vs EM – The Great Debate

居中

CSS Center Complete

link和@import的區別

link屬于XHTML標簽，而@import是CSS提供的

頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載

@import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題

link方式的樣式的權重 高于@import的權重

如何將div與圖片設置等寬，inline-block元素之間的空隙如何解決

設置父元素font-size為0，再對里面的文字多帶帶設置font-size

全兼容的樣式解決方法

.finally-solve {
    letter-spacing: -4px; /*根據不同字體字號或許需要做一定的調整*/
    word-spacing: -4px;
    font-size: 0;
}
.finally-solve li {
    font-size: 16px;
    letter-spacing: normal;
    word-spacing: normal;
    display:inline-block;
    *display: inline;
    zoom:1;
}

CSS優化

嵌套層級不要太深，一般三層最多

css解析從右向左，所以最右邊的應該是相對少一點

html用了base64的img的話，并不會緩存起來，可以將這個base64的圖片放在css文件里，css會緩存，圖片就緩存起來了

盡量不用后代元素選擇器，最右邊的一層不要是標簽，尤其是像div這種非常常用的標簽

多使用css的繼承，而不是每一次都書寫時都全部重寫一遍。寫多個css屬性時，能連在一起寫的就連在一起寫

預處理器

Sass

JS部分 嚴格模式

"use strict"

不能使用eval()

抑制this的行為

不允許讀寫eval和arguments的值

不允許意外創建全局變量

變量

使用var定義的全局變量不能使用delete刪除

無var創建的全局變量可以使用delete刪除

隱式類型轉換

數字與字符串相加，結果為字符串

數字與字符串相減，結果為數字

比較變量的是否相同時，要采用===，==會發生隱式類型轉換

NaN與任何變量不相等

類型檢測

typeof

instanceof

constructor

Object.prototype.toString.apply()

作用域

全局作用域

函數作用域

對象

hasOwnProperty, isPrototypeOf, propertyIsEnumerable

配置屬性(configurable, enumerable, writable, value)

特性

擴展: isExtensible, preventExtensions(是否可以添加新的屬性)

密封: isSealed, seal(是否可以刪除屬性，是否可以配置屬性)

凍結: isFrozen, freeze(所有屬性是否可讀可寫)

定義屬性

defineProperty, defineProperties

數組

數組的類型檢測

數組的方法

slice()

map()

every()

some()

filter()

函數

柯里化

概念：部分求值（Partial Evaluation），是把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，并且返回接受余下的參數而且返回結果的新函數的技術

function currying( fn ) {
    var args = Array.prototype.slice.call(arguments, 1);
    return function () {
        var newArgs = args.concat(Array.prototype.slice.call(arguments));
        return fn.apply(null, newArgs);
    }
}

arguments對象

JS函數不存在重載，后定義的函數會覆蓋先定義的函數

函數調用模式

方法調用

函數調用

構造器調用

apply調用

new操作符的原理

使用new關鍵字來創建實例的時候，原理如下：

首先，在構造函數內部使用Object.create(constructor.prototype)創建一個對象繼承自構造函數

然后，將這個對象引用到this上

最后，返回this

閉包

概念

作用

創建匿名執行函數

緩存變量，防止被垃圾回收

實現函數的封裝

應用場景

內部函數訪問外部函數的變量

使用閉包代替全局變量

封裝相關功能

回調函數

創建私有變量和公有變量

特性

經典例子：列表點擊，彈出每一個的index

/* 錯誤做法 */
var elems = document.getElementById("links").getElementsByTagName("li");

for ( var i = 0; i < elems.length; i++ ) {
    elems[i].addEventListener("click", function ( event ) {
        event.preventDefault();
        alert(i);
    }, false);
}

/* 正確的做法，使用閉包 */
var elems = document.getElementById("links").getElementsByTagName("li");

for ( var i = 0; i < elems.length; i++ ) {
    (function ( index ) {
        elems[i].addEventListener("click", function ( event ) {
            event.preventDefault();
            alert(index);
        }, false);
    
    })( i );
}

this

函數的this的值永遠綁定在調用此函數的對象上

可以使用apply，call或者bind改變this值的指向

對象創建的模式和方法及區別

工廠模式

/* 缺點：無法檢測對象的類型 */
var createPerson = function ( name, age, job ) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;

    return o;
};

var person1 = createPerson("Erichain", 21, "Web");

構造函數模式

/* 缺點：每個方法要在每個實例上重新創建一遍 */
var Person = function ( name, age, job ) {
    this.name = name;
    this.age = age;
    this.job = job;
}

var person1 = new Person("Erichain", 21, "Web");

原型模式

var Person = function () {};

Person.prototype = {
    constructor: Person, // 如果這個屬性十分重要的話
    name: "Erichain",
    age: 21,
    job: "web"
};
var person1 = new Person();

組合構造函數原型模式

動態原型模式

var Person = function ( name, age, job ) {
    this.name = name;
    this.age = age;
    this.job = job;

    if ( typeof this.sayName !== "function" ) {
        Person.prototype.sayName = function () {
            alert( this.name );
        }
    }
};

寄生構造函數模式

除了使用new來實例化外，與工廠模式沒區別

不能依賴instanceof來確定對象類型，一般不建議使用

穩妥構造函數模式

原型和繼承

原型鏈

借用構造函數

function Person( name ) {
    this.name = name;
}

function man() {
    // 繼承自Person，可以選擇是否傳入參數
    Person.call(this, "Erichain");
}

組合繼承

原型式繼承

寄生式繼承

寄生組合式繼承

new Object()和Object.create()的區別

Object.create創建的對象直接從他的第一個參數繼承，而new Object所創建的對象是從對象的原型上繼承

使用Object.create，可以創建一個不繼承于任何東西的對象，但是，如果設置someConstructor.prototype = null，那么，這個新創建的對象會繼承自Object.prototype

回調函數 變量提升，函數聲明提升

函數聲明優于變量聲明

函數聲明會覆蓋變量聲明，但是不會覆蓋變量賦值

IIFE(立即執行函數)

在閉包中保存變量狀態

模塊化

IIFE和自執行函數的區別

IIFE的幾種表示方法

(function () {})();
(function () {}());

!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

事件

事件流

事件捕獲

處于目標

事件冒泡

事件對象(IE的區別)

跨瀏覽器事件處理函數

var EventUtil = {
    getEvent: function ( event ) {
        return event ? event : window.event;
    },
    getTarget: function ( event ) {
        return event.target || event.srcElement;
    },
    addHandler: function ( elem, type, handler ) {
        if ( elem.addEventListener ) {
            elem.addEventListener(type, handler, false);
        }
        else if ( elem.attachEvent ) {
            elem.attachEvent("on" + type, handler);
        }
        else {
            elem["on" + type] = handler;
        }
    },
    preventDefault: function ( event ) {
        if ( event.preventDefault ) {
            event.preventDefault();
        }
        else {
            event.returnValue = false;
        }
    },
    stopPropagation: function ( event ) {
        if ( event.stopPropagation ) {
            event.stopPropagation();
        }
        else {
            event.cancelable = true;
        }
    }
};

事件廣播

事件委托

    
Link1
    
Link2
    
Link3

var links = document.getElementById("links");

// 使用之前定義的跨瀏覽器事件處理程序
EventUtil.addHandler(links, "click", function ( event ) {
    var target = EventUtil.getTarget(event);
    event = EventUtil.getEvent(event);

    switch ( target.id ) {
        case "link1":
            // do something
            break;
        case "link2":
            // do something
            break;
        case "link3":
            // do something
            break;
    }
});

事件函數的參數(注意addEventListener()的最后一個參數，如果為false表示在冒泡階段獲取事件，如果為true，表示在事件捕獲階段獲取事件)

call, apply, bind(手動實現)

call(obj, args), apply(obj, array)

call與apply支持低版本瀏覽器，bind只支持高版本瀏覽器

bind原生代碼實現

if ( !Function.prototype.bind ) {
    Function.prototype.bind = function ( oThis ) {
        if ( typeof this !== "function") {
            throw new Error("What is trying to be bound is not callable");
        }

        var aArgs = Array.prototype.slice.call(arguments, 1),
            fToBound = this,
            fNOP = function () {},
            fBound = function () {
                return fToBound.apply(
                    this instanceof fNOP ? this : oThis,
                    aArgs.concat(Array.prototype.slice.call(arguments))
                )
            };

        if ( this.prototype ) {
            fNOP.prototype = this.prototype;
        }

        fBound.prototype = new fNOP();
        return fBound;
    };
}

能力檢測 BOM

window對象

location對象

screen對象

navigator對象

檢測插件navigator.plugins

檢測用戶代理navigator.userAgent

history對象

promise

Javascript Promise 迷你書

JavaScript Promise API

DOM 操作

查找

document.getElementById

document.getElementsByTagName

document.getElementsByName

document.getElementsByClassName

document.querySelector

document.querySelectAll

節點關系

element.childNodes

element.firstChild

element.lastChild

element.previousSibling

element.nextSibling

element.parentNode

element.appendChild()

element.insertBefore()

element.removeChild()

element.replaceChild()

屬性操作

element.getAttribute()

element.setAttribute()

樣式操作

element.style[PROPERTY_NAME]

element.classList

element.classList.add

element.classList.remove

element.classList.contains

element.classList.toggle

元素遍歷

childElementCount子元素數量

firstElementChild第一個子元素: firstChild的元素版

lastElementChild最后一個子元素: lastChild的元素版

previousElementSibling->previousSibling的元素版

nextElementSibling->nextSibling的元素版

遍歷方法

document.createNodeIterator(root, whatToShow, filter)參見https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator

document.createTreeWalker(root, whatToShow, filter, expandEntityReferences, currentNode)參見https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker

性能優化

操作DOM的時候一定要緩存變量，避免發生大量的重排重繪

異步加載Javascript文件

使用document.write()

動態改變已有script標簽的src屬性

使用DOM方法動態創建script元素

使用Ajax獲取腳本內容再加載

在script標簽中使用defer以及async屬性

按需加載

合并文件

合理使用二進制

CDN加速，原理

圖片懶加載

懶加載——網頁圖片的加載技術

Lazy Load Plugin for jQuery

預加載

3 Ways to Preload Images with CSS, JavaScript, or Ajax

Prefetching, preloading, prebrowsing

prefetch

HTML5 Prefetch

函數節流

淺談函數節流

垃圾回收

引用計數

/* 出現循環引用的例子 */
function () {
    var objectA = {},
        objectB = {};

    objectA.someOtherObject = objectB;
    objectB.anotherObject = objectA;
}

標記清除

內存泄漏

setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏

循環引用

優雅降級和漸進增強

優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效

漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來并發揮作用

JSON

JSON.stringify() json序列化為字符串

JSON.parse() 將類JSON的字符串轉化為JSON對象

XMLHttpRequest對象

一段比較完整的使用原生Javascript實現ajax請求方法

function createRequestObject() {
    if ( window.XMLHttpRequest ) {
        return new XMLHttpRequest();
    }

    // 針對IE
    else if ( window.ActiveXObject ) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

// 請求的回調函數
function requestCallBack() {
    if ( request.readyState === 4 && request.status === 200 ) {
        console.log(request.responseText);
    }
}

var request = createRequestObject();

request.onreadystatechange = requestCallBack;
// open函數的三個參數分別是請求的方法, 請求的地址, 是否異步(true表示異步)
request.open("POST", url, true);
request.send(null);

使用Javascript計算兩個日期的時間差

JavaScript: DateDiff & DateMeasure: Calculate days, hours, minutes, seconds between two Dates

性能測試工具

Performance Tools

代碼審查工具

JSHint

JSLint

ESLint(針對ECMAScript 2015)

代碼壓縮

JSMin

YUI Compressor

Gzip

Javascript原生函數使用

You-Dont-Need-jQuery

Array.prototype.slice.call()原理

how does Array.prototype.slice.call() work?

RESTful 瀏覽器部分 各個瀏覽器內核

IE: Trident

Chrome: Webkit, Blink(now)

Firefox: Gecko

Opera: Presto

sessionStorage，cookie，localStorage

cookie 由服務器生成，可設置失效時間。如果是瀏覽器端生成的cookie，則在瀏覽器關閉之后失效；而localStorage除非被清除，否則永久保存，sessionStorage則在關閉瀏覽器或者頁面之后清除

cookie的大小為4k左右，localStorage和sessionStorage的大小一般為5MB

與服務器痛心的時候，cookie每次都會攜帶在http頭中，但是其他兩個不參與服務器通信

cookie中最好不要放置任何的明文的東西，其他兩個的數據如果提交到服務器一定要校驗

瀏覽器的多個標簽頁之間如何通信

Javascript communication between browser tabs/windows

關于瀏覽器緩存

淺談Web緩存

前端安全

防止XSS(跨站點腳本)攻擊

防止CSRF(跨站點偽造請求攻擊)

防止跨iframe攻擊

自動化 npm與bower的區別

bower與npm的不同點

gulp流與管道的概念

Unix流

管道

管道是一個固定大小的緩沖區

從管道讀數據是一次性操作，數據一旦被讀，它就從管道中被拋棄，釋放空間以便寫更多的數據

可以把一個進程的標準輸出流與另一個進程的標準輸入流連接起來

打包后靜態資源路徑的修改 gulp和grunt的區別

前端工程的構建工具對比 Gulp vs Grunt

測試工具

Mocha

Karma

Jasmine

網絡知識部分 Ajax 同源策略

同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。 指一段腳本只能讀取來自同一來源的窗口和文檔的屬性

跨域處理(方法和區別)

JSONP

document.domain

window.name

HTML5的window.postMessage和window.onmessage

HTTP基本知識

前端進階--讓你升級的網絡知識

三次握手

客戶端發起連接試探

服務端接收到試探請求，向客戶端發送確認消息

客戶端得到服務端的確認消息之后，再次向服務端發送確認消息

一次完整的http請求是怎么樣的

域名解析

TCP三次握手

發起http請求

服務器端響應http請求，客戶端得到html代碼

瀏覽器解析html代碼，并請求html代碼中的資源

瀏覽器對頁面進行渲染呈現給用戶

框架相關知識 jQuery

jQuery Tips Everyone Should Know

如何組織jQuery項目的代碼結構

Best Practice to Organize Javascript Library & CSS Folder Structure

Bootstrap，插件原理

柵格布局實現原理

.img-responsive實現原理

內聯表單實現原理

Bootstrap組件實現原理

AngularJS

雙向綁定

$digest循環

dirty checking

$watch

MVC

獨立作用域

依賴注入

循環監聽

ng-if與ng-hide/show的區別

ng-if為true的時候節點才會存在于DOM中

ng-show/hide只是控制節點的顯示和隱藏

factory，service與provider的區別和關系

使用factory創建的服務，是一個對象，然后，將方法和屬性定義在這個對象上，在返回這個對象，就可以供外部controller調用了

使用service創建的服務，是使用new進行實例化的，所以，方法和屬性要定義在this上，并且這個服務會自動返回this

使用provider創建的服務，是唯一可以注入到config()函數的服務，可以用來提供模塊化的配置。并且，定義在this上的屬性和方法，在config函數里才可以訪問，從this.$get()函數里返回的屬性和方法，才能被控制器所訪問

ng-click是否可以使用原生函數

不可以，因為對應的方法不存在于其控制器中，除非在控制器中聲明

ng-repeat數組中有相同元素的解決辦法

可以添加track by $index

$emit，$broadcast和$on

$emit由子級向父級廣播，$broadcast由父級向子級廣播

controllerAs與$scope的區別

AngularJS的缺點

強約束，學習成本高

不利于SEO

性能問題

減少監控項

主動設置索引

降低渲染的數據數量

數據扁平化

算法 數組降維

優雅的數組降維——Javascript中apply方法的妙用

數組去重

最簡單的方法

function removeDuplicate( arr ) {
    var len = arr.length,
        temp = [];

    for ( var i = 0; i < len; i+=1 ) {
        if ( temp.indexOf(arr[i]) === -1 ) {
            temp.push(arr[i]);
        }
    }
    return temp;
}

對象深度復制

function clone( Obj ) {   
        var buf;   
        if ( Obj instanceof Array ) {   
            buf = [];  //創建一個空的數組 
            var i = Obj.length;   
            while ( i-- ) {   
                buf[i] = clone(Obj[i]);   
            }   
            return buf;   
        }
        else if ( Obj instanceof Object ) {   
            buf = {};  //創建一個空對象 
            for ( var k in Obj ) {  //為這個對象添加新的屬性 
                buf[k] = clone(Obj[k]);   
            }   
            return buf;   
        }
        else {   
            return Obj;   
        }   
    }  

各個類型的復制

function clone( obj ) {
    var dest;
    
    switch( typeof obj ) {
        case "undefined":
            break;
            
        case "number":
            dest = +obj;
            break;
            
        case "string":
            dest = obj + "";
            break;
            
        case "boolean":
            dest = obj;
            break;
        
        case "object":
            if ( obj instanceof Array ) {
                dest = [];

                for ( var i = 0; i < obj.length; i++ ) {
                    dest[i] = obj[i];
                }
            }
            else {
                dest = {};
                for ( var i in obj ) {
                    dest[i] = obj[i];
                }
            }
        
        default:
            break;
    }

    return dest;
}

排序

快速排序

function quickSort( arr ) {
    var left = [],
        right = [],
        len = arr.length,
        breakPoint = arr[0];

    if ( len === 1 || len === 0 ) {
        return arr;
    }

    for ( var i = 1; i < len; i++ ) {
        if ( arr[i] < breakPoint ) {
            left.push(arr[i]);
        }
        else {
            right.push(arr[i]);
        }
    }

    return quickSort(left).concat(breakPoint, quickSort(right));
}

冒泡排序

function bubbleSort( arr ) {
    var len = arr.length,
        temp;

    for ( var i = 0; i < len - 1; i ++ ) {
        for ( var j = 0; j < len - 1 - i; j++ ) {
            if ( arr[j] > arr[j+1] ) {
                temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }

    return arr;
}

插入排序

function insertSort( arr ) {
    var len = arr.length,
        temp;

    for ( var i = 1; i < len; i++ ) {
        var j;
        temp = arr[i];
        j = i;

        while ( j > 0 && arr[j-1] > temp ) {
            arr[j] = arr[j-1];
            j--;
        }
        arr[j] = temp;
    }
    return arr;
}

去除首尾空格

function removePlace( str ) {
    var reg = /(^s*)|(s*)$/;

    if ( str && typeof str === "string" ) {
        return str.replace(reg, "");
    }
}

統計字符數量

function charCount( str ) {
    var obj = {},
        len = str.length,
        i = 0;

    for ( ; i < len; i++ ) {
        var val = str.charAt(i);

        if ( obj[val] && obj[val].value === val ) {
            obj[val].count++;
        }
        else {
            obj[val] = {};
            obj[val].count = 1;
            obj[val].value = val;
        }
    }

    for ( var key in obj ) {
        console.log( key + " is " + obj[key].count );
    }

    return obj;
}

插件編寫

關于插件編寫，可參考：jQuery插件庫

焦點輪播圖 彈窗效果 多級菜單 tab切換 Lightbox Javascript模塊化 CommonJS

同步的方式加載模塊，服務器優先

使用require加載模塊，使用module.exports定義模塊

AMD

瀏覽器優先的方式，通過異步加載的方式完成任務

使用define(["module"], function ( module ) {})加載模塊

不兼容 io、文件系統（filesystem）和其它通過 CommonJS 實現的面向服務器的功能

推崇依賴前置

對于依賴的模塊提前執行

CMD

推崇依賴就近

對于依賴的模塊延遲執行

使用define(function ( require, exports, module ) {})加載模塊

UMD(通用模塊定義，Universal Module Definition)

同時支持 AMD 和 CommonJS 特性

Javascript設計模式

Learning JavaScript Design Patterns

NodeJS HTML5 CSS3 Websocket Canvas