ES6学习(五)-- Module 语法

文章目录

  • Module 语法
    • 1.1 痛点介绍
      • (1) 异步加载
      • (2) 私密
      • (3) 重名
      • (4) 依赖
    • 1.2 解决方法
      • (1) 解决异步加载问题
      • (2) 解决私密问题
      • (3) 重名解决方法
      • (4) 解决依赖问题
    • 1.3 模块化使用案例

Module 语法

之前js 出现的某些痛点:

  1. 在script 中引入的变量名不可以重复,不然后面的变量会将前面的数据覆盖掉;

1.1 痛点介绍

(1) 异步加载

我们之前学习的都是将 虽然写在html 标签之前,但是却能推后执行。

<script src="1.js" defer></script>
// <script src="1.js" async></script>
  1. 使用async 时,js 代码加载完毕但是DOM还未渲染完全就会出现访问时找不到节点的问题;
  2. defer 则是等到DOM 全部都渲染完毕之后再进行js 代码的执行,所以比较来说更靠谱一点。

(2) 私密

一般情况下,我们在声明变量或者函数时使用 _ 表示该变量或者函数是私密的。

(3) 重名

之前js 痛点:
在引入的文件中出现相同名称的变量或者函数,在调用时后者会将前者覆盖掉。

(4) 依赖

现有1.js, 2.js, 3.js 三个文件,其中3.js 调用前两个文件中的方法,此时就需要将3.js 放在后面,此时出现的情况叫做依赖。

1.2 解决方法

以上四个痛点模块化都能解决!

(1) 解决异步加载问题

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

关键是使用了 type=“module”

(2) 解决私密问题

使用了 type=“module” 之后就做到了私密不漏,并且我们此时也无法访问文件内部。

所以此时我们需要这样书写代码:
将访问其他js 文件的script 部分添加 type=“module” ;然后在其中导入需要的方法;在需要的文件中导出暴露需要的方法。

导入:

// 导入1.js 中的方法
import 方法名称 from “地址”
(如果是同目录下文件那就必须要有 “ ./ ”)
导出方法名称可以随便写

导出:

// 导出方法
export default 方法名称
导出名称必须对应导出文件中的方法名称

defalut 只能定义一次,如果要导出多个方法,需要将方法定义到对象中,最后导出对象就可以

(3) 重名解决方法

导入的文件中可能出现方法名称相同的问题,此时我们只需要定义不同导出对象名称,通过对象.方法 进行调用就

import obj1 from './1.js'
import obj2 from './2.js'
console.log(obj1.test,obj2.test)

(4) 解决依赖问题

另外一种导出 / 导入方法:

// 导出
export{
Al,
A2,
test
}

// 导入
import {A1, A2. test as testA} from ‘./1.js’
此时导入导出函数名称必须相同

这种方法使得我们可以按需导入,不要的部分可以不导入

出现下面的情况时,我们可以使用 as
在这里插入图片描述
as 表示重命名

在这里插入图片描述
另外,在创建方法时也可以直接导出
在这里插入图片描述

导入的第二种写法:

// import * as obj1 from ‘./1.js’
// import * as obj2 from ‘./2.js’

这种方式可以将1.js / 2.js 文件中所有暴露出来的方法都导入进来!

第三种导入 / 导出规范:
这种方法是将前两种方法组合在一起了,

// 导出
export default 方法名称

// 导入
import testA,{A1,A2} from ‘./1.js’

默认导出方式可以任意起名字,但是第二种方法只能使用原方法名称。

1.3 模块化使用案例

模块化使用案例前身

上面链接是学习class 继承时的案例,现在可以使用模块化规范把代码修改的更加简洁!
对原js 代码添加type 属性:

<script type="module">
        import CreateBox from './03-createBoxForModuleTest.js'
        import CreateImgBox from './04-createImgBox.js'
        ......
    </script>

创建CreateBox.js:

class CreateBox {
    constructor(select, data) {
        this.ele = document.querySelector(select);
        this.title = data.title
        this.list = data.list
        this.render()
    }
    render() {
        let oh3 = this.ele.querySelector("h3")
        let oul = this.ele.querySelector("ul")
        oh3.innerHTML = this.title
        oul.innerHTML = this.list.map(item => `<li>${item}</li>`).join("")
    }
}
export {
	CreateBox
}

