export CommonJS AMD ES6
export
https://www.cnblogs.com/fayin/p/6831071.html
导入文件: a - b - c ,对象隔代消失,可转成函数返回
导入模块对象(命名) import * as defaulta from './print'
导出前 命名 var n = 1; export {n as m};
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
default 为关键字 不可作为赋值 1. export 普通导出 type.js export const a = 1 export const b = [1,2,3] export function c(){...} export const d = function (){...} 等价于 const a = 1 const b = [1,2,3] function c(){...} const d = function (){...} export {a,b,c,d} // 导出 import {a,b,a,d} from '@/utils/type' 2. export default 一个文件 一个 export default,存在多个时,只认第一个 export default后面不可以用 var、let、const 可用 export default function(){} function add(){} export default function (name) { console.log(name) } // 导出 import file from '@/utils/type' file(5) // 5 3. export + export default 混合导出 export const fileType = function (name) { console.log(name) } export default function (name) { console.log(name) } // 导入 import * as fileType from '@/utils/type' fileType.fileType ('aaa') // aaa fileType.default ('sss') // sss // 或者 import fileTypedefault,{ fileType } from '@/utils/type' fileType ('aaa') // aaa fileTypedefault ('sss') // sss 4.同时导入导出 a.js export const fileType = function (name) { console.log(name) } export default function (name) { console.log(name) } b.js 导入 a.js 后,导出自己 import xxx,{fileType } from './a' // xxx 为default 别名 export {xxx,fileType} 5. as export function sampleA (name) { console.log(name) } export function sampleB (name) { console.log(name) } export function sampleC (name) { console.log(name) } export default function (name) { console.log(name) } // 导出 多个使用别名 import { sampleA as funE, sampleB as funF, sampleC } from '@/utils/type' // 或者 import sample, { sampleA as funE, sampleB as funF } from '@/utils/type' funE('333') // 333 funF('555') // 555 sampleC('666') // 666 sample('default') // default
其他细节
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
细节点一 default export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句 // 正确 export var a = 1; // 正确 var a = 1; export default a; // 错误 export default var a = 1; function add(x, y) { return x * y;} export {add as default}; // 等同于 // export default add; import { default as foo } from 'modules'; // 等同于 // import foo from 'modules'; 细节点二 export 复合导出 ( 转发 ) export { foo, bar } from 'my_module'; 写成一行以后,foo和bar实际上并没有被导入当前模块,只是相当于对外转发了这两个接口, 导致当前模块不能直接使用foo和bar。 // 接口改名 export { foo as myFoo } from 'my_module'; // 整体输出 export * from 'my_module'; 细节点三 默认接口、具名接口 转换 默认接口 export { default } from 'foo'; 具名接口改为默认接口 export { es6 as default } from './someModule'; // 等同于 import { es6 } from './someModule'; export default es6; 默认接口也可以改名为具名接口 export { default as es6 } from './someModule';
CommonJS AMD ES6
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
CommonJS规范 同步模块化规范,适用于服务端 (Node使用CommonJS模块规范) 加载一次模块,后续使用缓存 module变量代表当前模块。 这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。 加载某个模块,其实是加载该模块的module.exports属性。 ( var exports = module.exports; 引用,故不能重新赋值,但可以改变属性,所有涉及模块地方生效 ) module.exports.x = x; require方法用于加载模块 var example = require('./example.js'); AMD 异步加载模块,适用于浏览器 define(['package/lib'], function(lib){ function foo(){ lib.log('hello world!'); } return { foo: foo }; }); ES6 使用 export 和 import 来导出、导入模块 按需加载,只加载导入部分
Put the favorites in the favorites and empty the favorites.