育知同创前端培训干货分享—模块化开发

模块化开发概念

把JS文件划分开，避免全部冗余在一起

为什么需要模块化开发？

• 使文件更加清晰

• 模块之间的可以互相引用

• html中引入JS更加方便快捷

AMD、CMD、CommonJS规范介绍

• AMD是RequireJS在推广过程中对模块定义的规范化产出

Asynchomous Module Definition（异步模块定义）

中文API

• CMD是Sea.JS在推广过程中对模块定义的规范化产出

• CommonJS是NodeJS使用的一种模块化方式

RequireJS

• require.js是一个JavaScript文件和模块载入器

• 实现了JS文件的异步加载，避免网页失去响应

• 管理模块之间的依赖性，便于代码的编写与维护

RequireJS流程简述

1. 使用requirejs时，会把所有的js都交给requirejs来管理，把data-main指向main.js

2. 通过在main.js里面定义的require方法或者define方法，requirejs会把这些依赖和回调方法用一个数据结构保存起来

3. 当页面加载时，requirejs会根据这些依赖预先把需要的js通过document.createElement的方法引入到DOM中

4. 由于依赖的JS也是按照requirejs的规范来写的，所以他们也会有define或者require方法，同意类似的第二步这样循环向上查找依赖，同样进行保存

5. 当js里需要用到依赖所返回的结果时（通常是一个键值对对象），requirejs便会把之前那个保存回调方法的数据结构里面的方法拿出来并且运行，然后把结果给需要依赖的方法

特殊说明：本身依赖的模块会比本身先加载

RequireJS基本使用

异步加载

同步加载，时间固定，按照代码的位置来。如果是异步加载，加载的时间不固定。

配置主模块

app.js

变量名 require 和 requirejs完全一致

• baseUrl ：配置公共路径

• paths ：路径和名称的映射关系

• shim ：解决模块不支持requirejs和前置依赖等其它问题

引入模块

定义模块

模块名称的问题

命名模块 | 匿名模块

jQuery源码，Line：9806

使用RequireJS定义模块的时候，’define()’函数有三个参数：

• 参数一，字符串，代表模块的名称，如果填写了，则必须使用

• 参数二，当前模块所依赖的其它模块

• 参数三，回调函数，参数为依赖的模块对应的映射