速通JS模块化规范

目录

1模块化概述

1.1什么是模块化？

1.2为什么需要模块化？

2有哪些模块化规范？

3导入与导出的概念

4CommonJS 规范

4.1初步体验

4.2导出数据

4.3导入数据

4.4扩展理解

4.5浏览器端运行

5ES6 模块化规范

5.1初步体验

5.2Node 中运行 ES6 模块、

.3导出数据

5.4导入数据

5.5数据引用问题

 6AMD 模块化规范（了解）

6.1环境准备、

6.2导出数据

6.3导入数据

6.4使用模块

7CMD 模块化规范（了解）

7.1环境准备

 7.2导出数据

7.3导入数据

7.4使用模块

1模块化概述


1.1什么是模块化？

  • ●将程序文件依据一定规则拆分成多个文件，这种编码方式就是模块化的编码方式。
  • ●拆分出来每个文件就是一个模块，模块中的数据都是私有的，模块之间互相隔离。
  • ●同时也能通过一些手段，可以把模块内的指定数据“交出去”，供其他模块使用。

1.2为什么需要模块化？


随着应用的复杂度越来越高，其代码量和文件数量都会急剧增加，会逐渐引发以下问题：

  • 1全局污染问题
  • 2依赖混乱问题
  • 3数据安全问题

2有哪些模块化规范？

历史背景(了解即可)：2009 年，随着 Node.js 的出现，JavaScript 在服务器端的应用逐渐增多，为了让 Node.js 的代码更好维护，就必须要制定一种 Node.js 环境下的模块化规范，来自 Mozilla 的工程师 Kevin Dangoor 提出了 CommonJS 规范（CommonJS 初期的名字叫 ServerJS），随后 Node.js 社区采纳了这一规范。

随着时间的推移，针对 JavaScript 的不同运行环境，相继出现了多种模块化规范，按时间排序，分别为： 

1CommonJS —— 服务端应用广泛

2AMD

3CMD

4ES6 模块化 —— 浏览器端应用广泛

3导入与导出的概念

模块化的核心思想就是：模块之间是隔离的，通过导入和导出进行数据和功能的共享。

●导出（暴露）：模块公开其内部的一部分（如变量、函数等），使这些内容可以被其他模块使用。

●导入（引入）：模块引入和使用其他模块导出的内容，以重用代码和功能。  

4CommonJS 规范

4.1初步体验

1.「创建 school.js」 

const name = '尚硅谷'
const slogan = '让天下没有难学的技术！'function getTel (){return '010-56253825'
}function getCities(){return ['北京','上海','深圳','成都','武汉','西安']
}// 通过给exports对象添加属性的方式，来导出数据（注意：此处没有导出getCities）
exports.name = name
exports.slogan = slogan
exports.getTel = getTel

2.「创建 student.js」

const name = '张三'
const motto = '相信明天会更好！'function getTel (){return '13877889900'
}function getHobby(){return ['抽烟','喝酒','烫头']
}// 通过给exports对象添加属性的方式，来导出数据（注意：此处没有导出getHobby）
exports.name = name
exports.slogan = slogan
exports.getTel = getTel

3.「创建 index.js」

// 引入school模块暴露的所有内容
const school = require('./school')// 引入student模块暴露的所有内容
const student = require('./student')

4.2导出数据

在 CommonJS 标准中，导出数据有两种方式：

  • ●第一种方式：module.exports = value
  • ●第二种方式：exports.name = value
     

注意点如下：

1每个模块内部的：this、exports、modules.exports在初始时，都指向同一个空对象，该空对象就是当前模块导出的数据，如下图： 

2无论如何修改导出对象，最终导出的都是module.exports的值。

3exports是对module.exports的初始引用，仅为了方便给导出象添加属性，所以不能使用 exports = value的形式导出数据，但是可以使用module.exports = xxxx导出数据

4.3导入数据


