小目錄：

1.設(shè)計(jì)三流程
2.頁(yè)面實(shí)現(xiàn)流程
3.CSS的掌握重點(diǎn)
4.怎么讀英文文檔秀存，技巧是什么
5.對(duì)MVC的階段性思考
6.關(guān)于HTML
7.關(guān)于對(duì)象
8.關(guān)于backbone
9.關(guān)于函數(shù)和閉包
10.關(guān)于事件函數(shù)
11.關(guān)于jQuery
12.關(guān)于virtual DOM
13.關(guān)于JS的函數(shù)參數(shù)
14.關(guān)于邏輯判斷符的經(jīng)典妙用
15.關(guān)于Self-Executing Anonymous Function
16.關(guān)于原型

1. 設(shè)計(jì)三流程：

1吃媒、看設(shè)計(jì)圖做大概的布局骡显，也就是搭一個(gè)骨架辟躏，然后加上CSS梭稚，呈現(xiàn)出設(shè)計(jì)圖的輪廓
2拾弃、接著是分而治之串纺，一般是從上到下哩照，從左到右去實(shí)現(xiàn)頁(yè)面的CSS挺物，這個(gè)過(guò)程中去熟悉box model，float飘弧，absolute position模式
3识藤、這一步才是實(shí)現(xiàn)交互，添加事件次伶，動(dòng)畫痴昧，Ajax之類的交互工作

注意：
1、各個(gè)產(chǎn)品的設(shè)計(jì)規(guī)范
2冠王、多積累布局方案的經(jīng)驗(yàn)赶撰，比如如何實(shí)現(xiàn)水平居中，垂直居中版确，單列多列布局（960柵格扣囊，978柵格），響應(yīng)式布局方案绒疗。這些布局在網(wǎng)上可以找到很多的總結(jié)侵歇。如果說(shuō)設(shè)計(jì)頁(yè)面是目標(biāo)的話，這些都是基礎(chǔ)吓蘑，只有把這些基礎(chǔ)掌握了惕虑，設(shè)計(jì)頁(yè)面才不會(huì)覺(jué)得難坟冲。

2. 頁(yè)面實(shí)現(xiàn)流程：

（這是從前端工程師如何不斷自我提升知乎live的筆記）

關(guān)于頁(yè)面用html和css實(shí)現(xiàn)的思路：
1、先劃區(qū)塊溃蔫，比如頭中尾健提，肯定是有共用的，自己先心理有個(gè)數(shù)
2伟叛、然后找相同私痹，中間這部分（body）是否有左右側(cè)列表，中間的內(nèi)容每一塊是否有復(fù)用的地方统刮，把相似的地方找出來(lái)
3紊遵、之后寫html的結(jié)構(gòu)，等所有的文本內(nèi)容全用html處理好了侥蒙，再在網(wǎng)頁(yè)里測(cè)試看看暗膜，
4、然后再去對(duì)應(yīng)設(shè)計(jì)稿里面的樣式鞭衩，一步步把html還原到設(shè)計(jì)稿的樣式学搜，長(zhǎng)寬高，該浮動(dòng)浮動(dòng)论衍，該對(duì)齊對(duì)齊瑞佩，挨個(gè)去實(shí)現(xiàn)就可以了。

總結(jié)：還是先骨架饲齐，再樣式钉凌，再js實(shí)現(xiàn)行為這么一個(gè)順序

3. CSS的掌握重點(diǎn)：

1、布局捂人，經(jīng)典的布局方式
2御雕、定位（position），比如相對(duì)定位滥搭，絕對(duì)定位
2酸纲、盒模型（box model）context，padding瑟匆，border闽坡，margin
3、動(dòng)畫屬性
4愁溜、偽類疾嗅，選擇器 （a:hover 這是偽類）（#xxx，.xxx這是選擇器冕象，即id代承，class）
5、選擇符的優(yōu)化渐扮，即性能這一部分
6论悴、如何拆分掖棉，怎么寫公共的，比如reset
7膀估，移動(dòng)端幔亥，需要看下flex這種流式布局是怎么做的
8、用 寫好css目錄察纯，給每段選擇器標(biāo)注相應(yīng)目錄帕棉，便于閱讀

