《Vue.js前端开发技术与实践（第二版）》 课件 第2章 Vue项目开发ES6基础-模块.pptx

第1章ES6-模块2023-08-21

目录一、模块的概念二、JavaScript传统组织代码的方式三、ES6模块化规范四、JavaScript文件何时成为模块五、导出与导入六、命名导出与导入七、默认导出与导入八、作业

一、模块的概念

一、模块的概念模块就是分解、封装和组织代码的工具。

二、传统组织代码的方式

二、JavaScript传统组织代码的方式1、JavaScript传统以文件的方式组织代码2、JavaScript传统组织代码的方式存在的问题

1、JavaScript传统以文件的方式组织代码文件的依赖关系是由文件的引入先后顺序决定的。文件与文件之间是完全开放的。

2、JavaScript传统组织代码的方式存在的问题（1）文件依赖问题文件与文件之间的依赖关系不明确的问题（2）命名冲突问题命名冲突导致代码覆盖的问题

三、ES6模块化规范

三、ES6模块化规范(1)每个js文件都是一个独立的模块，该文件内部的所有变量和函数，外部无法获取。(2)export关键字导出模块的变量和函数。(3)import关键字导入其他模块提供变量和函数。

四、JS文件何时成为模块

四、JavaScript文件何时成为模块使用script标签时，指定type=module。

五、导出与导入

五、导出与导入命名导出与导入默认导出与导入

六、命名导出与导入

六、命名导出与导入1、命名导出与导入语法2、命名导出与导入示例3、先声明后导出

1、命名导出与导入语法命名导出语法：export???declaration说明：（1）使用命名导出，导出的是变量声明、函数声明，（2）根据名称导出值，使用这个语法可以导出多个值。命名导入语法：import{变量名列表}from模块标识符‘说明：（1）import后面的花括号中的变量名与命名导出时的变量要同名。（2）from关键字后面模块标识符必须使用字符串字面量值

2、命名导出与导入示例exportvara=123;//以名称a导出exportfunctionb(){//以名称b导出console.log(Hello,World!)}//import{a}from./exp.js‘//import{b}from./exp.js‘import{a,b}from./exp.jsconsole.log(a);//123b();//Hello,World!import{c}from./exp.js//报错命名导出示例命名导入示例

3、先声明后导出导出语法：export{变量名或函数名列表}示例：vara=123;functionb(){console.log(Hello,World!)}//export{a};//export{b};export{a,b}

七、默认导出与导入

七、默认导出与导入2、默认导出与导入示例1、默认导出与导入语法

1、默认导出与导入语法默认导出语法：exportdefault??expression?说明：（1）从表达式得到的值就是导出的内容。（2）在一个模块中exportdefault只能使用一次默认导入语法：import接收名称from模块标识符‘说明：（1）import关键字后的“接收名称”可以使用任何的合法名称

默认导出示例默认导入示例2、默认导出与导入示例exportdefault{a:123,b:function(){console.log(Hello,World!)}}importcfrom/exp.js‘console.log(c.a);//123console.log(c.b());//Hello,World!

08八、作业

八、作业做一个实现两个数加、减、乘、除的计算器，要求如下：1、创建四个模块分别实现两个数的加、减、乘、除功能，功能通过命名导出。2、在index.js模块中导入四个功能，然后再通过默认导出这个四功能3、在index.html文件引入index.js，输出14和20这两个数的和、差、积、商。

THEENDTHANKS