js中的模块化规范

发布于 2021-04-03  62 次阅读


前言

最开始的js并没有模块化这么一说,是散乱的。为了解决这问题,先出现了commonjs规范的模块化。

目前的模块化标准包括commonjs、amd、cmd(不流行)、esm

使用

commonjs

  • 主要在node环境内使用,如果需要在浏览器环境使用需要全局安装browserify模块并且保存在开发环境的依赖中
    使用browserify 源路径 -o 目标路径进行打包

amd

require.config({
    baseUrl:'./js/02',
    paths:{
        math:'math',
        // jquery:'jquery'
    }
});
require(['math'/*,'jquery'*/],(math/*,$*/)=>{
    console.log(math.add(8,9));
    // $('body').css('background-color','green');
})
define(()=>{
    function add(){
        var total=0;
        for( let i of arguments ){
            total+=i;
        }
        return total;
    }
    return {add};  
});

cmd

define((require,exports,module)=>{
    exports.add=function(){
        var total=0;
        for( let i of arguments ){
            total+=i;
        }
        return total;
    }
});
define((require)=>{
    const math=require('./math');
    console.log(math.add(8,9,10));
});

esm

export function add(){
    var total=0;
    for( let i of arguments ){
        total+=i;
    }
    return total;
}
import { add } from './math';

console.log(add(5,6));

Javascript模块化编程(一):模块的写法

Javascript模块化编程(二):AMD规范

Javascript模块化编程(三):require.js的用法

Module 的语法


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。