https://github.com/WICG/import-maps
https://github.com/drufball/layered-apis
https://github.com/tc39/proposal-javascript-standard-library
ESM
url 没有 IDE IntelliSense 支持?
可以重定向导出,但是不能使用重定向导出项
最大的特点就是静态化,在解析的时候确定模块的依赖关系以及输入输出的变量 // import 提升
导出引用 // 使用 export default a; 时不是引用,export { a as default } 是引用
import() 动态加载模块,使用了 () 但是不从 Function.prototype 继承,类似 super()
module 中相对路径是基于 script 路径的,相对于 module 需要使用 import.meta.url (import 也不是对象)(相当于 nodejs 的 __filename)(非模块脚本使用 document.currentScript)
System.import() ???
// nodejs 中,后缀 .mjs,为了兼容 CommonJS 的模块
文件路径需要写全,包括扩展名 // 因为可能不是本地环境
ES6 模块不会缓存运行结果,而是动态地去被加载的模块取值,以及变量总是绑定其所在的模块,只是代码引用
ES6 处理"循环加载"与 CommonJS(缓存返回)有本质的不同。ES6根本不会关心是否发生了"循环加载",只是生成一个指向被加载模块的引用(没加载完即为undefined),需要开发者自己保证真正取值的时候能够取到值。
// CommonJs 循环加载模块返回空对象 {}; // exports = {}
http://pwhack.me/post/2015-08-18
https://hacks.mozilla.org/2015/08/es6-in-depth-modules/
<script> 的 type 属性 module 关键词告诉浏览器这是一个 es6 module
浏览器对于模块的加载默认是异步延迟进行的
// 可以使用 nomodule 属性的脚本来兼容不支持 module 的浏览器
// 默认 defer (但比显示 defer 的脚本先载入)
// 内联脚本也被延迟执行, 内联脚本支持 async(不是 module 的内联脚本会被解析时执行)
// 只执行一次,多次插入 DOM 也执行一次
// 跨域需要符合 cors 策略
// 不发送凭证(cookie etc)
// "use strict"
// the keyword await is reserved in a module’s top-level code, and the value of this is undefined.
// DOMContentLoaded 触发在 module 脚本执行之后,但在 async module 脚本执行之前
// 文档加载并解析完成 document.readyState === 'interactive 在脚步加载前
AMD(Asynchronous Module Definition)
原理:创建 <script> 标签
require.js 用法:
- require([module], callback);
- define(['myLib'], function(myLib){... return {..}}
没定义导出对象也可以导入(相对于嵌入文件)
CMD(Common Module Definition)
define(function (require, exports, module){
var someModule = require("someModule");
someModule.doTehAwesome();
exports.asplode = function (){
someModule.doTehAwesome();
};
});
Sea.js(CMD) 也是异步加载,跟 AMD 的区别:
- AMD 是提前执行,CMD 是延迟执行。
- CMD 推崇依赖就近,AMD 推崇依赖前置
- AMD 的 API 默认是一个当多个用,CMD的 API 严格区分,推崇职责单一
CommonJS 通常使用于服务器。同步加载。
如 Node.js,require(module).method(),导出使用 module.exports
require 导入的是模块的拷贝而不是引用,而且缓存(全局)了结果。
常用的模块加载器有 require.js(AMD)、curl.js(AMD)、sea.js(CMD)
UMD(通用模块规范) 兼容了 AMD 和 CommonJS,同时还支持老式的“全局”变量规范
http://web.jobbole.com/82238/
https://github.com/systemjs/systemjs
export = and import = require() 用来 cjs 使用默认导出类型
https://www.typescriptlang.org/docs/handbook/modules/reference.html#export--and-import--require