概述
2019独角兽企业重金招聘Python工程师标准>>>
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和exportES6之 export和import的全部内容,希望文章能够帮你解决Js模块化之-import和exportES6之 export和import所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复