項(xiàng)目背景

剛剛參加完一個(gè)項(xiàng)目，背景：后端是用java，后端服務(wù)已經(jīng)開(kāi)發(fā)的差不多了，現(xiàn)在要通過(guò)web的方式對(duì)外提供服務(wù)，也就是B/S架構(gòu)。后端專(zhuān)注做業(yè)務(wù)邏輯，不想在后端做頁(yè)面渲染的事情，只向前端提供數(shù)據(jù)接口。于是協(xié)商后打算將前后端完全分離，頁(yè)面上的所有數(shù)據(jù)都通過(guò)ajax向后端取，頁(yè)面渲染的事情完全由前端來(lái)做。另外還有一個(gè)緊急的情況，項(xiàng)目要緊急上線，整個(gè)web站點(diǎn)的開(kāi)發(fā)時(shí)間只有兩周，兩周啊！于是在這樣的背景下，決定開(kāi)始一次前后端完全分離的嘗試。

之前開(kāi)發(fā)都是同步渲染和異步渲染混搭的，有些東西可以有后端PHP幫你編譯好，如通用的頁(yè)面模板，后端傳回的頁(yè)面參數(shù)等。提前預(yù)感到這次完全分離可能會(huì)遇到一些困難，但是項(xiàng)目上線要緊，也不能深入搞架構(gòu)，于是打算就用jQuery+handlebars，jQuery來(lái)完成頁(yè)面邏輯和DOM操作，用handlebars來(lái)完成頁(yè)面渲染，這個(gè)方案是如此的簡(jiǎn)單粗暴，但好處能最穩(wěn)妥的保證項(xiàng)目按期完成。其實(shí)前后端分離并不是一件容易的工作，這么做會(huì)有諸多不完善之處，后面再談。

淺談前后端分離

所謂的前后端分離，到底是分離什么呢？其實(shí)就是頁(yè)面的渲染工作，之前是后端渲染好頁(yè)面，交給前端來(lái)顯示，分離后前端需要自己拼裝html代碼，然后再顯示。前端來(lái)管理頁(yè)面的渲染有很多好處，比如減少網(wǎng)絡(luò)請(qǐng)求量，制作單頁(yè)面應(yīng)用等。事情聽(tīng)起來(lái)簡(jiǎn)單，但這么一分離又會(huì)牽扯到很多問(wèn)題，比如：

• 資源的按需加載。尤其是在單頁(yè)應(yīng)用中。

•頁(yè)面展現(xiàn)邏輯。分離讓前端的邏輯陡增，需要有一個(gè)良好的前端架構(gòu)，如mvc模式。

•數(shù)據(jù)校驗(yàn)。因?yàn)轫?yè)面數(shù)據(jù)都是從后端請(qǐng)求來(lái)的，必須校驗(yàn)要展示的數(shù)據(jù)是否合法，避免xss或其他安全問(wèn)題。

•短暫白屏。因?yàn)轫?yè)面不是同步渲染的，在請(qǐng)求數(shù)據(jù)完畢之前，頁(yè)面是白屏的，體驗(yàn)很不好。

•代碼的復(fù)用。眾多的模板、邏輯模塊需要良好組織實(shí)現(xiàn)可復(fù)用。

•路由控制。無(wú)刷新的前端體驗(yàn)同時(shí)毀掉了瀏覽器的后退按鈕，前端視圖需要有一套路由機(jī)制。

•SEO。服務(wù)端不再返回頁(yè)面，前端根據(jù)不同的邏輯呈現(xiàn)不同的視圖（并非頁(yè)面），要對(duì)搜索引擎友好需要做很多額外的工作。

以上每一個(gè)問(wèn)題都?jí)蚣郑幚砗眯枰性O(shè)計(jì)精良又符合實(shí)際項(xiàng)目的方案。現(xiàn)在已經(jīng)有很多框架可以幫我們做這些事情，Backbone, EmberJS, KnockoutJS, AngularJS, React, avalon等等，利用它們可以架構(gòu)起一個(gè)富前端。但框架畢竟是框架，要利用到實(shí)際項(xiàng)目中，還是需要有自己的設(shè)計(jì)，框架并不能解決所有的問(wèn)題。

