前端日益渐增的复杂化,使我们前端越来越偏向于代码复用性考虑,采用了模块化开发,但是模块化开发有以下几个规范,我将一一讲解.前端模块化开发规范分为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前端不常用就不写了