2017年6月27日補(bǔ)充：
無(wú)論是Pc還是移動(dòng)布局都有著兩套不同的方案，pc講究的是各瀏覽器的兼容捐寥，移動(dòng)講的是視口度的兼容笤昨。

4. 怎么讀英文文檔，技巧是什么：

先看指南握恳，再掃一遍大類，以此了解每個(gè)類分別實(shí)現(xiàn)什么功能捺僻，再去看插件部分乡洼，了解這個(gè)框架通過(guò)這些api或者插件到底能做什么
為什么有這個(gè)框架，這個(gè)框架能解決什么問(wèn)題匕坯，不能解決什么問(wèn)題束昵，你最好心理有數(shù)
然后你才根據(jù)你自己的需求，找到你自己需求會(huì)用到的插件葛峻，然后你才把這個(gè)插件仔細(xì)的去讀
要是一上來(lái)就把文檔全讀一遍肯定沒(méi)有時(shí)間
所以讀之前要明確目標(biāo)锹雏，以解決問(wèn)題為主，讀具體部分時(shí)术奖，重視示例代碼礁遵，如果使用時(shí)出現(xiàn)問(wèn)題，對(duì)照示例代碼查看你自己調(diào)用是否有問(wèn)題

5. 對(duì)MVC的階段性思考：

在學(xué)習(xí)headfirst javascript這本書的第八章采记，做一個(gè)游戲應(yīng)用佣耐，采用了MVC的設(shè)計(jì)思路掰读，現(xiàn)在完成了view和model兩個(gè)部分背稼，我的一個(gè)感悟：
目前為止，我領(lǐng)會(huì)到的磅氨、教材想傳遞給我的思想是首先是面向?qū)ο蠹裙祝窗堰@個(gè)應(yīng)用看作一個(gè)整體讽挟，一個(gè)對(duì)象。然后以此基礎(chǔ)上丸冕，把這個(gè)對(duì)象的特點(diǎn)想清楚耽梅，抽象出模型，即model層晨仑，模型的本質(zhì)或者說(shuō)目的是把這個(gè)對(duì)象（應(yīng)用）模擬提煉成數(shù)據(jù)褐墅，當(dāng)然這樣做是為了方便計(jì)算拆檬，這是計(jì)算機(jī)的長(zhǎng)項(xiàng)。當(dāng)用戶使用應(yīng)用（在我們看來(lái)是使用對(duì)象）妥凳，狀態(tài)會(huì)發(fā)生變化竟贯，反映到模型上就是對(duì)應(yīng)狀態(tài)或行為的數(shù)據(jù)、邏輯也會(huì)跟著變化逝钥，在這個(gè)模型數(shù)據(jù)的變化過(guò)程中屑那，插入view層的接口，也就是在數(shù)據(jù)變化的那行代碼下艘款，插入視圖層的代碼持际，以此改變用戶瀏覽的界面，讓用戶感知到自己操作引起的變化哗咆。不然蜘欲，不插入視圖層的話，雖然模型數(shù)據(jù)變了晌柬，應(yīng)用運(yùn)行了姥份，但界面沒(méi)改變，用戶還是一位這個(gè)應(yīng)用沒(méi)反應(yīng)年碘。

6. 關(guān)于HTML：

Ideally you should start your learning journey by learning HTML. Start by reading Introduction to HTML. You may then move on to learning about more advanced topics such as:

HTML5 APIs
CSS, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)
JavaScript, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)

說(shuō)一個(gè)相關(guān)的澈歉，HTML 標(biāo)簽中 script 和 link 標(biāo)簽現(xiàn)在有 integrity 屬性，用來(lái)校驗(yàn)已獲取的資源是否被篡改屿衅，Chrome / Firefox / Safari TP r30 現(xiàn)在已經(jīng)支持埃难，IE 不支持

6月25日補(bǔ)充：
注釋：請(qǐng)始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：href="http://www.w3school.com.cn/html"涤久，就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求涡尘。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址，然后創(chuàng)建一個(gè)新的請(qǐng)求拴竹，就像這樣：href="http://www.w3school.com.cn/html/"悟衩。