之前也有看過(guò)淘寶團(tuán)隊(duì)的實(shí)踐，利用nodejs做一個(gè)中間層，處理頁(yè)面渲染、路由控制、SEO等事情，將前后端的分界線進(jìn)行了重新定義。個(gè)人感覺(jué)這應(yīng)該是一個(gè)正確的方向，有點(diǎn)顛覆的感覺(jué)，前端走向工程化，將變成真正的全棧式大前端。不知現(xiàn)在這種架構(gòu)是否在淘寶全面鋪開(kāi)，真有點(diǎn)期待看看效果。

以上的框架，還有淘寶的實(shí)踐，畢竟都是大牛之作，我這個(gè)小輩也只是參考學(xué)習(xí)過(guò)，未能在實(shí)際項(xiàng)目中使用。低頭看看自己現(xiàn)在手頭的項(xiàng)目，1個(gè)前端，2周時(shí)間，要完成一個(gè)完整的web項(xiàng)目，還是用最穩(wěn)妥***級(jí)的方式來(lái)搞吧~

基本結(jié)構(gòu)

項(xiàng)目整體并不是一個(gè)單頁(yè)應(yīng)用，但有些模塊需要做成局部的單頁(yè)操作，像這種需要分步完成的操作，只需局部加載子頁(yè)面即可。

因此，一個(gè)模塊有一個(gè)主html頁(yè)面，初始只有一些基本的骨架，有一個(gè)名字相同的js文件，該模塊邏輯都在此js文件中，有一個(gè)名字相同的css文件，該模塊的所有樣式都定義在此js文件中。

需要異步加載的子頁(yè)面，像上圖中每個(gè)步驟的頁(yè)面，我都使用jQuery的$.load()方法來(lái)加載，此方法能在頁(yè)面某個(gè)容器中加載內(nèi)容，并可指定回調(diào)函數(shù)，使用起來(lái)很方便。被異步加載的子頁(yè)面我都用_開(kāi)頭，如_step1.html，用于做區(qū)分。

為了確保瀏覽器的前進(jìn)后退按鈕可用，我使用了hash來(lái)做路由標(biāo)記，頁(yè)面地址如：publish.html#step2。有個(gè)缺陷是hash并不會(huì)發(fā)送給服務(wù)器，所以SEO就廢了。事實(shí)上使用history API也可以更優(yōu)雅的解決問(wèn)題，但需要考慮兼容性，還有額外工作要做，考慮時(shí)間因素，退而求其次，況且本項(xiàng)目也無(wú)需做SEO。或者像淘寶的方案那樣，nodejs層與瀏覽器層統(tǒng)一路由，SEO問(wèn)題可以迎刃而解。但又明顯不在本人的實(shí)力范圍之內(nèi)，汗--！

除了用$.load異步加載的子頁(yè)面，剩余的局部頁(yè)面就是用handlebars提供的模板渲染了，我使用了handlebars的預(yù)編譯功能，不得不說(shuō)很強(qiáng)大，一來(lái)節(jié)約了頁(yè)面加載階段所需的編譯時(shí)間（編譯handlebars模板），二來(lái)編譯后的模板（js文件）方便復(fù)用。

接下來(lái)就是前端邏輯如何組織，因?yàn)闆](méi)有用mv*框架，所以只能靠自己來(lái)寫(xiě)一個(gè)便于開(kāi)發(fā)的結(jié)構(gòu)。如上面所述，每個(gè)模塊有一個(gè)主js文件，文件內(nèi)容結(jié)構(gòu)如下：

var publish = {  
     //該模塊初始化入口  
     init : function(){  
          this.renderData(param);  
          this.initListeners();  
     },  
     //內(nèi)部所用的函數(shù)  
     renderData : function(param){  
          //渲染數(shù)據(jù)。。  
     },  
     //統(tǒng)一綁定監(jiān)聽(tīng)器  
     initListeners : function(){  
          $(document.body).delegates({  
               '.btn' : function(){  
                    //點(diǎn)擊事件  
               },  
               '.btn2' : function(){  
                    //點(diǎn)擊事件2  
               },  
               '.checkbox' : {  
                    'change' : function(){  
                         //change事件  
                    }  
               }  
          });  
     }  
} 

