js 模块化

Tags
javascript
Created
Oct 18, 2015 3:45 PM

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.

image

// DOMContentLoaded 触发在 module 脚本执行之后,但在 async module 脚本执行之前

// 文档加载并解析完成 document.readyState === 'interactive 在脚步加载前

AMD(Asynchronous Module Definition)

原理:创建 <script> 标签

require.js 用法:

  • require([module], callback);
  • define(['myLib'], function(myLib){... return {..}}

没定义导出对象也可以导入(相对于嵌入文件)

CMDCommon 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

SuperMade with Super