关于javascript:JS模块化历程

12次阅读

共计 1501 个字符,预计需要花费 4 分钟才能阅读完成。

首先,在 ES6 的 class 进去之前是没有模块的,JS 就不是一个模块化的语言 ,所谓的“模块”要么是个匿名函数,要么就是个对象的 伪模块

var module = (function(){
    let _count = 2 // 公有变量
    let m1 = function() {console.log(_count)
    }
    let m2 = function() {console.log(_count + 1)
    }
    return {
        m1,
        m2
    }
})()

转折点:2009 年美国大神程序员创造了 nodeJs 用于服务端编程,服务端必须要有模块,因为要跟操作系统和其余利用互动,否则无奈编程,所以引出了 commonJs 标准

commonJs 标准

导出

module.exports = {math}
exports // 跟 module.exports 区别很小,然而容易出错,不要应用

引入

let math = require('math') // 同步加载,会引起阻塞
math.add(2,3)

毛病:
因为 nodeJs 是服务器语言,它的模块都在本地放着,加载速度比拟快,然而前端加载 JS 是从服务器加载的,比较慢,可能会引起浏览器 假死状态

AMD 标准

define(id?, dependencies?, factory)
*   id: 字符串,模块名称(可选),默认文件名称
*   dependencies: 是咱们要载入的依赖模块(可选),应用相对路径。, 留神是数组格局
*   factory: 工厂办法,返回一个模块函数

导出

// math.js
define(['lib'],function(){ // 依赖 lib.js
    let add = function(x, y){return x + y}
    return {add}
})

引入

require(['math'],function(){math.add(2,3)
})

长处:异步加载模块,执行内容放在回调里
毛病:也算不得毛病,所有的依赖必须申明在文件头部
使用者:require.js

CMD 标准

跟 AMD 的标准就一丢丢小区别

define(['lib'],function(require, exports, module){ // 依赖 lib.js
    let a = require('./a') // 依赖 a.js
    a.test()
    let add = function(x, y){return x + y}
    module.exports = {add}
})

与 AMD 的区别:

  1. 工厂函数默认有三个参数,require用来引入模块,exportsmodule 用于导出,当然导出也能够间接用return
  2. 在工厂函数外部能够用 require 引入模块,不须要把所有依赖都申明在头部,实现 就近依赖,对于开发者比拟敌对

毛病:
就近依赖就必须先解析一下模板才晓得加载哪些模块,不过解析模块的工夫能够短到忽略不计
使用者:seaJs

ES6 Module

导出

// 留神留神,这里是 export, 不是 exports
function addition(){}
export {addition}  // 导出函数
export const foo = 'Hello' // 导出一个变量
export default function(){} // 默认导出一个函数,引入时比拟不便,然而只能导出一个
export default class() // 默认导出一个类

引入

import defaultModule from 'module-name' // export default 导出
import * as name from 'module-name' // 引入所有导出,能够应用 name.add()应用
import {add, del} from 'module-name' // 解构,按需引入
import from 'module-name' // 仅引入
正文完
 0