在CJS模块化标准中，使用内置的require函数进行导入数据 

// 直接引入模块
const school = require('./school')// 引入同时解构出要用的数据
const { name, slogan, getTel } = require('./school')// 引入同时解构+重命名
const {name:stuName,motto,getTel:stuTel} = require('./student')

4.4扩展理解


一个 JS 模块在执行时，是被包裹在一个内置函数中执行的，所以每个模块都有自己的作用域，我们可以通过如下方式验证这一说法：

console.log(arguments)
console.log(arguments.callee.toString())

内置函数的大致形式如下：

function (exports, require, module, __filename, __dirname){/*********************/
}

4.5浏览器端运行


Node.js 默认是支持 CommonJS 规范的，但浏览器端不支持，所以需要经过编译，步骤如下：
●第一步：全局安装 browserify ：npm i browserify -g
●第二步：编译

browserify index.js -o build.js

备注：index.js 是源文件，build.js 是输出的目标文件

●第三步：页面中引入使用
 

<script type="text/javascript" src="./build.js"></script>

5ES6 模块化规范


ES6 模块化规范是一个官方标准的规范，它是在语言标准的层面上实现了模块化功能，是目前最流行的模块化规范，且浏览器与服务端均支持该规范。


5.1初步体验
 

1.「创建 school.js」

// 导出name
export let name = {str:'尚硅谷'}
// 导出slogan
export const slogan = '让天下没有难学的技术！'// 导出name
export function getTel (){return '010-56253825'
}function getCities(){return ['北京','上海','深圳','成都','武汉','西安']
}

2.「创建 student.js」

// 导出name
export const name = '张三'
// 导出motto
export const motto = '相信明天会更好！'// 导出getTel
export function getTel (){return '13877889900'
}function getHobby(){return ['抽烟','喝酒','烫头']
}

4.「页面中引入 index.js」

<script type="module" src="./index.js"></script>

5.2Node 中运行 ES6 模块、

Node.js中运行ES6模块代码有两种方式：

●方式一：将JavaScript文件后缀从.js 改为.mjs，Node 则会自动识别 ES6 模块。

●方式二：在package.json中设置type属性值为module

.3导出数据


ES6 模块化提供 3 种导出方式：①分别导出、②统一导出、③默认导出
1.「分别导出」

备注：在上方【初步体验中】环节，我们使用的导出方式就是【分别导出】

// 导出name
export let name = {str:'尚硅谷'}
// 导出slogan
export const slogan = '让天下没有难学的技术！'// 导出getTel
export function getTel (){return '010-56253825'
}

 2.「统一导出」

const name = {str:'尚硅谷'}
const slogan = '让天下没有难学的技术！'function getTel (){return '010-56253825'
}function getCities(){return ['北京','上海','深圳','成都','武汉','西安']
}// 统一导出了：name,slogan,getTel
export {name,slogan,getTel}

3.「默认导出」

const name = '张三'
const motto = '走自己的路，让别人五路可走！'function getTel (){return '13877889900'
}function getHobby(){return ['抽烟','喝酒','烫头']
}//默认导出：name,motto,getTel
export default {name,motto,getTel}

备注 :「上述多种导出方式，可以同时使用」

// 导出name ———— 分别导出
export const name = {str:'尚硅谷'}
const slogan = '让天下没有难学的技术！'function getTel (){return '010-56253825'
}function getCities(){return ['北京','上海','深圳','成都','武汉','西安']
}// 导出slogan ———— 统一导出
export {slogan}
// 导出getTel ———— 默认导出
export default getTel

5.4导入数据


对于 ES6 模块化来说，使用何种导入方式，要根据导出方式决定。
1.「导入全部」(通用)
可以将模块中的所有导出内容整合到一个对象中

import * as school from './school.js'

2.「命名导入」(对应导出方式：分别导出、统一导出)
导出数据的模块

