1、《JavaScript DOM編程藝術(shù)》推薦3（比較基礎(chǔ)，小白入門的話推薦，有基礎(chǔ)的不推薦）
華州網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)于2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
2、《css權(quán)威指南》推薦2（書是好書，看了忘了的工具書，寫樣式谷歌更高效）
3、《css揭秘》推薦5（不是css入門書籍，css提升必備，最棒的css工具書，css魔法）
4、《JavaScript 語言精粹》推薦4（有經(jīng)驗(yàn)的js可以看看，個人沒有g(shù)et到傳說中的驚艷，加深理解）
5、《JavaScript 高級程序設(shè)計》推薦5（最權(quán)威的js入門書籍。不要被名字嚇到）
6、《JavaScript 權(quán)威指南（第6版）》推薦4（入門剛?cè)腴T都不推薦，個人的枕頭書，講的挺全面的可讀性不高，提升的話應(yīng)該看看吧，頭看大了還沒看完）
7、《web性能權(quán)威指南》推薦4（暫時不需要網(wǎng)絡(luò)性能極致優(yōu)化暫時緩緩，入門那會沒看懂，提升推薦）
8.《高性能 JavaScript 》推薦4 (提升必備吧，個人感覺，有些實(shí)踐經(jīng)常遇到)
9. 《JavaScript 設(shè)計模式》 推薦4 (提升必備，設(shè)計模式是開發(fā)中的最佳實(shí)踐，?？闯Ｐ?，我看的是張榮銘的那本，無論那本js設(shè)計模式書都可以的，想起來內(nèi)容以情景對話的方式對我來說不是很友好，敘述方式個人不喜歡但是不影響內(nèi)核5分)
10. 《圖解HTTP》 推薦3 (入門可以，簡單有趣，提升不推薦)
11. 《深入淺出 Node.js》推薦5 (強(qiáng)烈推薦，國人書精品，也有通病講的比較深入但是知識點(diǎn)比較分散不系統(tǒng)像個博客集，有js基礎(chǔ)看的比較過癮，基礎(chǔ)不好的話不知道能吸收多少)
12. 《Node.js 實(shí)戰(zhàn)》推薦3 (不推薦，書出的比較早實(shí)例也爛大街，一些實(shí)踐已經(jīng)有更好的替代模塊了，沒有后端基礎(chǔ)的話可以看看)
13.《HTML5 權(quán)威指南》推薦3 (書是好書，適合入門，有前端基礎(chǔ)的話推薦MDN效率更高，一點(diǎn)基礎(chǔ)沒有的話抓不到主次適合泛讀，沒時間看的話不推薦本書，提升沒有幫助)
14. 《深入React技術(shù)棧》(沒看完 ... )
15. 《http權(quán)威指南》 推薦 5 (強(qiáng)烈推薦，內(nèi)容稍微有點(diǎn)老，但是內(nèi)容比較全面，協(xié)議，URL,代理，緩存，爬蟲，cookie, 認(rèn)證，負(fù)載均衡等等，看完絕對物超所值)
16. 《深入理解ES6》推薦5 (強(qiáng)烈推薦，內(nèi)容不多，相對于es6零散的入門博客文章來說，更加系統(tǒng)的介紹ES6的新特性）
17. 《Three.js開發(fā)指南》推薦3 (不做3d可視化不推薦購買，我自己沒看完，看文檔也差不多水平)
18.《精通css》推薦0 (書比較陳舊，新的特性比較少，看w3cSchool就夠了，入門也不用看，當(dāng)年確實(shí)是好書)
19. 《javaScript 忍者秘籍 第2版》 推薦5 (強(qiáng)烈推薦，對js底層進(jìn)行深入講解，知其然知其所以然)
script
var s='123456';//可通過ajax獲取這個值
var a=s.split('');
alert(a[0]);//a[0]到a[5]就是1-6
/script
所有知識框架，那肯定是一個結(jié)構(gòu)型的展現(xiàn)，就是一棵樹。web前端的知識點(diǎn)非常多，也非常散，需要好幾層結(jié)構(gòu)來組織這個體系，否則就會顯得很亂。那么如何組織、把誰和誰放在一塊兒？這是真正值得我們?nèi)ニ伎嫉模阋部梢宰约簛硭伎家幌逻@個問題。
在我總結(jié)的這個知識框架中，首先第一層我劃分為：理論知識，類庫框架，編碼開發(fā)，運(yùn)行環(huán)境。如下圖：
接下來給大家解釋一下：
這個圖要從下往上看，為何？——因?yàn)橄旅媸巧厦娴幕A(chǔ)；
首先，我們需要一定的理論知識，不管是你聽別人講授、自己看書還是網(wǎng)上淘資料，你都需要一定的理論知識，每一種程序開發(fā)，都避免不了。
第二，有了這些理論知識我們就可以編碼了——不錯——but，沒有人能抵擋住第三方框架和類庫的誘惑，例如jquery；
第三，有了這些理論知識和協(xié)助我們的類庫框架，我們就可真正的編碼了。大家可能以為編碼開發(fā)不就是寫代碼嗎，還有啥？——這里面道道多著呢；
最后，開發(fā)程序的目的，最終是為了能高效、穩(wěn)定的運(yùn)行在相應(yīng)的環(huán)境中，這其中又有哪些事情需要我們?nèi)プ?？請期待?/p>
理論知識 包括“軟知識”和“硬知識”
“軟知識”和“硬知識”大家可能覺得詞陌生，其實(shí)我一說大家就能明白。
所謂“軟”的就是能在各個程序開發(fā)中都用到的，算是基本功、內(nèi)功，例如數(shù)據(jù)結(jié)構(gòu)、算法、設(shè)計模式、面向?qū)ο蟮鹊龋?/p>
所謂“硬”的就是能直接用于本程序開發(fā)的。用C語言你就得學(xué)C語言語法，此時學(xué)java沒用。我們web前端開發(fā)所需要的硬知識其實(shí)都包含在三個標(biāo)準(zhǔn)里面：http標(biāo)準(zhǔn)、W3C標(biāo)準(zhǔn)和ECMAScript標(biāo)準(zhǔn)；
聊一聊web前端開發(fā)中的“硬知識”
“軟知識”的內(nèi)容非常多，也是我們大學(xué)時代學(xué)習(xí)的重點(diǎn)（沒學(xué)好是另回事兒，畢業(yè)再惡補(bǔ)）。我們本次主要討論的是web前端這一個方向，因此就點(diǎn)到為止，讓大家知道這些知識也在知識體系中扮演重要角色。
剛才說道，硬知識有三個標(biāo)準(zhǔn)：http標(biāo)準(zhǔn)、W3C標(biāo)準(zhǔn)和ECMAScript標(biāo)準(zhǔn)，那咱們就挨個聊聊這三個標(biāo)準(zhǔn)。
1. http標(biāo)準(zhǔn)
為什么做web前端要了解http標(biāo)準(zhǔn)？——因?yàn)闉g覽器要從服務(wù)端獲取網(wǎng)頁，網(wǎng)頁也可能將信息再提交給服務(wù)器，這其中都有http的連接。web系統(tǒng)既然和http鏈接有瓜葛，你就必須去了解它。
我的意見是：你不必去非常了解http的詳細(xì)內(nèi)容，但是你要了解web前端開發(fā)常用的一些http的知識——就是上圖中我列出來的那些。當(dāng)然，我知識列了一個綱，詳細(xì)內(nèi)容還得靠你自己去查閱（本文章講的是知識框架，不會涉及任何知識點(diǎn)的詳細(xì)內(nèi)容）
關(guān)于這方面的知識，建議去查閱《圖解http》這本書，淺顯易懂的講述了這些內(nèi)容，我曾經(jīng)也看過。
2.W3C標(biāo)準(zhǔn)
如果說你只知道web前端的一個標(biāo)準(zhǔn)，估計肯定是W3C標(biāo)準(zhǔn)了（據(jù)我了解，貌似大部分人真的都只知道這一個標(biāo)準(zhǔn)）。它的內(nèi)容非常多，看看這個頁面。
寫到這里讓我想起了一句話：2/8原則——20%的功能滿足80%的需求。我覺得這句話用到這里非常合適，我們在平時開發(fā)過程中根本用不到這么多東西。反而，你要把平時用的多的東西搞懂了。
下圖的這些知識，我想不用再過多解釋了，這就是我文章開發(fā)說的“三大塊”（html、css、js）。現(xiàn)在你要知道，它們只不多是W3C標(biāo)準(zhǔn)的一部分，而W3C標(biāo)準(zhǔn)也只是web前端開發(fā)知識體系中的一部分而已。
（下圖沒有完全展開，想看權(quán)展開的圖，可下載本文一開始提供的附件）
關(guān)于CSS的基礎(chǔ)知識，毛遂自薦一下自己之前的一篇系列博客：《CSS知多少》
3. ECMAScript
簡稱ES，寫全稱太麻煩了。
有些人可能只知道javascript，而不知道ES——其實(shí)，js是在ES的基礎(chǔ)上，為web瀏覽器做了一部分封裝（增加了DOM操作、BOM操作等）。
如上圖中的這些概念，大家可能平時都在javascript中看到，其實(shí)他們是ES的內(nèi)容。只不過javascript繼承了ES的這些特性，并且javascript用的比較廣泛，因此才會在js中討論的多一些。
還是那個“2/8原則”。其實(shí)ES中的內(nèi)容也非常多，而且更新很快，現(xiàn)在都到ES6了。但是我上圖中列出來的這些都是最重要的概念。如果你不懂原型、閉包和作用域，那就說明你還不完全了解ES，也就是不完全會用javascript。
在此毛遂自薦自己之前的一篇系列博客，大家可以去參考：《深入理解javascript原型和閉包系列》
5. 框架和類庫
前面已經(jīng)描述完了web前端開發(fā)所需要的理論知識。如何實(shí)踐呢？——不能蠻干——還得繞世界去看看，有哪些大牛已經(jīng)為我們做出了如此多的貢獻(xiàn)。
用下面的這些類庫或者框架，能大大提高你的開發(fā)效率。
首先，jquery一定是大部分web前端開發(fā)者不可或缺的工具。而我利用jquery不僅僅停留在只使用它的API和插件上，我還會自己去寫jquery插件，我還會去讀jquery的源碼、了解jquery的設(shè)計思路。如果你也能那樣做，請相信我，你會收獲到意想不到的效果。如果有一個問題：怎樣才能最最透徹的理解javascript的事件系統(tǒng)？最佳答案之一：讀幾遍（一遍可能讀不懂）jquery關(guān)于事件處理部分的源碼！
bootstrap不用再過多解釋了吧，從github上的排名也能看出道道來。甚至連我們公司的UI設(shè)計師，都從bootstrap上截圖作為素材。
fontAwesome是全世界最強(qiáng)大的圖標(biāo)系統(tǒng)。相比于css制作圖標(biāo)來說，這個要好很多倍，不管是開發(fā)、效率還是維護(hù)上。icomoon.io能讓我自定義選擇自己的圖標(biāo)文件。
requirejs和seajs這種模塊定義系統(tǒng)，也一定是你系統(tǒng)中不可或缺的。我曾經(jīng)看過一個教程，講師就說：requirejs帶來了既jquery之后的第二次前端技術(shù)變革。
其他的，backbone、angular、react這些也慢慢的開始發(fā)揮了他們的價值，此處精力有限就不再贅述了——但是，他們很重要——你至少要試著去了解它們。
6. 編碼開發(fā)
要問編碼IDE哪家強(qiáng)，當(dāng)然要屬微軟的visual studio！但是即便是微軟的VS最新版本，它也代替不了下面要說的這套開發(fā)環(huán)境。
如果你專門做web前端，就不要在用vs了，當(dāng)然要選擇sublime。寫html語句還用手動一條一條寫嗎？你得需要zencoding的協(xié)助，否則效率太差了。
另外，針對html、css、js的壓縮、合并、語法檢查，文件的清除、復(fù)制這些操作，你還要手動去做嗎？——你需要grunt或者gulp的幫助。
在此毛遂自薦自己的教程《用grunt搭建自動化web開發(fā)環(huán)境》，講的比較詳細(xì)，適合初學(xué)者學(xué)習(xí)。
如果你的系統(tǒng)中有比較多的js代碼或者文件，請選擇一個合適的模塊定義規(guī)范——CMD / AMD
請用git來幫助你做文件版本管理，最簡單的就是使用github。
調(diào)試、測試，也都有專門的工具，都是需要學(xué)的……
——我的天哪……這些字寫到現(xiàn)在寫的我的手都酸了，別說要學(xué)習(xí)這些知識了——再也別說我們web前端是“三大塊”了！
7. 運(yùn)行環(huán)境
當(dāng)系統(tǒng)真正到了運(yùn)行環(huán)境中，當(dāng)你覺得終于完事兒的時候，其實(shí)還有好幾個知識點(diǎn)需要你掌握。看下圖：
首先，你要知道web系統(tǒng)雖然大部分是在瀏覽器下運(yùn)行，但是js可能會被運(yùn)行在node環(huán)境。
在瀏覽器環(huán)境下，最重要的兩點(diǎn)是：web安全和性能優(yōu)化。需要注意的綱要我都列出來了，如果想了解推薦兩本書《白帽子將web安全》《高性能網(wǎng)站建設(shè)指南》
8. 其他
以上這些是全部的知識體系。如果你想成為一名合格的、讓leader喜歡的程序猿，你除了知道這些知識之外，我覺得還需要以下幾點(diǎn)：
要了解敏捷軟件開發(fā)流程（如SCRUM）和項(xiàng)目管理知識（如考取PMP），這也屬于一種“軟”知識吧；
要學(xué)會在網(wǎng)上和別人交流（博客、qq群、開源項(xiàng)目），交流能讓自己看到自己的不足；
要學(xué)會自我反省和自我學(xué)習(xí)。就像我現(xiàn)在一樣，試著自己總結(jié)一下屬于自己的東西，隨時反省隨時進(jìn)步
internet選項(xiàng) --〉安全--〉選中Internet圖標(biāo)（地球）--〉點(diǎn)擊自定義級別--〉下拉到 JavaScript。
所有知識框架，那肯定是一個結(jié)構(gòu)型的展現(xiàn)，就是一棵樹。web前端的知識點(diǎn)非常多，也非常散，需要好幾層結(jié)構(gòu)來組織這個體系，否則就會顯得很亂。那么如何組織、把誰和誰放在一塊兒？這是真正值得我們?nèi)ニ伎嫉?，你也可以自己來思考一下這個問題。
在我總結(jié)的這個知識框架中，首先第一層我劃分為：理論知識，類庫框架，編碼開發(fā)，運(yùn)行環(huán)境。如下圖：
接下來給大家解釋一下：
這個圖要從下往上看，為何？——因?yàn)橄旅媸巧厦娴幕A(chǔ)；
首先，我們需要一定的理論知識，不管是你聽別人講授、自己看書還是網(wǎng)上淘資料，你都需要一定的理論知識，每一種程序開發(fā)，都避免不了。
第二，有了這些理論知識我們就可以編碼了——不錯——but，沒有人能抵擋住第三方框架和類庫的誘惑，例如jquery；
第三，有了這些理論知識和協(xié)助我們的類庫框架，我們就可真正的編碼了。大家可能以為編碼開發(fā)不就是寫代碼嗎，還有啥？——這里面道道多著呢；
最后，開發(fā)程序的目的，最終是為了能高效、穩(wěn)定的運(yùn)行在相應(yīng)的環(huán)境中，這其中又有哪些事情需要我們?nèi)プ?？請期待?/p>
理論知識 包括“軟知識”和“硬知識”
“軟知識”和“硬知識”大家可能覺得詞陌生，其實(shí)我一說大家就能明白。
所謂“軟”的就是能在各個程序開發(fā)中都用到的，算是基本功、內(nèi)功，例如數(shù)據(jù)結(jié)構(gòu)、算法、設(shè)計模式、面向?qū)ο蟮鹊龋?/p>
所謂“硬”的就是能直接用于本程序開發(fā)的。用C語言你就得學(xué)C語言語法，此時學(xué)java沒用。我們web前端開發(fā)所需要的硬知識其實(shí)都包含在三個標(biāo)準(zhǔn)里面：http標(biāo)準(zhǔn)、W3C標(biāo)準(zhǔn)和ECMAScript標(biāo)準(zhǔn)；
聊一聊web前端開發(fā)中的“硬知識”
“軟知識”的內(nèi)容非常多，也是我們大學(xué)時代學(xué)習(xí)的重點(diǎn)（沒學(xué)好是另回事兒，畢業(yè)再惡補(bǔ)）。我們本次主要討論的是web前端這一個方向，因此就點(diǎn)到為止，讓大家知道這些知識也在知識體系中扮演重要角色。
剛才說道，硬知識有三個標(biāo)準(zhǔn)：http標(biāo)準(zhǔn)、W3C標(biāo)準(zhǔn)和ECMAScript標(biāo)準(zhǔn)，那咱們就挨個聊聊這三個標(biāo)準(zhǔn)。
1. http標(biāo)準(zhǔn)
為什么做web前端要了解http標(biāo)準(zhǔn)？——因?yàn)闉g覽器要從服務(wù)端獲取網(wǎng)頁，網(wǎng)頁也可能將信息再提交給服務(wù)器，這其中都有http的連接。web系統(tǒng)既然和http鏈接有瓜葛，你就必須去了解它。
我的意見是：你不必去非常了解http的詳細(xì)內(nèi)容，但是你要了解web前端開發(fā)常用的一些http的知識——就是上圖中我列出來的那些。當(dāng)然，我知識列了一個綱，詳細(xì)內(nèi)容還得靠你自己去查閱（本文章講的是知識框架，不會涉及任何知識點(diǎn)的詳細(xì)內(nèi)容）
關(guān)于這方面的知識，建議去查閱《圖解http》這本書，淺顯易懂的講述了這些內(nèi)容，我曾經(jīng)也看過。
2.W3C標(biāo)準(zhǔn)
如果說你只知道web前端的一個標(biāo)準(zhǔn)，估計肯定是W3C標(biāo)準(zhǔn)了（據(jù)我了解，貌似大部分人真的都只知道這一個標(biāo)準(zhǔn)）。它的內(nèi)容非常多，看看這個頁面。
寫到這里讓我想起了一句話：2/8原則——20%的功能滿足80%的需求。我覺得這句話用到這里非常合適，我們在平時開發(fā)過程中根本用不到這么多東西。反而，你要把平時用的多的東西搞懂了。
下圖的這些知識，我想不用再過多解釋了，這就是我文章開發(fā)說的“三大塊”（html、css、js）?，F(xiàn)在你要知道，它們只不多是W3C標(biāo)準(zhǔn)的一部分，而W3C標(biāo)準(zhǔn)也只是web前端開發(fā)知識體系中的一部分而已。
（下圖沒有完全展開，想看權(quán)展開的圖，可下載本文一開始提供的附件）
關(guān)于CSS的基礎(chǔ)知識，毛遂自薦一下自己之前的一篇系列博客：《CSS知多少》
3. ECMAScript
簡稱ES，寫全稱太麻煩了。
有些人可能只知道javascript，而不知道ES——其實(shí)，js是在ES的基礎(chǔ)上，為web瀏覽器做了一部分封裝（增加了DOM操作、BOM操作等）。
如上圖中的這些概念，大家可能平時都在javascript中看到，其實(shí)他們是ES的內(nèi)容。只不過javascript繼承了ES的這些特性，并且javascript用的比較廣泛，因此才會在js中討論的多一些。
還是那個“2/8原則”。其實(shí)ES中的內(nèi)容也非常多，而且更新很快，現(xiàn)在都到ES6了。但是我上圖中列出來的這些都是最重要的概念。如果你不懂原型、閉包和作用域，那就說明你還不完全了解ES，也就是不完全會用javascript。
在此毛遂自薦自己之前的一篇系列博客，大家可以去參考：《深入理解javascript原型和閉包系列》
5. 框架和類庫
前面已經(jīng)描述完了web前端開發(fā)所需要的理論知識。如何實(shí)踐呢？——不能蠻干——還得繞世界去看看，有哪些大牛已經(jīng)為我們做出了如此多的貢獻(xiàn)。
用下面的這些類庫或者框架，能大大提高你的開發(fā)效率。
首先，jquery一定是大部分web前端開發(fā)者不可或缺的工具。而我利用jquery不僅僅停留在只使用它的API和插件上，我還會自己去寫jquery插件，我還會去讀jquery的源碼、了解jquery的設(shè)計思路。如果你也能那樣做，請相信我，你會收獲到意想不到的效果。如果有一個問題：怎樣才能最最透徹的理解javascript的事件系統(tǒng)？最佳答案之一：讀幾遍（一遍可能讀不懂）jquery關(guān)于事件處理部分的源碼！
bootstrap不用再過多解釋了吧，從github上的排名也能看出道道來。甚至連我們公司的UI設(shè)計師，都從bootstrap上截圖作為素材。
fontAwesome是全世界最強(qiáng)大的圖標(biāo)系統(tǒng)。相比于css制作圖標(biāo)來說，這個要好很多倍，不管是開發(fā)、效率還是維護(hù)上。icomoon.io能讓我自定義選擇自己的圖標(biāo)文件。
requirejs和seajs這種模塊定義系統(tǒng)，也一定是你系統(tǒng)中不可或缺的。我曾經(jīng)看過一個教程，講師就說：requirejs帶來了既jquery之后的第二次前端技術(shù)變革。
其他的，backbone、angular、react這些也慢慢的開始發(fā)揮了他們的價值，此處精力有限就不再贅述了——但是，他們很重要——你至少要試著去了解它們。
6. 編碼開發(fā)
要問編碼IDE哪家強(qiáng)，當(dāng)然要屬微軟的visual studio！但是即便是微軟的VS最新版本，它也代替不了下面要說的這套開發(fā)環(huán)境。
如果你專門做web前端，就不要在用vs了，當(dāng)然要選擇sublime。寫html語句還用手動一條一條寫嗎？你得需要zencoding的協(xié)助，否則效率太差了。
另外，針對html、css、js的壓縮、合并、語法檢查，文件的清除、復(fù)制這些操作，你還要手動去做嗎？——你需要grunt或者gulp的幫助。
在此毛遂自薦自己的教程《用grunt搭建自動化web開發(fā)環(huán)境》，講的比較詳細(xì)，適合初學(xué)者學(xué)習(xí)。
如果你的系統(tǒng)中有比較多的js代碼或者文件，請選擇一個合適的模塊定義規(guī)范——CMD / AMD
請用git來幫助你做文件版本管理，最簡單的就是使用github。
調(diào)試、測試，也都有專門的工具，都是需要學(xué)的……
——我的天哪……這些字寫到現(xiàn)在寫的我的手都酸了，別說要學(xué)習(xí)這些知識了——再也別說我們web前端是“三大塊”了！
7. 運(yùn)行環(huán)境
當(dāng)系統(tǒng)真正到了運(yùn)行環(huán)境中，當(dāng)你覺得終于完事兒的時候，其實(shí)還有好幾個知識點(diǎn)需要你掌握。看下圖：
首先，你要知道web系統(tǒng)雖然大部分是在瀏覽器下運(yùn)行，但是js可能會被運(yùn)行在node環(huán)境。
在瀏覽器環(huán)境下，最重要的兩點(diǎn)是：web安全和性能優(yōu)化。需要注意的綱要我都列出來了，如果想了解推薦兩本書《白帽子將web安全》《高性能網(wǎng)站建設(shè)指南》
8. 其他
以上這些是全部的知識體系。如果你想成為一名合格的、讓leader喜歡的程序猿，你除了知道這些知識之外，我覺得還需要以下幾點(diǎn)：
要了解敏捷軟件開發(fā)流程（如SCRUM）和項(xiàng)目管理知識（如考取PMP），這也屬于一種“軟”知識吧；
要學(xué)會在網(wǎng)上和別人交流（博客、qq群、開源項(xiàng)目），交流能讓自己看到自己的不足；
要學(xué)會自我反省和自我學(xué)習(xí)。就像我現(xiàn)在一樣，試著自己總結(jié)一下屬于自己的東西，隨時反省隨時進(jìn)步
重慶分公司
重慶分公司
