这是我参与更文挑战的第17天,活动详情查看:更文挑战
CommonJS
- CommonJS采用同步加载的方式运行,主要应用与服务端,加载完成之后不会立即执行里面的函数
使用
var moduleB = require('./moduleB');//导入使用
// moduleB.js
module.exports = { //导出模块
stuff: moduleB.doStuff();
};
-
在文件中多次引入同一个模块,只会加载一次,然后就会被缓存,后面继续引入时会去读取缓存,由于是同步加载,所以加载顺序与引入顺序有关
-
导出文件时,
exports=module.exports
,需要注意的是,使用exports
导出时需要直接点出属性,而不是导出对象
module.exports={
name:'tom'
}
//等同于
exports.name ='tom'
//这种是错误的
exports={}
- CommonJS模块加载可以嵌套在条件判断语句中,满足条件时会加载依赖,遵循只加载一次的规则,即使前面已经加载影响也不大
if (loadCondition) {
require('./moduleA');
}
AMDJS
- AMDJS采用异步加载的方式,应用于客户端浏览器,加载完成之后会立即执行依赖它们的模块
使用
- 定义模块时,AMD在执行时所需要的依赖,并且指定该模块的唯一标识
//定义一个moduleA,她依赖于moduleB
define('moduleA', ['moduleB'], function(moduleB) {
return {
stuff: moduleB.doStuff();
};
});
- AMD定义模块时,可以在它的内部使用CommonJS模块,也可以进行条件判断
define('moduleA', ['require', 'exports'], function(require, exports) {
if(true){
var moduleB = require('moduleB');
exports.stuff = moduleB.doStuff();
}
});
//使用 引入成功之后执行callback()
require(['moduleA'],function(moduleA){
moduleA.stuff()
})
UMDJS
- 为了统一CommonJS和AMD,产生了这两种规范都可以使用的UMD,UMD定义模块在使用的时候会检测要使用那种模块加载规范
(function (root, factory) {
if (typeof define === 'function' && define.amd) { // AMD。注册为匿名模块
define(['moduleB'], factory);
} else if (typeof module === 'object' && module.exports) { //CommonJS 环境下使用
module.exports = factory(require(' moduleB '));
} else { // 浏览器全局上下文( root 是 window)
root.returnExports = factory(root. moduleB);
}
}(this, function (moduleB) {
// 以某种方式使用 moduleB
// 将返回值作为模块的导出
// 这个例子返回了一个对象
// 但是模块也可以返回函数作为导出值
return {};
}));
ES6模块化
- ES6模块只在加载后执行
- 模块只加载一次
- 在模块中可以继续加载其他模块
- 异步加载
使用
- 导出模块时与CommonJS相似,可以有多个
export
//moduleA.js
export const name ='tom'
export const age =12
//等同于
export {name,age}
//在其他文件引用的时候需要指定具体的名称
import {name,age} from 'moduleA.js'
- 但是只能有一个
export default
,否则会报错
//moduleB.js
export default{
name:'tom',age:12
}
//在其他文件引入时可以自定义引入的标识名称
import person from './moduleB'
as
as
可以用来重新命名导入或者导出的变量
const foo = 'foo', bar = 'bar', baz = 'baz';
export { foo, bar, baz }
import * as Foo from './foo.js';//将导出的这个集合重新命名
console.log(Foo.foo); // foo
import { foo, bar, baz as myBaz } from './foo.js'; //将baz重新命名
console.log(myBaz); // baz
- 对于标签引入来说,标签中添加
type='module'
来表明她是一个模块,在页面渲染时,遇到这个模块时,会直接加载这个js模块,不会阻塞页面解析,当页面解析完成之后在依照顺序执行
<!-- 第二个执行 -->
<script type="module"></script>
<!-- 第三个执行 -->
<script type="module"></script>
<!-- 第一个执行 -->
<script></script>
另外,可以改为加载外部 JS 模块定义:
<!-- 第二个执行 -->
<script type="module" src="module.js"></script>
<!-- 第三个执行 -->
<script type="module" src="module.js"></script>
<!-- 第一个执行 -->
<script><script>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!