对于JS模块的简单了解

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))
    原文作者:luckyzv
    原文地址: https://segmentfault.com/a/1190000010102568
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