//分别导出
export const name = {str:'尚硅谷'} 
//分别导出
export const slogan = '让天下没有难学的技术！' function getTel (){return '010-56253825'
}function getCities(){return ['北京','上海','深圳','成都','武汉','西安']
}//统一导出
export { getTel }

命名导入：
 

import { name,slogan,getTel } from './school.js'

通过as重命名:

import { name as myName,slogan,getTel } from './school.js'

3.「默认导入」(对应导出方式：默认导出)
导出数据的模块

const name = '张三'
const motto = '走自己的路，让别人五路可走！'function getTel (){return '13877889900'
}function getHobby(){return ['抽烟','喝酒','烫头']
}//使用默认导出的方式，导出一个对象，对象中包含着数据
export default { name,motto,getTel }

默认导入：

import student from './student.js' //默认导出的名字可以修改，不是必须为student

4.「命名导入 与 默认导入可以混合使用」
导出数据的模块

//分别导出
export const name = {str:'尚硅谷'} 
//分别导出
export const slogan = '让天下没有难学的技术！'function getTel (){return '010-56253825'
}function getCities(){return ['北京','上海','深圳','成都','武汉','西安']
}//统一导出
export default getTel

「命名导入」与「默认导入」混合使用，且默认导入的内容必须放在前方：

import getTel,{name,slogan} from './school.js'

5.「动态导入」(通用)
允许在运行时按需加载模块，返回值是一个 Promise。

const school = await import('./school.js');
console.log(school)

6. import 可以不接收任何数据
例如只是让 mock.js 参与运行
 

import './mock.js'

此时，我们感受到模块化确实解决了：①全局污染问题、②依赖混乱问题、③数据安全问题。

5.5数据引用问题


思考1： 如下代码的输出结果是什么？（不要想太多，不涉及模块化相关知识）

function count (){let sum = 1function increment(){sum += 1}return {sum,increment}
}const {sum,increment} = count()console.log(sum)
increment() 
increment()
console.log(sum)


 思考2：使用 CommonJS 规范，编写如下代码，输出结果是什么

let sum = 1function increment (){sum += 1
}module.exports = {sum,increment}
const {sum,increment} = require('./count.js')console.log(sum)
increment()
increment()
console.log(sum)

思考3：使用 ES6 模块化规范，编写如下代码，输出结果是什么？

let sum = 1function increment(){sum += 1
}export {sum,increment}
import {sum,increment} from './count.js'console.log(sum) //1
increment()
increment()
console.log(sum) //3

使用原则：导出的常量，务必用const定义

 6AMD 模块化规范（了解）


6.1环境准备、


第一步：准备文件结构：

文件说明：
1js 文件夹中存放业务逻辑代码，main.js用于汇总各模块。
2libs 中存放的是第三方库，例如必须要用的require.js。 

require.jsicon-default.png?t=N7T8https://www.yuque.com/preview/yuque/0/2024/js/35780599/1721441912143-417162f8-5c6d-4d5d-84dd-655fdf5a5dbd.js?from=https%3A%2F%2Fwww.yuque.com%2Ftianyu-coder%2Fopenshare%2Fhycdb5tispao428h

第二步：在index.html中配置main.js与require.js

<script data-main="./js/main.js" src="./libs/require.js"></script>

 第三步：在main.js中编写模块配置对象，注册所有模块。

/*AMD_require.js模块化的入口文件，要编写配置对象，并且有固定的写法*/
requirejs.config({//基本路径baseUrl: "./js",//模块标识名与模块路径映射paths: {school: "school",student: "student",welcome: "welcome",}
})

6.2导出数据

AMD 规范使用define函数来定义模块和导出数据

define(function(){const name = '张三'const motto = '走自己的路，让别人五路可走！'function getTel (){return '13877889900'}function getHobby(){return ['抽烟','喝酒','烫头']}// 导出数据return {name,motto,getTel}
})

6.3导入数据

如需导入数据，则需要define传入两个参数，分别为：依赖项数组、回调函数