创建CreateImgBox.js:

import {CreateBox} from './03-createBox.js'
class CreateImgBox extends CreateBox{
    constructor(select, data) {
        super(select, data)
        this.imgUrl = data.url
        this.render()
    }
    render() {
        super.render()
        let oimg = this.ele.querySelector("img")
        oimg.src = this.imgUrl
    }
}
export default CreateImgBox

三种导入导出方式需要配对着使用,不能混乱着使用!!!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入了解 Python 中标准排序算法 Timsort

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ Timsort&#xff1a;一个非常快速的、时间复杂度为 O ( n l o g n ) O (n \ log\ n) O(n log n)、稳健&#xff08;即不改变等值元素间的相对顺序&#xff09;的排序算法&#xff0c;在处理真实世界数…

蓝桥杯单片机真题实践篇

这里就不完全写思路过程代码什么的&#xff0c;这一篇文章就写我在训练真题中遇到的过程。 &#xff08;呜呜呜&#xff0c;时间不够辣&#xff0c;能做多少算多少吧....&#xff09; 十三届省赛题 问题1&#xff1a;数码管的数字消影不明显 &#xff08;参考&#xff1a;蓝…

ms-前端八股文

1、暂时性死区 是指在 JavaScript 中使用 let 或 const 声明变量时&#xff0c;变量在其声明之前不能被访问或使用的特性。 var可以变量提升&#xff08;在 JavaScript 中&#xff0c;变量声明提升是指在执行代码之前&#xff0c;变量声明会被提升到作用域的顶部。&#xff0…

SSM 项目学习(Vue3+ElementPlus+Axios+SSM)

文章目录 1 项目介绍1.1 项目功能/界面 2 项目基础环境搭建2.1 创建项目2.2 项目全局配置 web.xml2.3 SpringMVC 配置2.4 配置 Spring 和 MyBatis , 并完成整合2.5 创建表&#xff0c;使用逆向工程生成 Bean、XxxMapper 和 XxxMapper.xml2.6 注意事项和细节说明 3 实现功能 01-…

【C++】二叉搜索数

目录 一、二叉搜索树的概念 二、二叉搜索树的模拟实现 1、定义节点 2、构造二叉树 3、析构二叉树 ​4、拷贝二叉树 5、二叉树赋值 6、插入节点 &#x1f31f;【非递归方式】 &#x1f31f;【递归方式】 7、打印节点 8、搜索节点 &#x1f31f;【非递归方式】 &…

臻奶惠无人售货奶柜:定义新时代的健康生活方式

臻奶惠无人售货奶柜&#xff1a;定义新时代的健康生活方式 臻奶惠的无人售货奶柜&#xff0c;代表着科技与生活方式融合的一个新趋势&#xff0c;它不仅仅是一个简单的购买平台&#xff0c;更是一种全新的生活体验。在这个快节奏的时代&#xff0c;臻奶惠通过其无人售货奶柜&a…

第四百四十三回

文章目录 1. 概念介绍2. 思路与方法2.1 整体思路2.2 使用方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"自定义Action菜单"相关的内容&#xff0c;本章回中将介绍如何获取屏幕相关参数.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本…

(一)小案例银行家应用程序-介绍

案例示例如下所示&#xff1a; 登录之后就会出现下面所示&#xff1a; 项目案例流程图如下 ● 首先我们建立四个账号对象&#xff0c;用于登录 const account1 {owner: ItShare,movements: [200, 450, -400, 3000, -650, -130, 70, 1300],interestRate: 1.2, // %pin: 11…

数学建模-最优包衣厚度终点判别法(主成分分析)

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是viperrrrrrr~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#xff…

线程安全问题与解决方法~

本文内容仅供对线程安全问题、锁的认识和使用等&#xff0c;进行一个介绍。适合小白的文章&#xff01; 目录 一、线程安全问题 1.什么是线程安全问题 2.解释上述安全问题 3.线程安全的五大原因 二、使用锁解决线程安全问题 1.介绍锁 2.加锁操作 一、线程安全问题 在多线…

