摘要：個人總結(jié)的比較全面的前端面試知識點(diǎn)。主要是一些個人認(rèn)為面試時容易考到以及平時需要注意的一些知識點(diǎn)。如果需要進(jìn)行深入了解可以根據(jù)知識點(diǎn)查詢相關(guān)的技術(shù)文章。

個人總結(jié)的比較全面的前端面試知識點(diǎn)。主要是一些個人認(rèn)為面試時容易考到以及平時需要注意的一些知識點(diǎn)。

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

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

HTML, CSS, JS基礎(chǔ)知識

網(wǎng)站性能優(yōu)化知識

前端項目自動化構(gòu)建相關(guān)知識

算法相關(guān)知識

網(wǎng)絡(luò)與HTTP協(xié)議相關(guān)知識

前端的安全相關(guān)知識

插件編寫相關(guān)知識

JS模塊化編程相關(guān)知識

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

持續(xù)更新中。歡迎fork和star進(jìn)行完善。

---

關(guān)于前端是什么，以及需要學(xué)習(xí)什么，移步這里：

Front-End Developer Handbook

---

HTML部分 docType

混雜模式

標(biāo)準(zhǔn)模式

準(zhǔn)標(biāo)準(zhǔn)模式

標(biāo)簽語義化

去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)

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

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

便于團(tuán)隊開發(fā)和維護(hù)，語義化更具可讀性，是下一步網(wǎng)頁的重要動向，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化

塊級標(biāo)簽，行內(nèi)標(biāo)簽

塊級：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標(biāo)簽

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

設(shè)置頁面緩存

移動端設(shè)置

etc.

HTML代碼優(yōu)化

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

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

對一些js的異步加載

搜索引擎優(yōu)化SEO

---

CSS部分 浮動，清除浮動的方法和原理(4種方法)

使用空標(biāo)簽設(shè)置clear: both;

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

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

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

CSS塊級格式化上下文

觸發(fā)條件

position屬性不為static或者relative

float屬性不為none

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

overflow不為visible

特性

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

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

BFC的區(qū)域不會與float box疊加

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

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

用處

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

布局

清除浮動。為包含浮動元素的container創(chuàng)建BFC來清除浮動

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

總寬度 ＝ 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之內(nèi)

border-box，border和padding計算入width之內(nèi)

定位

定位和浮動的區(qū)別

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

樣式繼承

可繼承的樣式

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優(yōu)先級

行內(nèi)樣式 > 內(nèi)聯(lián)樣式 > 外部樣式，ID > Class > Element

設(shè)置了!important的樣式優(yōu)先級更高

Flexbox

A Complete Guide to Flexbox

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

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

REM vs EM – The Great Debate

居中

CSS Center Complete

link和@import的區(qū)別

link屬于XHTML標(biāo)簽，而@import是CSS提供的

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

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

link方式的樣式的權(quán)重 高于@import的權(quán)重

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

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

全兼容的樣式解決方法

.finally-solve {
    letter-spacing: -4px; /*根據(jù)不同字體字號或許需要做一定的調(diào)整*/
    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優(yōu)化

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

css解析從右向左，所以最右邊的應(yīng)該是相對少一點(diǎn)

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

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

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

預(yù)處理器

Sass

---

JS部分 嚴(yán)格模式

"use strict"

不能使用eval()

抑制this的行為

不允許讀寫eval和arguments的值

不允許意外創(chuàng)建全局變量

變量

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

無var創(chuàng)建的全局變量可以使用delete刪除

隱式類型轉(zhuǎn)換

數(shù)字與字符串相加，結(jié)果為字符串

數(shù)字與字符串相減，結(jié)果為數(shù)字

比較變量的是否相同時，要采用===，==會發(fā)生隱式類型轉(zhuǎn)換

NaN與任何變量不相等

類型檢測

typeof

instanceof

constructor

Object.prototype.toString.apply()

作用域

全局作用域

函數(shù)作用域

對象

hasOwnProperty, isPrototypeOf, propertyIsEnumerable

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

特性

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

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

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

定義屬性

defineProperty, defineProperties

數(shù)組

數(shù)組的類型檢測

數(shù)組的方法

slice()

map()

every()

some()

filter()

函數(shù)

柯里化

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

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函數(shù)不存在重載，后定義的函數(shù)會覆蓋先定義的函數(shù)

函數(shù)調(diào)用模式

方法調(diào)用

函數(shù)調(diào)用

構(gòu)造器調(diào)用

apply調(diào)用

new操作符的原理

使用new關(guān)鍵字來創(chuàng)建實(shí)例的時候，原理如下：

首先，在構(gòu)造函數(shù)內(nèi)部使用Object.create(constructor.prototype)創(chuàng)建一個對象繼承自構(gòu)造函數(shù)

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

最后，返回this

閉包

概念

作用

創(chuàng)建匿名執(zhí)行函數(shù)

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

實(shí)現(xiàn)函數(shù)的封裝

應(yīng)用場景

內(nèi)部函數(shù)訪問外部函數(shù)的變量

使用閉包代替全局變量

封裝相關(guān)功能

回調(diào)函數(shù)

創(chuàng)建私有變量和公有變量

特性

經(jīng)典例子：列表點(diǎn)擊，彈出每一個的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

函數(shù)的this的值永遠(yuǎn)綁定在調(diào)用此函數(shù)的對象上

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

對象創(chuàng)建的模式和方法及區(qū)別

工廠模式

/* 缺點(diǎn)：無法檢測對象的類型 */
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");

構(gòu)造函數(shù)模式

/* 缺點(diǎn)：每個方法要在每個實(shí)例上重新創(chuàng)建一遍 */
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();

組合構(gòu)造函數(shù)原型模式

動態(tài)原型模式

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 );
        }
    }
};

