关于JS模块化的知识点分享


Posted in Javascript onOctober 16, 2019

模块化是一个语言膨胀的必经之路,它能够帮助开发者拆分和组织代码。

Module模式

在模块化规范形成之前,JS开发者使用Module设计模式来解决JS全局作用域的污染问题。Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。在JavaScript中,Module模式使用匿名函数自调用 (闭包)来封装,通过自定义暴露行为来区分私有成员和公有成员。

let myModule = (function (window) {
  let moduleName = 'module' // private
  // public
  function setModuleName(name) {
   moduleName = name
  }
  // public
  function getModuleName() {
   return moduleName
  }
  return { setModuleName, getModuleName } // 暴露行为
 })(window)

上面例子是Module模式的一种写法,它通过闭包的特性打开了一个新的作用域,缓解了全局作用域命名冲突和安全性的问题。但是,开发者并不能够用它来组织和拆分代码,于是乎便出现了以此为基石的模块化规范。

模块化规化

1. CommonJS

CommonJS主要用在Node开发上,每个文件就是一个模块,没个文件都有自己的一个作用域。通过module.exports暴露public成员。例如:

// 文件名:x.js
let x = 1;
function add() {
 x += 1;
 return x;
}
module.exports.x = x;
module.exports.add = add;

此外,CommonJS通过require()引入模块依赖,require函数可以引入Node的内置模块、自定义模块和npm等第三方模块。

// 文件名:main.js
let xm = require('./x.js');
console.log(xm.x); // 1
console.log(xm.add()); // 2
console.log(xm.x);  // 1

从上面代码我们可以看出,require函数同步加载了x.js,并且返回了module.exports输出字面量的拷贝值。可能有人会问module.exports.x = x;不是赋值吗,怎么肥事呢?我们说,Module模式是模块化规范的基石,CommonJS也是对Module模式的一种封装。我们完全可以用Module模式来实现上面的代码效果:

let xModule = (function (){
 let x = 1;
 function add() {
  x += 1;
  return x;
 }
 return { x, add };
})();
let xm = xModule;
console.log(xm.x); // 1
console.log(xm.add()); // 2
console.log(xm.x);  // 1

通过Module模式模拟的CommonJS原理,我们就可以很好的解释CommonJS的特性了。因为CommonJS需要通过赋值的方式来获取匿名函数自调用的返回值,所以require函数在加载模块是同步的。然而CommonJS模块的加载机制局限了CommonJS在客户端上的使用,因为通过HTTP同步加载CommonJS模块是非常耗时的。

2. AMD和CMD

2.1 AMD

// 定义AMD规范的模块
define([function() {
 return 模块
})

区别于CommonJS,AMD规范的被依赖模块是异步加载的,而定义的模块是被当作回调函数来执行的,依赖于require.js模块管理工具库。当然,AMD规范不是采用匿名函数自调用的方式来封装,我们依然可以利用闭包的原理来实现模块的私有成员和公有成员:

define(['module1', 'module2'], function(m1, m2) {
 let x = 1;
 function add() {
  x += 1;
  return x;
 }
 return { add };
})

2.2 CMD

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。AMD 推崇依赖前置,CMD 推崇依赖就近。

define(function(require, exports, module) {
 // 同步加载模块
 var a = require('./a');
 a.doSomething();
 // 异步加载一个模块,在加载完成时,执行回调
 require.async(['./b'], function(b) {
  b.doSomething();
 });
 // 对外暴露成员
 exports.doSomething = function() {};
});
// 使用模块
seajs.use('path');

CMD集成了CommonJS和AMD的的特点,支持同步和异步加载模块。CMD加载完某个依赖模块后并不执行,只是下载而已,在所有依赖模块加载完成后进入主逻辑,遇到require语句的时候才执行对应的模块,这样模块的执行顺序和书写顺序是完全一致的。因此,在CMD中require函数同步加载模块时没有HTTP请求过程。

ES6 module

ES6的模块化已经不是规范了,而是JS语言的特性。随着ES6的推出,AMD和CMD也随之成为了历史。ES6模块与模块化规范相比,有两大特点:

  • 模块化规范输出的是一个值的拷贝,ES6 模块输出的是值的引用。
  • 模块化规范是运行时加载,ES6 模块是编译时输出接口。

模块化规范输出的是一个对象,该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,ES6 module 是一个多对象输出,多对象加载的模型。从原理上来说,模块化规范是匿名函数自调用的封装,而ES6 module则是用匿名函数自调用去调用输出的成员。两者的区别可参考Babel and CommonJS modules。

以上就是本次介绍的全部知识点内容,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
javascript的回调函数应用示例
Feb 20 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
Javascript基础之数组的使用
May 13 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
React diff算法的实现示例
Apr 20 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 #Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 #Javascript
微信小程序如何实现在线客服功能
Oct 16 #Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 #Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 #Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 #jQuery
JS使用正则表达式提交页面验证的代码
Oct 16 #Javascript
You might like
PHP运行模式的深入理解
2013/06/03 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
PHP简单遍历对象示例
2016/09/28 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
javascript 写类方式之二
2009/07/05 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
js实现车辆管理系统
2020/08/26 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
Python中实现对list做减法操作介绍
2015/01/09 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
让python在hadoop上跑起来
2016/01/27 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python解析基于xml格式的日志文件
2017/02/25 Python
Python常见字典内建函数用法示例
2018/05/14 Python
使用python实现多维数据降维操作
2020/02/24 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
驾驶员安全责任书
2014/07/22 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
个人专业技术总结
2015/03/05 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript