# js 模块化（commonjs、AMD、CMD、ES6）##

zbwroom

已于 2022-08-18 21:43:32 修改

阅读量276

点赞数

分类专栏： javascript 文章标签： javascript es6 前端

于 2022-08-18 21:42:58 首次发布

本文链接：https://blog.csdn.net/zbwroom/article/details/126414469

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一简介

1.什么是模块化

模块化简单来说就是将一个复杂的项目根据一些特定的规则（模块、功能、页面）封装成不同的模块，然后再合并在一起，内部功能实现私有化，向外部暴露方法进行通信

2.模块化的好处

1. 避免全局变量污染
2. 利于项目维护
3. 便于代码复用

3.模块化的规范

1. CommonJS
2. AMD
3. CMD
4. ES6

二 CommonJS 规范

1.说明

每个文件都可以作为一个模块，服务端是同步进行加载，浏览器需要编译(使用Browserify进行格式转换)之后才可以（浏览器引擎不认识，原因是浏览器缺少Node.js环境变量：module、exports、require、global）

2.基本语法

// 暴露模块
// 方式1 module.exports = value;
// 方式2 exports.xx = value;

// 引入模块
// 项目内模块 let xx = require('../../xx.js')
// 第三方模块 let xx = require('xx')

3. 基本示例

// a.js
module.exports = {
    name:'Hello World',
    foo(){
        console.log('a.js name:', this.name );
    }
}

// b.js
module.exports = function(){
    console.log('b.js');
}

// c.js
exports.foo = function (){
    console.log('c.js foo');
}
exports.bar = function (){
    console.log('c.js bar');
}
exports.name = 'Hello World !';

// main.js
let a = require('./a.js');
let b = require('./b.js');
let c = require('./c.js');
let _ = require('lodash');

console.log(a.name);       // Hello World
console.log(a.foo());      // a.js name: Hello World
console.log(b());          // b.js
console.log(c.foo());      // c.js foo
console.log(c.bar());      // c.js bar
console.log(c.name);       // Hello World !
console.log(_.add(6, 4));  // 10