提示：命名錨經(jīng)常用于在大型文檔開(kāi)始位置上創(chuàng)建目錄∷ò荩可以為每個(gè)章節(jié)賦予一個(gè)命名錨座泳，然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經(jīng)常訪問(wèn)百度百科幕与，您會(huì)發(fā)現(xiàn)其中幾乎每個(gè)詞條都采用這樣的導(dǎo)航方式挑势。

提示：假如瀏覽器找不到已定義的命名錨，那么就會(huì)定位到文檔的頂端啦鸣。不會(huì)有錯(cuò)誤發(fā)生潮饱。

7. 關(guān)于對(duì)象：

在瀏覽器里的一切都被看作對(duì)象，他們有屬性诫给，有方法香拉，這使得一切都可以被操作改變

看的headfirst JS的第9章感悟：
DOM把網(wǎng)頁(yè)里的東西看成對(duì)象啦扬，而事件對(duì)象（event object）則是在DOM的基礎(chǔ)上，把整個(gè)“操作DOM的行為”也看作一個(gè)對(duì)象凫碌，使得我們可以通過(guò)對(duì)屬性和方法調(diào)用更便捷效率地實(shí)現(xiàn)功能所需的邏輯扑毡。

17年7月17日補(bǔ)充：
深拷貝與淺拷貝的區(qū)別：

參考文章：詳解js中對(duì)象的深淺拷貝

我自己的總結(jié)：
淺拷貝是復(fù)制對(duì)象的引用，這意味著盛险，如果你修改拷貝出來(lái)的這個(gè)對(duì)象的屬性的值瞄摊，那么之前那個(gè)被拷貝的對(duì)象的屬性的值也會(huì)被修改。這在實(shí)際編程中顯然是我們不想看到的苦掘，容易導(dǎo)致數(shù)據(jù)被修改换帜。

深拷貝就是解決了淺拷貝的問(wèn)題，具體實(shí)現(xiàn)參考文章鹤啡。

8. 關(guān)于backbone和MVC：

在用MVC模式編寫webapp后惯驼，初步了解MVC在JS的實(shí)踐。接下來(lái)了解一下backbone递瑰，一個(gè)對(duì)mvc的封裝
相關(guān)博客：http://www.cnblogs.com/lyzg/p/5634565.html
backbone官方文檔：http://backbonejs.org/#Getting-started

17年7月14日補(bǔ)充：

基于backbone的MVC原理思考

首先要提一個(gè)概念——關(guān)注點(diǎn)分離

關(guān)注點(diǎn)分離指應(yīng)用中的每個(gè)模塊/層級(jí)都應(yīng)該僅對(duì)一個(gè)任務(wù)負(fù)責(zé)（比如一個(gè)購(gòu)物車功能就是一個(gè)模塊跳座，一個(gè)支付功能就是一個(gè)模塊）然后每個(gè)模塊/層級(jí)中的代碼不該過(guò)多地牽涉其他模塊/層級(jí)所負(fù)責(zé)的事務(wù)邏輯。

關(guān)注點(diǎn)分離原則將應(yīng)用程序拆解為多個(gè)封裝好的獨(dú)立功能單元泣矛，從而降低了應(yīng)用整體的代碼復(fù)雜度。
——《JavaScript應(yīng)用程序設(shè)計(jì)（Eric Elliott）》

一個(gè)完整有規(guī)模的JS應(yīng)用的關(guān)注點(diǎn)包括：

• 模塊管理
• 事件
• 表現(xiàn)層與DOM操作
• 數(shù)據(jù)管理與同/異步讀寫
• 路由機(jī)制（將URL與任務(wù)連接起來(lái)）
• 日志
• 數(shù)據(jù)分析與追蹤
• 用戶認(rèn)證
• 特性開(kāi)關(guān)（將代碼部署與特性發(fā)布解耦）
• 國(guó)際化

現(xiàn)在的框架和庫(kù)都試圖給開(kāi)發(fā)者一套針對(duì)這些關(guān)注點(diǎn)的解決方案禾蚕。

