Javascript 模块化学习

Javascript 模块化

很久之前看过Echarts 中的模块化写法，那时看的很痛苦，也没有看懂。最近在看“JavaScript Web 富应用开发”突然懂了这个过程。真是模块化小白，模块化不懂Nodejs看的也就痛苦了，最近发现代码写的真是乱

之前用的最多的是script标签导入大量的js文件，经常js文件写了一大堆，而且有些Js的顺序还要考虑。对于复杂的应用来说必须要引入依赖管理系统。
性能方面：
浏览器需要针对每个Javascript文件发起一次Http请求，尽管这些请求是放入异步队列的，但大量的HTTP连接总会造成性能的下降，每次连接包含额外的HTTp头信息、Cookie，并且都要TCP三次握手。

CommonJS模块化的标准

模块的声明

// math.js
exports.per=function(value,total){
     return ((value/total)*100);
}
// application.js

var Maths=require("./math.js")
asserEqual(Maths.per(50,100),50);

//模块化后
require.define("maths",function(require,exports){
    exports.per=function(value,total){
    return ((value/total)*100);
     }
}

require.define("application",function(require,exports){
    var per=require("./maths").per;
    asserEqual(per(50,100),50);
}),["./maths"]

RequireJS 异步模块定义
为了加载JavaScript文件，只需传入它们的路径到require函数，并且指定回调callback ,当依赖加载完成后执行这个回调函数：

<script>
 require(["lib/application","lib/utils"],function(application,utils){
    // 回调函数内容
})
</script>

requireJS 中直接采用define ()函数，由于模块在不同的文件，因此无须显示的命名。第一个参数是依赖，由一个字符串数组组成，随后是回调函数

define(["underscore","./utils"],function(_,utils){
  return ({size:10;})
})

// 兼容CommonJS标准的 exports 返回的一些变量
define(function(require,exports){
    var mod=require("./relative/name");
    exports.value="exposed";
})

看了Echarts中的自定义解析模块ESL.js

阮一峰的博文写的很不错 http://www.ruanyifeng.com/blog/2012/11/require_js.html