js 模块

模块的来源

最早的模块机制出现在node,即common js, 因为后端开发比较的复杂,为了避免命名重复产生冲突同时也为了实现功能的复用,于是引入了模块机制。
随着前端开发越来越复杂,一些底层的通用的功能可以抽象成函数,同样为了避免命名冲突,前端JS也引入了模块机制。

前后端模块规范

现在我们接触到四种模块规范:

  1. node的common js
  2. AMD
  3. CMD
  4. es6中的模块

common js

基本概念

node应用由模块组成,采用commonJS模块规范,具体而言,每个文件都是一个模块,模块内的变量函数对象都是文件私有的,CommonJS定义的模块分为:
模块引用(require):用来引入外部模块,
模块定义(exports):用于导出当前模块的方法或变量,唯一的导出口,
模块标识(module):代表模块本身,

优点:
1.解决了变量污染问题,每个模块具有独立的空间,互不干扰。
2.支持引入导出功能,可以连接各个模块,实现彼此间的依赖。
3.接口简洁,定义模块十分简单。
缺点:
1.只适用于后端,不适合浏览器端。

具体写法

//math.js
module.exports = function (){}
//foo.js
var math = require('./math')

AMD && CMD

为什么前端不用common js?
因为commonjs是同步的,也就是require的过程中,必须完成这个加载动作后面的代码才会执行,这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。这种形式不适合于浏览器场景,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于"假死"状态,所以浏览器加载需要异步加载。

AMD

基本概念

AMD意思是异步模块定义,它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。AMD 是基于require.js实现的。

具体写法

定义:define()

// math.js
    define([module1, module2], function (module1, module2) {})

引入使用:require()

// main.js
    require(['math'], function (math){})

CMD

基本概念

CMD是基于sea.js实现的, 一个模块就是一个文件,它既遵循了amd规范,又遵循commonJs规范。
define:一个全局函数,用来定义模块,接受对象,字符串,函数作为参数,当参数为函数时,函数的参数有(require,exports,module)。
require:是一个方法,接受 模块作为唯一参数,用来获取其他模块提供的接口。
exports:是一个对象,用来向外提供模块接口。

具体用法
define(function(require,exports,module){
    var a = require('./a')
    // do something
    var b = require('/b')
    // do something
    module.exports = ...
})

更多详情见链接:https://github.com/seajs/seajs/issues/242

AMD和 CMD的区别
  1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.
  2. CMD 推崇依赖就近,AMD 推崇依赖前置。

es6 模块

基本概念

在es6中实现了模块功能,而且可以通用于服务器和浏览器,es6模块的设计思想是尽量的静态化,使得编译时就确定模块的依赖关系,以及输入和输出的变量(之前的common js AMD都只能在运行时确定)。模块功能主要由两个命令构成:
1.export:用于规定模块的对外接口
2.import:用于输入其他模块提供的功能

具体用法
// a.js
export:
export var a = 'hello'
export function multiple (){}
等价于:
var a = 'hello'
function multiple (){}
export {a, multiple}
// b.js
import:
import {a, multiple} from 'a.js'

参考文档:
https://www.cnblogs.com/chenguangliang/p/5856701.html (commom js AMD)
http://es6.ruanyifeng.com/#docs/module (es6)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,047评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,807评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,501评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,839评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,951评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,117评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,188评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,929评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,372评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,536评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,168评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2 351

推荐阅读更多精彩内容