济南网站建设老威,做视频网站需要什么,免费域名申请 知乎,公司文化墙设计模板目前基于webpack、rollup等构建工具进行开发#xff0c;模块化已经是常态#xff0c;基本的import、export操作少不了#xff0c;这里对常用的一些方法做一下总结。 ES6模块只支持静态导出#xff0c;你只可以在模块的最外层作用域使用export#xff0c;不可在条件语句中使… 目前基于webpack、rollup等构建工具进行开发模块化已经是常态基本的import、export操作少不了这里对常用的一些方法做一下总结。 ES6模块只支持静态导出你只可以在模块的最外层作用域使用export不可在条件语句中使用也不能在函数作用域中使用。 exports的几种用法 1. Named exports (导出每个 函数/变量) 名字导出这种方式导出多个函数一般使用场景比如 utils、tools、common 之类的工具类函数集或者全站统一变量等。 只需要在变量或函数前面加 export 关键字即可。 //------ lib.js ------
export const sqrt Math.sqrt;
export function square(x) {return x * x;
}
export function diag(x, y) {return sqrt(square(x) square(y));
}//------ main.js 使用方式1 ------
import { square, diag } from lib;
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5//------ main.js 使用方式2 ------
import * as lib from lib;
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5 我们也可以直接导出一个列表例如上面的lib.js可以改写成 //------ lib.js ------
const sqrt Math.sqrt;
function square(x) {return x * x;
}
function add (x, y) {return x y;
}
export {sqrt, square, add}2. Default exports (导出一个默认 函数/类) 这种方式比较简单一般用于一个类文件或者功能比较单一的函数文件使用。一个模块中只能有一个export default默认输出。 export default与export的主要区别有2个 不需要知道导出的具体变量名导入(import)时不需要{} //------ myFunc.js ------
export default function () { ... };//------ main.js ------
import myFunc from myFunc;
myFunc(); 导出一个类 //------ MyClass.js ------
class MyClass{constructor() {}
}
export default MyClass;//------ Main.js ------
import MyClass from MyClass; 注意这里默认导出不需要用{}。 3. Mixed exports (混合导出) 混合导出也就是 上面第一点和第二点结合在一起的情况。比较常见的比如 Lodash阿里 Fusion之类的库都是这种组合方式。 //------ lib.js ------
export var myVar ...;
export let myVar ...;
export const MY_CONST ...;export function myFunc() {...
}
export function* myGeneratorFunc() {...
}
export default class MyClass {...
}// ------ main.js ------
import MyClass, {myFunc} from lib; 再比如lodash例子 //------ lodash.js ------
export default function (obj) {...
};
export function each(obj, iterator, context) {...
}
export { each as forEach };//------ main.js ------
import _, { each } from lodash; 4. Re-exporting (别名导出) 一般情况下export输出的变量就是在原文件中定义的名字但也可以用 as 关键字来指定别名这样做一般是为了简化或者语义化export的函数名。 //------ lib.js ------
export function getUserName(){...
};
export function setName(){...
};//输出别名在import的时候可以同时使用原始函数名和别名
export {getName as get, //允许使用不同名字输出两次getName as getNameV2,setName as set
} 5. Module Redirects (中转模块导出) 有时候为了避免上层模块导入太多的模块我们可能使用底层模块作为中转直接导出另一个模块的内容如下 //------ myFunc.js ------
export default function() {...};//------ lib.js ------
export * from myFunc;
export function each() {...};//------ main.js ------
import myFunc,{ each } from lib; 错误的export用法 export 只支持在最外层静态导出、只支持导出变量、函数、类如下的几种用法都是错误的。 //直接输出变量的值
export Mark;//未使用中括号 或 未加default
// 当只有一个导出数需加default或者使用中括号
var name Mark;
export name;//export不要输出块作用域内的变量
function(){var name Mark;export {name};
} import的几种用法 import的用法和export是一一对应的但是import支持静态导入和动态导入两种方式动态import支持晚一些兼容性要差一些目前Chrome浏览器和Safari浏览器支持。 1. Import an entire modules contents (导入整个模块) 当export有多个函数或变量时如文中export的第一点可以使用 * as 关键字来导出所有函数及变量同时 as 后面跟着的名称做为 该模块的命名空间。 //导出lib的所有函数及变量
import * as lib from lib;//以 lib 做为命名空间进行调用类似于object的方式
console.log(lib.square(11)); // 121 2. Import a single/multiple export from a module 从模块文件中导入单个或多个函数与 * as namepage 方式不同这个是按需导入。如下例子: //导入square和 diag 两个函数
import {square, diag} from lib;// 只导入square 一个函数
import {square} from lib;// 导入默认模块
import _ from lodash;// 导入默认模块和单个函数这样做主要是简化单个函数的调用
import _, { each } from lodash; 3. Rename multiple exports during import 和 export 一样也可以用 as 关键字来设置别名当import的2个类的名字一样时可以使用 as 来重设导入模块的名字也可以用as 来简化名称。如下例子 // 用as 来 简化函数名称
import {reallyReallyLongModuleExportName as shortName,anotherLongModuleName as short
} from /modules/my-module.js;// 避免重名
import { lib as UserLib} from ulib;
import { lib as GlobalLib } from glib; 4. Import a module for its side effects only 有时候我们只想import进来不需要调用很常见的比如在webpack构建时我们经常import css 进来或者import一个类库进来。 // 导入css
import ./mystyle.css;// 导入类库
import axios; 5. Dynamic Imports 静态import在首次加载时候会把全部模块资源都下载下来但是我们实际开发时候有时候需要动态importdynamic import例如点击某个选项卡才去加载某些新的模块这个动态import特性浏览器也是支持的。 // 当动态import时返回的是一个promise
import(/modules/my-module.js).then((module) {// Do something with the module.});// 上面这句实际等同于
let module await import(/modules/my-module.js);es7的新用法 async function main() {const myModule await import(./myModule.js);const {export1, export2} await import(./myModule.js);const [module1, module2, module3] await Promise.all([import(./module1.js),import(./module2.js),import(./module3.js),]);
}
main(); 参考资料 https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/exporthttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/importhttp://2ality.com/2014/09/es6-modules-final.htmlhttps://hackernoon.com/import-export-default-require-commandjs-javascript-nodejs-es6-vs-cheatsheet-different-tutorial-example-5a321738b50f
