require.js模块化开发

模块化开发的缘由：

一、引入的js过多而后在加载的过程当中容易出现假死的状态，致使页面会发生白屏

二、变量名的问题 在多人协做开发的时候容易出现变量名的冲突 面向对象

三、引入优先级的问题

模块化开发分类：

 (1).requireJS:

    参考网址：http://www.requirejs.cn/ 

    RequireJS 是基于 AMD 规范的模块加载器，它不依赖于任何 JavaScript 新语言特性，能够直接运行在浏览器环境中。这是个比较老、曾经很是流行的模块加载器，它主要提供的功能是： 

1. 提供了模块化得支持。
2. 能够异步、按需加载模块，这样就能够在用到某个 JS 模块的时候再去加载它，能提升首屏加载速度。

ES6 的 Modules：

1. 提供了模块化的支持。

可是 es6 Modules 是JavaScript新特性，目前浏览器还不支持，不能直接用，就算之后能够直接用了，若是但愿作到按需、异步加载的话也须要配合相应的加载器来加载 JS 文件。

可是若是你用 webpack 的话，直接用 ES6 是最好的选择。由于：

1. webpack 能够经过 babel-loader 来转义 ES6 为浏览器能够支持的方式。
2. webpack 的 code split 功能能够实现按需、异步加载。

是彻底覆盖 RequireJS 的全部功能的。

 (2).seaJs

 (3).commonJS

 (4).module

AMD CMD commonjs

模块化：将一个大的功能拆分红若干个小的功能 每个功能都是一个模块

原则：高内聚 低耦合

require使用

0、require其实就是一个js模块加载器

一、引入requirejs

二、设置异步加载 defter async="true"

三、data-main：加载一个入口文件

四、遵循requirejs的规范AMD

 

无论AMD规范仍是CMD规范仍是COMMONJS规范
所谓的规范就是若是定义模块 如何接受模块

AMD如何定义模块

define()

 

 

 

/*

 

require：第一个参数是模块名字  第二个参数是一个回调函数 

回调函数里面有（n：有多少个模块就有多少个参数）个参数

 */

//先去引入配置文件  当配置文件引入之后再去加载你须要的一些模块

require(["config"],function() {

require(["jquery","highcharts","layer","alert"],function($,his,layer,alert) {

alert.init();

console.log($,layer,alert)

})

})

步骤

一、引入require

二、引入入口文件

三、配置config文件

四、将config文件在appjs文件内进行引入  而后在去加载其余模块

五、书写本身的模块 必须遵循AMD规范 用define定义  定义完毕之后将当前函数return出去

六、配置当前模块的路径

七、在app.js中引入改模块 

八、调用该方法

 */