如何理解JavaScript模块化?
1、模块化是什么
模块化简单来说就是将一个完整的长篇代码文件根据功能进行划分成几个文件,这些文件各自负责一个独立的功能,各个文件组合起来实现一个完整的大功能,这就是模块化,每个负责独立功能的文件就是模块。
由于一开始JavaScript是在web页面需要的地方提供一定交互,所以一般不需要多大的脚本。但随着JavaScript脚本的复杂化,最新的浏览器已经开始原生支持JavaSript模块功能了。
2、浏览器支持
使用JavaScript 模块依赖于 import 和 export,import 和 export 的浏览器支持程度是最新的浏览器版本都是支持的,但 IE 和旧版本的浏览器不支持,因此若想兼容 IE 和旧版本的浏览器基本就不能使用了。
export 和 import 是成对出现,配合工作的
js模块化是各种js框架学习的前提基础
import 和 export 语句用于将一个模块里实现某些功能的变量或函数导入/导出,也可导入/导出类
3、export 导出模块
默认导出
一个模块只能有一个默认导出,默认导出的变量只能有一个,且不能有大括号{}
语法为export default 变量名
model.js
function Test1(){ console.log("这是默认导出")}function Test2(){ console.log('这是命名导出')}export default Test1
批量导出
语法为export {变量名,变量名……}
function Test1(){ console.log("这是默认导出")}function Test2(){ console.log('这是命名导出')}export {Test1, Test2}
4、import 导入模块
默认导入
main.js
import Test1 from "./model.js"Test1()
默认导入的重命名
main.js
import x from "./model.js"//x就是默认导出的Test1x()
批量导入
main.js
import {Test1, Test2} from "./model.js"Test1();Test2();
批量导入的重命名
as关键字跟一个新名字实现重命名
main.js
import {Test1 as x1, Test2 as x2} from "./model.js"x1();x2();
也可在导出时用as关键字重命名
model.js
function Test1(){ console.log("这是默认导出")}function Test2(){ console.log('这是命名导出')}export {Test1 as x1, Test2 as x2}
应用模块
html
<script src="main.js"></script>
5、创建模块对象
使用对象,在as关键字重命名的基础上进一步简单化
import * as Model from "./model.js"Model.x1();Model.x2();
6、export import 中转站
有时候可以将多个子模块组合到一个父模块中,再由父模块决定导出哪个,这个父模块文件就像是个组合各个模块的中转站
语法为export {变量名} from 模块路径
当前目录结构结构
src index.html main.js redirection.js models model.js model2.js
model.js
function Test1(){ console.log("这是子模块1")}export {Test1}
model2.js
function Test2(){ console.log('这是子模块2')}export {Test2}
redirection.js
export {Test1} from "./models/model.js"export {Test2} from "./models/model2.js"
main.js
import * as Model from "./redirection.js"Model.Test1()Model.Test2()
html
<script src="./main.js"></script>
7、 动态加载模块
动态加载模块用于在导入模块时不必预先加载所有模块,可以在需要时使用 import() 作为函数调用,将其参数传递给模块的路径,它返回一个 promise,使用 Promise 对象对模块加载结果操作。
语法为import(动态加载的模块路径)
dynamic.js
function TestDy(){ console.log("这是动态模块")}export default TestDy
main.js
document.querySelector('.load').onclick = function(){ import('./dynamic.js').then((Model)=>{ Model.default() })}
学习更多技能
请点击下方公众号
如何理解JavaScript模块化?相关推荐
- 深入理解JavaScript系列(四): 模块化编程
本文整理自 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1.模块的写法 1.原始写法 模块就是实现特定功能的一组方法. ...
- JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules
随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化. 这篇文章还是希望能给大家一 ...
- javascript模块化之CommonJS、AMD、CMD、UMD、ES6
javascript模块化之CommonJS.AMD.CMD.UMD.ES6 一.总结 一句话总结: CommonJS是同步加载模块,用在服务端:AMD是异步加载模块,用于浏览器端 1.为什么服务器端 ...
- JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...
- 理解javascript中的回调函数(callback)【转】
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...
- JavaScript模块化思想
1. 首先,我们需要明白为什么要用模块化? 功能都是为了解决需求的.模块化可以带来的优点有以下几点: (1)可维护性.举个例子,如果我们把未使用模块化的代码比作油和水混合在了一起,模块化之后的代码就好 ...
- JavaScript模块化开发(一)基础知识
2019独角兽企业重金招聘Python工程师标准>>> 随着前段JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理 ...
- JavaScript 模块化简述
JavaScript 模块化简述 前言 关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以 ...
- 理解javascript中的回调函数(callback)
理解javascript中的回调函数(callback) 在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Obje ...
最新文章
- c语言实验七实验报告,C语言实验七 数 实验报告.doc
- 【转载】python学习之 字符串前'r'的用法
- 牛B人才简历中的一段
- 中国网络出版产业盈利模式与投资前景形势研究报告2022版
- PHP版本号--phpversion(),PHP_VERSION,PHP_VERSION_ID
- 如何在linux系统下对文件夹名有空格的文件
- MFC界面编程新思路--模仿MATLAB式的界面
- MySQL——基本配置
- 第二章--电商设计表
- mongotemplate 查询子文档_Oracle之SQL查询突破性能瓶颈的参数
- linux源码acl,Linux自主访问控制机制模块详细分析之posix_acl.c核心代码注释与acl.c文件介绍...
- gparted调整分区大小_CentOS Linux系统中用parted分区命令分区
- 一分钟认识JAVA与Android的联系与区别
- 【路径规划】基于matlab动态多群粒子群算法局部搜索路径规划【含Matlab源码 448期】
- VSCode配置cpp环境
- 仿真软件有哪些测试,仿真怎么去仿?测试怎么去测?虽然是问答篇,干货也不少,不要错过了!...
- Travis CI(持续集成)
- “千山之首 大果榛品”2022年辽阳大果榛子地理标志标识推介会开幕
- 《半小时漫画经济学》读书摘记
- 手机和PC站点击商务通无轨迹解决方法