如何正确理解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 相关文章推荐
jQuery TextBox自动完成条
Jul 22 Javascript
JS跨域代码片段
Aug 30 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
通过图带你深入了解vue的响应式原理
Jun 21 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
实用函数4
2007/11/08 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python使用celery实现异步任务执行的例子
2019/08/28 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
学python爬虫能做什么
2020/07/29 Python
python简单实现9宫格图片实例
2020/09/03 Python
python调用win32接口进行截图的示例
2020/11/11 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
事假请假条范文
2014/04/11 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
实习单位意见
2015/06/04 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers