什么是 ES6 模块?
模块使我们能够将代码基础分割成多个文件,以获得更高的可维护性,并且避免将所有代码放在一个大文件中。在 ES6 支持模块之前,有两个流行的模块。
- CommonJS-Node.js
- AMD(异步模块定义)-浏览器
基本上,使用模块的方式很简单,import
用于从另一个文件中获取功能或几个功能或值,同时export
用于从文件中公开功能或几个功能或值。
导出
使用 ES5 (CommonJS)
// 使用 ES5 CommonJS - helpers.js exports.isNull = function (val) { return val === null; } exports.isUndefined = function (val) { return val === undefined; } exports.isNullOrUndefined = function (val) { return exports.isNull(val) || exports.isUndefined(val); }
使用 ES6 模块
// 使用 ES6 Modules - helpers.js export function isNull(val){ return val === null; } export function isUndefined(val) { return val === undefined; } export function isNullOrUndefined(val) { return isNull(val) || isUndefined(val); }
在另一个文件中导入函数
// 使用 ES5 (CommonJS) - index.js const helpers = require('./helpers.js'); // helpers is an object const isNull = helpers.isNull; const isUndefined = helpers.isUndefined; const isNullOrUndefined = helpers.isNullOrUndefined; // or if your environment supports Destructuring const { isNull, isUndefined, isNullOrUndefined } = require('./helpers.js'); ------------------------------------------------------- // ES6 Modules - index.js import * as helpers from './helpers.js'; // helpers is an object // or import { isNull, isUndefined, isNullOrUndefined as isValid } from './helpers.js'; // using "as" for renaming named exports
在文件中导出单个功能或默认导出
使用 ES5 (CommonJS)
// 使用 ES5 (CommonJS) - index.js class Helpers { static isNull(val) { return val === null; } static isUndefined(val) { return val === undefined; } static isNullOrUndefined(val) { return this.isNull(val) || this.isUndefined(val); } } module.exports = Helpers;
使用ES6 Modules
// 使用 ES6 Modules - helpers.js class Helpers { static isNull(val) { return val === null; } static isUndefined(val) { return val === undefined; } static isNullOrUndefined(val) { return this.isNull(val) || this.isUndefined(val); } } export default Helpers
从另一个文件导入单个功能
使用ES5 (CommonJS)
// 使用 ES5 (CommonJS) - index.js const Helpers = require('./helpers.js'); console.log(Helpers.isNull(null));
使用 ES6 Modules
import Helpers from '.helpers.js' console.log(Helpers.isNull(null));
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 什么是 ES6 模块?
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 什么是 ES6 模块?