1、什么是模块化
模块化开发 ,可以一次性引入多个模块文件 ,同时也没有引入的顺序
require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。
具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()数之中。
引入时:需要注意 引入顺序 频繁引入
jquery.js
cookie.js
ajax.js
public.js
2、如何实现模块化开发(以requirejs来说)
第一步:
在页面中引入:<script src="require.js" data-main="main"></script>
data-main的值是一个入口文件 main 实际上就是 main.js
第二步: 入口函数实现:
通过cinfig方法为模块指定别名
requirejs.config({ //为引入的模块指定别名
paths:{
jquery:"jquery-1.11.1.min" //为jquery库文件指定一个别名,方便后期调用
}
})
第三步: 通过requirejs方法将写好的模块引入,并根据他们编写子代码
3、requirejs模块化开发常用的方法
①requirejs.config为模块指定别名,方便模块的引用
②requirejs将写好的模块引入,并根据他们编写子代码
有两个参数
第一个参数是一个数组:引入的每个模块名称,
第二个参数是一个回调函数,函数中就是页面要实现某个功能的子代码
③define用它编写模块(功能),在相应的地方进行引入
有两个参数
第一个参数是该模块要依赖的其它模块,是一个数组 (可以省略)
第二个参数是一个回调函数 函数中实现该模块的功能
4、关于requirejs(模块化开发)好处
①整个项目中一般不会出现全局变量(防止全局变量的污染)
②整个项目中所有模块的项目加载顺序不固定(顺序任意)
③整个项目中模块之间的执行是异步的
④整个项目实现代码均是面向对象的书写方式,便于模块的管理和维护
5、关于AMD
AMD: requirejs所倡导的就是AMD开发方式
是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
AMD推崇的是依赖前置
CMD seajs模块化 推崇的是依赖就近
es5在AMD中引入子模块 : require() 例如gulp中插件的引入问题
6、es6的模块化 :
import 和 export模块
-
- export :负责进行模块化,也是模块的输出。
- import : 负责把模块引入,也是模块的引入操作。
将es6转成es5需要通过 gulp-babel 插件完成 (babel配置过程)
(此时运行:babel src/index.js –o dist/index.js )
npm install -g babel-cli 全局安装babel 打开cmd直接安装
npm install --save-dev babel-preset-es2015 babel-cli 本地gulp项目下安装babel
项目目录创建文件,新建-自定义文件: .babelrc ,输入代码:
{
"presets":[
"es2015"
],
"plugins":[]
}
,再次运行 babel src/index.js –o dist/index.js ,就可以正常的将es6代码转成es5了
export 多变量定义 :
var a = 9
var b = 8
var c = 90
export{ a,b,c } 起别名用 as
执行 import 导入的内容 :
import {name} from "./temp.js";
babel-node src2/xx.js
7、模块化
requireJs seaJS CommonJS ES6 module
异步 异步 同步 同步
AMD CMD common import
8.模块化规范
如何导出模块 如何接收模块?
define定义 return导出 require接收(requireJs )
module.exports 导出 require 导入(commonJS)
export default 导出 import 导入 (ES6 module)