前端学习 模块化编程

1 为何要模块化？

 在阮一峰的博客中已经阐述得很是清楚了

http://www.ruanyifeng.com/blog/2012/11/require_js.html

 

2 模块化编程

 模块化也就是加载js，加载js依赖的管理和使用过程，因为js存在同步和异步加载模式相应的也就有了同步和异步加载模式，即cmd，amd同步主要用于加载时间很短，好比nodejs的本地加载，而异步加载amd则用于

很耗时间的场景中。这些都是有commonjs规范中制约着。

 

3 AMD的实现

requirejs，和curljs二者都实现了amd加载的方式，实际项目中requirejs使用较多

 

4 requirejs

其实requirejs有一个js目录的约定吧，他约定咱们的js目录以下，appjs为咱们的模块入口

• www/
  • index.html
  • js/
    • app/
      • sub.js
    • lib/
      • jquery.js
      • canvas.js
    • app.js

1）requirejs加载js模块

经过require.config配置的paths进行，这里有一个根目录即baseUrl，这个很好理解，即js所在的相对根目录吧。

通paths配置的都不是直接在baseUrl目录下的js文件，他们多是在本地其余目录，页多是在网络cdn中 如

paths : {
"jquery" : ["https://cdn.bootcss.com/jquery/2.2.3/jquery.min"],
"BMap":["http://api.map.baidu.com/api?v=2.0&ak=MR2hswnEZnwAQM2jLL6IOF5i"],
"Backbone":["https://cdn.bootcss.com/backbone.js/1.3.3/backbone-min"],
"Underscore":["https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min"]
}

对于非requirejs标准模块化的好比早期的jquery，backbonejs ，underscroejs等等，经过shim方式来转换为标准的模块即

shim:{
　　"jbox":{
　　　　deps:["jquery"],
　　　　exports:"Jbox"
　　},
　　"BMap":{
　　　　exports:"BMap"
　　},
　　"Backbone":{
　　　　deps:["Underscore","jquery"],
　　　　exports:"Backbone"
　　},
　　"Underscore":{
　　　　exports:"_"
　　}
}

 

这里能够理解为一个js库可能依赖其余js库，好比jquery插件一定依赖juqery，那么这个模块向外暴露后的经过exports进行导出，也就是说一个模块依赖谁，而后向外暴露的命名空间是什么就能够了，因此兼容了老的js库

 

2）标准的模块

requirejs实现了标准模块的定义方式，即经过define函数进行如

最简单的一个

(function($){

　　return {aa:"xxx"};
})(jQuery)

定义一个模块的时候，模块也可能依赖其余库，经过[""]数组方式申明依赖，经过function的方式定义一个模块，至于函数有没有返回，返回的是一个对象，仍是一个函数可依据需求来肯定

 

3）循环依赖

有时候一个模块a依赖b，反过来b又依赖a，就产生了循环依赖，固然循环依赖通常来讲仍是应该在设计上进行解决，那么若是真的出现了循环依赖了，怎么办呢？

好比说在模块b中，define(["a"],function(a){

　　其实此时a为undefine，那么再次加载一次就能够了

     var a =require(["a"]);

})

4)包加载

有时候js组件是以package形式提供，其中package经过json配置文件是包的元数据文件，它描述了包的属性，如名称，版本，做者，维护，地址等等

按照requirejs 的约定包中应当包含一个mainjs文件做为包的命名空间根文件即入口文件。在requirejs中经过配置的方式来引入包如

这也是官方api使用的说明


5）require插件
require插件包括了domReady，async等等，这个能够经过github中开源插件说明中找到名下载使用


5 前景
因为前端的不断发展requirejs做为commonjs规范的一种实现，在某些框架中已经直接包含，或者因为requirejs配置的复杂性使用了更好的方式解决了模块化编程require.config({
    "packages": ["cart", "store"] }); require(["cart", "store", "store/util"], function (cart, store, util) { //use the modules as usual. });

 

  参考文档：

官方：http://www.requirejs.cn/

阮一峰：http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html