第2章{2-1什么是模块系统}_什么是2+1板块-CSDN博客

什么是模块系统

javascript维护之困

记得，刚来淘宝的时候，我维护的是淘宝收藏夹，那时候Kissy的还是1.1.6版本，没有模块系统，代码是1万4+，最开始是维护在1个文件，维护崩溃了，编写代码经常翻着翻着，不知道跑哪了。

后来，分成多个功能逻辑js文件，使用ant打包成一个文件，新的问题出现，调试非常麻烦，代码依旧缺乏约束性。

一刀切引入所有逻辑代码，无法按需加载，影响页面性能。

那是地雷满地、战火连天的年代，直到javascript模块系统诞生,KISSY1.2.0的发布，也搭上时代的列车。

CommonJS、AMD、CMD

CommonJS、AMD、CMD 三者的关系和区别，是前端经典的面试题目哦。

CommonJS是非常广泛的规范，包含了大量的内容，不止局限在浏览器端（比如Node.js），AMD、CMD都是其模块系统部分的子集，在CommonJS的wiki中找到践行CommonJS的javascript框架。

CommonJS 一个模块的代码 test.js：

var $ = require('jquery');
exports.test = function () {};

将 test 方法暴露给外部使用。

上面的代码明显没办法直接在浏览器端运行，所以就有了AMD 模块系统规范，可以保证模块文件可以在浏览器端正常执行。

RequireJS 就是AMD 模块系统规范的实现者:

define(['jquery'] , function ($) { 
    return function () {};
});

除了 AMD 还有 CDM 模块系统规范，SeaJs是其实现者：

define(function(require, exports) { 
    // 获取模块 a 的接口
    var a = require('jquery');
    exports.test = function () {};
});

相对于AMD，个人更推崇CMD规范，写法风格上更接近 CommonJS ，更接近 NodeJs 的写法。

KISSY的模块系统

KISSY的模块系统遵循的是KMD规范：

KISSY.add(function(S,Node){
    var $ = Node.all;
    return function(){};
},{requires:["node"]});

模块使用KISSY.add()包裹，现在已经不推荐使用该风格（Kissy文档和gallery存在大量KMD写法的代码，请无视），Kissy已经支持commonjs的风格：

KISSY.add(function(S,require,exports,module){
    var $ = require('node');
    exports.test = function () {};
});

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>什么是模块系统</title>
<script src="//g.alicdn.com/kissy/k/1.4.7/seed-min.js" charset="utf-8"></script>
</head>
<body>
<script>
//定义一个模块
KISSY.add('demo-mod',function(S,require,exports,module){
var Node = require('node');
var $ = Node.all;
exports.test = function () {
$('body').html('CommonJs');
};
});
//使用模块
KISSY.use('demo-mod',function(S,demo){
demo.test();
})
</script>
</body>
</html>