程序地带

前端模块化:匿名闭包、CommonJS、ES6模块化


ES5时,用匿名函数实现的模块化

通过将代码放在闭包当中,使得命名不会冲突,每一个js文件都成为独立的模块。需要复用代码时,将闭包中的结构返回到全局作用域即可,通过模块名.方法/属性的方法使用。


// a.js
;
var moduleA = (function(){
var flag = true
function sum(a, b) {
return a + b
}
return {
flag,
sum
}
})()

CommonJS中的模块化


// 导出
// 文件a.js
function sum(a, b) {
return a + b
}
var flag = true
module.exports = {
sum,
flag
}
// 导入
// 文件b.js
var {sum, flag} = require('a.js')

ES6中的模块化


// 文件a.js
// 导出
// 方式一
var name = 'wang'
var age = 18
function say() {
console.log('hello')
}
export {name, age, say}
// 文件a.js
// 导出
// 方式二
export var name = 'wang'
export var age = 18
export function say() {
console.log('hello')
}
// 方式一、二作用相同
// 文件a.js
// 导出
// 方式三
export default function say() {
console.log('hello')
}
// 这种导出方式,只能默认导出一个
// 情况一、二下的导入
import {name, age, say} from './a.js'
// 情况三下的导入
import fun from './a.js'
// 因为是默认导出且只有一个,因此fun必定是函数say,不必再解构
// 通用情况的导入
import * as a from './a.js'
// 将所有的导出,打包到a中
// 使用时,通过a去访问
a.say();

参考文章


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45664402/article/details/111246241

随机推荐

Python对excel表格读写操作

 1.测试代码如下:#-*-coding-8-*-fromopenpyxlimport*defdata_wr(r,c,data):print(ws.cell(row=r,column=...

1want0 阅读(141)

将你的脸变成动漫——《UI2I_via_StyleGAN2》论文解析

将你的脸变成动漫——《UI2I_via_StyleGAN2》论文解析

最近github上开源了一个有点意思的项目,将真实世界的人脸变成动漫里的脸,当然也支持油画风之类的其他风格,或是反过来也可以。github地址:https://github.com/HideUnder...

超屌的温jay 阅读(640)

七.高级IO

七.高级IO

非阻塞IO–阻塞IO补充:有限状态机编程1非阻塞IO简单流程:自然流程是结构化的复杂流程:自然流程不是结构化的2IO多路转接select()poll()epo...

箭shen 阅读(476)

Java拓展-网络编程

Java拓展-网络编程

1、客户端和服务器有哪些关系?客户端和服务器都是电脑,客户端的配置较低;客户端需要主动连接服务器,不可能服务器连接客户端;服务器需...

sdusgq 阅读(908)

spring cloud config 远程配置中心搭建

springcloud使用远程配置中心,可以做到不重启项目的情况下,修改的配置生效。其中注意的事项:     ①client服务必须加bootstrap.pr...

村西那条弯弯的河流 阅读(967)

懒汉式和饿汉试格式

//懒汉式privateStudent(){};privatestaticStudents;publicstaticStudentnewStudent(){if(s==null){s&...

jq1223 阅读(949)