重学JavaScript核心知识点(二)—— 详解Js中的模块化

在这里插入图片描述

详解Js中的模块化

    • 1. 模块化的背景
    • 2. 来看一个例子
    • 3. 优雅的做法 —— 创建模块对象
    • 4. 模块与类(class)
    • 5. 合并模块
    • 6. 动态加载模块

1. 模块化的背景

  • JavaScript 在诞生之初是体积很小的,早期,它们大多被用来执行独立的脚本任务,在我们的Web网页中提供一些交互效果,所以一般不需要多大的脚本。 随着时代的发展,慢慢有了运行大量 JavaScript 脚本的复杂程序,它也不止被运用在客户端了,甚至服务端都能用,比如 Node.js。
  • 所以,近年来的新做法是将 JavaScript 程序拆分为可按需导入的单独模块的机制,Node.js早就支持了,另外js的很多库和框架都开始了模块化的使用,比如:Common.js,Require.js,以及最新的Webpack.js 和 Babel.js。
  • 目前大部分主流浏览器都是支持的,浏览器能够最优化加载模块,使它比使用库更有效率:使用库通常需要做额外的客户端处理。

2. 来看一个例子

  • html 文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模块化</title>
</head>
<body><script type="module">import util from './util.js'let value = util(10, 20);console.log(value );</script>
</body>
</html>
  • js文件
// 用来取两者范围内整数随机数的方法
export default function getRandom(a, b) {let max = Math.max(a, b)let min = Math.min(a, b)return parseInt(Math.random() * (max - min)) + min;
}
  • 这里就是模块化的写法,定义了一个工具方法,然后导出它:export default,当然如果有多个方法,就只需要 export 了,引入的时候加 { },解构的方式取值,如下:
export { fnA, fnB, fnC, fnD};
import { fnA, fnB, fnC, fnD } from '/util.js'
  • 需要注意的是,这里的 js 已经不是脚本了,它是一个模块,所以必须在标签上加 type="module
  • 另外,你需要在本地启动一个服务才能正常运行(vscode 下个Live Server即可),不然会报错。
  • 否则,你直接打开html文件会报错: CORS 错误,这是因为 JavaScript 模块安全性需要如此。
  • 加载一个模块脚本时不需要使用 defer 属性模块会自动延迟加载。

3. 优雅的做法 —— 创建模块对象

  • 当有多个方法以及导出时,以上做法其实并不优雅:需要N个 export,与N个 import,于是我们可以优化一下。
import * as Module from "/modules/module.js";
  • 这将获取 module.js 中所有可用的导出,并使它们可以作为对象模块的成员使用,从而有效地为其提供自己的命名空间。例如:
Module.function1();
Module.function2();
  • 很明显,可以像以前一样编写代码,并且导入更加整洁。在这里插入图片描述

4. 模块与类(class)

  • 正如我们之前提到的那样,你还可以导出和导入类;这是避免代码冲突的另一种选择,如果你已经以面向对象的方式编写了模块代码,那么它尤其有用。
class Snake {constructor({ width = 20, height = 20, direction = 'right' } = {}) {}render(map) {}move(food, map) {}remove() {}
}
export default Snake;
  • 使用的时候引入整个即可:
import Snake from "./snake.js";
this.snake = new Snake();
snake.render();
snake.move();
snake.remove();

在这里插入图片描述

5. 合并模块

  • 有时你会想要将模块聚合在一起。你可能有多个级别的依赖项,你希望简化事物,将多个子模块组合到一个父模块中.
  • 这可以使用父模块中以下表单的导出语法:
export * from "x.js";
export { name } from "x.js";

6. 动态加载模块

  • 浏览器中可用的 JavaScript 模块功能的最新部分是动态模块加载。
  • 这允许你仅在需要时动态加载模块,而不必预先加载所有模块,这有一些明显的性能优势。
  • 这个新功能允许你将 import() 作为函数调用,将模块的路径作为参数传递。它返回一个 promise,它用一个模块对象来实现,让你可以访问该对象的导出,例如:
import("/modules/mymodule.js").then((module) => {// Do something with the module.
});

