模块化

JS 模块化

以前的模块化都是通过命名空间来实现的。例如：

var obj = {};
obj.origin = obj.origin || {};
obj.origin,method = function(){}

后来我们用 amd规范 和 cmd规范 来实现模块化
amd(异步加载模块) 的具体实现是require.js，cmd(同步加载) 的具体实现是Sea.js

amd 、cmd （web端模块化规范）

amd 和cmd都是模块化规范。
amd对应的是requireJS库。
amd是异步加载模块的。

cmd对应的是SeaJS库。
cmd加载模块是同步的。

• amd
  a.js 定义模块

define([],function(require,factory){
	return {
             add:function (a,b){
             		console.log(a + b);
             }
        }
}

b.js 导入模块

require(['./amd.js'],function(a){
	a.add(1,2);
}

数组中可以添加当前js文件所要依赖的模块，后面的函数里的参数与前面数组里的每一项一一对应，例子中形式参数‘a’就代表前面数组引用的amd.js.

Es module (es6)

a.js 定义模块

两种导出方式（与下文的导入方式对应）
1. export var a = 10;  export var b = 20
2. var a = 10 ; var b = 2;50; export default{a}

b.js 定义模块

1.impot {a} from './a.js'
console.log(a)  //10
2. import a from './a.js'
console.log(a.b ) //50

导出方式与导入方式对应。

CommonJs （服务端模块化规范）

CommonJs 规范的具体实现是 node.js
a.js 定义模块

两种导出方式
1.var a = 10;
var b = function (a,b) {
	return a + b;
}
model.exports = {
	a,b
}

2.exports.a = 10;
exports.b = function(a,b){
	return a + b
}

b.js 导入模块

var demo = require('./a.js)
demo.b(1，2);

css模块化

oocss （面向对象Css）

一个样式一个类名，通过添加类名的方式实现需求的样式，适用于有很多重复样式的大型项目。

 /*OOCSS编写方式*/         
 .w100 {             
 	width: 100px;         
 }         
 .h100{             
 	height: 100px;         
 }         
 .bgcRed{             
 	background-color: red;         
 }

Amcss （属性模块）避免使用过多的class

通过CSS属性选择器实现
例如 ： vue style标签的 scoped 属性
scoped会生成唯一的属性值，来确保每个文件css有独立的作用域

 <div am-c="one"></div>

         [am-c="one"]{             
	         width:100px;             
	         height:100px;             
	         background-color: pink;         
         }