### 閑話js前端框架
前端人員=美工+設計+代碼+測試
——題記
**專題文章：**
一、從avalonjs的模板說起
二、龐大的angularjs
三、再也不想碰DOM
四、組件化？有沒有后端的事？
五、再看自己一年前設計的微型渲染引擎
六、在瀏覽器標準上做文章
七、拋開瀏覽器，構建應用容器
八、為何Flash、銀光和Java都在網頁端一蹶不振
本文屬 西風逍遙游 原創, 轉載請注明出處: 西風世界 [http://blog.csdn.net/xfxyy_sxfancy](http://blog.csdn.net/xfxyy_sxfancy)
### 二、龐大的angularjs
Angularjs是目前最常用、功能極強，被廣泛應用于生產實踐中的一套框架。而且由于學習的人多，基本專業點的前端都熟練掌握，這樣也比較好招人。
但唯一的問題就是，太！大！了！
需要引入的一個庫就近800K，而且還只是最核心的功能，要用動畫啊，路由啥的還得再引入其他庫，這么恐怖的大小真讓人無奈。
看了看核心的代碼行數，居然有22000+行，再看看avalon，壓縮后也就50K+，這么鮮明的反差，真希望angularjs能好好縮減代碼規模，優化結構。
### 設計初衷
AngularJS是為了克服HTML在構建應用上的不足而設計的。現有的瀏覽器，用的底層技術實在是太過古老，像HTML這種基礎的技術設計自93年。史上第一款獲得普遍使用的瀏覽器，正是Mosaic瀏覽器，第一版于1993年4月22日發布。瀏覽器，到現在已經20余年的歷史，但原理性的技術從來沒有改變。HTML是靜態的為了表達富文本而設計的，但現在的網站越來越活，動態性不斷增強，功能已經和客戶端幾乎等同。
Angularjs，正是看到了互聯網發展的需要，設計出來這款方便做網絡APP的框架，從此避免了容易出錯的dom操作。
通過數據綁定、數據模型，這些概念，Angularjs很適合做CRUD應用，這樣，代碼非常的靈活和統一。
### 示例
~~~
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!
</body>
</html>
~~~
同樣，angularjs用的也是動態模板，可以非常方便的綁定事件到元素上。
### 在HTML5應用和手機應用上引入angularjs
另外一點，如果你喜歡用瀏覽器技術制作手機應用或桌面應用，那么angularjs也許能表現的更好，html5應用，往往都有和底層語言或后臺通信的接口，使用js，能夠直接獲取到需要用的數據。而angularjs也就很方便的將js模型中的數據給呈現出來。并且，在移動應用上，js變成了本地存儲，再也不用擔心體積龐大帶來的網站速度減慢問題了。
例如流行的跨平臺手機應用開發工具phonegap，那么很不錯，非常適合和angularjs搭配食用。
安裝方法很簡單
~~~
sudo npm install -g phonegap
~~~
然后你還需要選用一款html模擬手機UI的UI框架，可以是jQueryMobile，或者是強大的Ionic
~~~
sudo npm install -g jquery-mobile 或
sudo npm install -g ionic
~~~
安裝angularjs：
~~~
sudo npm install -g angularjs
~~~
使用時：
~~~
phonegap create my-app
cd my-app
phonegap run android
~~~
幾個包安裝時間比較長，可能需要耐心等待。
嘗試在樣例代碼上修改，引入angularjs來渲染界面，比原生應用開發要方便多了。
### 附錄：早期瀏覽器發展史