1. 希望本文能对大家有所帮助,如有错误,敬请指出
2. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)
3. 拜谢各位!后续将继续奉献优质好文
4. 如果存在疑问,可以私信我(文底有V)

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

考研数学|强化阶段怎么刷《660》《880》《1000》?

强化阶段想要刷好题&#xff0c;首先要选一本适合自己的题集&#xff01; 一般在强化阶段&#xff0c;大家用多个最多的题集就是660题&#xff0c;880题还有1000题 660题的特点是只训练客观题&#xff0c;虽然题目的质量很高&#xff0c;但是训练面还是比较窄 880题是综合训…

【java】java面试题与题解

1.下列代码的输出是什么 public static void main(String[] args) {int a;a 6;System.out.print(a);System.out.print(a);System.out.print(a); } 答案&#xff1a;667 解析&#xff1a;a运算首先将a进行对应操作(即输出)&#xff0c;然后将a的值1。所以输出仍为6&#xff…

云器Lakehouse:Multi-Cluster弹性架构如何实现湖上高并发低延迟分析

导读 在当今快速发展的大数据时代&#xff0c;数据平台的性能和效率对于企业来说至关重要。云器Lakehouse的Multi-Cluster弹性架构为我们提供了一种全新的视角&#xff0c;以应对数据湖上高并发和低延迟分析的挑战。本文将深入探讨云器Lakehouse如何通过其独特的技术理念和架构…

鸿蒙开发学习:初探【ArkUI-X】

ArkTS 是华为自研的开发语言。它在TypeScript&#xff08;简称TS&#xff09;的基础上&#xff0c;匹配 ArkUI 框架&#xff0c;扩展了声明式 UI 、状态管理等相应的能力&#xff0c;让开发者以更简洁、更自然的方式开发跨端应用。 ArkUI-X 进一步将 ArkUI 扩展到了多个 OS 平台…

线程同步--条件变量,信号量

生产者和消费者模型 案例 /*生产者消费者模型&#xff08;粗略的版本&#xff09; */ #include <stdio.h> #include <pthread.h> #include <stdlib.h> #include <unistd.h>// 创建一个互斥量 pthread_mutex_t mutex;struct Node{int num;struct Node …

js的桶排序

桶排序&#xff08;Bucket Sort&#xff09;是一种分布式排序算法&#xff0c;它将元素分散到一系列桶中&#xff0c;然后对每个桶中的元素进行排序&#xff0c;并将所有的桶合并起来得到最终的排序结果。桶排序适用于输入的元素均匀分布在一个范围内的情况&#xff0c;它的时间…

DELL T630服务器iDRAC分辨率调整办法

对于Dell T630服务器的iDRAC分辨率调整&#xff0c;您需要登录到iDRAC的Web界面。以下是详细的步骤&#xff1a; 登录iDRAC&#xff1a;在浏览器中输入iDRAC的IP地址&#xff0c;然后使用用户名&#xff08;通常是“root”&#xff09;和密码登录。 导航到虚拟控制台&#xff…

Java中数组的特点、弊端与集合框架的使用

Java中数组的特点、弊端与集合框架的使用 在Java编程中&#xff0c;数组和集合框架&#xff08;Collections Framework&#xff09;都是用于存储数据的重要工具。然而&#xff0c;它们各自有其特点和适用场景。对于初学者来说&#xff0c;理解它们之间的区别和如何正确使用它们…

【C++】手搓读写ini文件源码

【C】手搓读写ini文件源码 思路需求&#xff1a;ini.hini.cppconfig.confmian.cpp 思路 ini文件是一种系统配置文件&#xff0c;它有特定的格式组成。通常做法&#xff0c;我们读取ini文件并按照ini格式进行解析即可。在c语言中&#xff0c;提供了模板类的功能&#xff0c;所以…

C++组合类

类的数据成员不但可以是基本类型&#xff0c;也可以是其它类的对象。 组合类就是指一个类包含其他类的对象作为该类的数据成员。 当组合类创建对象时&#xff0c;其中包含的各个数据成员对象应首先被创建。因此&#xff0c;在创建类的对象时&#xff0c;既要对本类的基本…

