JavaScript 的模块化

原创 年树先生 随笔 前端技术 12210阅读 21 天前 举报

为什么需要模块化开发?

JavaScript的模块化

随着代码复杂程度的提高, 项目也变得越来越难维护, JavaScript模块化 也因此油然而生, 这应该是大家最熟悉的一种加载方式, 但是缺点也比较明显

  • 所有的模块都处于全局作用域下, 容易造成命名冲突
  • 依赖关系不明显, 比如 main.js 中有使用 jquery, 那么 jquery 就一定要先加载,
  • 但是从引入方式中我们无法直观的察觉依赖关系, 不利于维护

CommonJs

一个文件就是一个模块, 其内部定义的变量, 方法都处于该模块内, 不会对外暴露.

主要语法:

使用 require 来加载模块
使用 exports 或者 module.exports 暴露模块中的内容

demo

新建 a.js, 导出 name 和 sayHello

在 b.js 中引入 a 并调用

由于 CommonJs 是同步加载的模块的, 在服务端(node), 文件都在硬盘上, 所以同步加载也无所谓, 但是在浏览器端, 同步加载就体验不好了. 所以 CommonJs 主要使用于 node 环境下.

AMD

AMD 全称为 Asynchromous Module Definition(异步模块定义), 实现了异步加载模块. require.js 实现了 AMD 规范

主要语法:

require([module], callback) // 导入
define(id, [depends], callback) // 导出模块
新建 a.js, 输入以下内容

在 test.html 中调用 a 模块

CMD

CMD规范 是阿里的玉伯提出, sea.js 实现。 实现了按需加载

与 AMD 的区别:

对于依赖的模块 AMD 提前执行,而 CMD 是延迟执行
CMD 推崇依赖就近, AMD 推崇依赖前置

ES6

ES6 模块化方案是最规范的方案, 未来也是主流, 对于我们来说也是经常使用与熟悉的. 不过现在的浏览器还不兼容, 使用需要 babel 转码

使用 export 导出模块
使用 import 导入模块

了解更多
本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复