一、js模块化
命名空间
commonJS
AMD/CMD/UMD
ES6 module
二、命名空间
库名.类别名.方法名
var NameSpace = {}
NameSpace.type = NameSpace.type || {}
NameSpace.type.method = function () {
}
三、commonJS规范
一个文件为一个模块,通过module.export暴露快接口,通过require引入模块,同步执行
示例:
const Router = require('./router/route')
export = module.exports = createApplication;
四、AMD规范
Async Module Definition
使用define定义模块
使用require加载模块
RequireJS
依赖前置,提前执行
示例:
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
Common module definition
一个文件为一个模块
使用define来定义一个模块
使用require来加载一个模块
SeaJS
尽可能懒加载
示例:
// 所有模块都通过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.如果都没有,使用全局变量
示例:
(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
esmascript module
一个文件一个模块
export / import
示例:
// 加载模块的变量或方法
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支持
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
<!-- BEM -->
<button class="button">
Default Button
</button>
<button class="button button--state-success">
Success Button
</button>
<button class="button button--state-danger">
Danger Button
</button>