NumPy库与PyTorch库的异同点

目录 1.单位的创建和操作 1.创建 2.形状变换 2.数学和统计操作 1.矩阵乘法 2.广播 3.统计计算 3.GPU支持 4.在深度学习中的作用 5.应用范围 NumPy库为数组服务&#xff0c;PyTorch库为张量服务&#xff0c;这是最本质的区别。 1.单位的创建和操作 1.创建 NumPy:使…

三位球形模型应用

计算机图形学&#xff1a;三维球体模型可以用于建立真实感的三维场景&#xff0c;如游戏场景、建筑模型等。 工业设计&#xff1a;三维球体模型可以用于工业设计中的产品造型设计、表面细节设计等。 地球科学&#xff1a;三维球体模型可以用于地球科学领域中的地球内部结构建…

长安汽车:基于云器 Lakehouse 的车联网大数据平台建设

近年来随着智能汽车行业的迅速发展&#xff0c;数据也在呈爆炸式增长。长安大数据平台承接了长安在生产上大部分流量应用及日常生产业务应用。本文将分享长安汽车在车联网场景下大数据平台建设面临的一些挑战和具体落地的实践。 主要内容如下&#xff1a; 1. 背景介绍 2. 长…

Java中使用Comparator接口实现定制排序与对比

Java中使用Comparator接口实现定制排序与对比 在Java中&#xff0c;当我们需要对对象集合进行排序时&#xff0c;除了使用Comparable接口实现自然排序外&#xff0c;还可以使用Comparator接口来实现定制排序。Comparator接口允许我们为某个类的实例定义一种或多种比较方式&…

android图标底色问题,debug与release不一致

背景 在android 8&#xff08;sdk 26&#xff09;之前的版本&#xff0c;直接使用图片文件作为图标&#xff0c;开发时比较容易控制图标&#xff0c;但是不同的安卓定制版本就不容易统一图标风格了。 在android 8及之后的版本&#xff0c;图标对应的是ic_launcher.xml&#x…

【iOS】KVO

文章目录 前言一、KVO使用1.基本使用2.context使用3.移除KVO通知的必要性4.KVO观察可变数组 二、代码调试探索1.KVO对属性观察2.中间类3.中间类的方法3.dealloc中移除观察者后&#xff0c;isa指向是谁&#xff0c;以及中间类是否会销毁&#xff1f;总结 三、KVO本质GNUStep窥探…

基于51单片机的遥控开关仿真

基于51单片机的遥控开关设计 &#xff08;仿真&#xff0b;程序&#xff0b;设计报告&#xff09; 功能介绍 具体功能&#xff1a; 本课题研究的是一款遥控开关&#xff0c;采用51单片机进行发射电路与接收电路的设计&#xff0c;发射电路由单片机最小系统及四个按键构成&am…

经典笔试题:快速排序 计数排序

Problem: 912. 排序数组 思路 &#x1f468;‍&#x1f3eb; 三叶题解 &#x1f496; AC&#xff1a;计数排序 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( n ) O(n) O(n) class Solution {public int[] sortArray(int[] nums) {int max -50001, min 50001;for (…

【半个月我拿下了软考证】软件设计师高频考点--系统化教学-关系模式

&#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;软件设计师考点暴击 ⭐&#x1f170;️进入狂砍分⭐ ⭐软件设计师高频考点文档&#xff0c; ⭐软件设计师高频考点专栏 ⭐软件设计师高频考点⭐ &#x1f3b6;&#xff08;A) 考点1,关系模式 考点&#xff1a; 三个模式相…

【JVM基础篇】类加载器分类介绍

文章目录 类加载器什么是类加载器类加载器的作用是什么应用场景类加载器的分类启动类加载器用户扩展基础jar包 扩展类加载器和应用程序类加载器扩展类加载器通过扩展类加载器去加载用户jar包&#xff1a; 应用程序加载器 Arthas中类加载器相关功能 文章说明 类加载器 什么是类…