摘要
- 后端懶人一枚藻烤，臨時需要搞個管理端，以前在學校有用jquery+bootstrap做過類似的前端項目头滔，然而如今回首怖亭，舊代碼如屎一坨，更別提維護了坤检。有了之前的教訓兴猩，碰到這個需求就決定認真做做。
- 對前端還是略小白早歇，寫得不好峭跳，還望多多指教。
- 已完成的項目使用的組合是react+webpack+redux-form（支持ie8）
背景與問題
- Header,Banner,Footer等前端布局的公共部分缺前，重復編寫代碼或借助php等后端語言進行渲染蛀醉，會造成前后端代碼高耦合。
- 放任全局變量的存在衅码，給項目擴展帶來未知問題拯刁。
- 隨著項目開發(fā)不斷進行，項目也會變得臃腫逝段，糟糕的項目結(jié)構(gòu)會使維護工作越發(fā)困難垛玻。復雜的頁面需要控制更多狀態(tài)，并根據(jù)狀態(tài)的變化奶躯，執(zhí)行更多相應(yīng)的邏輯帚桩。
- 針對管理端，進行ie8+的兼容嘹黔。
- 使用的第三方庫較多账嚎，前端發(fā)送的靜態(tài)文件(js,css)請求較多，導致網(wǎng)頁加載速度較慢。
- 管理平臺的樣式多有雷同郭蕉，若樣式定制開發(fā)疼邀，會產(chǎn)生不必要的工作量。
關(guān)鍵詞
根據(jù)之前對背景和問題的分析召锈，這次做前端的主要就是做到以下3個關(guān)鍵詞旁振。
- 模塊化
- 組件化
- 工程化
問題及對應(yīng)解決方案
問題：前后端代碼高耦合+全局變量
方案：模塊化
首先，將前端的公共部分提取出來涨岁，進行模塊化編程拐袜；
然后，劃定作用域梢薪，不同模塊間作用域不共享蹬铺，這樣就可以做到，公共代碼模塊化沮尿，避免了全局變量的困擾丛塌。
目前较解，流行的模塊化編程的工具有RequireJS, SeaJS, Webpack畜疾，其中SeaJS是由阿里的團隊開發(fā)的，在中國有活躍的社區(qū)印衔。Webpack由德國人編寫啡捶，體現(xiàn)了更強的項目工程化特點。
其中奸焙，RequireJS和SeaJS分別是AMD和CMD兩種規(guī)范的代表瞎暑。AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊与帆；CMD推崇異步依賴加載的了赌，只有在用到某個模塊的時候再去require。
而Webpack則屬于集大成者玄糟，不僅兼容兩者書寫規(guī)范勿她，而且因采用異步IO及多級緩存，使Webpack在增量編譯上更快阵翎。但實際上逢并，Webpack在實際開發(fā)中更多的是充當編譯者和打包者的角色，它結(jié)合React同樣能夠?qū)崿F(xiàn)模塊化開發(fā)郭卫，這個我們在后面展示砍聊。
問題：糟糕的項目結(jié)構(gòu)，控制更多的狀態(tài)
方案：組件化
組件化建立在模塊化的基礎(chǔ)上贰军，模塊化是對資源的管理玻蝌，組件化是對業(yè)務(wù)邏輯的管理，各自要有不同的發(fā)展方向。經(jīng)調(diào)研灶伊，NPM,Webpack（或Browserify）和React的組合會便于我們對項目結(jié)構(gòu)有一個整體的認識疆前。在這個基礎(chǔ)上，我們便能非常方便地創(chuàng)建一個結(jié)構(gòu)更為清晰的項目聘萨。
而針對不同組件所擁有的不斷變化的狀態(tài)竹椒，通過對Flux和Redux的學習和使用，可以方便我們對于復雜組件狀態(tài)處理的機制米辐，有進一步的理解胸完。（但因為本人畢竟不是前端，且較懶翘贮，關(guān)于redux赊窥，未做過多學習，直接上手redux-form是為了快速開發(fā)管理端表單狸页。）這里要提一下锨能，redux-form非常強大，官方已給出很多例子芍耘，這里不再熬述址遇。
問題：IE8兼容
方案：React(0.14.x)
最一開始調(diào)研的時候，因為ie兼容的顧慮斋竞，所以倔约，調(diào)研了比較流行的React，Angular坝初，Vue以及小眾的Avalon浸剩。其中后三個都是MVVM框架（核心是數(shù)據(jù)雙向綁定）。關(guān)于兼容鳄袍，Angular早在1.3版本就拋棄了對ie8的支持绢要，Vue就沒打算支持ie8，可面對中國1/5的ie8用戶拗小，只好在Avalon和React做取舍重罪。
Avalon是由去哪兒前端架構(gòu)師“司徒正美”開發(fā)的一款基于虛擬DOM與屬性劫持的迷你、易用十籍、高性能的前端MVVM框架蛆封，適用于各種場景，兼容各種古老刁鉆瀏覽器勾栗，吸收最新的技術(shù)成果惨篱，能迅速堆砌組件與應(yīng)用。它竟然支持到IE6+围俘。
兼容性和性能好外砸讳，缺點就是除了文檔和較小的論壇琢融，你搜不到過多的資料，這對后期學習簿寂，或者是他人維護漾抬，是很不方便的。而且作者重寫了不少js的核心方法常遂，這導致如果出錯纳令，除了找作者和自己改源碼外，很可能無處查詢克胳。
最后選擇React(0.14.x)平绩，除了兼容外，還有諸如社區(qū)活躍漠另，資源多捏雌，最重要的是有Facebook做支持。當然笆搓，它的ie8支持需要進行多插件配置和支持性湿，在我github上關(guān)于react學習的相關(guān)實踐里有相關(guān)配置文件。其中满败，package.json和webpack.config.js需要好好看下肤频，其次就是注意項目結(jié)構(gòu)（因為用了react-router，項目結(jié)構(gòu)相對清晰）葫录，其他兼容相關(guān)可以通過下面鏈接進行學習着裹。
https://github.com/xcatliu/react-ie8
http://www.aliued.com/?p=3240
問題：前端發(fā)送的靜態(tài)文件(js,css)請求多
方案：Webpack
Webpack支持轉(zhuǎn)譯领猾，打包米同，壓縮等功能。轉(zhuǎn)譯可以將react的jsx語言轉(zhuǎn)成js摔竿，es6寫法轉(zhuǎn)成es5（大部分瀏覽器兼容）等面粮，同時，將眾多文件的轉(zhuǎn)譯結(jié)果及依賴關(guān)系等继低，打包壓縮到一個文件中熬苍，只需一次請求，便相當于加載了多個文件及其關(guān)系袁翁，極大地提升了前端頁面加載速度柴底。
問題：樣式要求不高，但重復性高
方案：Ace Admin(ie8)
自己主要還是后端開發(fā)粱胜，管理端樣式不是自己研究的重點柄驻，故決定選擇模板進行開發(fā)。通過調(diào)研焙压，Ace Admin和AdminLTE都是github上比較受歡迎的前端樣式模板鸿脓，其中Ace支持ie8抑钟，故選取前者用于實際開發(fā)。但AdminLTE相對好看野哭，提供的樣式選擇較多在塔，大家也可以使用。
第三方庫
React的思想是通過操作虛擬dom完成指定任務(wù)拨黔。然而蛔溃，在實際開發(fā)中，其實有很多方便的輪子并沒有React化篱蝇，仍然需要通過外部引入的方式借助第三方庫進行開發(fā)城榛。
在這里，React組件的生命周期為引入三方庫态兴，提供了componentDidMount等方法狠持，方便對第三方庫進行加載。
這里順便安利幾個庫瞻润，如uploadify（flash版上傳文件）喘垂、ZeroClipboard（點擊即可復制）、dataTables（列表前端組件）
代碼相關(guān)
項目代碼不太好開源绍撞，但之前自己寫的幾個react相關(guān)的學習例子與項目契合度較高正勒。
這里貼出react學習的例子鏈接，感興趣的朋友可以自行下載傻铣。歡迎各位相互交流章贞。
