前端模块化
0 Views 前端 with
本文字数:352 字 | 阅读时长 ≈ 1 min

前端模块化

0 Views 前端 with
本文字数:352 字 | 阅读时长 ≈ 1 min

本节主要讲述前端模块化

CommonJS

含义JavaScript模块化规范

核心思想:通过require方法来同步加载依赖的模块,通过module.exports导出需要暴露的接口

1
2
3
4
5
// 导入
const moduleA = require('./moduleA');

// 导出
module.exports = moduleA.someFunc;

缺点

代码无法直接运行在浏览器环境下,必须通过工具转换成标准的ES5

AMD

含义JavaScript模块化规范

不同点:异步加载依赖模块

用处:用于解决针对浏览器环境的模块化问题

1
2
3
4
5
6
7
8
9
10
11
12
// 定义一个模块
define([
'require',
'dependency'
], function(require, factory) {
'use strict';

});

// 导入和使用

require()

优点

缺点

JavaScript运行环境没有原生支持AMD,需要项导入实现了AMD的库后才能正常使用

ES6模块化

它将逐渐取代CommonJs和AMD规范

1
2
3
4
5
// 导入
import { readFile } from 'fs';

// 导出
export default

样式文件中的模块化

以SCSS为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// util.scss文件

// 定义样式片段

@mixin center {
position: absoluts;
left: 50%;
top: 50%;
}


// 导入和使用util.scss中定义的样式片段
@import 'util';
#box{
@include center
}