【吊打面试官系列】Redis篇 - 使用过 Redis 分布式锁么,它是什么回事?

大家好&#xff0c;我是锋哥。今天分享关于 【使用过 Redis 分布式锁么&#xff0c;它是什么回事&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; 使用过 Redis 分布式锁么&#xff0c;它是什么回事&#xff1f; 先拿 setnx 来争抢锁&#xff0c;抢到之后&#…

C语言中的字符与字符串:魔法般的函数探险

前言 在C语言的世界里&#xff0c;字符和字符串是两个不可或缺的元素&#xff0c;它们像是魔法般的存在&#xff0c;让文字与代码交织出无限可能。而在这个世界里&#xff0c;有一批特殊的函数&#xff0c;它们如同探险家&#xff0c;引领我们深入字符与字符串的秘境&#xff0…

阿里云租用GPU服务器多少钱?

阿里云GPU服务器租用价格表包括包年包月价格、一个小时收费以及学生GPU服务器租用费用&#xff0c;阿里云GPU计算卡包括NVIDIA V100计算卡、T4计算卡、A10计算卡和A100计算卡&#xff0c;GPU云服务器gn6i可享受3折优惠&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云GPU…

【51单片机入门记录】A/D、D/A转换器PCF859应用

目录 一、IIC初始化代码 二、开发板电路图 三、PCF8591读/写字节操作流程及相关函数 &#xff08;1&#xff09;PCF8591&#xff08;AD&#xff09;读操作流程及代码 &#xff08;2&#xff09;PCF8591&#xff08;AD&#xff09;写操作流程及代码 四、应用示例-显示电压…

微信小程序 电影院售票选座票务系统5w7l6

uni-app框架&#xff1a;使用Vue.js开发跨平台应用的前端框架&#xff0c;编写一套代码&#xff0c;可编译到Android、小程序等平台。 框架支持:springboot/Ssm/thinkphp/django/flask/express均支持 前端开发:vue.js 可选语言&#xff1a;pythonjavanode.jsphp均支持 运行软件…

JS继承与原型、原型链

在 JavaScript 中&#xff0c;继承是实现代码复用和构建对象关系的重要概念。本文将讨论原型链继承、构造函数继承以及组合继承等几种常见的继承方式&#xff0c;并提供相应的示例代码&#xff0c;并分析它们的特点、优缺点以及适用场景。 在开始讲解 JavaScript 的继承方式之…

RDD算子(四)、血缘关系、持久化

1. foreach 分布式遍历每一个元素&#xff0c;调用指定函数 val rdd sc.makeRDD(List(1, 2, 3, 4)) rdd.foreach(println) 结果是随机的&#xff0c;因为foreach是在每一个Executor端并发执行&#xff0c;所以顺序是不确定的。如果采集collect之后再调用foreach打印&#xf…

ADB(Android Debug Bridge)操作命令详解及示例

ADB&#xff08;Android Debug Bridge&#xff09;是一个强大的命令行工具&#xff0c;它是Android SDK的一部分&#xff0c;主要用于Android设备&#xff08;包括真实手机和平板电脑以及模拟器&#xff09;的调试、系统控制和应用程序部署。 下面是一些ADB的常用命令&#xff…

全面解析找不到msvcr110.dll,无法继续执行代码的解决方法

MSVCR110.dll的丢失可能导致某些应用程序无法启动。当用户试图打开依赖于该特定版本DLL文件的软件时&#xff0c;可能会遭遇“找不到指定模块”的错误提示&#xff0c;使得程序启动进程戛然而止。这种突如其来的故障不仅打断了用户的正常工作流程&#xff0c;也可能导致重要数据…

[中级]软考_软件设计_计算机组成与体系结构_08_输入输出技术

输入输出技术 前言控制方式考点往年真题 前言 输入输出技术就是IO技术 控制方式 程序控制(查询)方式&#xff1a;分为无条件传送和程序查询方式两种。 方法简单&#xff0c;硬件开销小&#xff0c;但I/O能力不高&#xff0c;严重影响CPU的利用率。 程序中断方式&#xff1…