

首页  思维导图  详情



JS模块化

2021-07-30 17:46:03   0  举报





AI智能生成

js模块化学习和使用路线图,让编程更简单

思维导图

异步

模块化

源码

模版推荐

作者其他创作

大纲/内容

理解

1. 什么是模块/模块化?

生活中的例子——“模块化手机”：

分支主题

将一个复杂的程序依据一定的规则(规范)拆分成几个块(文件), 并进行组合在一起。

块的内部数据或实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。

分支主题

模块化的进化史

分支主题

子主题

分支主题

子主题

分支主题

2. 为什么要模块化?

分支主题

3. 模块化的好处

避免命名冲突(减少命名空间污染)

更好的分离, 按需加载

更高复用性

高可维护性

4. 页面引入加载script

分支主题

问题

请求过多

依赖模糊

难以维护

模块化规范

CommonJS

规范

说明

http://wiki.commonjs.org/wiki/Modules/1.1

每个文件都可当作一个模块

在服务器端: 模块的加载是运行时同步加载的

在浏览器端: 模块需要提前编译打包处理

基本语法

暴露模块

module.exports = value

exports.xxx = value

问题: 暴露的本质到底是什么?exports对象

引入模块

require(xxx)

第三方模块:xxx为模块名

自定义模块: xxx为模块文件路径

实现

服务器端实现

Node.js

http://nodejs.cn/

浏览器端实现

Browserify

http://browserify.org/

也称为CommonJS的浏览器端的打包工具

区别Node与Browserify

Node.js运行时动态加载模块(同步)

Browserify是在转译(编译)时就会加载打包(合并)require的模块

AMD

规范

说明

Asynchronous Module Definition(异步模块定义)

https://github.com/amdjs/amdjs-api/wiki/AMD

专门用于浏览器端, 模块的加载是异步的

基本语法

定义暴露模块

//定义没有依赖的模块 define(function(){ return 模块 })

分支主题

//定义有依赖的模块 define([&apos;module1&apos;, &apos;module2&apos;], function(m1, m2){ return 模块 })

引入使用模块

//入口js配置 require([&apos;module1&apos;, &apos;module2&apos;], function(m1, m2){ 使用m1/m2 })

//页面引入使用 &lt;script type=&quot;text/javascript&quot; src=&quot;js/libs/require.js&quot; data-main=&quot;js/main.js&quot;&gt;&lt;/script&gt;

实现(浏览器端)

Require.js

http://www.requirejs.cn/

http://www.ruanyifeng.com/blog/2012/11/require_js.html

CMD

规范

说明

Common Module Definition(通用模块定义)

https://github.com/seajs/seajs/issues/242

专门用于浏览器端, 模块的加载是异步的

模块使用时才会加载执行

基本语法

定义暴露模块

//定义没有依赖的模块 define(function(require, exports, module){ exports.xxx = value module.exports = value })

分支主题

//定义有依赖的模块 define(function(require, exports, module){ //引入依赖模块(同步) var module2 = require(&apos;./module2&apos;) //引入依赖模块(异步) require.async(&apos;./module3&apos;, function (m3) { }) //暴露模块 exports.xxx = value })

引入使用模块

//入口js配置 define(function (require) { var m1 = require(&apos;./module1&apos;) var m4 = require(&apos;./module4&apos;) m1.show() m4.show() })

//页面引入使用 &lt;script type=&quot;text/javascript&quot; src=&quot;js/libs/sea.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; seajs.use(&apos;./js/modules/main&apos;) &lt;/script&gt;

实现(浏览器端)

Sea.js

http://www.zhangxinxu.com/sp/seajs/

ES6

规范

说明

http://es6.ruanyifeng.com/#docs/module

依赖模块需要编译打包处理

语法

暴露模块-export:

1. 分别暴露：export 暴露内容 2. 统一暴露：export {xxx, yyy} 3. 默认暴露：export defalut 暴露内容

引入模块-import: