前端学习 模块化编程

夙愿已清 提交于 2020-03-26 06:52:29

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中通过配置的方式来引入包如

require.config({
    "packages": ["cart", "store"]
});

require(["cart", "store", "store/util"],
function (cart,   store,   util) {
    //use the modules as usual.
});这也是官方api使用的说明5)require插件require插件包括了domReady,async等等,这个可以通过github中开源插件说明中找到名下载使用5 前景由于前端的不断发展requirejs作为commonjs规范的一种实现,在某些框架中已经直接包含,或者由于requirejs配置的复杂性使用了更好的方式解决了模块化编程

 

  参考文档:

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

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!