寄生構(gòu)造函數(shù)模式

除了使用new來實(shí)例化外，與工廠模式?jīng)]區(qū)別

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

穩(wěn)妥構(gòu)造函數(shù)模式

原型和繼承

原型鏈

借用構(gòu)造函數(shù)

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

function man() {
    // 繼承自Person，可以選擇是否傳入?yún)?shù)
    Person.call(this, "Erichain");
}

組合繼承

原型式繼承

寄生式繼承

寄生組合式繼承

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

Object.create創(chuàng)建的對象直接從他的第一個參數(shù)繼承，而new Object所創(chuàng)建的對象是從對象的原型上繼承

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

回調(diào)函數(shù) 變量提升，函數(shù)聲明提升

函數(shù)聲明優(yōu)于變量聲明

函數(shù)聲明會覆蓋變量聲明，但是不會覆蓋變量賦值

IIFE(立即執(zhí)行函數(shù))

在閉包中保存變量狀態(tài)

模塊化

IIFE和自執(zhí)行函數(shù)的區(qū)別

IIFE的幾種表示方法

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

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

事件

事件流

事件捕獲

處于目標(biāo)

事件冒泡

事件對象(IE的區(qū)別)

跨瀏覽器事件處理函數(shù)

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;
    }
});

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

call, apply, bind(手動實(shí)現(xiàn))

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

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

bind原生代碼實(shí)現(xiàn)

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

節(jié)點(diǎn)關(guān)系

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子元素數(shù)量

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

性能優(yōu)化

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

異步加載Javascript文件

使用document.write()

動態(tài)改變已有script標(biāo)簽的src屬性

使用DOM方法動態(tài)創(chuàng)建script元素

使用Ajax獲取腳本內(nèi)容再加載

在script標(biāo)簽中使用defer以及async屬性

按需加載

合并文件

合理使用二進(jìn)制

CDN加速，原理

圖片懶加載

懶加載——網(wǎng)頁圖片的加載技術(shù)

Lazy Load Plugin for jQuery

預(yù)加載

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

Prefetching, preloading, prebrowsing

prefetch

HTML5 Prefetch

函數(shù)節(jié)流

淺談函數(shù)節(jié)流

垃圾回收

引用計數(shù)

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

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

標(biāo)記清除

內(nèi)存泄漏

setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏

循環(huán)引用

優(yōu)雅降級和漸進(jìn)增強(qiáng)

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

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

JSON

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

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

XMLHttpRequest對象

一段比較完整的使用原生Javascript實(shí)現(xiàn)ajax請求方法

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

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

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

var request = createRequestObject();

request.onreadystatechange = requestCallBack;
// open函數(shù)的三個參數(shù)分別是請求的方法, 請求的地址, 是否異步(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原生函數(shù)使用

You-Dont-Need-jQuery

Array.prototype.slice.call()原理

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

RESTful

---

瀏覽器部分 各個瀏覽器內(nèi)核

IE: Trident

Chrome: Webkit, Blink(now)

Firefox: Gecko

Opera: Presto