每個(gè)模塊給一個(gè)命名空間，所有的方法都掛在上面，js文件中只做函數(shù)的定義，不立即執(zhí)行任何東西，然后在html文件中調(diào)用入口方法:publish.init()。業(yè)務(wù)邏輯都封裝到函數(shù)中，如上面的renderData，然后供其他地方調(diào)用。頁(yè)面的事件監(jiān)聽(tīng)器統(tǒng)一都注冊(cè)在body元素上，用事件代理來(lái)完成，為了避免寫(xiě)太多的on、click之類(lèi)代碼，為jQuery擴(kuò)展了一個(gè)delegates方法，用來(lái)以配置的方式統(tǒng)一綁定監(jiān)聽(tīng)器，用法如上所示。把delegates定義的代碼也放出來(lái)吧：

//以配置的方式代理事件  
$.fn.delegates = function(configs) {  
     el = $(this[0]);  
     for (var name in configs) {  
          var value = configs[name];  
          if (typeof value == 'function') {  
               var obj = {};  
               obj.click = value;  
               value = obj;  
          };  
          for (var type in value) {  
               el.delegate(name, type, value[type]);  
          }  
     }  
     return this;  
} 

基本的結(jié)構(gòu)就是這樣，沒(méi)有什么新技術(shù)，只是把現(xiàn)有的東西做了一下組合。但工作到此還遠(yuǎn)遠(yuǎn)沒(méi)有結(jié)束，在實(shí)際應(yīng)用中還會(huì)有一些東西需要處理，下面來(lái)詳細(xì)說(shuō)說(shuō)：

公共頭部底部的引用

這是一個(gè)比較棘手的問(wèn)題，一般通用的頭部和底部會(huì)放一些公共的代碼，如頁(yè)面外層結(jié)構(gòu)html代碼，站點(diǎn)使用的庫(kù)如jQuery、handlebars，站點(diǎn)通用js和css文件。在傳統(tǒng)的開(kāi)發(fā)中，通常是寫(xiě)一個(gè)單獨(dú)的文件如head.html，在其他頁(yè)面中用后端代碼如include語(yǔ)句引入，由此來(lái)進(jìn)行復(fù)用。

現(xiàn)在前后端分離后，無(wú)法依靠后端來(lái)給你渲染，所以得在前端做了。既然用了handlebars，很容易想到把公用部分寫(xiě)成一個(gè)模板，然后預(yù)編譯出來(lái)，生成一個(gè)header.js文件，然后在其他頁(yè)面引用。然而在實(shí)際操作中發(fā)現(xiàn)了一個(gè)問(wèn)題，handlebars是靜態(tài)模板，編譯后生成的字符串通過(guò)innerHTML的方式插入到頁(yè)面，在一般的模板中這樣是沒(méi)問(wèn)題的。現(xiàn)在有個(gè)問(wèn)題是header中有一些<script>標(biāo)簽，外鏈著要使用的庫(kù)，通過(guò)innerHTML插入<scirpt>標(biāo)簽，瀏覽器并不會(huì)發(fā)送請(qǐng)求加載對(duì)應(yīng)的js文件，所以就出問(wèn)題了。

搜索、嘗試了多種方法后，最終的方案定為：用document.write()將編譯結(jié)果寫(xiě)到頁(yè)面，這樣<script>標(biāo)簽?zāi)軌蛘＜虞d。所以每個(gè)頁(yè)面使用頭部的代碼就變成這樣：

<script src="static/js/tpl/head.js"></script>  
     <div id="header">  
          <script src="static/js/includeHead.js"></script>  
     </div> 

includeHead.js中的代碼如下：

function includeHead(){  
     var header = document.getElementById('header');  
     var compileHead = Handlebars.templates['head'];  
     var head = compileHead({});  
     document.write(head);  
}  
includeHead(); 

看著是有點(diǎn)別扭，不過(guò)為了實(shí)現(xiàn)功能，目前也就只能這樣了。

#p#

路由控制

