IT宅.com 2013-06-10 3694 閱讀
Javascript架構(gòu)每次談到架構(gòu)，都感覺有點遠了，還不到時候談?wù)撨@個，但是看了豌豆莢web版的規(guī)劃和技術(shù)架構(gòu)的選取之后，確實挺有感觸的。
好的框架可以提高開發(fā)效率，一個項目比較完整的架構(gòu)，需要考慮到協(xié)同，代碼管理，調(diào)試環(huán)境，開發(fā)框架，資源優(yōu)化，部署等等?；诂F(xiàn)有的架構(gòu)之上做開發(fā)，并不只是簡單地填充代碼，而是在熟悉這套開發(fā)模式的基礎(chǔ)之上，了解整體的架構(gòu)，并與其他框架對比，必要時深入去研究下框架的實現(xiàn)和優(yōu)缺點，積累更加全面的軟件知識，才可以從整體上去考慮一個軟件的設(shè)計。
在這個開源的世界里，做一個程序很多時候都可以找到很多不錯的開源框架，從而更加快捷的搭建出自己的開發(fā)框架。J2EE開發(fā)框架的成熟度就不說了。而在web app或者web游戲這一塊，框架也是百花齊放，但是如果我們不去仔細做調(diào)研對比，就不知道哪一個框架時我自己的。俗話說，不要重造輪子，但是很多時候，因為找不到合適的取代框架或者第三方類庫，我們都會自己去開始為自己的project做一個框架，可是這樣隨著而來的問題是：項目的deadline已經(jīng)不允許這樣做了，而且很多時候，根據(jù)自己現(xiàn)有的水平，做出來的框架也不一定就是好用的。
看了豌豆莢web版的規(guī)劃和技術(shù)架構(gòu)的選取，確實感覺挺不錯的。
1、首先提及了需要解決的事情：協(xié)同，代碼管理，調(diào)試環(huán)境，開發(fā)框架，資源優(yōu)化，部署。
2、然后是設(shè)計RESTful Data API，前后端可以并行工作。
3、開源了整個項目到GitHub，這點我非常喜歡。
4、選取AMD的理由：定義模塊，自動化管理，CSS/HTML加載，靈活的Build工具
5、選取Sass & Compass的理由：可編程的CSS，自動合成Sprite
6、接下來需要考慮的就是工作流，腳本任務(wù)，類庫管理：分別采用了YO，GRUNT，BOWER
7、接下來，就是根據(jù)這些框架類庫搭建環(huán)境了，在熟悉了的情況下，在一臺新的電腦下只要十分鐘就可以搭建好開發(fā)環(huán)境了
8、接下來便是尋找一個合適的MVC框架，分別嘗試了Backbone和Knockout，分別對比了其優(yōu)缺點：
Backbone：
優(yōu)勢：
1、精致，抽象的數(shù)據(jù)同步模型
2、清晰的結(jié)構(gòu)，易于擴展
缺陷：
1、Wiew層功能薄弱
2、缺乏常用功能
Knockout：
優(yōu)勢：
1、雙向數(shù)據(jù)綁定，寫View很方便
2、可以通過插件擴展功能
缺陷：
1、只有View層解決方案
2、基于事件的數(shù)據(jù)更新，不容易優(yōu)化
最后選取的MVC框架是Angular，因為Angular的一些理念很好，也許可以用在大家的項目中
現(xiàn)在就來分析一下Model-View-ViewModel:
8.1、整體架構(gòu)圖如下：
web app的架構(gòu)
8.2、使用了angular的依賴注入：
angular.module('snappea', ['ng']) .service('photos', function($http){ this.fetch = function(){ return $http.get('http://snappea.com/photos'); }; }) .controller('galleryController', function($scope, photos){ $scope.photos = []; $scope.fetch = function(){ $scope.photos = Photos.fetch(); }; }) .directive('counter', function(){ return function($scope, $element){ $element.on('click', function(){ $scope.fetch(); }); $scope.$watch('photos.length', function(value){ $element.text('Total' + value + 'photos.'); }); }; });
總結(jié)使用之后的優(yōu)點：
1、MVC嚴格分層
2、依賴注入控制訪問權(quán)限
3、良好的可測試性
良好的可測試性
8.3、基于DOM的模板
8.4、基于dirty-check的數(shù)據(jù)更新機制
事件缺少context，可能導(dǎo)致一系列問題：
難于debug和定位
事件泛濫，容易沖突，維護難度大
難于批量優(yōu)化
dirty-check會循環(huán)的檢查所有數(shù)據(jù)，直到不再有變化，最后一次性渲染，難點在于如何保證即時觸發(fā)
可能導(dǎo)致數(shù)據(jù)變化的事件：DOM Event, Timeout XHR, Worker， etc...
8.5、最大的收益：控制UI變化的時機和節(jié)奏，優(yōu)化渲染性能
8.6、最后就是項目的部署了
有時候我們覺得使用框架會很沒意思，覺得自己像個機器人，做一些無用功，但是反過來思考，卻可以更加快速的讓你接觸到更多的知識，如果在空閑之余對這些框架的原理進行研究并對比各種同類框架的優(yōu)缺點，在這些基礎(chǔ)之上，相信也有能力去編寫一個自己想要卻找不到的框架了，你的思考深度決定過了你的興趣程度。
有了這些第三方的API作為架構(gòu)之后，即使你是一個人在寫項目，你也絕對不是一個人在戰(zhàn)斗，因為你已經(jīng)身處開源世界了。
總結(jié)：
對于急著使用的技術(shù)，快速入門，做一個簡單demo，整體閱讀API，前提是一定要弄清楚demo的每一行代碼的作用
多使用第三方框架或者類庫提高開發(fā)效率
在空余時間，多把握好，去閱讀一下第三方框架或者類庫的源代碼，找到吸引你的地方，多聯(lián)想思考，寫寫技術(shù)博文
基于上面一點的學(xué)習(xí)和總結(jié)，如果下一次你真的發(fā)現(xiàn)沒有這樣的可以被使用的輪子時，你就可以著手創(chuàng)建一個新的類庫了
平時作為個人的練習(xí)，還是可以根據(jù)自己近期的收獲，寫一個簡單的框架練習(xí)一下的。
Javascript架構(gòu)作者：
IT宅.com 專業(yè)技術(shù)分享站
原文地址：
開源技術(shù)架構(gòu) – Web App架構(gòu), 感謝原作者分享。
→
Chrome插件開發(fā)實例 – 時間通知（notifications） ←
Chrome 插件開發(fā)小記發(fā)表評論
