摘要:注意命令会忽略模块的方法。这时,也可以将的属性或方法,改名后再输出上面代码表示,只输出模块的方法,且将其改名为。
require、import、export CommonJS规范
require()和module.exports
使用立即执行函数的写法,外部代码无法读取内部的_count变量
let module = (function() { let _count = 0 let m1 = function() { console.log(_count) } let m2 = function() { console.log(_count + 1) } return { m1: m1, m2: m2 } })ES6规范
使用export导出,用于规定模块的对外接口
一个模块是一个独立文件,文件内的所有变量或函数或类外部无法获取,如果希望获取到,必须使用export关键字
(1) 输出变量或者函数、类
输出变量
// profile.js export let firstName = "Mc" export let lastName = "IU" export const year = 2017
另一种写法,优先考虑下面这种写法
let firstName = "Mc" let lastName = "IU" const year = 2017 export {firstName, lastName, year}
输出一个函数
function v1() { } function v2() { } export { v1 as namedV1, // as关键字重命名 v2 }
(2) export语句输出的接口,与其对应的值是动态绑定关系,可以取到模块内部实时的值
export let foo = "baz" setTimeout(() => foo = "baz", 500) // 输出foo值为bar,500毫秒之后变为baz
(3) export default命令,默认输出
// default.js // 匿名函数 export default function() { console.log("foo") } // 非匿名函数 export default function foo() { console.log("foo") } // 另一种写法 function foo() { console.log("foo") } export default foo
default后不能跟变量声明语句
// 错误 // export default let a = 1 let a = 1 export default a
输出类
export default class {} import Name from "Myclass" let o = new Name()
(4) 需要注意的正确的写法
// 错误写法 // ①export 1 // ②let m = 1; export m // 变量的export正确写法 export let m = 1 let m = 1 export {m} let n = 1 export {n as m} // 函数或类export正确写法 export function f() {} function f() {} export {f}
使用import导入,用于获取其他模块提供的功能
使用export命令定义了模块的对外接口后,其他JS文件就可以通过import来加载这个模块
(1) 引入变量
// main.js import {firstName, lastName, year} from "./profile" function setName(element) { element.textContent = firstName + " " + lastName } // 同样可重命名 import {lastName as listame} from "./profile"
(2) import具有提升效果
foo() import {foo} from "my_module" // 不会报错,可正常调用foo函数
(3) 整体加载
// circle.js function area(radius) { return Math.PI * radius * radius } function circumference(radius) { return 2 * Math.PI * radius }
// main.js import {area, circumference} from "./circle" // 逐个加载 area(4) circumference(14) import * as circle from "./circle" // 整体加载 circle.area(4) circle.circumference(14)
(4) 引入默认导出
// 默认导出 export default function crc32() {} import anyName from "crc32" // 非默认导出(注意大括号) export function crc32() {} import {crc32} from "crc32"
模块的继承
假设有一个circleplus模块,继承了circle模块:
// circleplus.js export * from "circle" // 继承了circle的所有属性和方法 export let e = 2.718 export default function(x) { return Math.exp(x) }
上面代码中的export ,表示再输出circle模块的所有属性和方法。注意export 命令会忽略circle模块的default方法。
然后,上面代码又输出了自定义的e变量和默认方法。
这时,也可以将circle的属性或方法,改名后再输出:
// circleplus.js export {area as circleArea} from "cricle"
上面代码表示,只输出circle模块的area方法,且将其改名为circleArea。
加载方法如下
// math.js import * as math from "circleplus" import exp from "circleplus" console.log(exp(math.e))
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/83925.html
摘要:我觉得那时他可能并没有料到,这一规则的制定会让整个前端发生翻天覆地的变化。前言 作为一名前端工程师,每天的清晨,你走进公司的大门,回味着前台妹子的笑容,摘下耳机,泡上一杯茶,打开 Terminal 进入对应的项目目录下,然后 npm run start / dev 或者 yarn start / dev 就开始了一天的工作。 当你需要进行时间的转换只需要使用 dayjs 或者 momentj...
摘要:联想到我在微信小程序上的开发体验,真心觉得如果有热更新机制的话,开发效率要高很多。热更新示例下面通过例子来进一步解释热更新机制。 想必作为前端大佬的你,工作中应该用过 webpack,并且对热更新的特性也有了解。如果没有,当然也没关系。 下面我要讲的,是我对 Webpack 热更新机制的一些认识和理解,不足之处,欢迎指正。 首先: 热更新是啥? 热更新,是指 Hot Module Re...
摘要:而通过实现名为的标准模块,完美的解决了模块导入问题。通常都被称为包管理器,而这也是它最大的特色。例如,接受请求发送响应。该模块主要处理文件相关内容,其中大多数都是文件读写功能。 在上一篇文章中,我们简单的介绍了 Node.js 。了解到它基于 JavaScript、天生异步、拥有大量的第三方类库。本文将会在之前的基础上,对 Node.js 进行更深入的介绍。其中主要内容包括: Nod...
摘要:你了解吗核心概念的核心概念大致分为四个入口出口插件,是一个打包模块化的工具,专注构建模块化项目。优点只更新变更内容,以节省宝贵的开发时间。在构建过程中,将引用的静态资源路径修改为上对应的路径。可以通过在启动时追加参数来实现提取公共代码。 你了解Webpack吗? 核心概念 Webpack的核心概念大致分为四个:入口、出口、loader、插件,是一个打包模块化js的工具,专注构建模块化项...
摘要:扩展应用模块功能介绍扩展应用由很多部分组成,其中主要模块为为了避免由于翻译原因导致的问题,因此在下文中对相关模块的称呼一律采用上面的英文。附录官方开发文档英建议有英文阅读能力的人阅读此文档。 概述 本文通过对chrome插件的各个部分进行快速的介绍,从而让大家了解插件各个部分的关系,并且知道如何将其进行组装成一个完整的chrome插件。 由于chrome官方文档中对于如何从零开发一个c...
阅读 1457·2021-11-22 13:52
阅读 1281·2021-09-29 09:34
阅读 2690·2021-09-09 11:40
阅读 3030·2019-08-30 15:54
阅读 1255·2019-08-30 15:53
阅读 971·2019-08-30 11:01
阅读 1354·2019-08-29 17:22
阅读 1942·2019-08-26 10:57