您的位置：首页 > Web前端 > JavaScript

第2章{2-1什么是模块系统}

2016-01-30 17:21 525 查看

什么是模块系统

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>

任务

CommonJS 是个好东西，推荐阅读其wiki

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript kissy 框架

相关文章推荐

新的分享

章节导航