摘要：之前人家寫過的彈出層，富文本編輯器，語法高亮插件你一套也不能少，這樣你才能接觸到之前碰不到的原生與知識(shí)點(diǎn)。通過引入雙向綁定與分層架構(gòu)，完全脫離進(jìn)行前端開發(fā)。

原文：http://www.cnblogs.com/rubylouvre/p/3658441.html
作者：司徒正美

歷時(shí)兩年多，我的書終于付梓出版了。應(yīng)各方面的要求，寫軟文一篇，隆重介紹一下此書對(duì)各位程序員的錢途有什么幫助及閱讀順序等疑問。作為國(guó)內(nèi)第一本講述前端框架構(gòu)的書，它里面充斥著許多大家前所未聞的知識(shí)，這些知識(shí)有50%只見于github的issue，講述各種隱秘的瀏覽器兼容性問題及各種神奇的修復(fù)方案，或者是某些危險(xiǎn)但美麗的黑魔法，另外50%我深夜夢(mèng)游般在外國(guó)某些大牛（不局限于英語，有日語，俄語，韓語等，不同的語言的人，受制了他們的語法結(jié)構(gòu)，他們的思考回路是與我們不同的，給出的答案有時(shí)真的是拍案叫絕）的博客或網(wǎng)站瞥見的神奇東東。在我通過編寫dom Framework, mass Framework這兩大框架（dom Framework是老式的金字塔式的基于類的大框架， mass Framework是擁有AMD加載器的開放式框架，再后來的avalon，是鬼怪式的分層構(gòu)架的MVVM框架，黑魔法滿滿的），建立完整的知識(shí)樹后，開始狂熱如征服六國(guó)后的秦王，熱衷于收集各種奇珍異寶于我的博客——你們看的部分，只是我未公開的十分之一而已，本書將額外開恩公布另外的十分之二。

其實(shí)這世界很奇妙的，當(dāng)你水平上去后，就算你不想繼續(xù)，這世界也推動(dòng)著你前進(jìn)。就像jQuery1.3通過Sizzle大獲成功后，成為世界的明星，就算John Resig想撒手，但這么多pull request，它也只能從更好變成更加好！三年前，當(dāng)我寫了三百多篇的博文，出版社已經(jīng)找上門來了。在那半年內(nèi)，總共有三四家來找我，讓我看到前端的希望。于是我的重心由ruby慢慢轉(zhuǎn)向javascript。待到我加入盛大創(chuàng)新院后，我已經(jīng)確保我能hold住《javascript框架設(shè)計(jì)》這個(gè)大題目，于是簽約寫書。不過，在最初我提交給出版社的目錄里，我有著更為恢宏的目標(biāo)，包含拖放組件， 路由系統(tǒng)， 及各式UI組件，但最后由于篇幅的問題，只好說聲抱歉了。

野望總是被現(xiàn)實(shí)所掣肘，亞歷山大想證明世界，可他的HP也是這么短，經(jīng)不起長(zhǎng)途跋涉。實(shí)體書與博客是不同的，它必須要形成一個(gè)體系，文體也有要求，不能太口語化，什么喜樂哀痛必須收起來，板著臉正正經(jīng)經(jīng)地對(duì)大家宣講。錯(cuò)別字也要收殮一下，雖然我找了許多高手審稿了?？上€(gè)個(gè)都開寫輪眼，自動(dòng)過濾掉錯(cuò)別字，最終還是讓出版社的張濤大大幫忙處理了大部分錯(cuò)別字與病句，太專業(yè)的東西他也無能為力，但愿不影響閱讀。幸好各位大神貢獻(xiàn)了不少冷癖有用的知識(shí)點(diǎn)，讓本書充實(shí)了不少，因此才一改再改，三番四次，導(dǎo)致兩年多才交稿。在盛大創(chuàng)建院時(shí)，不斷有人（同事或群友）問我的書什么時(shí)候出來，人家半年就搞出一本了。我今天終于不為這問題煩惱了。

