跳到主要内容

模块化

模块化​

模块化指的就是将一个大的功能拆分为一个一个小的模块，通过不同的模块的组合来实现一个大功能。

  • 在 node 中一个 js 文件就是一个模块
  • 模块内部代码对于外部来说都是不可见的，可以通过两种方式向外部暴露

模块创建​

创建 JS 文件，编写代码

// 创建 JS 文件，编写代码
function add(a, b) {
    return a + b;
}

// 在文件中对外暴露
module.exports = add;
注意点
  1. 暴露的数据可以是任意类型，一般暴露的数据都是引用类型的，数组、对象、函数
    module.exports = 'hello';
    module.exports = 111;
  2. 可以使用 module.exports 暴露多个数据
    let a = 100;
    let b = 200;
    exports.a = a;
    exports.b = b;
    module.exports = {a, b};
    //exports = module.exports = {a: a, b: b};
  3. exports 也可以暴露数据，不过不能使用 exports = xxx 的形式

模块引入​

使用 require 引入文件即可

const add = require('./add.js');
注意点

文件 如果没有加文件后缀，会按照以下后缀加载文件

  • .js fs模块同步读取文件编译执行
  • .json fs模块同步读取文件，用JSON.parse()解析返回结果
  • .node 这是c/c++编写的扩展文件，通过dlopen()方法编译
  • 其他扩展名 会以.js文件载入

文件夹

  • 默认加载该文件夹下 package.json 文件中 main 属性对应的文件
  • 如果 main 属性对应的文件不存在，则自动找 index.js index.json
  • 如果是内置模块或者是 npm 安装的模块，直接使用包名字即可
  • npm 引入包时，如果当前文件夹下的 node_modules 没有，则会自动向上查找

简化记忆​

暴露：module.exports = xxx;

引入：const xxx = require('./xxx.js');

CommonJS模块化​

1.编写自定义模块​

module1.js
//使用module.exports暴露一个加法函数
module.exports = function increment(a, b) {
    console.log(a + b);
}
module2.js
//使用exports.xxxx暴露一个减法函数、再暴露一个乘法函数
  exports.decrement = function (a,b){
      console.log(a-b);
  } 
  exports.mul = function (a,b){
      console.log(a*b);
  }
module3.js
//使用module.exports暴露一个对象
module.exports = {
    data: 'atguigu',
    demo() {
        console.log('module3---demo1');
    }
}

2.下载第三方模块​

执行命令：npm i uniq

3.主文件引入模块​

app.js
const module1 = require('./module1')
const module2 = require('./module2')
const {data, demo} = require('./module3')
const uniq = require('uniq')

module1(1, 2)
module2.decrement(3, 4)
module2.mul(5, 6)
demo()
console.log(data);
const result = uniq([1, 2, 3, 4, 4, 4, 3, 5, 8, 8, 9, 7, 6, 10, 11])
console.log(result);

4.运行app.js​

在Node环境下运行，直接使用命令: node app.js

在浏览器环境下运行，需要如下操作：

  • 全局安装Browserify npm install browserify -g

  • 编译指定文件 browserify a.js -o build.js

  • html页面中引入build.js

ES6模块化​

1.编写自定义模块​

建立文件结构：

-src
    -module1.js
    -module2.js
    -module3.js
    -module4.js
    -app.js
module1.js
// module1中，使用【分别暴露】
export const data = 'atguigu'
export const msg = '你好，0826！'

export function showData() {
    console.log('我是module1中的showData函数', data);
}

export function showMsg() {
    console.log('我是module1中的showMsg函数', msg);
}
module2.js
// module2中，使用【统一暴露】

let arr = [1, 3, 5, 7, 9]
let person = {name: 'tom', age: 18}

function showArr() {
    console.log('module2中的数组为：', arr);
}

function showPerson() {
    console.log('module2中的人为：', person);
}

//统一暴露showArr、showPerson
//export {showArr,showPerson}

//统一暴露showArr、showPerson并重命名
export {showArr as a, showPerson as b}

module3.js
// module3中，使用【默认暴露】

const schoolInfo = {
    name: '哔哩哔哩',
    address: '北京科技园',
    subject: '前端·后端'
}

export default schoolInfo
module4.js
// module4中各种暴露同时使用

//分别暴露
export let date = '2020年11月20日'

export function showRandom() {
    console.log(Math.random);
}

//统一暴露
let str = 'hello,atguigu'
let dog = {name: '旺财', age: 4}
export {str, dog}

//默认暴露
export default ['刺激战场', '穿越火线', '王者农药']

2.下载第三方模块​

执行命令（以uniq为例）：npm i uniq

3.主文件引入​

app.js引入各个模块
//在es6的模块化规范中，用哪一种方式引入，取决于用何种方式暴露的。

//引入【分别暴露】的模块方法1
import {data, msg, showData, showMsg} from './module1'

//引入【分别暴露】的模块方法2
import * as obj from './module1'

//引入【统一暴露】的模块方法1
import {showArr, showPerson} from './module2'

//引入【统一暴露】的模块方法2
import * as obj from './module2'

//引入【默认暴露】的模块
import module3 from './module3'

//引入module4，module4里用了多种暴露的方式
import games, {date, showRandom, str, dog} from './module4'

//引入uniq第三方模块
import uniq from 'uniq'

4.准备相关依赖包（为编译代码做准备）​

全局安装：babel-cli、Browserify，执行命令：npm install babel-cli browserify -g

局部安装：babel-preset-es2015，执行命令：npm install babel-preset-es2015

定义.babelrc文件

{
  "presets": [
    "es2015"
  ]
}

5.编译代码​

进入目录，使用Babel将ES6编译为ES5代码: babel ./src -d ./build

继续使用Browserify编译上一步的js: browserify ./build/app.js -o ./build/index.js

6.页面中引入测试​


<script src="./build/index.js"></script>