JS的模块化

影子的影子啦
223 阅读2分钟

js代码可以运行在浏览器和node环境中，但是原生JS中实际是没有模块化规范的，这使js在模块化开发中带来很多不便。

commonJS

在node环境中现实了一套名为commonJS的模块化规范，在commenJS中，每个js文件都一个模块，每个模块内都可以通过require()函数和module.exports对象对模块进行导入和导出，但是commonJS只能在node环境中执行，不能在浏览器中使用 使用方式如下：

require('./moduleA')   //导入
module.exports='hello world' //导出

AMD

在浏览器环境中并没有提供node中的require方法，但是受commonJS模块化规范启发，web端逐渐发展起来了AMD以适用浏览器端的模块化开发。AMD不同与commonJS规范的同步加载，AMD默认是异步加载，这也是为了满足web开发需要，因为如果模块较多的情况下，同步的进行模块化解析会导致js阻塞，影响页面渲染。

AMD中通过define定义一个模块，通过require导入一个模块，导入时接受两个参数，依赖的模块id（模块名）及对应的回调（回调中是引入模块的结果）

⚠️注意：️如果想要使用AMD，还需要添加一个符合AMD的加载器脚本在页面中，常用的有require.js

使用如下：

//导入
require(['moduleA,''modulesB'],function(moduleA,moduleB){
    console.log(moduleA)
})

//导出
define(function(require){
    let a = 'hello world'
    return a
})

ESModule

commonJS和AMD有个共性：他们都是语言上层运行环境的模块化规范，因此在哪个环境及需要使用当前环境中定义的模块化规范，不能共用。 ESModule是ES6之后语言层面的模块化导入和导出规范，我们可以通过import和export两个关键词实现导入和导出。

使用如下：

export:输出模块

//1,输入变量
export var a ='111'
//或
var a ='111'
var b ='222'
export {a,b}

//2,输出函数
export function add(x,y){
    return x+y
}
//或
function add(x,y){
    return x+y
}
export {add}

//3.使用as关键字,可以重命名接口名字
function add(x,y){
    return x+y
}
export {add as test}

import：加载模块

import {a,b} from '../../util.js'

export default:不指定输出名称，为模块指定默认输出时使用export default

export default foo () {
  console.log('foo');
}

import customName from './export-default';//加载时可以自定义名称
customName(); // 'foo'

注意：在加载export default输出的模块可以不加{}(一个模块只能有一个默认输出),但普通输出时一定要加{}。

avatar
文章
阅读
粉丝