在繼續(xù)這篇軟文時(shí)，我腦海真的是閃現(xiàn)許多詞匯，什么大教堂與集市，造輪子與DRY，公司利益與個(gè)人成長(zhǎng)……一個(gè)個(gè)來吧

大教堂與集市說的是如何構(gòu)建一個(gè)軟件工程，是大教堂式的專制主義還是開放式的以眾包方式讓大家貢獻(xiàn)源碼。前者，緩和一點(diǎn)地說，是英雄主義，jQuery之于John Resig， Node.JS之于Ryan Dahl，他們單人匹馬開創(chuàng)了一個(gè)新天地。后者，最杰出的代表是Linux。但在這個(gè)互相浸透學(xué)習(xí)的世界，絕對(duì)的東西是不存在的。jQuery與Node.JS現(xiàn)在也是在眾多的項(xiàng)獻(xiàn)者的努力一下前進(jìn)，原作者向新目的地進(jìn)發(fā)了。在國(guó)內(nèi)，你懂的，每個(gè)人都自命不凡，一開始只能是你一個(gè)踽踽獨(dú)行。只有你真正成為明燈式的人物后，才有人追隨。

造輪子與DRY這問題也新浪微博上也吵過許多次了。有個(gè)軟件設(shè)計(jì)原則叫DRY，防止組員們隨意克隆代碼，或在不知情的情況下重復(fù)發(fā)明相似的功能模塊。公司出于利益的考慮，也不愿給時(shí)間組員自己去造輪子，上網(wǎng)找一個(gè)jQuery插件了事。因此，小中公司的頁(yè)面非?？植?，允斥著大量第三方插件，而相對(duì)而言，大阿貍能用的基本自己做，這正是游擊隊(duì)與正規(guī)軍的區(qū)別。從國(guó)內(nèi)看，最重視JS的公司也恰恰是大阿貍，他們擁有國(guó)內(nèi)最龐大優(yōu)秀的前端團(tuán)隊(duì)（700多人），小公司還是一個(gè)前端對(duì)20個(gè)后端的節(jié)奏。招這么多高手干嘛呢？造輪子！當(dāng)然，這不是一個(gè)輪子所代表的，這涉及一整合的工具鏈，目的是實(shí)現(xiàn)前端自動(dòng)化集成布署。寫框架與UI組件保是其中一個(gè)很少環(huán)節(jié)，這也是一般人能理解的東西，更多高大上的東西，大公司也不會(huì)公開出來。但你起碼擁有創(chuàng)造UI組件這樣的能力，才能讓你碰更底層的工具。

公司利益與個(gè)人成長(zhǎng)，這個(gè)更不用說。只有目光短淺的公司，才會(huì)用雜牌的組件寫碼。大公司早已為你準(zhǔn)備一整好東西了。而你的任務(wù)就是成長(zhǎng)到具有寫UI組件的地步，進(jìn)入架構(gòu)師，為公司的未來挑戰(zhàn)做好更多準(zhǔn)備（工具）。HTML5對(duì)于一般人而言，好像是非常遙遠(yuǎn)的事，但大公司早已有一幫人用它做出許多好東西，為公司產(chǎn)品的用戶體驗(yàn)添磚加瓦。為了積聚這實(shí)力，你必須自己暗暗發(fā)力，偷偷自己寫一套東西。之前人家寫過的彈出層，富文本編輯器，語法高亮插件……你一套也不能少，這樣你才能接觸到之前碰不到的原生API與知識(shí)點(diǎn)。如彈出層有關(guān)垂直居中的CSS知識(shí)點(diǎn)，select穿透問題，富文本編輯器用到的iframe知識(shí)點(diǎn)，Range與Selection對(duì)象的知識(shí)點(diǎn)，語法高亮則是你正則的大檢驗(yàn)！如果寫業(yè)務(wù)代碼，你寫十年，水平還是那樣。因此有句話說——“用一年的經(jīng)驗(yàn)混十年”

