JavaScript-模块化开发（一）基础知识

标签使用

在html文件中导入模块，需要定义属性 type="module"

<script type="module"></script>

模块路径

在浏览器中引用模块必须添加路径如 ./ 但是在打包工具如 webpack 中则不需要
测试的 test.js 的模块内容如下

export let test = {name:'xb';
};

下面没指定路径将发生错误

<script type="module">import { test } from "test.js";
</script>

正确使用需要添加上路径

<script type="module">import { test } from "./test.js";
</script>

延迟解析

模块总是会在所有 html 解析后才执行，下面的模块代码可以看到后加载的 button 按钮元素。

建议为用户提供加载动画提示，当模块运行时再去掉动画

<body><script type="module">console.log(document.querySelector("button")); //Button</script><script>console.log(document.querySelector("button")); //undefined</script><button>xb</button>
</body>

严格模式

模块默认运行在严格模式下，以下代码没有使用声明语句将会报错

<script type="module">xb = "xb"; // Error
</script>

下面的 this 也会是 undefined

<script>console.log(this); //Window
</script>
<script type="module">console.log(this); //undefiend
</script>

作用域

模块都有独立的顶级作用域下面的模块不能互相访问

<script type="module">let xb = "xb";
</script><script type="module">alert(xb); // Error
</script>

单独文件作用域也是独立的，下面的 1.1.js 和 1.2.js 不能相互访问

<script type="module" src="1.1.js"></script>
<script type="module" src="1.2.js"></script>

# 1.1.js
let xb = "xb";# 1.2.js
console.log(xb)

预解析

模块在导入时只执行一次解析之后的导入不会再执行模块代码而使用第一次解析的结果并共享数据

可以在首次导入时完成一些初始化工作
如果模块内有后台请求也只执行一次

引入多次 test.js 脚本时只执行一次

<script type="module" src="test.js"></script>
<script type="module" src="test.js"></script>#test.js内容如下
console.log("xb");

下面在导入多次 test.js 时只解析一次

<script type="module">import "./test.js";import "./test.js";
</script># test.js内容如下
console.log("xb");

JavaScript-模块化开发（一）基础知识相关推荐

JavaScript模块化开发（一）基础知识
2019独角兽企业重金招聘Python工程师标准>>> 随着前段JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理 ...
前端开发之基础知识-HTML（一）
1.1 html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网 ...
day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天--2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
JavaScript模块化开发的演进历程
写在前面的话 js模块化历程记录了js模块化思想的诞生与变迁历史不是过去,历史正在上演,一切终究都会成为历史拥抱变化,面向未来延伸阅读 - JavaScript诞生(这也解释了JS为何一开始没有 ...
移动web开发入门—基础知识、自适应布局、调试
之前没做过移动端web开发,最近接手的一个小项目是做微信公众号,需要考虑手机适配.UI给出的设计稿是一般是基于iphone手机做的(15年之后是基于ipone6),我们的UI是基于iphone6来做的 ...
JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...
Android camera（4）---Android Camera开发之基础知识篇
Android Camera开发之基础知识篇转自:https://blog.csdn.net/feiduclear_up/article/details/51968975#jump5 概述 Andr ...
高通骁龙410C开发板基础知识
高通骁龙410C开发板基础知识高通骁龙410C开发板是基于高通400系列处理器的第一块开发板,性能优异,方便调试.它包含先进的电源管理,WIFI 蓝牙,GPS等等,所有都集成在一张信用卡大小的PCB ...
音视频开发入门基础知识（视频入门篇）
RTSP实时音视频开发实战课程:<RTSP实时音视频开发实战> 音视频开发入门基础知识(音频入门篇) 目录一.前言二.视频采集和显示三.视频常见的格式四.RGB转YUV和YUV转R ...
NT内核和驱动开发的基础知识-笔记
这是我在学习NT内核和驱动开发的基础知识时记录的一些笔记,不是连续的教程,欢迎指正错误的地方 ----------------------------------------------------- ...