模块化与requirejs

 首先,什么是模块化?模块化即将复杂的代码切分成一个个模块,不同功能的模块各自放到单独的文件中,使用模块极大的提高了代码的可维护性同时也可以避免全局空间的污染。

requirejs

 requirejs遵循AMD(异步模块定义)规范,实现了JS文件的异步加载,避免页面失去响应,管理页面之间的依赖性,便于代码编写和维护,
 模块通过define函数定义在闭包中,格式为:

  define(id?: String, dependencies?: String[], factory: Function|Object)

 id为模块名(可选),dependencies(可选)为依赖的的多个模块,由数组包裹,factory包裹模块具体实现,可以是一个函数(此时返回值就是模块的输出)或对象(本身为模块的输出),一个简单的requirejs实现:

html中:
  <script data-main="scripts/main.js" src="scripts/require.js"></script>
  //data-mian指定入口
入口js:
  require(["./exam1","./exam2"],function(exam1,exam2){
    console.log(exam1);        //{name:"tom",age:18}
    console.log(exam2);        //"今晚打老虎"
    })
exam1模块:
  define({name:"tom",age:18})
exam2模块:
  define(function(){
      return "今晚打老虎"
    })

模块内部引用依赖

 前面提到define函数的三个参数,前两个从参数(id,dependencies)都是可选,dependencies存在时,factory的参数为各模块的返回值,而当dependencies不存在时,factory参数默认为require,exports,module,在factory内部可以通过require指定依赖:

a.js中:
define(function(require){
  var b=require("b")
  console.log(b)        //{name:"b"}
})
b.js中:
define({name:"b"})

依赖jQuery

 在入口js中编写简单配置:

requirejs.config({
  paths:{
    "jquery":"jquery-3.2.0"     
  }
})

require(["jquery"],function($){
  $("div").css("color","#f00")        //div中字体变色
})

 之后各个模块就可以通过jqery这个名字来自己依赖jQuery了,除此之外,还可以在配置中使用shim配置模块对jquery的依赖:

exam1.js中:
requirejs.config({
    paths:{
        "jquery":"jquery-3.2.0"
    },
    shim:{
        exam2:["jquery"],        //给模块exam2配置jQuery的依赖
    }
})
require(["exam2"],function(){    //exam1中只指定了exam2的依赖
    $("div").css("color","#f00")    //字颜色变红
})
exam2中:
define(function(){
    $("div").css("font-size","20px")    //字体到20px
})

 以上通过shim配置exam2.js模块依赖jQuery,从而exam2.js中jQuery可以使用,依赖exam2.js的exam1.js中jQuery也可以使用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前面一篇文章写过一些模块的原理和怎么实现模块化,但是在具体的项目当中怎么实现呢。我们这里介绍下require的使用...
    avery1阅读 760评论 0 0
  • 模块化 模块化是什么? 为什么要使用模块化? 为了更好地复用 减少全局变量污染 解决功能之间的依赖关系 模块化的实...
    getElementsByMK阅读 471评论 0 1
  • 什么是requireJS? requireJS发挥的作用 简单总结起来就2点 改善了用户体验,它使js文件异步加载...
    阿波罗程序猿阅读 850评论 0 0
  • 1. 为什么要使用模块化? 什么是模块化:一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的...
    饥人谷_楠柒阅读 1,053评论 0 1
  • 我:我在中山,你在哪? 女儿:我在姑妈家(跟外甥女说话了) 外婆在一旁,你在自己家呀 女儿:妈妈,哥哥呢? 我:哥...
    朵朵v阅读 162评论 0 0