模块化

 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)