資訊專欄INFORMATION COLUMN
摘要：應用的功能這個應用是一個個人簡歷生成器。比較好的教程有這一個。這樣的命名污染問題自然顯而易見。而且發出多次請求也會影響性能。明顯不利于維護。然而我希望能夠不發生變化，因為是在文件的前提下的標簽頁，不能換一個標簽就重建一個。
為什么學習backbone？這是個好問題。在這個前端框架爆炸的年代，比起backbone，對開發來說有更多更好的選擇，react，vue，angular等等。但這些在使用這些框架的時候，心里卻總是有寫不踏實的感覺。MVVM雙向綁定是怎么實現的？Virtual DOM，diff算法在react里面是怎么實現的？大框架不好的地方就是，對于新手來說，真正認識其中的原理很不容易。原理不會變，而API是會變的。
所以我決定靜下心先學習backbone，并認真地研究其中的原理。（這里挖一個坑。這幾天在讀backbone和underscore的源碼，爭取寫一篇源碼解析的文章。）
學習框架最好的方式就是寫一個應用出來，于是乎我就寫了一個應用來練手。中間浪費了很多很多時間在完全沒有意義的糾結上面，所以最后是花了很長時間才搞定的。
這一篇文章是一個總結，比較個人化。主要是說說收獲和經驗。
應用的功能這個應用是一個個人簡歷生成器。前端用backbone + jquery + underscore + webpack + scss，后端用express。可以通過瀏覽器界面填寫個人相關信息，把數據發送到后端，用nodejs來負責存儲數據，生成靜態文件。具體詳情可以見github的地址。
相關學習資料backbone屬于典型的，學的時候覺得很簡單，自己寫的時候一臉懵逼的框架。相比react，react學的時候覺得難度不小，而且加上redux之后對一些函數式編程的東西偶爾會感到很費解。可是跟著redux官網推薦的教程慢慢看之后還是能夠比較輕松地寫出一個過得去的應用的。然而backbone確是相反，學的時候覺得不難，真正寫的時候卻感覺很多東西很難控制，而且要思考的地方比用大框架多不少。
比較好的教程有這一個。這個教程里面講了mvc的基礎知識，backbone的基礎知識，以及一個todo應用，一個帶后端的應用還有一個和用requirejs進行模塊化處理的應用。根據這個教程老老實實過一遍其實大致就差不多了（然而我只看了todo...）。但是要深入理解并用backbone寫大應用還是有不小難度的。
模塊化這里用了webpack。說實話，webpack真的是神一般的存在。AMD也好，CMD也好，ES6模塊化標準也好都可以輕松打包壓縮，還有很多很方便的插件，不能再爽...backbone的年代（說的好像很久遠了一樣...）可能模塊化還不算特別普及，所以很多例子也是用script引入的。這樣的命名污染問題自然顯而易見。而且發出多次請求也會影響性能。因此通過模塊化打包還是非常必要的。
model和collection在backbone中，model和collection相對于view的代碼量是小很多很多的。在里面主要處理的是view所呈現的數據。而且比較重要的是這個model會與后端數據庫的數據類型有很密切的聯系。一般來說，后端的接口要求“比較RESTful”，前后端以json作為數據傳遞的方式。這樣，從后端獲取數據的時候fetch到處理也比較容易，本地的數據save到服務器的數據處理也會更加自然（都是json）。當然這也不是硬性規定的，用傳統的jquery的ajax也是可以的，但這可能就違背了backbone原本的初衷了(?)。在本人寫的這個應用里面就沒有遵守這一點。后面會說明原因。
model里面常常要覆蓋的是default，initialize方法，如果需要對save以及fetch的數據做特殊處理，則需要重寫toJSON和parse方法。
在我的這個應用里面，存儲的數據結構比較特殊。簡歷有幾個小的嵌套的collection，有幾個不是collection的attributes，算是比較復雜的結構。因此重寫了toJSON和parse方法，但是后來沒有用到重寫的parse方法，因為發現直接用jquery的ajax更加方便直接。重寫的方法見這個鏈接，具體來說就是當需要保存并post數據到數據庫的時候，把model的屬性（這個屬性不是attributes里面的那個，而是真正意義上的屬性，類似a.b）解析為json結構，然后再保存。而fetch到數據的時候就用得到的數據（一般是json）初始化幾個collection，然后直接加到model的屬性(a.b這種形式的屬性)中去。
。其實這種情況應該是用backbone-relational之類的庫來解決的，但能解決問題就好。
在view中，collection和model會根據用戶操作view而發生變化，而變化之后又會影響view的數據呈現。而關于model和collection的其他操作還有一些增刪查改之類的可以在具體情況下使用。這些操作也是常常寫在view中的。
view是一個大塊頭，這個應用中view占了代碼中最大的部分。
view，顧名思義，就是視圖，數據的呈現。這里常常和模板配合。在寫后端express應用的時候，因為ejs有include的功能，因此模板就被切成了一小塊一小塊，這樣可以避免html主文件過大。但是backbone的很多例子都是直接一大塊一大塊地把模板塞到html主文件里面。明顯不利于維護。因此參考了別人的代碼，寫了下面的輔助函數，把視圖的html文件讀取進來，并添加到相應的view的模板里面，全部讀取完之后就調用回調函數。代碼如下：
var loadTemplate = function(views, callback) {
var deferreds = [];
$.each(views, function(index, view) {
if(require("./views/" + view)) {
// 把異步事件，即從文件中讀取html文件的函數，壓入deferreds中
deferreds.push($.get("../tpl/" + view + ".html", function(data) {
// 修改相應的view的template
require("./views/" + view).prototype.template = _.template(data);
}));
} else {
alert(view + " not found");
}
});
// 把所有異步操作都完成之后才調用callback
$.when.apply(null, deferreds).done(callback);
}
用這種方法來處理html過大問題不算最好的方法，但是在這里能夠很好地解決問題。
在view中主要的是events，render，initialize。在initialize里面可以通過listenTo來監聽一些model事件。
有時候在寫initialize的時候要自己render，但很多情況下不需要。render函數里面返回this之后，可以在其他地方，比如router中把model注入模板中然后把render返回的html直接插入頁面中。
var view = new formView({});
this.$container.html(view.render().el);
router
backbone的路由功能非常方便。在我的app應用里面整個程序的入口就是router的函數。可以通過不同的url綁定不同的函數，在函數中調用視圖的函數來實現不同路由的不同的html片段。
然而在實際操作的時候，可能是因為個人能力還不夠，有一個困難從頭到尾都無法解決。后來用了比較不好的辦法勉強替代了。問題如下：假如要定義路由"/:tab/:filename"，每次路由發生改變的時候都會調用路由函數。如果在這個路由函數里我新建了一個model實例，那當我想改變tab的時候，就不得不重新觸發路由函數，重新新建model。然而我希望model能夠不發生變化，因為tab是在filename文件的前提下的標簽頁，不能換一個標簽就重建一個model。這樣做要如何實現呢？想了三天到最后我還是放棄了...（也有可能自己想的需求是有點奇葩..）
原來直接window.print()就可以調用瀏覽器打印功能了呀。有個小收獲就是有關瀏覽器打印的尺寸問題，要根據A4的比例和邊距做調整，然后確定頁面中心的區域的比例。第二個收獲就是發現淘寶的那個icon庫 iconfont 真的非常不錯，用起來也非常方便，以后可以去借一下素材hhh
遺憾這個小應用還是有很多不足的地方
UI不足，簡歷頁面設計不足。（想爆了腦袋都不知怎么搞比較好看...）
功能還不夠強大，如果很多內容填寫能夠更加細致就好了...
如果要部署github的話，還不夠方便。
node里面生成頁面那里用了一些拼接字符串的方法，更加不是很優雅...
總結通過這個backbone應用的編寫，對于backbone算是有一個初步的了解了吧。對于MVC框架也有了一個大體的認識。最近在看backbone和underscore的源碼，明后天會開始寫一篇源碼解讀的文章，總結一下backbone里面值得學習的地方。（現在還在看，覺得history里面對于瀏覽器兼容的考慮處理挺有意思，Events要看點設計模式的東西）。這個暑假的最后就慢慢地看多幾遍backbone，好好學習一個！
在backbone方面我還是個小白，文中有錯誤請輕噴，相互學習！謝謝大家！
代碼在這里，希望能幫到你~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80128.html
摘要：事件關于路由觸發事件是通過兩個函數來完成的，它們分別是和前者會檢測路由是否發生了改變，如果改變了就會觸發函數并調用函數，而后者會通過路由片段來找到相關的事件函數來觸發。 注意：強烈建議一邊閱讀源碼一邊閱讀本文。 終于到了backbone源碼解讀的最后一篇，這一篇和前面幾篇時間上有一定的間隔（因為要回學校有一堆亂七八糟的事...）。在這一篇里面會講解Bakcbone的sync & rou...
1. 開場 1.1 MVC？ MVC是一種GUI軟件的一種架構模式。它的目的是將軟件的數據層（Model）和視圖（view）分開。Model連接數據庫，實現數據的交互。用戶不能直接和數據打交道，而是需要通過操作視圖，然后通過controller對事件作出響應，最后才得以改變數據。最后數據改變，通過觀察者模式更新view。（所以在這里需要用到設計模式中的觀察者模式） 1.2 Smalltalk-80...
摘要：視圖主要是用模版引擎加上數據進行渲染。服務端用框架提供數據接口，配合中和的交互操作，主要是獲取，更新，保存，刪除等。測試框架使用斷言庫使用。本次項目用的文件，略圖如下，好了，通過前面的編碼，系統已經初步完成了。現在需要部署發布到線上了。 myblog 博客站點地址：http://www.snayan.com。項目地址：https://github.com/snayan/myblog 本...
摘要：以為例構造函數的內容構造函數的內部一般會做以下幾個操作各種給內部對象設置屬性。為什么呢源碼做出了解釋。在里面會調用用戶傳入的回調函數并觸發事件表示已經同步了。整個的源碼事實上就是這兩組東西。 1. 開場 強烈建議一邊看著源碼一邊讀本文章，本文不貼大段代碼。源碼地址。在寫backbone應用的時候，說實話，大部分的時間都是在寫這三個模塊的內容。關于這三個模塊的分析網上隨隨便便就能找到一堆...
摘要：原文精髓，觀察者模式和事件交互邏輯更需要設計模式設計模式將人們在以往的開發過程中的經驗加以總結，以指導后人。的事件根據上面討論，要實現觀察者模式，事件是非常重要的機制。總結雖然是模式的框架，但是其核心卻是界面的觀察者模式和事件機制。 前言 本人并非專業的前端，只是由于需要被迫轉做一段時間的前端，一段時間以來開始探索javascript上的MVC模式，最終打算從Backbone下手。在...
閱讀 1739·2021-09-26 09:46
閱讀 3017·2021-09-22 15:55
閱讀 2608·2019-08-30 14:17
閱讀 3027·2019-08-26 11:59
閱讀 1809·2019-08-26 11:35
閱讀 3155·2019-08-26 10:45
閱讀 3152·2019-08-23 18:28
閱讀 1106·2019-08-23 18:21
