JavaScript 中的模块化
JavaScript 中的模块化
最早的基于立即执行函数,闭包的模块化
const MountClickModule = function(){
let num = 0;
const handleClick = ()=>{
console.log(++num);
}
return {
countClick:()=>{
document.addEventListener('click',handleClick)
}
}
}();
MountClickModule.countClick();
(function(module) {
module.say = ()=>{
console.log(num) //undefined
//do something
}
})(MountClickModule);
MountClickModule.say();
这种闭包的坏处:
- 扩展模块间无法访问私有变量。
- 强依赖模块导入的顺序,项目变大后不好维护。
AMD 和 CommonJS 模块化JavaScript 应用
AMD 和 CommonJS 是两个互相竞争的标准,均可定义 JavaScript 模块。除了语法和原理的区别之外,主要区别是 AMD 的设计理念是明确基于浏览器,而 CommonJS 的设计是面向通用 JavaScript 环境
使用 AMD 定义模块依赖
AMD 异步模块定义规范制定了定义模块的规则,这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应(浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题)。
目前,AMD 最流行的实现是 RequireJS
。
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require("beta").verb();
}
});
AMD 提供名为 aplha 的函数,它接收一下参数:
- 第一个参数,
id
,是个字符串。它指的是定义中模块的名字,这个参数是可选的。如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字。 - 第二个参数,dependencies,是个定义中模块所依赖模块的数组。
- 第三个参数是初始化模块的工厂函数,该函数接收dependencies作为参数 AMD异步获取依赖,以避免阻塞,如果依赖来自服务器,那么这个过程将花费一些时间,知道依赖全部加载完成后,调用模块的工厂函数,并传入所有的依赖。
可以看出,AMD 有一下几项有点:
- 异步加载模块,避免阻塞。
- 自动处理依赖,我们无需考虑模块的引入顺序。
- 在同一个文件中可以定义多个模块。
CMD
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出,在 CMD 规范中,一个模块就是一个文件。代码的书写格式如下:
define(function (require, exports, module) {
const foo = require('./foo')
a.doSomething()
// ...
const bar = require('./bar') // 依赖可以就近书写
b.doSomething()
// do something else
})
CommonJS
AMD 的设计明确基于浏览器,而 CommonJS 的设计是面向通用 JavaScript 环境。CommonJS 目前在 Nodejs 社区中具有最多的用户。CommonJS 使用基于文件的模块,所以每个文件中都只能定义一个模块,CommonJs 提供变量 module,该变量具有属性 exports,通过 exports 很容易扩展属性。最后,module.exports 作为模块的公共接口。
const beta = require('beta');
function alpha(){
return beta.verb();
//Or:
return require("beta").verb();
}
module.exports = alpha;
CommonJS 要求一个文件就是一个模块,文件中的代码就是模块的一部分,所以不需要使用立即执行函数来包装变量,在模块中定义的变量都是安全的再模块中,不会泄露到全局作用域。只有通过 module.exports
对象暴露的对象或函数才可以在函数外部访问 CommonJS 具有以下特点:
- 基于文件系统。
- 引入模块时文件同步加载,可以访问模块的公共接口。
- 模块加载相对更快 这是 CommonJS 在服务端更流行的原因。
ES6 模块的导入导出
ES6 模块结合了CommonJS 和 AMD 的有点,具体如下:
- 与 CommonJS 类似,ES6模块语法相对简单,并且基于文件(每一个文件就是一个模块)
- 与 AMD 类似,ES6 模块支持异步加载模块。
既 ES6 结合了两种模块化的有点,基于文件系统,既支持异步也支持同步,因为浏览器并没有实现 ES6 的模块化 API 所以具体是异步还是同步取决于loader api
ES6 模块的主要思想是必须显示的使用标志符导出模块,才能从外部访问模块。其他标志符,甚至在最顶级作用域中定义的标识符,只能在模块中使用。 ES6 引入两个关键字:
- export ---- 从模块外部指定标识符。
- import ---- 导入模块标识符。
从index.js模块中导出:
const hello = 'hello';
export const name = 'yunfly'
export function sayHi(){
return `${hello} ${name}!`
}
也可以在模块最后一起导出:
// foo.js
const hello = 'hello';
export const name = 'yunfly'
export function sayHi(){
return `${hello} ${name}!`
}
export { name, sayHi }
// export { name as firstName, sayHi }
// bar.js
// 使用 as 设置导如别名
import { name as firstName, sayHi } from 'foo'
console.log(name)
sayHi()
//bar2.js
// 导出全部标识符:
import * as sayModule from 'foo';
console.log(sayModule.name)
sayModule.sayHi()
// foo.js
class Foo {}
export default Foo
// bar.js
import Foo from './foo';
这存在一些可维护性的问题:
- 如果你在 foo.ts 里重构 Foo,在 bar.ts 文件中,它将不会被重新命名;
- 如果你最终需要从 foo.ts 文件中导出更多有用的信息(在你的很多文件中都存在这种情景),那么你必须兼顾导入语法。
- 在 ts 中默认导出的可发现性非常差,你不能智能的辨别一个模块它是否有默认导出。
文章参考:《JavaScript忍者秘籍》
JavaScript 中的模块化的更多相关文章
- 简单聊一聊Javascript中的模块化
在面试中只要说到模块化的问题,多多少少总会问到这些,umd.amd.cjs.esm,可能听过其中一个两个,或者都听说过.接下来我们先简单了解一下他们到底是什么,又有什么样的区别呢. 最开始的时候,Ja ...
- JavaScript中的模块化之AMD和CMD
前言: 为什么我们需要模块化开发,模块化开发的好处有哪些? 首先我们先说一下非模块化的开发方式带来的弊端. 非模块化开发中会导致一些问题的出现,变量和函数命名可能相同,会造成变量污染和冲突,并且出错时 ...
- JavaScript中为什么使用立即执行函数来封装模块?
最近在学习JavaScript基础,在学习到面向对象编程时,学习到在JavaScript中实现模块化的方法,其中一个重要的点是如何封装私有变量. 实现封装私有变量的方法主要是: 使用构造函数 func ...
- javascript中模块化知识总结
JavaScript 模块化开发 1. 模块化介绍 掌握模块化基本概念以及使用模块化带来的好处 当你的网站开发越来越复杂的时候,会经常遇到什么问题? 恼人的命名冲突 繁琐的文件依赖 历史上,JavaS ...
- JavaScript 中的数据类型
Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...
- 【总结】浅谈JavaScript中的接口
一.什么是接口 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一.在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概 ...
- JavaScript中的函数表达式
在JavaScript中,函数是个非常重要的对象,函数通常有三种表现形式:函数声明,函数表达式和函数构造器创建的函数. 本文中主要看看函数表达式及其相关的知识点. 函数表达式 首先,看看函数表达式的表 ...
- 理解和使用 JavaScript 中的回调函数
理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报 分类: JavaScript(4) 目录( ...
- [转]Javascript中的自执行函数表达式
[转]Javascript中的自执行函数表达式 本文转载自:http://www.ghugo.com/javascript-auto-run-function/ 以下是正文: Posted on 20 ...
随机推荐
- C# 从1到Core--委托与事件
委托与事件在C#1.0的时候就有了,随着C#版本的不断更新,有些写法和功能也在不断改变.本文温故一下这些改变,以及在NET Core中关于事件的一点改变. 一.C#1.0 从委托开始 1. 基本方式 ...
- hive sql 解析json
在hive中会有很多数据是用json格式来存储的,而我们用数据的时候又必须要将json格式的数据解析成为正常的数据,今天我们就来聊聊hive中是如何解析json数据的. 下面这张表就是json格式的表 ...
- Spring Cloud Alibaba基础教程:Sentinel Dashboard中修改规则同步到Apollo
在之前的两篇教程中我们分别介绍了如何将Sentinel的限流规则存储到Nacos和Apollo中.同时,在文末的思考中,我都指出了这两套整合方案都存在一个不足之处:不论采用什么配置中心,限流规则都只能 ...
- css条纹背景样式、及方格斜纹背景的实现
一.横向条纹如下代码: background: linear-gradient(#fb3 %, #58a %) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色.如 ...
- python 的迭代
字典的迭代: #创建字典 dict={'a':1,'b':2,'c':3} #key和value的迭代 for key,value in dict.items(): print(key,':',val ...
- rem和px
做过一段时间的H5页面,但是对于rem与px的换算还是比较模糊,总是引用一段脚本,也没有深究过为什么,就稀里糊涂的用了,遇到一些细微的地方,总是不知道是什么原因导致的,我总是只要能完成效果就行,全然不 ...
- 线性dp—奶牛渡河
题目 Farmer John以及他的N(1 <= N <= 2,500)头奶牛打算过一条河,但他们所有的渡河工具,仅仅是一个木筏. 由于奶牛不会划船,在整个渡河过程中,FJ必须始终在木筏上 ...
- 棋子游戏 51Nod - 1534 思维题
题目描述 波雷卡普和瓦西里喜欢简单的逻辑游戏.今天他们玩了一个游戏,这个游戏在一个很大的棋盘上进行,他们每个人有一个棋子.他们轮流移动自己的棋子,波雷卡普先开始.每一步移动中,波雷卡普可以将他的棋子从 ...
- Layui文本框限制正整数
<input type="text" name="Number" lay-verify="required|integer" plac ...
- 数据分析04 /基于pandas的DateFrame进行股票分析、双均线策略制定
数据分析04 /基于pandas的DateFrame进行股票分析.双均线策略制定 目录 数据分析04 /基于pandas的DateFrame进行股票分析.双均线策略制定 需求1:对茅台股票分析 需求2 ...