### 闲话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版本后，我们再去研究这门语言的魅力。
