摘要：應(yīng)用的功能這個(gè)應(yīng)用是一個(gè)個(gè)人簡(jiǎn)歷生成器。比較好的教程有這一個(gè)。這樣的命名污染問(wèn)題自然顯而易見(jiàn)。而且發(fā)出多次請(qǐng)求也會(huì)影響性能。明顯不利于維護(hù)。然而我希望能夠不發(fā)生變化，因?yàn)槭窃谖募那疤嵯碌臉?biāo)簽頁(yè)，不能換一個(gè)標(biāo)簽就重建一個(gè)。

為什么學(xué)習(xí)backbone？這是個(gè)好問(wèn)題。在這個(gè)前端框架爆炸的年代，比起backbone，對(duì)開(kāi)發(fā)來(lái)說(shuō)有更多更好的選擇，react，vue，angular等等。但這些在使用這些框架的時(shí)候，心里卻總是有寫不踏實(shí)的感覺(jué)。MVVM雙向綁定是怎么實(shí)現(xiàn)的？Virtual DOM，diff算法在react里面是怎么實(shí)現(xiàn)的？大框架不好的地方就是，對(duì)于新手來(lái)說(shuō)，真正認(rèn)識(shí)其中的原理很不容易。原理不會(huì)變，而API是會(huì)變的。

所以我決定靜下心先學(xué)習(xí)backbone，并認(rèn)真地研究其中的原理。（這里挖一個(gè)坑。這幾天在讀backbone和underscore的源碼，爭(zhēng)取寫一篇源碼解析的文章。）

學(xué)習(xí)框架最好的方式就是寫一個(gè)應(yīng)用出來(lái)，于是乎我就寫了一個(gè)應(yīng)用來(lái)練手。中間浪費(fèi)了很多很多時(shí)間在完全沒(méi)有意義的糾結(jié)上面，所以最后是花了很長(zhǎng)時(shí)間才搞定的。

這一篇文章是一個(gè)總結(jié)，比較個(gè)人化。主要是說(shuō)說(shuō)收獲和經(jīng)驗(yàn)。

這個(gè)應(yīng)用是一個(gè)個(gè)人簡(jiǎn)歷生成器。前端用backbone + jquery + underscore + webpack + scss，后端用express?？梢酝ㄟ^(guò)瀏覽器界面填寫個(gè)人相關(guān)信息，把數(shù)據(jù)發(fā)送到后端，用nodejs來(lái)負(fù)責(zé)存儲(chǔ)數(shù)據(jù)，生成靜態(tài)文件。具體詳情可以見(jiàn)github的地址。

backbone屬于典型的，學(xué)的時(shí)候覺(jué)得很簡(jiǎn)單，自己寫的時(shí)候一臉懵逼的框架。相比react，react學(xué)的時(shí)候覺(jué)得難度不小，而且加上redux之后對(duì)一些函數(shù)式編程的東西偶爾會(huì)感到很費(fèi)解?？墒歉?b>redux官網(wǎng)推薦的教程慢慢看之后還是能夠比較輕松地寫出一個(gè)過(guò)得去的應(yīng)用的。然而backbone確是相反，學(xué)的時(shí)候覺(jué)得不難，真正寫的時(shí)候卻感覺(jué)很多東西很難控制，而且要思考的地方比用大框架多不少。

比較好的教程有這一個(gè)。這個(gè)教程里面講了mvc的基礎(chǔ)知識(shí)，backbone的基礎(chǔ)知識(shí)，以及一個(gè)todo應(yīng)用，一個(gè)帶后端的應(yīng)用還有一個(gè)和用requirejs進(jìn)行模塊化處理的應(yīng)用。根據(jù)這個(gè)教程老老實(shí)實(shí)過(guò)一遍其實(shí)大致就差不多了（然而我只看了todo...）。但是要深入理解并用backbone寫大應(yīng)用還是有不小難度的。