// ['welcome']表示当前模块要依赖的模块名字
// 回调接收到的welcome是模块导出的数据define(['welcome'],function(welcome){let name = {str:'尚硅谷'}const slogan = '让天下没有难学的技术！'+ welcomefunction getTel (){return '010-56253825'}function getCities(){return ['北京','上海','深圳','成都','武汉','西安']}// 导出数据return {name,slogan,getTel}
})

6.4使用模块

requirejs(['school','student'],function(school,student){console.log('main',school)console.log('main',student)
})

7CMD 模块化规范（了解）

7.1环境准备


第一步：准备环境

文件说明：
1js 文件夹中存放业务逻辑代码，main.js用于汇总各模块。
2libs 中存放的是第三方库，例如必须要用的sea.js。

sea.jsicon-default.png?t=N7T8https://www.yuque.com/preview/yuque/0/2024/js/35780599/1721444843940-bccc76da-f4e5-47e1-b19a-23bf954ac71b.js?from=https%3A%2F%2Fwww.yuque.com%2Ftianyu-coder%2Fopenshare%2Fhycdb5tispao428h

 

第二步：在index.html中配置main.js与sea.js

<script type="text/javascript" src="./libs/sea.js"></script><script type="text/javascript">seajs.use('./modules/main.js')
</script>

 7.2导出数据


CMD 中同样使用define函数定义模块并导出数据

/* 收到的三个参数分别为：require、exports、module1. require用于引入其他模块2. exports、module用于导出数据
*/
define(function(require,exports,module){const name = '尚硅谷'const slogan = '让天下没有难学的技术！'function getTel (){return '010-56253825'}function getCities(){return ['北京','上海','深圳','成都','武汉','西安']}// 导出数据module.exports = {name,slogan,getTel}
})

7.3导入数据


CMD 规范中使用收到的require参数进行模块导入

define(function(require,exports,module){const name = '张三'const motto = '相信明天会更好！'// 引入welcome模块const welcome = require('./welcome')console.log(welcome)function getTel (){return '13877889900'}function getHobby(){return ['抽烟','喝酒','烫头']}exports.name = nameexports.motto = mottoexports.getTel = getTel
})

7.4使用模块

