闲话js前端框架（4）——组件化？有没有后端的事？

时间：2015-08-20 21:01:28 阅读：299 评论：0 收藏：0 [点我收藏+]

闲话js前端框架

前端人员=美工+设计+代码+测试
——题记

专题文章：

一、从avalonjs的模板说起
二、庞大的angularjs
三、再也不想碰DOM
四、组件化？有没有后端的事？
五、再看自己一年前设计的微型渲染引擎
六、在浏览器标准上做文章
七、抛开浏览器，构建应用容器
八、为何Flash、银光和Java都在网页端一蹶不振

本文属西风逍遥游原创, 转载请注明出处: 西风世界 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版本后，我们再去研究这门语言的魅力。