這里用了webpack。說(shuō)實(shí)話，webpack真的是神一般的存在。AMD也好，CMD也好，ES6模塊化標(biāo)準(zhǔn)也好都可以輕松打包壓縮，還有很多很方便的插件，不能再爽...backbone的年代（說(shuō)的好像很久遠(yuǎn)了一樣...）可能模塊化還不算特別普及，所以很多例子也是用script引入的。這樣的命名污染問(wèn)題自然顯而易見(jiàn)。而且發(fā)出多次請(qǐng)求也會(huì)影響性能。因此通過(guò)模塊化打包還是非常必要的。

在backbone中，model和collection相對(duì)于view的代碼量是小很多很多的。在里面主要處理的是view所呈現(xiàn)的數(shù)據(jù)。而且比較重要的是這個(gè)model會(huì)與后端數(shù)據(jù)庫(kù)的數(shù)據(jù)類型有很密切的聯(lián)系。一般來(lái)說(shuō)，后端的接口要求“比較RESTful”，前后端以json作為數(shù)據(jù)傳遞的方式。這樣，從后端獲取數(shù)據(jù)的時(shí)候fetch到處理也比較容易，本地的數(shù)據(jù)save到服務(wù)器的數(shù)據(jù)處理也會(huì)更加自然（都是json）。當(dāng)然這也不是硬性規(guī)定的，用傳統(tǒng)的jquery的ajax也是可以的，但這可能就違背了backbone原本的初衷了(?)。在本人寫的這個(gè)應(yīng)用里面就沒(méi)有遵守這一點(diǎn)。后面會(huì)說(shuō)明原因。

model里面常常要覆蓋的是default，initialize方法，如果需要對(duì)save以及fetch的數(shù)據(jù)做特殊處理，則需要重寫toJSON和parse方法。

在我的這個(gè)應(yīng)用里面，存儲(chǔ)的數(shù)據(jù)結(jié)構(gòu)比較特殊。簡(jiǎn)歷有幾個(gè)小的嵌套的collection，有幾個(gè)不是collection的attributes，算是比較復(fù)雜的結(jié)構(gòu)。因此重寫了toJSON和parse方法，但是后來(lái)沒(méi)有用到重寫的parse方法，因?yàn)榘l(fā)現(xiàn)直接用jquery的ajax更加方便直接。重寫的方法見(jiàn)這個(gè)鏈接，具體來(lái)說(shuō)就是當(dāng)需要保存并post數(shù)據(jù)到數(shù)據(jù)庫(kù)的時(shí)候，把model的屬性（這個(gè)屬性不是attributes里面的那個(gè)，而是真正意義上的屬性，類似a.b）解析為json結(jié)構(gòu)，然后再保存。而fetch到數(shù)據(jù)的時(shí)候就用得到的數(shù)據(jù)（一般是json）初始化幾個(gè)collection，然后直接加到model的屬性(a.b這種形式的屬性)中去。

。其實(shí)這種情況應(yīng)該是用backbone-relational之類的庫(kù)來(lái)解決的，但能解決問(wèn)題就好。
在view中，collection和model會(huì)根據(jù)用戶操作view而發(fā)生變化，而變化之后又會(huì)影響view的數(shù)據(jù)呈現(xiàn)。而關(guān)于model和collection的其他操作還有一些增刪查改之類的可以在具體情況下使用。這些操作也是常常寫在view中的。

view是一個(gè)大塊頭，這個(gè)應(yīng)用中view占了代碼中最大的部分。

view，顧名思義，就是視圖，數(shù)據(jù)的呈現(xiàn)。這里常常和模板配合。在寫后端express應(yīng)用的時(shí)候，因?yàn)?b>ejs有include的功能，因此模板就被切成了一小塊一小塊，這樣可以避免html主文件過(guò)大。但是backbone的很多例子都是直接一大塊一大塊地把模板塞到html主文件里面。明顯不利于維護(hù)。因此參考了別人的代碼，寫了下面的輔助函數(shù)，把視圖的html文件讀取進(jìn)來(lái)，并添加到相應(yīng)的view的模板里面，全部讀取完之后就調(diào)用回調(diào)函數(shù)。代碼如下：

