关于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 打开页面window.location和window.open的区别
Mar 17 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 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 dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php创建类并调用的实例方法
2019/09/25 PHP
JavaScript日历实现代码
2010/09/12 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
js数组去重的hash方法
2016/12/22 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
对python中的pop函数和append函数详解
2018/05/04 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
质量承诺书范文
2014/03/27 职场文书
技术比武方案
2014/05/19 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
Vue h函数的使用详解
2022/02/18 Vue.js
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python