如上面所述，jQuery的$.load()方法可以滿(mǎn)足加載子頁(yè)面的需求，現(xiàn)在需要解決的問(wèn)題是，不管用戶(hù)刷新頁(yè)面還是前進(jìn)后退，我們都得根據(jù)hash值來(lái)渲染對(duì)應(yīng)的視圖，其實(shí)就是路由控制。這個(gè)時(shí)候就需要監(jiān)聽(tīng)hashchange事件了，我定義了一個(gè)loadPage方法用來(lái)加載子頁(yè)面，然后綁定監(jiān)聽(tīng)器如下：

window.onhashchange = this.loadPage; 

在loadPage方法中，根據(jù)hash的值來(lái)調(diào)用$.load()方法，子頁(yè)面的初始化工作，在$.load()的回調(diào)函數(shù)中指定。

這樣做還有一個(gè)便捷之處，我們切換視圖不必手動(dòng)調(diào)loadPage方法，只需要修改頁(yè)面的hash就可以了，hash發(fā)生變化被監(jiān)聽(tīng)到，自動(dòng)加載對(duì)應(yīng)的子頁(yè)面。例如，點(diǎn)擊下一步進(jìn)入步驟二：

'.next' : function(){  
        location.href = '#step2';  
} 

如此便實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的路由控制，由于不是整站單頁(yè)面，也沒(méi)有多級(jí)路由，這樣完全可以滿(mǎn)足需求。至于SEO，就只能呵呵了，正好項(xiàng)目也不需要做SEO，否則此方法得作罷。

另外想說(shuō)的一點(diǎn)就是頁(yè)面的緩存，異步加載來(lái)的內(nèi)容可以存在localStorage中，也可以放在頁(yè)面上進(jìn)行顯隱控制，這樣用戶(hù)在頻繁切換視圖的時(shí)候無(wú)需再次請(qǐng)求，回到上一步的時(shí)候之前填好的表單數(shù)據(jù)也不會(huì)消失，體驗(yàn)會(huì)非常好。

頁(yè)面間參數(shù)傳遞

有時(shí)候我們需要給訪問(wèn)的頁(yè)面?zhèn)鲄?shù)，比如訪問(wèn)一個(gè)設(shè)備的詳細(xì)信息頁(yè)，要把設(shè)備id給傳過(guò)去，detail.html?id=1，這樣detail頁(yè)面可以根據(jù)id去請(qǐng)求對(duì)應(yīng)的數(shù)據(jù)。傳統(tǒng)由后端渲染的頁(yè)面，url中的參數(shù)會(huì)發(fā)送到服務(wù)端，服務(wù)端接收后可以再渲染到頁(yè)面上供js使用。我們現(xiàn)在不行了，請(qǐng)求頁(yè)面壓根不跟后端打交道，但這個(gè)參數(shù)是必不可少的，所以需要前端有一套傳遞參數(shù)的機(jī)制。

其實(shí)非常簡(jiǎn)單，通過(guò)location.href可以拿到當(dāng)前的url地址，然后進(jìn)行字符串匹配，把參數(shù)提取出來(lái)就可以了。看上去挺土鱉的，但工作起來(lái)良好，另外也有考慮過(guò)用cookie來(lái)傳遞，感覺(jué)有點(diǎn)麻煩。

由于這些參數(shù)通常是寫(xiě)在<a>標(biāo)簽上的，而<a>標(biāo)簽又是根據(jù)動(dòng)態(tài)數(shù)據(jù)渲染出來(lái)的（因?yàn)槭莿?dòng)態(tài)參數(shù)），我們不可能在頁(yè)面渲染完后，用js修改所有<a>標(biāo)簽的href值，給它追加一個(gè)參數(shù)。怎么辦呢？這時(shí)候handlebars就派上用場(chǎng)了，我們可以使用handlebars***的helper，在渲染頁(yè)面的時(shí)候直接查詢(xún)url中的參數(shù)，然后輸出在編譯好的代碼中。我在handlebars中注冊(cè)了一個(gè)helper，如下：