var loadTemplate = function(views, callback) {
    var deferreds = [];
    $.each(views, function(index, view) {
        if(require("./views/" + view)) {
            // 把異步事件，即從文件中讀取html文件的函數(shù)，壓入deferreds中
            deferreds.push($.get("../tpl/" + view + ".html", function(data) {
                // 修改相應(yīng)的view的template
                require("./views/" + view).prototype.template = _.template(data);
            }));
        } else {
            alert(view + " not found");
        }
    });

    // 把所有異步操作都完成之后才調(diào)用callback
    $.when.apply(null, deferreds).done(callback);
}

用這種方法來(lái)處理html過(guò)大問(wèn)題不算最好的方法，但是在這里能夠很好地解決問(wèn)題。

在view中主要的是events，render，initialize。在initialize里面可以通過(guò)listenTo來(lái)監(jiān)聽(tīng)一些model事件。

有時(shí)候在寫initialize的時(shí)候要自己render，但很多情況下不需要。render函數(shù)里面返回this之后，可以在其他地方，比如router中把model注入模板中然后把render返回的html直接插入頁(yè)面中。

var view = new formView({});
this.$container.html(view.render().el);

backbone的路由功能非常方便。在我的app應(yīng)用里面整個(gè)程序的入口就是router的函數(shù)?？梢酝ㄟ^(guò)不同的url綁定不同的函數(shù)，在函數(shù)中調(diào)用視圖的函數(shù)來(lái)實(shí)現(xiàn)不同路由的不同的html片段。
然而在實(shí)際操作的時(shí)候，可能是因?yàn)閭€(gè)人能力還不夠，有一個(gè)困難從頭到尾都無(wú)法解決。后來(lái)用了比較不好的辦法勉強(qiáng)替代了。問(wèn)題如下：假如要定義路由"/:tab/:filename"，每次路由發(fā)生改變的時(shí)候都會(huì)調(diào)用路由函數(shù)。如果在這個(gè)路由函數(shù)里我新建了一個(gè)model實(shí)例，那當(dāng)我想改變tab的時(shí)候，就不得不重新觸發(fā)路由函數(shù)，重新新建model。然而我希望model能夠不發(fā)生變化，因?yàn)?b>tab是在filename文件的前提下的標(biāo)簽頁(yè)，不能換一個(gè)標(biāo)簽就重建一個(gè)model。這樣做要如何實(shí)現(xiàn)呢？想了三天到最后我還是放棄了...（也有可能自己想的需求是有點(diǎn)奇葩..）

原來(lái)直接window.print()就可以調(diào)用瀏覽器打印功能了呀。有個(gè)小收獲就是有關(guān)瀏覽器打印的尺寸問(wèn)題，要根據(jù)A4的比例和邊距做調(diào)整，然后確定頁(yè)面中心的區(qū)域的比例。第二個(gè)收獲就是發(fā)現(xiàn)淘寶的那個(gè)icon庫(kù) iconfont 真的非常不錯(cuò)，用起來(lái)也非常方便，以后可以去借一下素材hhh

這個(gè)小應(yīng)用還是有很多不足的地方

UI不足，簡(jiǎn)歷頁(yè)面設(shè)計(jì)不足。（想爆了腦袋都不知怎么搞比較好看...）

功能還不夠強(qiáng)大，如果很多內(nèi)容填寫能夠更加細(xì)致就好了...

如果要部署github的話，還不夠方便。

node里面生成頁(yè)面那里用了一些拼接字符串的方法，更加不是很優(yōu)雅...

通過(guò)這個(gè)backbone應(yīng)用的編寫，對(duì)于backbone算是有一個(gè)初步的了解了吧。對(duì)于MVC框架也有了一個(gè)大體的認(rèn)識(shí)。最近在看backbone和underscore的源碼，明后天會(huì)開(kāi)始寫一篇源碼解讀的文章，總結(jié)一下backbone里面值得學(xué)習(xí)的地方。（現(xiàn)在還在看，覺(jué)得history里面對(duì)于瀏覽器兼容的考慮處理挺有意思，Events要看點(diǎn)設(shè)計(jì)模式的東西）。這個(gè)暑假的最后就慢慢地看多幾遍backbone，好好學(xué)習(xí)一個(gè)！

在backbone方面我還是個(gè)小白，文中有錯(cuò)誤請(qǐng)輕噴，相互學(xué)習(xí)！謝謝大家！

代碼在這里，希望能幫到你~