最近在微博看到一件可怕的事：

  
【我所了解的一個(gè)精神失常的程序員】http://t.cn/8sinEOr 不久前我們公司有個(gè)程序員精神失常。他走進(jìn)經(jīng)理辦公室開始大喊大叫，說著一些奇怪的事情。如果我不是像了解自己一下了解他，就會(huì)以為他磕了藥。但是事實(shí)上他簡(jiǎn)直就是精神失常了！

  
他是我在編程行業(yè)見過的最勤奮員工。他經(jīng)常在下班后加班，周末的時(shí)候，當(dāng)管理人員需要人手去處理緊急工作時(shí)，他總是隨叫隨到。在這個(gè)階段公司并不賺 錢，老板需要盡可能快的完成項(xiàng)目，所以任何被客戶急催的軟件開發(fā)都會(huì)自動(dòng)分配給他。他很樂意地全心投入把工作做完正是老板喜歡的地方。

"我能力強(qiáng)，我效率高，我應(yīng)該是公司的關(guān)鍵人物"，其實(shí)那是錯(cuò)的，不可替代性才是最重要的。如果靠“賣力”增加不可替代性，作用是微乎其微的，還是得靠“高門檻”。我認(rèn)識(shí)的工程師里，越是技術(shù)好的工程師越會(huì)意識(shí)到這個(gè)問題，然后去做一些"深度"的發(fā)展，這也算是工程師的自我保護(hù)吧。說什么做IT沒前途，30歲要轉(zhuǎn)行，這只是無能者的藉口。

古人說——“人無遠(yuǎn)慮，必有近憂”。你平時(shí)有這么多空閑時(shí)間，為何不努力提升一下自己的水平呢。不去認(rèn)真閱讀一下大師們的框架，不自己寫一個(gè)框架。記得當(dāng)初我在博客宣傳我的框架，被某個(gè)嫉妒的人罵個(gè)狗血噴頭，兩年過去，他消聲匿跡，而我，從一個(gè)公司的核心前端變?yōu)榱硪粋€(gè)公司的核心前端，現(xiàn)在是去哪兒網(wǎng)的前端架構(gòu)師。因此要相信自己！不要怕這怕那，有努力就有回報(bào)！

再回來說我的書，前端的知識(shí)點(diǎn)是非常龐雜的。但知識(shí)只有串起來，形成知識(shí)樹才是你自己的?，F(xiàn)在市面上的書，基本上抄來抄去，還是依照老舊的方法教人，一開始總是歷史回顧，然后是各種數(shù)據(jù)類型介紹，然后是語法（條件分支，循環(huán)分支）什么的，最后再來幾個(gè)“真實(shí)案例”。這對(duì)于90%半路出家的前端來說，未免太悶了。而且前端不單單是javascript， javascript只是水泥， 或者說儲(chǔ)如化學(xué)分子這東西，而我們工作是為了構(gòu)建一整座大廈！只有肉眼看到的物理級(jí)別的東西才是主角。它們就是本書的重點(diǎn)， DOM與BOM。 javascript通過特性偵測(cè)或傳參等，進(jìn)入不同的分支，來解決前端臭名昭著的兼容性問題。本書介紹了大量這樣的黑魔法，如何知道當(dāng)前瀏覽器是支持這個(gè)事件呢？ 為何在這里要劫持this呢？ 怎么樣讓選擇器引擎跑得更快。于是這一個(gè)個(gè)疑問，便化解成本書所介紹的知識(shí)點(diǎn)，什么AMD加載器， 選擇器引擎，批量生成一堆元素節(jié)點(diǎn)……

