前端模块化开发规范

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端J先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值