這些框架/庫(kù)一般歸為兩類：輕量型與綜合型您朽。

backbone.js就是輕量型庫(kù)，提供一組較為實(shí)用的對(duì)象和方法换淆，比如視圖哗总，模型，集合倍试，路由讯屈，事件機(jī)制，從而讓應(yīng)用的組織結(jié)構(gòu)更為清晰县习。

9. 關(guān)于函數(shù)和閉包：

JS的一個(gè)強(qiáng)大特性：把函數(shù)看作一個(gè)可以傳遞的值
就跟string涮母，number，object被看作值（value）一樣躁愿，函數(shù)function也可以被看作一種值叛本。因此函數(shù)能被賦給變量，也能作為參數(shù)傳給另一個(gè)函數(shù)彤钟。特別是這個(gè)作為參數(shù)傳給另一個(gè)函數(shù)来候，比如map方法，它的作用是遍歷前面的數(shù)組营搅，這個(gè)方法的參數(shù)是傳入一個(gè)有特定功能（比如做比較）的函數(shù)云挟，那么在遍歷的同時(shí)，數(shù)組里被遍歷的元素還會(huì)分別依次使用被傳入的這個(gè)特定功能函數(shù)转质，并返回結(jié)果，這里就是返回比較之后的結(jié)果。這個(gè)思想和Python里的列表生成式（[x * x for x in arr]）很相近，都是一種高級(jí)用法备埃，精簡(jiǎn)邏輯的代碼表現(xiàn)形式，簡(jiǎn)化代碼量唯沮。
另一個(gè)可能不是很準(zhǔn)確的例子币旧，就是JSONP（JSON with Padding）的鏈接中毁葱，可以在鏈接末尾附帶一個(gè)函數(shù)前痘，有點(diǎn)相當(dāng)于把函數(shù)作為一個(gè)值傳給這個(gè)鏈接，作為鏈接這樣一個(gè)“函數(shù)”的參數(shù)。當(dāng)從那個(gè)鏈接獲取到數(shù)據(jù)時(shí)，會(huì)把數(shù)據(jù)先傳入這個(gè)"參數(shù)"做處理，然后這個(gè)函數(shù)返回的值才是我們最終需要的數(shù)據(jù)。
總結(jié)：把函數(shù)作為值的思想使得JS有了更靈活的處理數(shù)據(jù)的能力。

6月14日補(bǔ)充：
就是嵌套函數(shù)馍佑，函數(shù)的嵌套舅世，嵌套函數(shù)帶有上一層函數(shù)的環(huán)境（作用域）摩钙，可以訪問(wèn)上一層函數(shù)的變量网持。
js的閉包能實(shí)現(xiàn)就是因?yàn)楹瘮?shù)能被作為值傳入或者返回（return）辟汰。在這種情況下涨冀，返回的那個(gè)函數(shù)可以獲得上一級(jí)函數(shù)里的變量作用域翅帜，因此可以使用到函數(shù)內(nèi)的變量杂抽，從而避免冒險(xiǎn)去使用全局變量（因?yàn)橹耙萌肿兞烤褪且驗(yàn)楹瘮?shù)里的變量為局部變量不可用杭朱，現(xiàn)在因?yàn)閒irst class function的特性解決了這問(wèn)題）

閉包的作用：函數(shù)作為參數(shù)或者作為return返回值時(shí)刃唐，作為有名函數(shù)或者直接作為匿名函數(shù)全部寫入报辱，那么就能獲得被傳入或者被return的上級(jí)函數(shù)的作用域昼接，比如使用上級(jí)函數(shù)里的變量漂辐。
關(guān)于閉包的一篇文章：Javascript Closures

《JavaScript應(yīng)用程序設(shè)計(jì)（Eric Elliott）》一書中對(duì)閉包的精確描述：

