当前位置:网站首页>JS 模块化
JS 模块化
2022-07-07 14:11:00 【巴山却话】
目录
1. 模块化的发展史
后端语言很早就有了模块化,如 python 等,但 JS 很长一段时间都没有。
这种结果就是 js 无法将一个大文件,拆分成多个小文件,然后再拼接起来,这就在开发大型的、复杂的项目时非常困难。
但是虽然 JS 官方没有给出模块化,但开发者社区却诞生了几种模块化思想,或者叫规范,如 AMD、CMD、CommonJS等。
在这些规范中,AMD 和 CMD 可以在浏览器端实现模块化,CommonJS 更适合 Node 端,因为其默认无法解决浏览器端的异步加载问题,所以不适合浏览器端使用。
2015 年,在 ES6 发布之际,JS 官方终于给出了自己的模块化方案 ES6 Module(ESM),此种模块化方案可以替代、AMD、CMD和 CommonJS,同时支持 浏览器和服务端的模块化,最终实现大一统的模块化方案。
无论是哪种模块化方案,都支持一些基本的概念
- 一个 js 文件就是一个模块
- 模块中的数据是独立的,其他模块默认无法访问
下面重点谈谈 CommonJS 和 ESM
2. CommonJS
此种模块化规范与 node.js 相伴相生,很长的一段时间内,Node 都只支持这种模块化方案。
使用 exports 或者 module.exports 暴漏数据,使用 require 加载模块
a.js 导出
let name='yhb'
module.exports.name=name
let age=20
module.exports.age=age
b.js 导入
const a_modue=require('./a')
console.log(a_modue)
a_module 是一个对象
{ name: 'yhb', age: 20 }
a.js 中也可以像下面这样导出数据
let name = 'yhb'
let age = 20
module.exports = {
name,
age
}
上面就是 CommonJS 模块化的最基本的内容
3. ES6 模块化
ES6 模块化简称 ESM
ESM 暴漏数据使用 export 或者 export default,加载数据使用 import
而且同时支持服务端和浏览器端
3.1 node 中使用 ESM
node 中如果想更改为使用 ESM,需要在 package.json 中添加 type 属性,并设置值为 module(type 属性的默认值为 commonjs)
type":"module"
a.js
export let name = 'yhb'
export function f1() {
console.log('f1')
}
b.js
import {name,f1} from './a.js'
f1()
a.js 中也可以向下面这样导出
let name='yhb'
let age=20
function sayHello(){
console.log('hello')
}
export {name,age,sayHello}
b.js
import {name,age,sayHello} from './a.js'
console.log(name)
console.log(age)
sayHello()
b.js 中加载模块时,除了像上面一样,分别指定要加载的模块中的数据外,也可以加载整个模块
import * as a_module from './a.js'
console.log(a_module.name)
console.log(a_module.age)
a_module.sayHello()
在上面的代码中,开发者需要知道 a.js 模块中的变量或者函数名称,在加载时或者使用时,名称不能写错,
如下面代码,因为 a.js 中没有 aaa 变量,所以下面的引入会报错
import {name,aaa} from './a.js'
是否可以在某种情况下,开发者不需要知道模块中变量或者函数的名字,也可以使用呢?
模块中使用 export default 语法可以很好的解决这个问题
a.js
let name='yhb'
export default name
b.js
import sss from './a.js'
console.log(sss)
export default 相当于导出了一个叫做 default 的变量(default 变量与 name 变量的值相同),b.js 中可以为其随意起一个名字
export default 导出的也可以是一个函数,因为模块外部可以随意为函数起一个名字,所以这里使用匿名函数,函数名称在这里没有意义
export default function (){
console.log('sayHello')
}
b.js
import f1 from './a.js'
f1()
因为 expor default 是默认输出,所以每个模块中只能有一个 export default 语句
export default 除了像上面那样,导出一个变量或者函数外,也可以导出一个对象
let name = 'yhb'
let age = 20
export default {
name,
age
}
其他模块加载时,不能像没有使用 default 时的写法
import {name,age} from './a.js'
而是必须这样写
import a_module from './a.js'
console.log(a_module.name)
console.log(a_module.age)
3.2 浏览器中使用 ESM
a.js
let name = 'yhb'
let age = 20
export {
name,
age
}
b.js
import {name,age} from './a.js'
function printInfo(){
console.log(`${name}今年${age}岁了`)
}
printInfo()
index.html
<script type="module" src="./b.js"></script>
如果 b.js 中没有调用 printInfo,而是导出
import {name,age} from './a.js'
function printInfo(){
console.log(`${name}今年${age}岁了`)
}
export {printInfo}
index.html 中如果希望调用 printInfo 的话,需要向下面这样写
<script type="module">
import {printInfo} from './b.js'
printInfo()
</script>
边栏推荐
- 95.(cesium篇)cesium动态单体化-3D建筑物(楼栋)
- Performance comparison of tidb for PostgreSQL and yugabytedb on sysbench
- A JS script can be directly put into the browser to perform operations
- Three. JS introductory learning notes 11:three JS group composite object
- 深度之眼(六)——矩阵的逆(附:logistic模型一些想法)
- Bidding announcement: Panjin people's Hospital Panjin hospital database maintenance project
- 修改配置文件后tidb无法启动
- Laravel 服务提供者实例教程 —— 创建 Service Provider 测试实例
- Odoo集成Plausible埋码监控平台
- 航运船公司人工智能AI产品成熟化标准化规模应用,全球港航人工智能/集装箱人工智能领军者CIMC中集飞瞳,打造国际航运智能化标杆
猜你喜欢
【花雕体验】15 尝试搭建Beetle ESP32 C3之Arduino开发环境
深度之眼(六)——矩阵的逆(附:logistic模型一些想法)
通知Notification使用全解析
尤雨溪,来了!
Rongyun won the 2022 China Xinchuang digital office portal excellence product award!
PyTorch 中的乘法:mul()、multiply()、matmul()、mm()、mv()、dot()
Unity drawing plug-in = = [support the update of the original atlas]
Shipping companies' AI products are mature, standardized and applied on a large scale. CIMC, the global leader in port and shipping AI / container AI, has built a benchmark for international shipping
Numpy -- epidemic data analysis case
Plate - forme de surveillance par étapes zabbix
随机推荐
Leetcode-231-2的幂
Unity3d click events added to 3D objects in the scene
three.js打造酷炫下雪效果
torch.numel作用
Migration and reprint
hellogolang
What else can an ordinary person do besides working in a factory to make money?
Introduction to pyGame games
尤雨溪,来了!
You Yuxi, coming!
【花雕体验】15 尝试搭建Beetle ESP32 C3之Arduino开发环境
喜讯!科蓝SUNDB数据库与鸿数科技隐私数据保护管理软件完成兼容性适配
Three. JS introduction learning notes 12: the model moves along any trajectory line
无线传感器网络--ZigBee和6LoWPAN
用手机在通达信上开户靠谱吗?这样炒股有没有什么安全隐患
招标公告:盘锦市人民医院盘锦医院数据库维保项目
TS typescript type declaration special declaration field number is handled when the key key
Laravel 中config的用法
Performance measure of classification model
A JS script can be directly put into the browser to perform operations