如何正确理解javascript的模块化


Posted in Javascript onMarch 02, 2017

模块化在项目中十分的重要,一个复杂的项目肯定有很多相似的功能模块,如果每次都需要重新编写模块肯定既费时又耗力。但是引用别人编写模块的前提是要有统一的“打开姿势”,如果每个人有各自的写法,那么肯定会乱套,下面介绍几种JS的模块化的规范。

一:模块化进程一:script标签

这是最原始的 JavaScript 文件加载方式,如果把每一个文件看做是一个模块,那么他们的接口通常是暴露在全局作用域下,也就是定义在 window 对象中,不同模块的接口调用都是一个作用域中,一些复杂的框架,会使用命名空间的概念来组织这些模块的接口。

缺点:

1、污染全局作用域

2、开发人员必须主观解决模块和代码库的依赖关系

3、文件只能按照script标签的书写顺序进行加载

4、在大型项目中各种资源难以管理,长期积累的问题导致代码库混乱不堪

二:模块化进程二:CommonJS规范

该规范的核心思想是允许模块通过require方法来同步加载所要依赖的其他模块,然后通过 exports 或 module.exports 来导出需要暴露的接口。

require("module");
require("../file.js");
exports.doStuff = function(){};
module.exports = someValue;

优点:

1、简单并容易使用

2、服务器端模块便于重用

缺点:

1、同步的模块加载方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的

2、不能非阻塞的并行加载多个模块

module.exports与exports的区别

1、exports 是指向的 module.exports 的引用

2、module.exports 初始值为一个空对象 {},所以 exports 初始值也是 {}

3、require() 返回的是 module.exports 而不是 exports

exports示例:

// app.js
var circle = require('./circle');
console.log(circle.area(4));
// circle.js
exports.area = function(r){
 return r * r * Math.PI;
}

module.exports示例:

// app.js
var area = require('./area');
console.log(area(4));
// area.js
module.exports = function(r){
 return r * r * Math.PI;
}

错误的情况:

// app.js
var area = require('./area');
console.log(area(4));
// area.js
exports = function(r){
 return r * r * Math.PI;
}

其实是对 exports 进行了覆盖,也就是说 exports 指向了一块新的内存(内容为一个计算圆面积的函数),也就是说 exports 和 module.exports 不再指向同一块内存,也就是说此时 exports 和 module.exports 毫无联系,也就是说 module.exports 指向的那块内存并没有做任何改变,仍然为一个空对象{},也就是说area.js导出了一个空对象,所以我们在 app.js 中调用 area(4) 会报 TypeError: object is not a function 的错误。

总结:当我们想让模块导出的是一个对象时, exports 和 module.exports 均可使用(但 exports 也不能重新覆盖为一个新的对象),而当我们想导出非对象接口时,就必须也只能覆盖 module.exports 。

三:模块化进程三:AMD规范

由于浏览器端的模块不能采用同步的方式加载,会影响后续模块的加载执行,因此AMD(Asynchronous Module Definition异步模块定义)规范诞生了。

AMD标准中定义了以下两个API

1、require([module], callback);
2、define(id, [depends], callback);

require接口用来加载一系列模块,define接口用来定义并暴露一个模块。

示例:

define("module", ["dep1", "dep2"], function(d1, d2){
 return someExportedValue;
});
require(["module", "../file"], function(module, file){ /* ... */ });

优点:

1、适合在浏览器环境中异步加载模块

2、可以并行加载多个模块

缺点:

1、提高了开发成本,代码的阅读和书写比较困难,模块定义方式的语义不顺畅

2、不符合通用的模块化思维方式,是一种妥协的实现

四:模块化进程四:CMD规范

CMD(Common Module Definition)规范和AMD很相似,尽量保持简单,并与CommonJS和Node.js的 Modules 规范保持了很大的兼容性。在CMD规范中,一个模块就是一个文件。

示例:

define(function(require, exports, module){
 var $ = require('jquery');
 var Spinning = require('./spinning');
 exports.doSomething = ...
 module.exports = ...
})

优点:

1、依赖就近,延迟执行

2、可以很容易在 Node.js 中运行

缺点:

1、依赖 SPM 打包,模块的加载逻辑偏重

AMD和CMD的区别

AMD和CMD起来很相似,但是还是有一些细微的差别,让我们来看一下他们的区别在哪里:

1、对于依赖的模块,AMD是提前执行,CMD是延迟执行。

2、AMD推崇依赖前置;CMD推崇依赖就近,只有在用到某个模块的时候再去require。看代码:

// AMD
define(['./a', './b'], function(a, b){ // 依赖必须一开始就写好
  a.doSomething()  
  // 此处略去 100 行
  b.doSomething()  
  ...
});
// CMD
define(function(require, exports, module){
  var a = require('./a')  
  a.doSomething()  
  // 此处略去 100 行
  var b = require('./b')
  // 依赖可以就近书写
  b.doSomething()
  // ...
});

3、AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。

五:模块化进程五:ES6模块化

EcmaScript6标准增加了JavaScript语言层面的模块体系定义。ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。

在 ES6 中,我们使用export关键字来导出模块,使用import关键字引用模块。需要说明的是,ES6的这套标准和目前的标准没有直接关系,目前也很少有JS引擎能直接支持。因此Babel的做法实际上是将不被支持的import翻译成目前已被支持的require。

尽管目前使用import和require的区别不大(本质上是一回事),但依然强烈推荐使用import关键字,因为一旦JS引擎能够解析ES6的import关键字,整个实现方式就会和目前发生比较大的变化。如果目前就开始使用import关键字,将来代码的改动会非常小。

示例:

import "jquery";
export functiondoStuff(){}
module "localModule" {}

优点:

1、容易进行静态分析

2、面向未来的 EcmaScript 标准

缺点:

1、原生浏览器端还没有实现该标准

2、全新的命令字,新版的 Node.js才支持

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
详解jQuery中的事件
Dec 14 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
jquery实现左右滑动式轮播图
Mar 02 #Javascript
如何写好你的JavaScript【推荐】
Mar 02 #Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 #Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 #Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 #Javascript
原生js仿浏览器滚动条效果
Mar 02 #Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 #Javascript
You might like
第十三节--对象串行化
2006/11/16 PHP
隐性调用php程序的方法
2009/03/09 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
js代码实现微博导航栏
2015/07/30 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python实现飞机大战
2018/09/11 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL