模块化

 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)
 
原文地址:https://www.cnblogs.com/cqdd/p/10420118.html