require.js模块化开发

时间:2022-09-17 22:19:04

模块化开发的原因:

1、引入的js过多然后在加载的过程中容易出现假死的状态,导致页面会发生白屏

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

3、引入优先级的问题

模块化开发分类:

(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模块加载器

1、引入requirejs

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

3、data-main:加载一个入口文件

4、遵循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)
})
})

步骤

1、引入require
2、引入入口文件
3、配置config文件
4、将config文件在appjs文件内进行引入  然后在去加载其他模块
5、书写自己的模块 必须遵循AMD规范 用define定义  定义完毕以后将当前函数return出去
6、配置当前模块的路径
7、在app.js中引入改模块 
8、调用该方法
 */