簡(jiǎn)單來(lái)說(shuō)，閉包會(huì)保存函數(shù)作用域中的狀態(tài)，即使這個(gè)函數(shù)已經(jīng)執(zhí)行完畢（這里體現(xiàn)了內(nèi)部函數(shù)的生命周期強(qiáng)于外部函數(shù)）靶庙。創(chuàng)建閉包很簡(jiǎn)單，只需要在一個(gè)函數(shù)體中再定義一個(gè)內(nèi)部函數(shù)，接著將這個(gè)內(nèi)部函數(shù)直接返回或者傳遞給另一個(gè)函數(shù)即可。

這個(gè)內(nèi)部函數(shù)可以訪問(wèn)所有在其外部函數(shù)作用域中定義的變量（而這個(gè)外部函數(shù)的外部，通常為全局蔬咬，則不能訪問(wèn)）狐援，閉包的這種特性常常被用來(lái)做數(shù)據(jù)的訪問(wèn)控制（因此可以把數(shù)據(jù)用閉包函數(shù)包起來(lái)，以此保護(hù)數(shù)據(jù)）得封。

由于在外部函數(shù)定義的變量?jī)H存在于內(nèi)部函數(shù)的作用域上茬斧，所以你只能通過(guò)一個(gè)特權(quán)方法來(lái)訪問(wèn)這些數(shù)據(jù)怖喻。在其他語(yǔ)言中，特權(quán)方法通常是一個(gè)可以訪問(wèn)私有數(shù)據(jù)的暴露方法同眯，而在JS中明肮，任何具有閉包作用域的方法都具有特權(quán)性質(zhì)秫舌。

2017年7月9日補(bǔ)充：
為什么在JS里this的指向會(huì)是一個(gè)問(wèn)題星虹，因?yàn)閒unction也是一個(gè)對(duì)象蝶棋，每創(chuàng)建或者調(diào)用一個(gè)函數(shù)寝受，也就是創(chuàng)建或者調(diào)用了一個(gè)對(duì)象俏站，又由于不同的對(duì)象有不同的指針（體現(xiàn)在代碼上也就是this）指向著，所以在嵌套函數(shù)或是其他一些情況下要用一些方法把函數(shù)間的指針統(tǒng)一指向一個(gè)對(duì)象（函數(shù)）衡载。

比如有var that = this猜揪， 有proxy（JQuery中）钧萍，有apply公般，call。

• foo() ---> foo.call(window)

• obj.foo() --> obj.foo.call(obj)

首先，call函數(shù)的第一個(gè)參數(shù)敞曹，在這是window和obj是this，即指針的指向的對(duì)象充坑。

然后，第一個(gè)函數(shù)foo是全局函數(shù)钉鸯，相當(dāng)于是window這個(gè)全局對(duì)象的一個(gè)方法钞脂，所以在調(diào)用foo的時(shí)候阎毅，相當(dāng)于foo.call(window)区岗，即指針指向的是window對(duì)象，this的上下文是window。

而第二個(gè)foo是對(duì)象obj的方法执庐，這也相當(dāng)于指針指向的是obj，即obj.foo.call(obj)导梆，this的上下文是obj

最后耕肩，這里反映的是JS里this的問(wèn)題，“函數(shù)”這個(gè)對(duì)象的this指向都可以轉(zhuǎn)換為后面call函數(shù)的應(yīng)用问潭。只要記得this的上下文是在執(zhí)行時(shí)才會(huì)被確認(rèn)猿诸，而不是在被創(chuàng)建的時(shí)候，即每次執(zhí)行時(shí)this的指向都會(huì)被更新狡忙，也就是call函數(shù)反映出來(lái)的梳虽。

但call函數(shù)或者apply函數(shù)由此也可用來(lái)改變this的指向，比如obj.foo.call(obj2)灾茁，那么這里就是使用了obj的方法窜觉，但由于上下文用的是obj2的this，所以結(jié)果被賦給了obj2北专。

其他禀挫，7月10日補(bǔ)充：

有一句話‘當(dāng)對(duì)象的方法中還存在函數(shù)時(shí)，該函數(shù)其實(shí)是當(dāng)做函數(shù)模式觸發(fā)拓颓，所以其this默認(rèn)為window‘语婴，這句話昨晚在高程三里面看到，說(shuō)的是匿名函數(shù)的this具有全局性，除非用call等方法改變了執(zhí)行環(huán)境砰左。

