关于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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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命令行使用方法和命令行参数说明
2014/04/08 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
python实现2014火车票查询代码分享
2014/01/10 Python
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
Python编写一个闹钟功能
2017/07/11 Python
python+flask实现API的方法
2018/11/21 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
如何基于python生成list的所有的子集
2019/11/11 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
python中time tzset()函数实例用法
2021/02/18 Python
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
护士自我鉴定范文
2013/10/06 职场文书
高三自我鉴定范文
2013/10/19 职场文书
终止合同协议书
2014/04/17 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript