速通JS模块化规范

news2024/11/28 8:25:17

目录

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 = 1
  function increment(){
    sum += 1
  }
  return {sum,increment}
}

const {sum,increment} = count()

console.log(sum)
increment() 
increment()
console.log(sum)


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

let sum = 1

function 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 = 1

function 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 = '让天下没有难学的技术！'+ welcome

  function 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、module
    1. 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 = name
  exports.motto = motto
  exports.getTel = getTel
})

7.4使用模块

define(function(require){
  const school = require('./school')
  const student = require('./student')

  // 使用模块
  console.log(school)
  console.log(student)
})

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

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

相关文章

操作系统课程设计：（JAVA）进程管理系统（附源码zip，jdk11，IDEA Ultimate2024 ）

操作系统课程设计：（JAVA）进程管理系统（附源码zip，jdk11，IDEA Ultimate2024 ）

一.题目要求描述 本设计的目的是加深对进程概念及进程管理各部分内容的理解&#xff1b;熟悉进程管理中主要数据结构的设计及进程调度算法、进程控制机构、同步机构及通讯机构的实施。要求设计一个允许n个进程并发运行的进程管理模拟系统。 该系统包括有简单的进程控制、同步与…
阅读更多...
一行代码教你使用Python制作炫酷二维码

一行代码教你使用Python制作炫酷二维码

二维码&#xff0c;我们日常生活中随处可见的编码方式&#xff0c;凭借其方便快捷的信息承载能力&#xff0c;已经渗透到各行各业。 MyQR 的介绍 MyQR 是一个 Python 库&#xff0c;用于生成自定义二维码&#xff0c;包括带有 Logo、彩色和动态的二维码。它基于 Python 的 qr…
阅读更多...
【基础篇】Docker 镜像管理 THREE

【基础篇】Docker 镜像管理 THREE

嘿&#xff0c;小伙伴们&#xff01;我是小竹笋&#xff0c;一名热爱创作的工程师。在上一篇文章中&#xff0c;我们探讨了 Docker 的架构与关键组件。今天&#xff0c;让我们一起深入了解一下 Docker 镜像管理的相关知识吧&#xff01; &#x1f4e6; 创建和管理镜像 镜像是…
阅读更多...
Qt程序移植至Arm开发板

Qt程序移植至Arm开发板

环境准备&#xff1a; 系统调试工具SecureCRT SecureCRT 是一款支持 SSH 协议的终端仿真软件&#xff0c;可通过串口或网口对评估板系统信息进行查看、对评估板系统进行调试等。 SecureCRT的安装破解 [详细过程2024]-CSDN博客https://blog.csdn.net/2301_76659937/article/det…
阅读更多...
2-50 基于matlab的遗传模拟退火算法的聚类算法

2-50 基于matlab的遗传模拟退火算法的聚类算法

基于matlab的遗传模拟退火算法的聚类算法&#xff0c;以模糊K-均值聚类算法为基础&#xff0c;对各样本的聚类中心进行优化&#xff0c;输出聚类可视化结果。聚类类别数可自由输入。程序已调通&#xff0c;可直接运行。 2-50 遗传模拟退火算法的聚类算法 - 小红书 (xiaohongshu…
阅读更多...
【源码阅读】Redisson lock源码

【源码阅读】Redisson lock源码

Redisson 加锁非常简单&#xff0c;还支持 redis 单实例、redis 哨兵、redis cluster、redis master-slave 等各种部署架构 RLock lock redisson.getLock("cyk-test"); lock.lock(); lock.unlock(); 底层原理 加锁机制 废话不多说&#xff0c;直接看源码&#xf…
阅读更多...
Go语言----flag包（导入、配置、以及常用方法Parse()、Parsed()、NArg()）

Go语言----flag包（导入、配置、以及常用方法Parse()、Parsed()、NArg()）

在 Go语言中有很多种方法来处理命令行参数。如果我们只是想简单的获取命令行的参数&#xff0c;可以像Go语言–延迟调用defer、获取命令行参数、局部变量以及全局变量中介绍的不使用任何库&#xff0c;直接使用 os.Args&#xff1b; d但是 Golang 的标准库提供了 flag 包来处理…
阅读更多...
机械拆装-基于Unity-本地数据持久化

机械拆装-基于Unity-本地数据持久化

目录 1. 数据结构简介&#xff1a;数据的集合 1.1 线性数据结构 1.2 非线性数据结构 2. 对数据集合的操作&#xff1a; 3. 数据持久化 3.1 数据的序列化存储 3.2 JSON文件硬盘存储 3.2.1 Json文件允许存储的数据类型 3.2.2 Json文件的语法格式 3.2.3 Json文件的读取 3.2.4 …
阅读更多...
Echarts toolbox相关配置 dataZoom缩放

Echarts toolbox相关配置 dataZoom缩放

前言:最近开发遇到一个echarts相关问题,需要实现用户鼠标滚动实现图表缩放,或者实现选中某一段区域进行缩放,放大效果; 1.第一个需求就是区域缩放按钮要隐藏掉,用户鼠标放在图表内就默认实现选择效果,并且区域缩放还原按钮不能隐藏,需要在初始化配置这三个属性. // 假设你已经…
阅读更多...
孙宇晨建议中国重新考虑“比特币政策”！中美竞争将使加密货币行业受益？美国对“中国崛起”感到焦虑！

孙宇晨建议中国重新考虑“比特币政策”！中美竞争将使加密货币行业受益？美国对“中国崛起”感到焦虑！

近日&#xff0c;前美国总统特朗普发表了一番振奋人心的比特币演讲&#xff0c;令加密货币社群反响热烈。而Tron区块链创始人孙宇晨则建议中国重新考虑其对于比特币的政策立场&#xff0c;并指出中美两国在加密货币领域的竞争&#xff0c;将使整个行业受益。这再次引发了人们对…
阅读更多...
未来社交：Facebook如何定义虚拟现实的新时代？

未来社交：Facebook如何定义虚拟现实的新时代？

随着科技的飞速发展&#xff0c;虚拟现实&#xff08;VR&#xff09;逐渐从科幻小说中的幻想变成了现实生活中的前沿技术。在这一领域&#xff0c;Facebook&#xff08;现已更名为Meta&#xff09;扮演了重要角色&#xff0c;通过不断的创新和投资&#xff0c;致力于打造一个全…
阅读更多...
花几千上万学习Java，真没必要！（三十六）

花几千上万学习Java，真没必要！（三十六）

1、File类&#xff1a; 测试代码1&#xff1a; package filetest.com; import java.io.File; import java.io.IOException; public class FileOperations { public static void main(String[] args) { // 创建新文件File file new File("example.txt"); tr…
阅读更多...
18966 两两配对差值最小

18966 两两配对差值最小

这个问题可以通过排序和配对来解决。首先&#xff0c;我们将数组排序&#xff0c;然后我们将数组的第一个元素和最后一个元素配对&#xff0c;第二个元素和倒数第二个元素配对&#xff0c;以此类推。这样&#xff0c;我们可以得到n/2个和&#xff0c;然后我们找出这些和中的最大…
阅读更多...
光伏可行性研究报告能否自动生成？

光伏可行性研究报告能否自动生成？

随着技术的不断进步和应用的广泛普及&#xff0c;光伏项目的规划与实施也面临着更加复杂多变的考量因素&#xff0c;其中&#xff0c;光伏可行性研究报告成为了项目前期不可或缺的重要内容。那么&#xff0c;面对这一需求&#xff0c;光伏可行性研究报告能否实现自动生成呢&…
阅读更多...
Nat Med·UNI：开启计算病理学新篇章的自监督基础模型｜顶刊精析·24-07-31

Nat Med·UNI：开启计算病理学新篇章的自监督基础模型｜顶刊精析·24-07-31

小罗碎碎念 本期推文主题 这一期推文是病理AI基础模型UNI的详细介绍&#xff0c;原文如下。下期推文会介绍如何使用这个模型&#xff0c;为了你能看懂下期的推文&#xff0c;强烈建议你好好看看今天这期推文。 看完这篇推文以后&#xff0c;你大概就能清楚这个模型对自己的数据…
阅读更多...
搞懂数据结构与Java实现

搞懂数据结构与Java实现

文章链接&#xff1a;搞懂数据结构与Java实现 (qq.com) 代码链接&#xff1a; Java实现数组模拟循环队列代码 (qq.com) Java实现数组模拟栈代码 (qq.com) Java实现链表代码 (qq.com) Java实现哈希表代码 (qq.com) Java实现二叉树代码 (qq.com) Java实现图代码 (qq.com)
阅读更多...
《计算机网络》（第8版）考研真题

《计算机网络》（第8版）考研真题

第一章 一、选择题 1 在 TCP/IP 体系结构中，直接为 ICMP 提供服务的协议是（ ）。[2012 年统考] A ．PPP B ．IP C ．UDP D ．TCP 【答案】B 【解析】A 项：PPP 在 TCP/IP 体系结构中属于网络接口层协议（在 ISO/OSI 体系结构中属于数据链路层协议），所以 PPP 为网络层提供…
阅读更多...
免费【2024】springboot 厨房达人美食分享平台

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

博主介绍&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…
阅读更多...
图片格式转换教程：百种格式随意转换，建议收藏使用！

图片格式转换教程：百种格式随意转换，建议收藏使用！

图片格式转换方法有哪些&#xff1f;本文整理了几款好用且简单的格式转换工具&#xff0c;适用于处理各种图片格式转换的难题。 常见的图片格式转换有png转换为jpg、heic转jpg、webp转jpg等&#xff0c;特别是heic、webp、这两种图片格式&#xff0c;格式比较特殊&#xff0c;兼…
阅读更多...
《最新出炉》系列入门篇-Python+Playwright自动化测试-57- 上传文件 - 番外篇

《最新出炉》系列入门篇-Python+Playwright自动化测试-57- 上传文件 - 番外篇

软件测试微信群&#xff1a;https://bbs.csdn.net/topics/618423372 有兴趣的可以扫码加入 1.简介 前边的三篇文章基本上对文件上传的知识介绍和讲解的差不多了&#xff0c;今天主要是来分享宏哥在文件上传的实际操作中发现的一个问题&#xff1a;input控件和非input控件的上…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023