JavaScript模块化功能使用总结

文章目录

模块化介绍
准备工作
注意事项
html中基本使用
- 注意的点
导出方式-〉默认导出
- - 导出一个匿名函数:moduleDefault.mjs
  - 运行该匿名函数
  - 导出一个非匿名函数
  - 运行该模块函数
- 注意事项
模块处理-〉非默认
- 基本用法
- - tools.mjs
  - use.js
- 避免命名冲突->重命名导入与导出
- - 导出使用别名
  - 导入使用
- 避免不同文件相同函数名字-> 创建模块对象
- - 使用模块对象化
类的导出
模块化合并操作
- tools.js 汇总该导出
- 使用方式一：正常引入
- 使用方式二：合并引入
动态加载模块
- 使用html进行演示
- 使用js进行演示
写到最后

模块化介绍

将 JavaScript 程序拆分为可按需导入的单独模块的机制，当然这是官方的解释，我写博客一般不会使用官方的解释，所以用比较通俗易懂的话来讲就是尽可能的将每一个功能点都进行拆分，尽量的每一个模块都是代表一个独立的功能，这样不管是后期的功能组装还是相互引用或者是功能的维护都是有很大的好处的，也是非常具有意义的，那么今天讲的就是如何将代码模块化，模块化需要注意的一些点是什么！

准备工作

开始之前我们需要知道的，浏览器开始的时候本身是不支持模块化操作的，也就是说我们所有的模块化操作都是基于nodejs支持的，或者是一些特殊的写法，不过值得说的是，最近的一些浏览器已经开始逐渐支持最新的模块化的操作和写法，今天我们主要的一些操作都是基于nodejs的，当然关于浏览器本身的一些写法我们也会说一下，毕竟不是什么很难的事情，大概了解就可以了！

注意事项

下面的内容中使用的文件后缀存在的有js和mjs，这个根据自己的浏览器支持能力进行使用
苹果自带的一些文件查看器，会将mjs的后缀默认添加一个js，也就说我们起名字的时候是mjs，但是因为苹果不认识，导致最后我们使用的还是js，那么这个时候我们需要将苹果的默认不看后缀的功能关闭即可

html中基本使用

moduT.mjs

/*** @Description: 测试html中使用模块* @author:clearlove* @param name* @return name* @createTime: 2022-07-01 17:17:25*/
let name = 'jim'
export {name,
}

index.html

<script type="module">import {name} from '../js/moduT.mjs'console.log(name)
</script>

添加关键字module之后可以直接使用export和import进行配合使用js内部的内容

Module

注意的点

使用type='module’的时候，不需要添加defer属性，因为这种类型本身就是延迟加载的
使用type='module’的时候，是具有一定的块级作作用域的，也就是我们无法全局使用它们，只可以在script内部使用
type='module’默认是严格模式，这个需要注意

导出方式-〉默认导出

导出一个匿名函数:moduleDefault.mjs