10. 關(guān)于事件函數(shù)：

事件函數(shù)能實(shí)現(xiàn)是因?yàn)楹瘮?shù)可作為值傳遞匿醒，即first class function特性，不僅能作為參數(shù)的值或者返回值或者作為變量的值賦給變量缠导，也同樣可以作為值賦給對(duì)象的屬性或者方法廉羔，進(jìn)而當(dāng)對(duì)象觸發(fā)時(shí)，就可以invoke這個(gè)事件函數(shù)僻造。

2017年7月7日補(bǔ)充：
在異步事件函數(shù)中經(jīng)常出現(xiàn)上下文切換問(wèn)題（this的指向問(wèn)題）憋他，原因是在JS中每新創(chuàng)建一個(gè)函數(shù)，在這個(gè)函數(shù)內(nèi)用this就會(huì)指向這個(gè)新建函數(shù)髓削，而不是上級(jí)函數(shù)举瑰，或者換種說(shuō)法，this會(huì)指向應(yīng)用this的地方蔬螟，而不是創(chuàng)建this的地方，即在哪里用this汽畴，this就指向這個(gè)地方旧巾。
解決辦法是在原上級(jí)函數(shù)把this保存在一個(gè)變量中，約定俗成是var that = this; 或者 var self = this; 然后再在下級(jí)的事件函數(shù)里用 that.xxx 或者 self.xxx 忍些，這樣就解決了上下文切換的問(wèn)題鲁猩。
而在ES6中，箭頭函數(shù)直接就解決了這個(gè)問(wèn)題罢坝，因?yàn)榧^函數(shù)會(huì)自動(dòng)搜尋上級(jí)的this廓握。

11. 關(guān)于jQuery：

提示：使用谷歌或微軟的 jQuery，有一個(gè)很大的優(yōu)勢(shì)：
許多用戶在訪問(wèn)其他站點(diǎn)時(shí)嘁酿，已經(jīng)從谷歌或微軟加載過(guò) jQuery隙券。所有結(jié)果是，當(dāng)他們?cè)L問(wèn)您的站點(diǎn)時(shí)闹司，會(huì)從緩存中加載 jQuery娱仔，這樣可以減少加載時(shí)間。同時(shí)游桩，大多數(shù) CDN 都可以確保當(dāng)用戶向其請(qǐng)求文件時(shí)牲迫，會(huì)從離用戶最近的服務(wù)器上返回響應(yīng)，這樣也可以提高加載速度借卧。

由于 jQuery 是為處理 HTML 事件而特別設(shè)計(jì)的盹憎，那么當(dāng)您遵循以下原則時(shí)，您的代碼會(huì)更恰當(dāng)且更易維護(hù)：
把所有 jQuery 代碼置于事件處理函數(shù)中（避免作用域污染）
把所有事件處理函數(shù)置于文檔就緒事件處理器中
把 jQuery 代碼置于單獨(dú)的 .js 文件中
如果存在名稱沖突铐刘，則重命名 jQuery 庫(kù):
var jq=jQuery.noConflict()陪每，幫助您使用自己的名稱（比如 jq）來(lái)代替 $ 符號(hào)。

下面是 jQuery 中事件方法的一些例子：
Event 函數(shù)綁定函數(shù)至：

