### 閑話js前端框架
前端人員=美工+設計+代碼+測試
——題記
**專題文章：**
一、從avalonjs的模板說起
二、龐大的angularjs
三、再也不想碰DOM
四、組件化？有沒有后端的事？
五、再看自己一年前設計的微型渲染引擎
六、在瀏覽器標準上做文章
七、拋開瀏覽器，構建應用容器
八、為何Flash、銀光和Java都在網頁端一蹶不振
本文屬 西風逍遙游 原創, 轉載請注明出處: 西風世界 [http://blog.csdn.net/xfxyy_sxfancy](http://blog.csdn.net/xfxyy_sxfancy)
### 四、組件化？有沒有后端的事？
提到組件化，有一家的組件化做的是最牛的，沒錯，就是微軟。ASP.NET的框架， 有一個非常顯著的特點，就是很多的組件，你會發現是前后端代碼混在一起的。這樣好么？
### 組件化，封裝引起的弊病
這點開始很多人不理解，因為前后端代碼混在一起，你根本不知道具體的工作方式是怎樣的，于是也不知道具體的工作效率，那么就造成了一個嚴重的問題，如果基礎的組件工作的不好的話，那么對于代碼開發將會是一場噩夢。
ASP.NET的問題就是這樣，我們都知道，在VS中拖控件做出來的網站沒法用，為什么？因為第一，結構混亂，代碼都封裝起來了，性能優化太困難。其次，很多控件在操作時，都不使用異步，導致整個頁面的頻繁刷新，所以真正做項目時就會發現，能用的控件沒幾個。
這就說明一個問題，組件化不是很好么？為什么做到如此極致的組件化卻沒人用了呢？
其實，組件化這種方式有天生的問題，第一，組件的定制化不強，因為大多開發的組件是通用組件，用多次復用才有價值，而網站開發中，由于前端代碼的靈活性太強，導致完整的封裝非常困難，而一旦完整封裝后，靈活性就喪失了。第二，組件的封裝不是全部嚴密的封起來就OK了，例如CSS樣式，你為了保證組件樣式的統一，固定了CSS，那么假若你的項目支持換膚，你的組件是否應該換膚呢？
說白了，我們并不想要封裝好的組件，而是一套通用的方便的封裝方式。如果可以，我們自己公司當然可以封裝適合自己的組件庫，那樣就非常方便了。
### 自己封裝？
首先說，組件的封裝是很困難的，原因是前端的內容太雜了，而單單想封裝一個前端模塊，就很費事了，下面我來介紹一下requirejs。
requirejs是前端模塊化的基礎框架之一，當然不一定非要用這款，你可以用其他的AMD兼容的js加載器。
requirejs主要是在做主要一件事，異步加載js，并且保障他們的依賴關系正確。
其加載模塊的使用方法如下：
~~~
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// some code here
});
~~~
而編寫一個符合AMD加載器的模塊則要使用define函數：
~~~
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
~~~
require.js還提供一系列插件，實現一些特定的功能。
例如text和image插件，則是允許require.js加載文本和圖片文件：
~~~
define([
'text!review.txt',
'image!cat.jpg'
],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
~~~
好在，通過AMD加載器，已經能夠實現前端的組件化，代碼、數據、樣式，都整合到了一起。
然后，后端怎么辦呢？
### Meteor的做法
Meteor是一款非常強大的Web開發框架，它不區分前端和后端，是使用nodejs作為服務器，這樣就能將同一款模型應用到前端或后端中去。
同時他還使用叫做分布式數據協議 (Distributed Data Protocol, DDP) 的協議來處理實時通信。
我們發現，在Meteor中，前后端代碼是混合在一起的：
~~~
if (Meteor.isClient) {
// counter starts at 0
Session.setDefault('counter', 0);
Template.hello.helpers({
counter: function () {
return Session.get('counter');
}
});
Template.hello.events({
'click button': function () {
// increment the counter when button is clicked
Session.set('counter', Session.get('counter') + 1);
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
~~~
下面是模板資源
~~~
<head>
<title>my_cool_app</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
~~~
另外提一點，Meteor是依賴mongoDB作為后端服務器的，所以要事先安裝好才行，而且要注意，mongoDB在NTFS的文件系統下工作的好像有點不正常。
不過Meteor通過混合前后端代碼，實現了快速開發和輕松構架，但其也有缺陷，主要是靈活性差，后端數據庫想換下Oracle都做不到，那么這往往是作為原型工具來使用。
另外Meteor還有一個重要的突破，是他實現了實時前后端通信，這個通信在支持WebSocket的情況是是相當于Tcp長連接，所以效率非常高。
### JetBrains的做法
JetBrains出品，必屬精品。
這群家伙真的很厲害，他們搞出一門新語言來解決這個問題。
Kotlin是一門神奇的語言，他能編譯成能在JVM上、Android虛擬機上、Javascript引擎上跑的代碼。
這也就說明，對于同一個模型，他能編譯成不同的目標代碼，那么我們就能用這種方式用同一種語言，構架前后端代碼，整合成統一的模塊。
當然Kotlin現在還不成熟，我也沒有仔細研究具體的編譯方法，待他成熟一些，發布1.0版本后，我們再去研究這門語言的魅力。