/*** @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

注意事项

默认导出，不加大括号，每次只可以导出一个默认项
因为是默认导出，所以可以直接使用任何变量名字接收参数

//导出name
let name = 'kim'
export default name
//接收otherName
import otherName from './moduleDefault.js'
console.log(otherName)
// kim

模块处理-〉非默认

基本用法

tools.mjs

/*** @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
}

use.js

/*** @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

避免不同文件相同函数名字-> 创建模块对象

当然一般情况下，如果不是一个人在写模块的话，这种现象出现的概率还是很大的，一个人写的时候可以注意一点，根据文件名字进行不同的区分，如果在使用的时候出现了此类的问题，可以按照上面的相同的方式解决，导出的时候进行重命名即可！当然既然写了，就是希望有一个更好的方式解决这问题，我们可以创建一个模块对象出来，代码如下：

objModuleOne.js

/*** @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
}

objModuleTwo.js

/*** @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

addition.js

let addition = () => {console.log('this is addition')
}export {addition
}

division.js

let division = () => {console.log('this is division')
}export {division
}

subtraction.js

let subtraction = () => {console.log('this is subtraction')
}export {subtraction
}

tools.js 汇总该导出

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
}

使用html进行演示

<!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

使用js进行演示

/*** @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

写到最后

文章至此已经将一些最基础的模块化的使用总结了，那么还是老话，有问题随时联系和留言，我最近很少更新一下项目中的问题，都是一些总结性质的，不是因为项目中没有问题，只是很多的问题不太好描述，同时也不太好说明这个问题的一些前因后果，甚至文章名字都不太好起，所以，有问题的话，一般都是记录下来，不太会占一篇文章来说明，我始终认为一篇好的文章不是教会你解决一个特定的问题，而是更好的扩展你的知识面和总结性质的知识，这样后面遇到的问题的时候自主解决的能力才会得到提高，仅此而已！

JavaScript模块化功能使用总结相关推荐

五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用
一.JavaScript原始功能 -在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的. 那个时候的代码是怎么写的呢? 直接将代码写在<scri ...
JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules
随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化. 这篇文章还是希望能给大家一 ...
javascript模块化、模块加载器初探
最常见网站的javascript架构可能是这样的: 一个底层框架文件,如jQuery 一个网站业务框架文件,包含整站公用业务模块类(如弹框.ajax封装等) 多个业务文件,包含每个具体页面有关系的业务 ...
(转)Javascript模块化编程（一）：模块的写法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
Javascript模块化编程（一）：模块的写法
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
Javascript模块化编程：AMD规范
一.模块的规范先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写 ...
javascript模块化之CommonJS、AMD、CMD、UMD、ES6
javascript模块化之CommonJS.AMD.CMD.UMD.ES6 一.总结一句话总结: CommonJS是同步加载模块,用在服务端:AMD是异步加载模块,用于浏览器端 1.为什么服务器端 ...
javascript模块化简介
所有原创并不精彩,所有精彩并非原创历史 JavaScript 随着时间的推移所负责的责任越来越重从最开始的添加表单验证功能之类的脚本到angular 应用开发框架,随着js任务越来越重就急需模块化的 ...
JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...
Web前端进阶之JavaScript模块化编程知识
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...

JavaScript模块化功能使用总结

文章目录

模块化介绍

准备工作

注意事项

html中基本使用

注意的点

导出方式-〉默认导出

导出一个匿名函数:moduleDefault.mjs

运行该匿名函数

导出一个非匿名函数

运行该模块函数

注意事项

模块处理-〉非默认

基本用法

tools.mjs

use.js

避免命名冲突->重命名导入与导出

导出使用别名

导入使用

避免不同文件相同函数名字-> 创建模块对象

使用模块对象化

类的导出

模块化合并操作

tools.js 汇总该导出

使用方式一：正常引入

使用方式二：合并引入

动态加载模块

使用html进行演示

使用js进行演示

写到最后

JavaScript模块化功能使用总结相关推荐

最新文章

热门文章

JavaScript模块化功能使用总结

文章目录

模块化介绍

准备工作

注意事项

html中基本使用

注意的点

导出方式-〉默认导出

导出一个匿名函数:moduleDefault.mjs

运行该匿名函数

导出一个非匿名函数

运行该模块函数

注意事项

模块处理-〉非默认

基本用法

tools.mjs

use.js

避免命名冲突->重命名导入与导出

导出使用别名

导入使用

避免不同文件相同函数名字-> 创建模块对象

使用模块对象化

类的导出

模块化合并操作

tools.js 汇总该导出

使用方式一 ： 正常引入

使用方式二： 合并引入

动态加载模块

使用html进行演示

使用js进行演示

写到最后

JavaScript模块化功能使用总结相关推荐

最新文章

热门文章

使用方式一：正常引入

使用方式二：合并引入