对于JS模块的简单了解

hiYoHoo 发布于2019-08-20 17:51 / 3010人阅读

摘要：注意命令会忽略模块的方法。这时，也可以将的属性或方法，改名后再输出上面代码表示，只输出模块的方法，且将其改名为。

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))

GPU云服务器云服务器 js实现的简单特效简单js做的特效简单的js提示框简单的上传图片js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83925.html

从 IIFE 聊到 Babel 带你深入了解前端模块化发展体系

摘要：我觉得那时他可能并没有料到，这一规则的制定会让整个前端发生翻天覆地的变化。前言作为一名前端工程师，每天的清晨，你走进公司的大门，回味着前台妹子的笑容，摘下耳机，泡上一杯茶，打开 Terminal 进入对应的项目目录下，然后 npm run start / dev 或者 yarn start / dev 就开始了一天的工作。当你需要进行时间的转换只需要使用 dayjs 或者 momentj...

tinylcy 2019-05-23 17:33 评论0 收藏0
Webpack 热更新机制

摘要：联想到我在微信小程序上的开发体验，真心觉得如果有热更新机制的话，开发效率要高很多。热更新示例下面通过例子来进一步解释热更新机制。想必作为前端大佬的你，工作中应该用过 webpack，并且对热更新的特性也有了解。如果没有，当然也没关系。下面我要讲的，是我对 Webpack 热更新机制的一些认识和理解，不足之处，欢迎指正。首先：热更新是啥？热更新，是指 Hot Module Re...

mikasa 2019-08-23 14:05 评论0 收藏0
Express 实战（二）：Node.js 基础

摘要：而通过实现名为的标准模块，完美的解决了模块导入问题。通常都被称为包管理器，而这也是它最大的特色。例如，接受请求发送响应。该模块主要处理文件相关内容，其中大多数都是文件读写功能。在上一篇文章中，我们简单的介绍了 Node.js 。了解到它基于 JavaScript、天生异步、拥有大量的第三方类库。本文将会在之前的基础上，对 Node.js 进行更深入的介绍。其中主要内容包括： Nod...

soasme 2019-08-20 18:53 评论0 收藏0
了解Webpack吗？

摘要：你了解吗核心概念的核心概念大致分为四个入口出口插件，是一个打包模块化的工具，专注构建模块化项目。优点只更新变更内容，以节省宝贵的开发时间。在构建过程中，将引用的静态资源路径修改为上对应的路径。可以通过在启动时追加参数来实现提取公共代码。你了解Webpack吗？核心概念 Webpack的核心概念大致分为四个：入口、出口、loader、插件，是一个打包模块化js的工具，专注构建模块化项...

Cympros 2019-08-23 18:29 评论0 收藏0
chrome扩展应用开发快速科普

摘要：扩展应用模块功能介绍扩展应用由很多部分组成，其中主要模块为为了避免由于翻译原因导致的问题，因此在下文中对相关模块的称呼一律采用上面的英文。附录官方开发文档英建议有英文阅读能力的人阅读此文档。概述本文通过对chrome插件的各个部分进行快速的介绍，从而让大家了解插件各个部分的关系，并且知道如何将其进行组装成一个完整的chrome插件。由于chrome官方文档中对于如何从零开发一个c...

MockingBird 2019-08-22 16:07 评论0 收藏0