前端模块化规范详解

### 一、js模块化

```
命名空间
commonJS
AMD/CMD/UMD
ES6 module
```

### 二、命名空间

库名.类别名.方法名

```js
var NameSpace = {}

NameSpace.type = NameSpace.type || {}

NameSpace.type.method = function () {

}
```

### 三、commonJS规范

一个文件为一个模块，通过module.export暴露块接口，通过require引入模块，同步执行

[commonJS 文档](http://wiki.commonjs.org/wiki/Modules/1.1.1)

示例：

```js
const Router = require('./router/route')

export = module.exports = createApplication;
```

### 四、AMD规范

```js

Async Module Definition

使用define定义模块

使用require加载模块

RequireJS

依赖前置，提前执行
```

[AMD规范文档](https://github.com/amdjs/amdjs-api/wiki/AMD)

示例：

```js
define(
// 模块名字
"alpha",
// 模块输出
["require", "exports", "beta"],
// 模块输出
function (require, exports, beta) {
exports.verb = function () {
return beta.verb();
return require("beta").verb();
}
}
)

define(
["a", "b", "c"],
function (a, b, c) {
// 等于在最前面声明并初始化了要用到的模块
if (false) {
// 即使没用到模块b，但b还是提前执行了
b.foo();
}
}
)
```

### 五、CMD

```js
Common module definition

一个文件为一个模块

使用define来定义一个模块

使用require来加载一个模块

SeaJS

尽可能懒加载
```

示例：

```js
// 所有模块都通过define定义
define(function (require, exports, module) {
// 通过require引入模块
var $ = require('jquery');
var Spining = require('./spinning');

// 通过exports对外提供接口
exports.doSomething =

// 或者通过module.exports 提供整个接口
module.exports =
})
```

### 六、UMD

```
Universal Module definition

通用解决方法

三个步骤：

1.判断是否支持AMD

2.判断是否支持CommonJS

3.如果都没有，使用全局变量
```

示例：

```js
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof exports == 'object') {
module.exports = factory();
} else {
root.returnExports = factory()
}
}(this, function () {
return {}
}))
```

### 七、ESM

```js
esmascript module

一个文件一个模块

export / import
```

示例：

```js
// 加载模块的变量或方法
import theDefault, {named1, named2} from 'src/mylib'
import theDefault from 'src/mylib'
import {named1, named2} from 'src/mylib'

// 引入模块进来并且将named1命名为Named1
import {named1 as myNamed1} from 'src/mylib'

// 加载模块里全部的变量和方法
import * as mylib from 'src/mylib';

// 只加载，不做任何处理
import 'src/mylib'

// 定义一个模块，暴露的接口
export var name1 = "Bob";
export let name2 = "Bob";
export let NAME3 = "Bob";

export function myFunc() {}
export class MyClass {}

// 可以选择暴露
const USERNAME = "Bob";
function myFunc() {}

export {USERNAME, myFunc};
export {USERNAME as NAME, myFunc as Fn};

// 引入其他文件的变量或方法，再暴露出去
export * from "src/other_module";
export {foo, bar} from 'src/other_module';
export {foo as myFoo, bar} from 'src/other_module';

export {foo as myFoo, bar} from 'src/other_module'
```

### 八、webpack支持

```js
AMD(require)

ES Modules 推荐

CommonJS
```

### 九、CSS模块化

```
OOCSS
SMACSS
Atomic CSS
MCSS
AMCSS
BEM
CSS modules
```

Atomic CSS 每个类都是独立的

MCSS 多层级的css

AMCSS 针对属性来写css

BEM：Block，Element，Modifier

```html

<button class="button">
Default Button
</button>

<button class="button button--state-success">
Success Button
</button>

<button class="button button--state-danger">
Danger Button
</button>
```

前端模块化规范详解

相关推荐