$(document).ready(function) 將函數(shù)綁定到文檔的就緒事件（當(dāng)文檔完成加載時(shí)）
$(selector).click(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的點(diǎn)擊事件
$(selector).dblclick(function)  觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的獲得焦點(diǎn)事件
$(selector).mouseover(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的鼠標(biāo)懸停事件

12. 關(guān)于virtual DOM：

這時(shí)是端框架react和vue都有的技術(shù)。

Virtual DOM是一個(gè)映射真實(shí)DOM的JavaScript對(duì)象奶稠，如果需要改變?nèi)魏卧氐臓顟B(tài)俯艰，那么是先在Virtual DOM上進(jìn)行改變，而不是直接改變真實(shí)的DOM锌订。當(dāng)有變化產(chǎn)生時(shí)竹握，一個(gè)新的Virtual DOM對(duì)象會(huì)被創(chuàng)建并計(jì)算新舊Virtual DOM之間的差別。之后這些差別會(huì)應(yīng)用在真實(shí)的DOM上辆飘。

例子如下啦辐，我們可以看看下面這個(gè)列表在HTML中的代碼是如何寫的：

<ul class="list">
  <li>item 1</li>
  <li>item 2</li>
</ul>

而在JavaScript中，我們可以用對(duì)象簡(jiǎn)單地創(chuàng)造一個(gè)針對(duì)上面例子的映射：

{
    type: 'ul',
    props: {'class': 'list'},
    children: [
        { type: 'li', props: {}, children: ['item 1'] },
        { type: 'li', props: {}, children: ['item 2'] }
    ]
}

真實(shí)的Virtual DOM會(huì)比上面的例子更復(fù)雜蜈项，但它本質(zhì)上是一個(gè)嵌套著數(shù)組的原生對(duì)象芹关。

13. 關(guān)于JS的函數(shù)參數(shù)：

對(duì)象經(jīng)常作為函數(shù)的參數(shù)，比如在微信小程序里紧卒，page()這個(gè)生命周期函數(shù)的參數(shù)就是對(duì)象侥衬，各個(gè)接口的參數(shù)也是如此。

比如在JQuery里

// you can provide an object to change 
// several CSS properties on an element at once:
$('#main').css({
  color: 'red',
  border: '1px solid blue'
});

14. 關(guān)于邏輯判斷符的經(jīng)典妙用：

foo && bar();   // runs bar() only if foo is truthy

var bar = baz || createBar(); 
// use baz as value for bar unless baz is falsy; in that case, create bar

關(guān)于JS的type轉(zhuǎn)換問(wèn)題跑芳，一些示例：

log( 'a' + 2 );           // 'a2'
log( '4' + 3 );           // '43'
log( 'five' - '4' );      // NaN (not a number)
log( - '1' );             // -1
log( 1 + true );          // 2
log( 1 == true );         // true
log( 1 === true );        // false

15. 關(guān)于Self-Executing Anonymous Function:

嚴(yán)格來(lái)說(shuō)轴总，這一點(diǎn)應(yīng)該在第9點(diǎn)里（9. 關(guān)于函數(shù)和閉包）

相關(guān)鏈接 Self-Executing Anonymous Functions

例子:

(function(){
  console.log('Hello World!');
})();

優(yōu)點(diǎn)：

Those two little brackets cause everything contained in the preceding parentheses to be executed immediately. What’s useful here is that JavaScript has function level scoping. All variables and functions defined within the anonymous function aren’t available to the code outside of it, effectively using closure to seal itself from the outside world.

IIFE所創(chuàng)建的臨時(shí)作用域常常用來(lái)作模塊封裝，jQuery正式使用了IIFE將內(nèi)部變量與全局作用域隔離開(kāi)博个。

17年7月18日補(bǔ)充：
自執(zhí)行匿名函數(shù)的最大優(yōu)點(diǎn)是能封裝函數(shù)怀樟，避免作用域污染，然后能根據(jù)需要暴露內(nèi)部的方法盆佣，提供給外部接口往堡。自執(zhí)行匿名函數(shù)是模塊化的最佳實(shí)踐。

16. 關(guān)于原型

原型鏈——原型的委托過(guò)程：

原型鏈只有在檢索value的時(shí)候才會(huì)被用到共耍。如果我們嘗試去獲取對(duì)象的某個(gè)屬性值虑灰，但該對(duì)象沒(méi)有此屬性名，那么JS會(huì)試著從原型對(duì)象中獲取屬性值痹兜。如果那個(gè)原型對(duì)象也沒(méi)有該屬性值瘩缆，那么再?gòu)乃脑椭袑ふ遥源祟愅频柩粒钡皆撨^(guò)程最后到達(dá)終點(diǎn)Object.prototype庸娱。如果想要的屬性完全不存在于原型鏈中，那么結(jié)果就是undefined值谐算。這個(gè)過(guò)程稱為委托熟尉。

——《JavaScript精粹》