为什么前端需要模块化?
原生js为什么不支持模块化?
怎么进行模块化?
模块化的过程中遇到的问题?
common.js sea.js
在node中,要想引入第三方js代码,需要用require来加载该代码,(此时与 html 中的 script 标签的功能一样)
将 node 的模块化思想移植到前端之中( 浏览器中 )
node 模块资源有一个特点, 就是存储在本地.
node 在设计 api 的时候将 大部分 api 都设计成异步的. 但是 require 是同步的.
因此在浏览器中不能使用该规则的. 阻塞, 网络等一些列问题.
引入了一个新的规则 AMD( asynchronous module definition )
在 require 很成功情况下, 它的语法有点问题( 提前加载 )
define( [ 所有的依赖 ], function () {
// 自己的代码
});
特点是在执行自己的代码之前, 所有依赖必须加载完毕
玉伯提出了按需的加载的思想, 引入了 CMD ( common module definition )规则, 开发了 sea.js
define( function () {
// 要用某一个模块的时候 require( '....' )
// require.async( ... )
// 自己的代码
});
使用 requirejs
模块的定义与加载
如何定义模块
语法:
define( '模块名', [ '依赖模块1', '依赖模块2', ... ], function ( ) {
// 自己的模块
});
第一个参数是用于描述该模块的名字, 如果写了称该模块为命名模块, 一般不写, 表示的是匿名模块
第二个参数是一个数组, 里面存储的是所有的依赖模块名( 路径 )
第三个参数是回调函数, 就是自己定义模块的地方, 如果有加载依赖模块, 利用参数传入
注意: 一个模块应该定义到一个文件中, 一个文件中只允许有一个模块.
加载模块的语法
require( [ '模块名' ], function () { } )
加载模块的时候可以依次加载一个模块, 也可以依次加载多个模块, 使用数组描述即可
第二个参数一般不需要, 它表示的是如果模块加载完成以后要立即使用, 则写在函数中.