码迷,mamicode.com
首页 > Web开发 > 详细

模块化开发(requireJS)

时间:2018-11-08 00:20:08      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:pat   限制   bug   for   规范   requirejs   dep   dia   前置   

模块化

在前端使用模块化开发,可以将代码根据功能实施模块的划分,每个模块功能(职责)单一,在需要更改对应的功能的时候,只需要对指定的模块进行修改,其他模块不受任何影响。

为什么要进行前端模块化?

  1. 达到公共模块的复用
  2. 可以很好的解决全局变量污染的问题
  3. 可以很好的解决各个功能之间的依赖关系

如何实现前端模块化开发

JavaScript本身不支持模块化开发,但是可以通过一些手段来实现。

CommonJS是一个规范,用来规定模块化开发的标准。

CommonJS由于一系列的限制,在前端开发当中,并不能很好的被实现。
Nodejs中对于CommonJS这个规范有很好的实现。

CommonJS虽然不能再前端开发中很好进行实现,但是后面有人在CommonJS的基础上做了其他的改变。

AMD Async Module Define (require.js) 也是一个规范,在CommonJS的基础上产生的 //依赖前置

CMD Common Module Define (sea.js) [玉伯] 也是一个规范,在CommonJS的基础上产生的 //依赖就近 as lazy as possible

逗乐:AMD没有明显的BUG,但是CMD明显没有BUG

如何实现模块 (require.js)

requirejs本身就是一个js文件,这个文件实现了AMD规范,所以可以帮助我们在前端开发中实现模块化!

模块的定义

//如果当前模块没有任何依赖项
define(function(){
    
});

//如果一个模块要引用另外一个模块,就将模块的名称放在第一个参数的数组中
define(["模块","模块"], function(形参, 形参){

    //模块和形参一一对应,形参就表示每个对应的模块的返回值
    //可以通过当前函数的形参,接收其他模块的返回值!
    //定义模块的时候,可以有返回值,也可以没有返回
    //如果有返回值,就可以将返回值交给调用该模块的模块使用
})

模块的使用

require函数可以用来引用模块,require的第一个参数为数组,里面写所有要引用的模块的名称

//只引用模块,不执行其他代码
require([]);

//引用模块,并且执行一些操作!
require([], function(){
    //可以通过当前函数的形参,接收其他模块的返回值!
})

入口文件

在引用requirejs的script标签中,可以指定一个入口文件(data-main),当require.js文件加载完成之后,会自动执行,这个入口文件中的代码!

模块的路径

  1. 默认情况下,模块的路径是以调用模块的页面的目录为基础的!
  2. 当使用入口文件的时候,模块的路径是以入口文件的目录作为基础的
  3. 如果使用了require.config配置了baseUrl,就一配置的baseUrl为基础查找文件

自定义模块路径查找

require.config({
    baseUrl: "/"
});

使用require 加载传统的js

例如加载bootstrap, 因为bootstrap是基于jQuery,所以要手动的设置依赖项

在require.config({
//在shim属性中,通过deps属性,为bootstrap添加依赖项
shim: {

    bootstrap:{
        deps: []
    }
}

})

jquery支持模块化,jquery.cookie也支持模块化!

使用requirejs加载非模块化的内容

如果加载的非模块化的内容有依赖项,就要在config中,在shim属性中,通过deps属性,为这个非模块化的内容添加依赖项

如果加载的非模块化的内容要返回内容给我们使用,就要在config中,在shim属性中,通过exports属性,来设置返回的内容,这个内容可以是非模块化的文件中任意一个变量名(字符串)

匿名模块 和 具名模块

//匿名模块的定义
define([], function(){
    
})

//具名模块的定义
define("模块名", [], function(){
    
})

//具名模块中的模块名,必须和paths中设置的路径的名称一致,才能够访问,不然会出现路径错误
graph LR
A-->B
graph LR
A-->B
sequenceDiagram
A->>B: How are you?
B->>A: Great!
gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d
gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d

模块化开发(requireJS)

标签:pat   限制   bug   for   规范   requirejs   dep   dia   前置   

原文地址:https://www.cnblogs.com/jerrypig/p/9926388.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!