前端模块化开发规范

前端日益渐增的复杂化,使我们前端越来越偏向于代码复用性考虑,采用了模块化开发,但是模块化开发有以下几个规范,我将一一讲解.前端模块化开发规范分为CommonJs,Amd,Cmd,es6模块化.

commonJS

CommonJS规范是在node模块系统基础上创建出来的，CommonJS在服务器中使用，不能在浏览器环境中使用。CommonJS规范规定每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

commonjs导出
//第一种方法
function a(){
console.log('a');
}
function b(){
console.log('b');
}
module.exports.a = a;
module.exports.b = b;
//第二种
module.exports={
a:a,
b:b
}
//第三种
module.exports={
a:true,
b(a,b){
return a+b;
}
}

commonJs导入

//a和b是导出出去的变量
//导入第一种方式
var {a,b}=require('./aaa.js');
//导入第二种方式
//默认导入一个对象,通过对象的语法进行调用
var c =require('./aaa.js');
c.a();

es6模块化使用是我们经常使用的,这里化重点

es6模块化导出

let name='王菜菜';
let age='22';
function sum(a,b){
return a+b;
}
//第一种方法
export={
name:name,
age:age,
sum:sum
}
//第二种方法
export let hight='1.95';
export let hody='跑步';
export function sum(a,b){
return a+b;
};
//定义class类
export class Pest{
run(){
return 1+2;
}
};
//第三种方法 export default 只能有一个可以默认导出,让导入者自己命名
export default 

es6模块导入

//第一种方法

import { name, age,Pest} from './aaa.js';
console.log(name);
const p=new Pest();
p.sum();
//第二种方法,通过as给导入的模块起一个别名,导入的是一个对象
//这样也可以避免与导入页面的变量名冲突
import * as gey from './aaa.js';
console.log(gey.name);
//第三种方法 export default 默认导入
import gey from './aaa.js';
//默认导入的就是export default 
console.log(gey);

剩下俩个amd和cmd前端不常用就不写了