Js模块化之-import和export

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块 

define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
   a.doSomething()
   // 此处略去 100 行
   b.doSomething()
   ...
}) 


CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。CMD推崇就近依赖,只有在用到某个模块的时候再去require 

define(function(require, exports, module) {
   var a = require('./a')
   a.doSomething()
   // 此处略去 100 行
   var b = require('./b') // 依赖可以就近书写
   b.doSomething()
   // ... 
})

ES6之 export和import

第一种方法: 用{}包装成对象导出

//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}

//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

第二种方法:导出时修改名称

//lib.js文件
let fn0 = function() {
    console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};

//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);

第三种方法:定义时导出

//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";

//main.js文件
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

第四种方法:匿名导出-导出默认变量

//如果一个js模块文件就只有一个功能, 那么就可以使用export default导出
//lib.js
export default "string";

//main.js
import defaultString from "./lib";
console.log(defaultString);

第五种方法:匿名导出-导出默认方法

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
//导入的名字可以随便定义
import defaultFn from "./lib";
console.log(defaultFn());

第六种方法:通配符* 导出

//lib.js
export * from "./other";
//如果只想导出部分接口, 只要把接口名字列出来
//export {foo,fnFoo} from "./other";

//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};

//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);
console.log(fnFoo());

es导入的模块都属于引用,类似于浅拷贝

//lib.js
export let counter = 3;
export function incCounter() {
    counter++;
}
export function setCounter(value) {
    counter = value;
}


//main.js
import { counter, incCounter ,setCounter} from './lib';
// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4
setCounter(0);
console.log(counter); // 0

 

转载于:https://my.oschina.net/kimyeongnam/blog/1841066

你可能感兴趣的:(Js模块化之-import和export)