所有前端框架面對(duì)的問題都是一樣，不同的是解決手段的高下程度。于是Prototype死了，jQuery火了。 angular爆發(fā)了， jQuery沉寂了！本書的章節(jié)就是按照編寫一個(gè)多文件框架的順序來寫。最開始肯定是種子模塊，定義框架的名字與版本號(hào)，與一些最核心的方法，還有加載器。然后通過加載器，添加一些常用的工具模塊，對(duì)javascript語言進(jìn)行擴(kuò)張與修復(fù)。之后是數(shù)據(jù)緩存什么的，再之后是主菜，各種DOM問題， 節(jié)點(diǎn)啊， 樣式啊， 事件啊， 動(dòng)畫啊……最后是MVVM，當(dāng)前最強(qiáng)大的前端解決方案。通過引入雙向綁定與分層架構(gòu)，完全脫離DOM進(jìn)行前端開發(fā)。

你或者有過激情，你或者有過夢(mèng)想，但當(dāng)你的KIP考核點(diǎn)是PM那些荒唐的改來改去的功能點(diǎn)，多熾熱的火焰也會(huì)被澆滅。因此你必須要搞出一點(diǎn)東西出來，努力爬上去。是廢命于加班，天天寫業(yè)務(wù)，還是專注于底層框架的研發(fā)，為某個(gè)難題而苦惱，完全在于你一念之差。“是金子總會(huì)發(fā)光的”，或“是石頭到哪都不會(huì)發(fā)光的”，也完全在于你一念之差。本書將為你提供了一個(gè)可能性及一大堆技能點(diǎn)，打開了一個(gè)美麗的新世界，提供了一個(gè)X年不遇的機(jī)會(huì)，準(zhǔn)備了一個(gè)迅速上升的渠道。

可能有些人會(huì)嫌它貴，也有些人怕自己看不明白這么“高大上”的東西。我說一個(gè)故事吧。

一個(gè)特別喜愛昆蟲的人做了這樣一個(gè)實(shí)驗(yàn)：他將跳蚤放進(jìn)敞口的瓶子里，它立刻便跳了出來。當(dāng)把瓶子蓋上時(shí)，跳蚤還是會(huì)竭力跳出瓶子，它不停地撞擊著瓶蓋的內(nèi)側(cè)。一個(gè)多小時(shí)后，他還在那樣跳著。差不多三個(gè)小時(shí)后，它依然在跳，只是它不再撞著瓶蓋了，此時(shí)它跳的高度離瓶蓋大約1厘米左右，而且每一次都是如此。這時(shí)，瓶蓋被拿掉了，但是跳蚤并沒有跳出瓶口，它依然保持著有瓶蓋時(shí)的高度，再也跳不出瓶口。

同理，如果你，總嫌這個(gè)貴那個(gè)貴，你又不努力改變現(xiàn)狀，過了一段時(shí)間，你就會(huì)習(xí)慣了，就會(huì)安于貧困了。就像瓶子的跳蚤那樣安于天命，永遠(yuǎn)困死在瓶子里。

怕自己理解不了這東西，這雖然是一個(gè)理智的考量，但只要是人就會(huì)遇到瓶頸，但問題是如何突破瓶頸。瓶蓋又不是總是蓋上的，有機(jī)遇你得抓??！

我也曾畢業(yè)找不到工作，潦倒到當(dāng)了一年保安。但我相信“是金子總會(huì)發(fā)光的”，我終會(huì)一鳴驚人，我現(xiàn)在只是一只受傷的野狼，我不會(huì)被命運(yùn)所屈服馴化。因此跟我咆哮吧——

無名的生命之花 已慘遭摧殘踐踏
一度墜地的飛鳥 正焦急以待風(fēng)起
一味埋頭祈禱 卻不會(huì)有任何改變
若想有所改變 就請(qǐng)起而奮戰(zhàn)吧
踏過尸體前行的我們
嘲笑這進(jìn)擊意志的豬玀啊
家畜般的安寧 那虛偽的繁榮
請(qǐng)賜予誓死之餓狼以自由！
……
——進(jìn)擊的巨人OP《紅蓮の弓矢》

框架的世界就是像電路板一樣復(fù)雜而精密，得道者能庖丁解牛，游刃有余，外行者則如墜迷夢(mèng)，困死在盜夢(mèng)空間。

原文：http://www.cnblogs.com/rubylouvre/p/3658441.html