Handlebars.registerHelper('param', function(key, options){  
    var url = location.href.replace(/^[^?=]*\?/ig, '').split('#')[0];  
    var json = {};  
    url.replace(/(^|&)([^&=]+)=([^&]*)/g, function (a, b, key , value){  
        try {  
            key = decodeURIComponent(key);  
        } catch(e) {}  
 
        try {  
            value = decodeURIComponent(value);  
        } catch(e) {}  
 
        if (!(key in json)) {  
            json[key] = /\[\]$/.test(key) ? [value] : value;  
        }  
        else if (json[key] instanceof Array) {  
            json[key].push(value);  
        }  
        else {  
            json[key] = [json[key], value];  
        }  
    });  
    return key ? json[key] : json;  
}); 

這個(gè)名為param的helper可以輸出你所要查詢(xún)的參數(shù)值，然后可以直接寫(xiě)在模板中，如：

<a href="detail.html?id={{param id}}">設(shè)備詳細(xì)信息</a> 

這樣就方便多了！但是這么做有沒(méi)有問(wèn)題呢？其實(shí)是有些不***的，如果你考慮“性能”二字的話。一個(gè)url中參數(shù)的值是固定的，而你每次使用這個(gè)helper都會(huì)計(jì)算一遍，白白做了多余的事情。如果handlebars可以在模板中定義常量就好了，可惜我找遍文檔沒(méi)發(fā)現(xiàn)有這個(gè)功能。只能為了方便犧牲性能了，也正印證了我標(biāo)題中所說(shuō)的“簡(jiǎn)單粗暴”，呵呵。

數(shù)據(jù)的校驗(yàn)和處理

由于數(shù)據(jù)是由后端傳來(lái)的，有很多不確定性，數(shù)據(jù)可能不合法，或者結(jié)構(gòu)有錯(cuò)，或者直接是空的。因此前端有必要對(duì)數(shù)據(jù)做一個(gè)合法性的校驗(yàn)。借助handlebars，可以很方便的進(jìn)行數(shù)據(jù)校驗(yàn)。沒(méi)錯(cuò)，就是利用helper。handlebars內(nèi)置的helper如if、each都支持else語(yǔ)句，出錯(cuò)信息可以在else中輸出。如果需要個(gè)性化的校驗(yàn)，我們可以自己定義helper來(lái)完成，關(guān)于如何自定義helper，我之前研究了下，寫(xiě)過(guò)一篇文章：http://www.cnblogs.com/lvdabao/p/handlebars_helper.html。總之自定義helper很強(qiáng)大，可以完成你所需的任何邏輯。

數(shù)據(jù)的格式化，如日期、數(shù)字等，也可以通過(guò)helper來(lái)完成。

另外一方面，前端還應(yīng)對(duì)數(shù)據(jù)進(jìn)行html轉(zhuǎn)義，避免xss，由于handlebars已經(jīng)給做了html轉(zhuǎn)義，所以我們可以直接忽略此項(xiàng)了。

總結(jié)

本文是我剛剛參加完一個(gè)項(xiàng)目后所寫(xiě)，記錄一下整個(gè)過(guò)程遇到的問(wèn)題及處理方式，其他的一些細(xì)碎點(diǎn)如表單異步提交什么的，不是本文重點(diǎn)，不寫(xiě)了。這是我***次實(shí)踐前后端完全分離的項(xiàng)目，整個(gè)前端全由我來(lái)設(shè)計(jì)、開(kāi)發(fā)。2周時(shí)間，憑著這套方案，項(xiàng)目按期開(kāi)發(fā)完成，而且還提前完成了，預(yù)留出一天多的時(shí)間測(cè)試了一遍。

雖然開(kāi)發(fā)任務(wù)是完成了，但是回頭看一下整個(gè)方案，并不是很優(yōu)雅也沒(méi)有什么技術(shù)含量，文章開(kāi)頭提到的幾個(gè)問(wèn)題都沒(méi)有解決。所以命題為簡(jiǎn)單粗暴的方案，都是為了趕工期啊。

***，如果給我再來(lái)一次的機(jī)會(huì)，并且時(shí)間充足，我一定要嘗試用mv*方案來(lái)搞一下，或angular，或avalon。

原文出自：http://www.cnblogs.com/lvdabao/p/4204858.html