sessionStorage，cookie，localStorage

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

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

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

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

瀏覽器的多個標(biāo)簽頁之間如何通信

Javascript communication between browser tabs/windows

關(guān)于瀏覽器緩存

淺談Web緩存

---

前端安全

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

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

防止跨iframe攻擊

---

自動化 npm與bower的區(qū)別

bower與npm的不同點(diǎn)

gulp流與管道的概念

Unix流

管道

管道是一個固定大小的緩沖區(qū)

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

可以把一個進(jìn)程的標(biāo)準(zhǔn)輸出流與另一個進(jìn)程的標(biāo)準(zhǔn)輸入流連接起來

打包后靜態(tài)資源路徑的修改 gulp和grunt的區(qū)別

前端工程的構(gòu)建工具對比 Gulp vs Grunt

測試工具

Mocha

Karma

Jasmine

---

網(wǎng)絡(luò)知識部分 Ajax 同源策略

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

跨域處理(方法和區(qū)別)

JSONP

document.domain

window.name

HTML5的window.postMessage和window.onmessage

HTTP基本知識

前端進(jìn)階--讓你升級的網(wǎng)絡(luò)知識

三次握手

客戶端發(fā)起連接試探

服務(wù)端接收到試探請求，向客戶端發(fā)送確認(rèn)消息

客戶端得到服務(wù)端的確認(rèn)消息之后，再次向服務(wù)端發(fā)送確認(rèn)消息

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

域名解析

TCP三次握手

發(fā)起http請求

服務(wù)器端響應(yīng)http請求，客戶端得到html代碼

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

瀏覽器對頁面進(jìn)行渲染呈現(xiàn)給用戶

---

框架相關(guān)知識 jQuery

jQuery Tips Everyone Should Know

如何組織jQuery項目的代碼結(jié)構(gòu)

Best Practice to Organize Javascript Library & CSS Folder Structure

Bootstrap，插件原理

柵格布局實(shí)現(xiàn)原理

.img-responsive實(shí)現(xiàn)原理

內(nèi)聯(lián)表單實(shí)現(xiàn)原理

Bootstrap組件實(shí)現(xiàn)原理

AngularJS

雙向綁定

$digest循環(huán)

dirty checking

$watch

MVC

獨(dú)立作用域

依賴注入

循環(huán)監(jiān)聽

ng-if與ng-hide/show的區(qū)別

ng-if為true的時候節(jié)點(diǎn)才會存在于DOM中

ng-show/hide只是控制節(jié)點(diǎn)的顯示和隱藏

factory，service與provider的區(qū)別和關(guān)系

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

使用service創(chuàng)建的服務(wù)，是使用new進(jìn)行實(shí)例化的，所以，方法和屬性要定義在this上，并且這個服務(wù)會自動返回this

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

ng-click是否可以使用原生函數(shù)

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

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

可以添加track by $index

$emit，$broadcast和$on

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

controllerAs與$scope的區(qū)別

AngularJS的缺點(diǎn)

強(qiáng)約束，學(xué)習(xí)成本高

不利于SEO

性能問題

減少監(jiān)控項

主動設(shè)置索引

降低渲染的數(shù)據(jù)數(shù)量

數(shù)據(jù)扁平化

---

算法 數(shù)組降維

優(yōu)雅的數(shù)組降維——Javascript中apply方法的妙用

數(shù)組去重

最簡單的方法

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;
}

對象深度復(fù)制

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

各個類型的復(fù)制

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, "");
    }
}

統(tǒng)計字符數(shù)量

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;
}

---

插件編寫

關(guān)于插件編寫，可參考：jQuery插件庫

焦點(diǎn)輪播圖 彈窗效果 多級菜單 tab切換 Lightbox

---

Javascript模塊化 CommonJS

同步的方式加載模塊，服務(wù)器優(yōu)先

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

AMD

瀏覽器優(yōu)先的方式，通過異步加載的方式完成任務(wù)

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

不兼容 io、文件系統(tǒng)（filesystem）和其它通過 CommonJS 實(shí)現(xiàn)的面向服務(wù)器的功能

推崇依賴前置

對于依賴的模塊提前執(zhí)行

CMD

推崇依賴就近

對于依賴的模塊延遲執(zhí)行

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

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

同時支持 AMD 和 CommonJS 特性

---

Javascript設(shè)計模式

Learning JavaScript Design Patterns

---

NodeJS HTML5 CSS3 Websocket Canvas