如何正确理解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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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
PHP文本操作类
2006/11/25 PHP
php笔记之常用文件操作
2010/10/12 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
隐性调用php程序的方法
2015/06/13 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
微信支付开发告警通知实例
2016/07/12 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
鼠标图片振动代码
2006/07/06 Javascript
用javascript实现给图片加链接
2007/08/15 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
python分析网页上所有超链接的方法
2015/05/08 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python字符串循环左移
2019/03/08 Python
Python如何实现转换URL详解
2019/07/02 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
python实现自动清理重复文件
2020/08/24 Python
如何一键升级Python所有包
2020/11/05 Python
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
2015羊年春节慰问信
2015/02/14 职场文书
交通安全温馨提示语
2015/07/14 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android