将 JavaScript 程序拆分为可按需导入的单独模块的机制,当然这是官方的解释,我写博客一般不会使用官方的解释,所以用比较通俗易懂的话来讲就是尽可能的将每一个功能点都进行拆分,尽量的每一个模块都是代表一个独立的功能,这样不管是后期的功能组装还是相互引用或者是功能的维护都是有很大的好处的,也是非常具有意义的,那么今天讲的就是如何将代码模块化,模块化需要注意的一些点是什么!
开始之前我们需要知道的,浏览器开始的时候本身是不支持模块化操作的,也就是说我们所有的模块化操作都是基于nodejs支持的,或者是一些特殊的写法,不过值得说的是,最近的一些浏览器已经开始逐渐支持最新的模块化的操作和写法,今天我们主要的一些操作都是基于nodejs的,当然关于浏览器本身的一些写法我们也会说一下,毕竟不是什么很难的事情,大概了解就可以了!
/**
* @Description: 测试html中使用模块
* @author:clearlove
* @param name
* @return name
* @createTime: 2022-07-01 17:17:25
*/
let name = 'jim'
export {
name,
}
<script type="module">
import {
name
} from '../js/moduT.mjs'
console.log(name)
</script>
添加关键字module之后可以直接使用export和import进行配合使用js内部的内容 Module
/**
* @Description: 默认导出一个匿名函数
* @author:clearlove
* @param function
* @return console
* @createTime: 2022-07-01 17:31:07
*/
export default function(){
console.log('this is defaultFunction')
}
/**
* @Description: 测试使用导出模块
* @author:clearlove
* @param function
* @return f
* @createTime: 2022-07-01 17:30:44
*/
import f from './moduleDefault.mjs'
f()
//this is defaultFunction
let f = ()=>{
console.log('this is not anonymous function')
}
export default f
import f from './moduleDefault.mjs'
f()
//this is not anonymous function
/**
* @Description: 非默认模块基本用法
* @author:clearlove
* @param name age height f
* @return
* @createTime: 2022-07-01 17:46:36
*/
let name, age, addr, height
name = 'jim'
age = 20
addr = 'ch'
height = '180cm'
let f = () => {
console.log('this is function')
}
export {
name,
age,
addr,
height,
f
}
/**
* @Description: 测试使用导出模块
* @author:clearlove
* @param function
* @return f
* @createTime: 2022-07-01 17:30:44
*/
import {
name,
age,
height,
f
} from './tool.mjs'
console.log(name) //jim
console.log(age) //20
console.log(height) //180cm
f() //this is function
/**
* @Description: 非默认模块基本用法 -- 导出使用别名
* @author:clearlove
* @param
* @return
* @createTime: 2022-07-01 17:46:36
*/
let f1 = () => {
console.log('this is addition')
}
let f2 = () => {
console.log('this is subtraction')
}
let f3 = () => {
console.log('this is multiplication')
}
let f4 = () => {
console.log('this is division')
}
export {
f1 as addition, f2 as subtraction, f3 as multiplication, f4 as division
}
/**
* @Description: 测试使用导出模块
* @author:clearlove
* @param function
* @return f
* @createTime: 2022-07-01 17:30:44
*/
import {
addition,
subtraction,
multiplication,
division
} from './tool.js'
addition() //this is addition
subtraction() //this is subtraction
multiplication() //this is multiplication
division() //this is division
反之亦然
let f1 = () => {
console.log('this is addition')
}
export {
f1
}
import {
f1 as addition
} from './tool.js'
addition() //this is addition
当然一般情况下,如果不是一个人在写模块的话,这种现象出现的概率还是很大的,一个人写的时候可以注意一点,根据文件名字进行不同的区分,如果在使用的时候出现了此类的问题,可以按照上面的相同的方式解决,导出的时候进行重命名即可!当然既然写了,就是希望有一个更好的方式解决这问题,我们可以创建一个模块对象出来,代码如下:
/**
* @Description: 创建模块对象功能测试One
* @author:clearlove
* @param
* @return
* @createTime: 2022-07-01 18:14:31
*/
let drawCircle = () => {
console.log('this is OneModulesDrawSquare')
}
let drawSquare = () => {
console.log('this is OneModulesDrawSquare')
}
export {
drawCircle,
drawSquare
}
/**
* @Description: 创建模块对象功能测试Two
* @author:clearlove
* @param
* @return
* @createTime: 2022-07-01 18:14:31
*/
let drawCircle = () => {
console.log('this is TwoModulesDrawSquare')
}
let drawSquare = () => {
console.log('this is TwoModulesDrawSquare')
}
export {
drawCircle,
drawSquare
}
/**
* @Description: 测试使用导出模块
* @author:clearlove
* @param function
* @return f
* @createTime: 2022-07-01 17:30:44
*/
import * as oneModule from './objModuleOne.js'
import * as twoModule from './objModuleTwo.js'
oneModule.drawCircle() //this is OneModulesDrawSquare
oneModule.drawSquare() //this is OneModulesDrawSquare
twoModule.drawCircle() //this is TwoModulesDrawSquare
twoModule.drawSquare() //this is TwoModulesDrawSquare
这样做的好处就是我们可以很清楚的知道我们需要调用的函数,也不需要关心是不是重命名了,因为我们被挂载到不同的模块对象上,这样是根据不同的模块对象进行调用的,我们也是默认使用了所有的内部导出的功能函数,可以直接随意使用我们需要的函数
/**
* @Description: 测试模块类
* @author:clearlove
* @param
* @return
* @createTime: 2022-07-01 18:27:09
*/
class Animal {
constructor(name) {
this.name = name
}
eat() {
console.log(`${this.name}吃东西`)
}
}
export {
Animal
}
/**
* @Description: 测试使用导出模块
* @author:clearlove
* @param function
* @return f
* @createTime: 2022-07-01 17:30:44
*/
import {
Animal
} from '../js/classTest.js'
let dog = new Animal('狗')
dog.eat() //狗吃东西
类的模块化其实和函数变量都差不多,只是使用的时候我们需要进行一个实例化的过程,包括里面的构造器或者是一些类的继承都是需要注意的,这个我在我别的文章里面写过了,包括类的继承和一些注意事项,感兴趣的可以自行查找。
在进行合并操作之前的话,需要说明的一个点,合并的操作需要使用目录结构进行配合使用的,大概的一个目录结构如下,当然理乱上只是为了更加的清晰一点。 modules/tools.js tools/ addition.js division.js subtraction.js
let addition = () => {
console.log('this is addition')
}
export {
addition
}
let division = () => {
console.log('this is division')
}
export {
division
}
let subtraction = () => {
console.log('this is subtraction')
}
export {
subtraction
}
export {
addition
} from '/Users/leimingwei/Desktop/LeiMingWei/zxGs/aliyun/modulesShow/src/modules/tools/addition.js'
export {
division
} from '/Users/leimingwei/Desktop/LeiMingWei/zxGs/aliyun/modulesShow/src/modules/tools/division.js'
export {
subtraction
} from '/Users/leimingwei/Desktop/LeiMingWei/zxGs/aliyun/modulesShow/src/modules/tools/subtraction.js'
//这里的路径需要进行将module的路径完全展示出来,否则不太好直接引入到文件内容,如果直接使用下面的方式一的话,是不需要该文件的,但是如果使用的是方式二的话,是需要引入该文件的
import {
addition
} from '../modules/tools/addition.js'
import {
division
} from '../modules/tools/division.js'
import {
subtraction
} from '../modules/tools/subtraction.js'
addition() //this is addition
division() //this is division
subtraction() //this is subtraction
import {
addition,
division,
subtraction
} from '../modules/tools.js'
addition() //this is addition
division() //this is division
subtraction() //this is subtraction
动态加载模块其实和导出部分关系不大, 只是我们使用的时候,使用的是模块化本身自带的一些功能,模块化允许我们import当作一个函数使用,返回一个promise,这样我们可以直接进行异步或者一些动作上的操作
let drawCrl = () => {
console.log("start drawCrl")
}
export {
drawCrl
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="crl">点击开始画圆形</button>
</body>
<script type="module">
let btn = document.getElementById('crl')
btn.addEventListener('click', () => {
import('../js/dynamicLoad.js').then(s => {
s.drawCrl()
})
})
</script>
</html>
//start drawCrl
/**
* @Description: 测试使用动态导出模块
* @author:clearlove
* @param function
* @return f
* @createTime: 2022-07-01 17:30:44
*/
import('./dynamicLoad.js').then((c) => {
console.log(c)
c.drawCrl()
})
//start drawCrl
文章至此已经将一些最基础的模块化的使用总结了,那么还是老话,有问题随时联系和留言,我最近很少更新一下项目中的问题,都是一些总结性质的,不是因为项目中没有问题,只是很多的问题不太好描述,同时也不太好说明这个问题的一些前因后果,甚至文章名字都不太好起,所以,有问题的话,一般都是记录下来,不太会占一篇文章来说明,我始终认为一篇好的文章不是教会你解决一个特定的问题,而是更好的扩展你的知识面和总结性质的知识,这样后面遇到的问题的时候自主解决的能力才会得到提高,仅此而已!