张克军提出的“组件化就是函数式界面开发”这一说法我是难以接受的，函数式界面开发就让它好好地叫“函数式组件化”吧，不然我们会在所谓的“传统UI框架”和“函数式界面开发”之间出现一个Gap，岂不是又要造个词给填上，多累……

我前面说会有一个Gap，这个Gap很可能就是我们现在想用“组件化”这个定义去表达的一些点，我想在此做一些个人的见解

我将之理解为以下几要素：

组件是对逻辑的封装，不限于图形元素。即我们可以把if做成组件、把一个倒计时做成组件、把一段动画做成组件、把路由做成组件、把数据架构做成组件，而这些并不能称为控件

组件具备单个可移植性，即“随加载随用”，不需要为其准备复杂的基础条件（如引入样式、引入框架等）。然而这一点现有那些所谓组件库做得并不好，技术上也不大现实

组件是声明式定义的，而非命令式。这个不想多说，很大程度上是自己主观的一个想法

而上面最重要的就是第一点，所以要问我什么是“组件化开发”，我的说法是：

把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式

这与传统开发框架的最大区别就是统一了图形元素与非图形元素，除此之外我再想不出其它真正体现区别的点了

在这个概念下，包括router、ajax、module loader、timer、animation、interval等，都是组件，共享统一的生命周期管理和对外接口，且都是声明式地进行组合

我的一位同事告诉我去年的深JS上，有位淘宝的朋友的话题叫做“前端组件服务化”，这里面提的那些个概念，是很符合我对“组件化”的认识的，他要是不给再强安个“服务化”的噱头就好了--

不过话说回来，在这个要求之下，组件其实不是那么好进行抽象设计的，随便说几个例子，有难的也有简单的：

非图形元素的各种需求如何统一接口，如timer和ajax

组件可以横向组件，但是纵向复用如何解决，如希望任何图形元素都可以实现被鼠标拖拽的效果，则鼠标拖拽应该也是个组件，这个组件与其它组件的关系是什么

有些组件对其可被组合的组件是有要求的，比如HTML里就不大好意思把一个<p>放进一个<span>里，这一点如何在组件上表达（实现不难，表达比较难）

一些我们原本想当然认为纯的小函数的东西，是不是也能当组件玩，比如underscore.pick要不要也是个组件

前端模块化

在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀

这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码

模块

既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可

import java.util.ArrayList;

遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。

一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了

规范形成的过程是痛苦的，前端的先驱在刀耕火种、茹毛饮血的阶段开始，发展到现在初具规模，简单了解一下这段不凡的历程

函数封装

我们在讲函数的时候提到，函数一个功能就是实现特定逻辑的一组语句打包，而且JavaScript的作用域就是基于函数的，所以把函数作为模块化的第一步是很自然的事情，在一个文件里面编写几个相关函数就是最开始的模块了

function fn1(){

statement

}

function fn2(){

statement

}

这样在需要的以后夹在函数所在文件，调用函数就可以了

这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。

对象

为了解决上面问题，对象的写法应运而生，可以把所有的模块成员封装在一个对象中

var myModule={

var1: 1,

var2: 2,

fn1: function(){

},

fn2: function(){

}

}

这样我们在希望调用模块的时候引用对应文件，然后

myModule.fn2();

这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系

看似不错的解决方案，但是也有缺陷，外部可以随意修改内部成员

myModel.var1= 100;

这样就会产生意外的安全问题

立即执行函数

可以通过立即执行函数，来达到隐藏细节的目的

var myModule=(function(){

var var1= 1;

var var2= 2;

function fn1(){

}

function fn2(){

}

return{

fn1: fn1,

fn2: fn2

};

})();

这样在模块外部无法修改我们没有暴露出来的变量、函数

上述做法就是我们模块化的基础，目前，通行的JavaScript模块规范主要有两种：CommonJS和AMD

CommonJS

我们先从CommonJS谈起，因为在网页端没有模块化编程只是页面JavaScript逻辑复杂，但也可以工作下去，在服务器端却一定要有模块，所以虽然JavaScript在web端发展这么多年，第一个流行的模块化规范却由服务器端的JavaScript应用带来，CommonJS规范是由NodeJS发扬光大，这标志着JavaScript模块化编程正式登上舞台。

定义模块

根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性

模块输出：

模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象

加载模块：

加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象

前端模块化的本质就是组件化、复用性，是为了提高开发效率而生的。

在网站发展的早期，前端页面上的JavaScript仅是用来做页面逻辑交互和表单验证的，随着Web2.0的兴起，各种前端技术也层出不穷，前端代码越来越臃肿了。而JavaScript由于设计时的定位问题，导至没有“类”的概念，导致以前的JS代码写的都很分散，没有“模块化”的思想。

那时我们开发网站，前端页面就存在一个“复用性”的问题，比如你写了给网站A写了一个表单验证处理逻辑，等开发网站B时还是存在表单验证逻辑，还需要再次写代码，浪费精力。

虽然可以写成公共函数库，但不可避免的存在多个函数库某个函数命名冲突的情况，所以前端“工程化”难以实现。这时，国外很多大牛就意识到“模块化”的重要性了，于是推出了不少模块化的实现框架。

前端模块化能给我们带来以下便利：

组件化，提高生产力，代码扩展性强；

解决了命名冲突，减少了全局空间的污染；

解决了文件依懒问题，让开发者关注于业务的实现。

转载请注明：片头模版 » 什么是组件化什么是模块化(什么叫组件化开发)