define(function(require){const school = require('./school')const student = require('./student')// 使用模块console.log(school)console.log(student)
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/3280150.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

创建自己的 Omnigraph （python篇）

创建自己的 Omnigraph （python篇）

Omnigraph 是 Nvidia Omniverse 中一个强大的视觉化脚本工具&#xff0c;它让开发者能够以直观和灵活的方式创建复杂的行为和交互性。通过结合 Action Graphs 和 Push Graphs&#xff0c;以及利用丰富的节点库&#xff0c;用户可以在 Omniverse 平台上构建出令人惊叹的虚拟世界…
阅读更多...
【书生大模型实战】L1-LangGPT结构化提示词编写实践

【书生大模型实战】L1-LangGPT结构化提示词编写实践

一、关卡任务 背景问题&#xff1a;近期相关研究发现&#xff0c;LLM在对比浮点数字时表现不佳&#xff0c;经验证&#xff0c;internlm2-chat-1.8b (internlm2-chat-7b)也存在这一问题&#xff0c;例如认为13.8<13.11。 任务要求&#xff1a;利用LangGPT优化提示词&#x…
阅读更多...
【爱创大师】【数学】一元一次方程的实现

【爱创大师】【数学】一元一次方程的实现

科技 教育 艺术 跨界融合&#xff0c;欢迎来到爱创大师 问题引入&#xff1a; 同学们还记得啥是一元一次方程吗&#xff0c;来回顾一下定义 一元一次方程指只含有一个未知数、未知数的最高次数为1且两边都为整式的等式。一元一次方程只有一个根。一元一次方程可以解决绝大多…
阅读更多...
【2024最新】国内6个免费的AI绘画网站，支持Midjourney等绘画模型

【2024最新】国内6个免费的AI绘画网站，支持Midjourney等绘画模型

一、什么是AI绘画&#xff1f; AI绘画&#xff0c;也称为人工智能绘画或机器生成艺术&#xff0c;是指使用人工智能技术来创作视觉艺术作品的过程。这种技术通常涉及到深度学习模型&#xff0c;尤其是生成对抗网络&#xff08;GANs&#xff09;和变分自编码器&#xff08;VAEs…
阅读更多...
3d动画软件blender如何汉化？（最新版本4.2）

3d动画软件blender如何汉化？（最新版本4.2）

前言 Blender是一个非常强大的3d动画软件&#xff0c;总能受到大量工作者的青睐。 但是&#xff0c;对于新手来说&#xff08;尤其是英语学渣&#xff09;&#xff0c;语言是个难事。大部分blender打开时都是英文&#xff0c;对新手使用具有一定的障碍。因此&#xff0c;我们需…
阅读更多...
向量数据库（二）：Qdrant

向量数据库（二）：Qdrant

写在前面 我们借助 Qdrant 来了解向量数据库的一些内容 内容 什么是 Qdrant？ Qdrant 是一个开源的针对向量相似性搜索的引擎，它提供了一系列的 API 用于对向量数据进行存储、搜索和管理等功能。 下面是来自 Qdrant 官网的一个架构图： 初步了解 Qdrant 里的一些概念 …
阅读更多...
【Qt】QComboBox和QListWidget样式调整问题

【Qt】QComboBox和QListWidget样式调整问题

总是遇到一些重复的问题&#xff0c;隔得时间长了&#xff0c;就又忘记了&#xff0c;记录一下。 问题1&#xff1a; QComboBox下拉条目高度设置不生效的问题&#xff0c;在样式中设置了item的高度&#xff0c;但是不生效。 解决办法&#xff1a; 创建QCoboBox的时候&#…
阅读更多...
SM2p256v1椭圆曲线点加点减倍点python实现代码

SM2p256v1椭圆曲线点加点减倍点python实现代码

首先给出SM2p256v1椭圆曲线的建议参数如下&#xff1a; default_ecc_table {n: FFFFFFFEFFFFFFFFFFFFFFFFFFFFFFFF7203DF6B21C6052B53BBF40939D54123,p: FFFFFFFEFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF00000000FFFFFFFFFFFFFFFF,g: 32c4ae2c1f1981195f9904466a39c9948fe30bbff266…
阅读更多...
freemodbus libmodbus

freemodbus libmodbus

相比libmodbus, freeModbus看起来更舒服。 1. 文件与函数&#xff1a;FreeModbus每个文件函数都不是很多。客户端、服务端函数分开。相对每个函数功能比较明确 freeModbus mbfuncholding_m.c、mbfuncholding.c 函数一共就几个&#xff0c;只看函数列表就猜到函数功能 服务端…
阅读更多...
数据库基础-认识数据库

数据库基础-认识数据库

文章目录 0.MySQL登录的基本介绍&#xff1a;1.数据库概念&#xff1a;2.见一见数据库3.主流数据库4.服务器&#xff0c;数据库和表之间的关系 0.MySQL登录的基本介绍&#xff1a; 1.数据库概念&#xff1a; 我们能看见mysqld&#xff0c;但是数据库还是没有看到。 2.见一见数…
阅读更多...
SSRF-labs-master靶场

SSRF-labs-master靶场

目录 file_get_content.php sql_connect.php download.php dns-spoofing.php dns_rebinding.php 访问链接 http://127.0.0.1/SSRF/# file_get_content.php 在编程语言中&#xff0c;有一些函数可以获取本地保存文件的内容。这些功能可能能够从远程URL以及本地文件 如果没…
阅读更多...
Python 【机器学习】 进阶 之 【实战案例】房价数据中位数分析 | 1/2（含分析过程）

Python 【机器学习】 进阶 之 【实战案例】房价数据中位数分析 | 1/2（含分析过程）

Python 【机器学习】 进阶 之 【实战案例】房价数据中位数分析 | 1/2&#xff08;含分析过程&#xff09; 目录 Python 【机器学习】 进阶 之 【实战案例】房价数据中位数分析 | 1/2&#xff08;含分析过程&#xff09; 一、简单介绍 二、机器学习 1、为什么使用机器学习&a…
阅读更多...
免费【2024】springboot 厨房达人美食分享平台

免费【2024】springboot 厨房达人美食分享平台

博主介绍&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…
阅读更多...
体育赛事中的AI运用

体育赛事中的AI运用

7月24日&#xff0c;国际奥委会&#xff08;IOC&#xff09;举办了新闻发布会&#xff0c;宣布计划在2024年巴黎奥运会上展示一系列创新的人工智能&#xff08;AI&#xff09;技术。这次会议不仅是对即将到来的奥运赛事的预热&#xff0c;也深入探讨了人工智能在体育领域可能带…
阅读更多...
9000字干货：从消息流平台Serverless之路，看Serverless标准演进

9000字干货：从消息流平台Serverless之路，看Serverless标准演进

本文分享自华为云社区《9000字干货&#xff1a;从消息流平台Serverless之路&#xff0c;看Serverless标准演进》 这是一个最美好的时代。 随着以数字化升级为代表的第四次工业革命浪潮的席卷&#xff0c;企业正在不断地深化运用这一技术&#xff0c;构建一个又一个全连接&…
阅读更多...
从零开始，快速打造API：揭秘 Python 库toapi的神奇力量

从零开始，快速打造API：揭秘 Python 库toapi的神奇力量

在开发过程中&#xff0c;我们常常需要从不同的网站获取数据&#xff0c;有时候还需要将这些数据转化成API接口提供给前端使用。传统的方法可能需要大量的时间和精力去编写代码。但今天我要介绍一个神奇的Python库——toapi&#xff0c;它可以让你在几分钟内创建API接口&#x…
阅读更多...
Axure中继器：数据动态展示的强大工具

Axure中继器：数据动态展示的强大工具

在Axure RP这一强大的原型设计工具中&#xff0c;中继器&#xff08;Repeater&#xff09;无疑是一颗璀璨的明珠。它以其独特的功能和广泛的应用场景&#xff0c;成为设计师在创建数据密集型原型时的首选。本文将深入探讨Axure中继器的特点、使用方式及其在数据动态展示中的重要…
阅读更多...
arr[:,0] arr[...,0]

arr[:,0] arr[...,0]

1. arr[:, 0]相当于arr[:,0,:] 表示取arr第0维全取&#xff0c;第一维只取0&#xff0c;后面的维度全取 arr torch.tensor([ [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]], [[13, 14, 15, 16], [17, 18, 19, 20], [21, 22, 23, 24]] ]) arr1arr[:, 0] print(a…
阅读更多...
docker安装elasticsearch（es）最新版本

docker安装elasticsearch（es）最新版本

docker安装elasticsearch&#xff08;es&#xff09; docker官网 https://hub.docker.com/ https://www.cnblogs.com/balloon72/p/13177872.html 1、拉取最新项目elasticsearch docker pull elasticsearch:8.14.3lscpu 查看架构 2、构建环境 mkdir -p /data/elasticsear…
阅读更多...
创建完整的APP页面

创建完整的APP页面

完整的页面创建过程包括三个步骤 在layout目录下创建XML文件 创建与XML文件对应的Java代码 在AndroidMainfest.xml&#xff08;清单文件&#xff09;中注册页面配 一步到位的activity创建 跳转&#xff1a;意图 创建一个意图实例&#xff0c;使用setClass&#xff08;&#…
阅读更多...
最新文章

Copyright @ 2022~2023