ES6之Module的语法(2)

4.import命令

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块
这里写图片描述

上面代码的import命令,用于加载profile.js文件,并从中输入变量。import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同

如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名
这里写图片描述

注意import命令具有提升效果,会提升到整个模块的头部首先执行

这里写图片描述

上面的代码不会报错,因为import的执行早于foo的调用。这种行为的本质是,import命令是编译阶段执行的,在代码运行之前

由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构
这里写图片描述

上面三种写法都会报错,因为它们用到了表达式、变量和if结构。在静态分析阶段,这些语法因为都没有执行,所以是没法得到值的

如果多次重复执行同一句import语句,那么只会执行一次,而不会执行多次

5.模块的整体加载

除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面
这里写图片描述

现在,加载这个模块
这里写图片描述

上面写法是逐一指定要加载的方法,整体加载的写法如下
这里写图片描述

6.export default 命令

从前面的例子可以看出,使用import命令的时候,用户需要知道所要加载的变量名或函数名,才能按照export对应输出的名称去加载,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法

为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出

这里写图片描述

其他模块加载该模块时,import命令可以为该匿名函数指定任意名字

这里写图片描述

上面代码的import命令,可以用任意名称指向export-default.js输出的方法,这时就不需要知道原模块输出的函数名。需要注意的是,这时import命令后面,不使用大括号

export default命令用在非匿名函数前,也是可以的

这里写图片描述

这里写图片描述

注意:上面代码的两组写法,第一组是使用export default时,对应的import语句不需要使用大括号;第二组是不使用export default时,对应的import语句需要使用大括号

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能对应一个方法

本质上,export default就是输出一个叫做default的变量或方法,系统允许你为它取任意名字或者给他赋予任意的值

这里写图片描述

这里实际的意思就将add变量赋值给了default变量作为输出

正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句
这里写图片描述

上面代码中,export default a的含义是将变量a的值赋给变量default。所以,最后一种写法会报错

因为export default本质是将该命令后面的值,赋给default变量以后再输出,所以直接将一个值写在export default之后也是可以的
这里写图片描述

如果想在一条import语句中,同时输入默认方法和其他变量,可以写成下面这样

这里写图片描述

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

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

相关文章

ISA系列之三:ISA Server 2004防火墙的基本配置

3&#xff0e;1 防火墙策略的组成<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />在ISA服务器安装成功后&#xff0c;其防火墙策略默认为禁止所有内外通讯&#xff0c;所以我们需要在服务器上建立相应的防火墙策略&#xff0c…

ES6之Module的语法(3)

7.export 与 import 的复合写法 如果在一个模块之中&#xff0c;先输入后输出同一个模块&#xff0c;import语句可以与export语句写在一起 模块的接口改名和整体输出&#xff0c;也可以采用这种写法 默认接口的写法如下 具名接口改为默认接口的写法如下 因为默认是…

ES6之Module 的加载实现(1)

1.浏览器加载 1.1传统方法&#xff1a; 在 HTML 网页中&#xff0c;浏览器通过<script>标签加载 JavaScript 脚本 默认情况下&#xff0c;浏览器是同步加载 JavaScript 脚本&#xff0c;即渲染引擎遇到<script>标签就会停下来&#xff0c;等到执行完脚本&…

ES6之Module 的加载实现(2)

3.Node 加载 Node 对 ES6 模块的处理比较麻烦&#xff0c;因为它有自己的 CommonJS 模块格式&#xff0c;与 ES6 模块格式是不兼容的。目前的解决方案是&#xff0c;将两者分开&#xff0c;ES6 模块和 CommonJS 采用各自的加载方案 3.1在静态分析阶段&#xff0c;一个模块脚本…

ASP.NET+AJAX简单的文体编辑器

前言: 这里一个基于AJAX的简单的文体编辑器,主要是利用了AJAX不刷新这个来做,功能上很简单没有什么技术性的东西在里, 在这里希望能够初学习一点帮助,同时也我自己也提高和巩固了以前学过的东西&#xff1b;目录&#xff1a; 运行结果浏览 代码讲解…

ES6之Module 的加载实现(3)

4.循环加载 “循环加载”&#xff08;circular dependency&#xff09;指的是&#xff0c;a脚本的执行依赖b脚本&#xff0c;而b脚本的执行又依赖a脚本 通常&#xff0c;“循环加载”表示存在强耦合&#xff0c;如果处理不好&#xff0c;还可能导致递归加载&#xff0c;使得程…

oracle存储过程写法(一)

Create or Replace Procedure Proc_AppendRecords(nAppendCount int -- 要添加的记录条数)asbegindeclarenstart int;nend int;beginselect NVL(max(UserID),0) into nstart from T_Test_Checkbill;nend : nstart nAppendCount;while nstart < …

Vue之重命名组件

因为header本身是关键字&#xff0c;所以这里通过重命名的方式改为’v-header’

Struts2学习笔记1

一&#xff0e;下载struts2.0.1 http://struts.apache.org/downloads.html&#xff0c;下载struts-2.0.1-all.zip&#xff0c;这个压缩包中包括了开发struts2所需的struts2-core.jar核心包以及其他struts2所依赖的JAR文件&#xff0c;另外另一些struts2的演示样例程序以及一些H…

Vue路径的别名

这里给’components’赋予了一个地址&#xff0c;那么在程序中引入路径的时候’components’就直接可以代替路径’../src/components’

简单的单级下拉菜单实现

这里用纯CSS实现一个简单的单级下拉菜单&#xff0c;鼠标划过菜单标题时显示下拉菜单。 基本思路 在菜单处于光标之下时显示菜单&#xff0c;其余时候隐藏。这个过程首先得想到 :hover 伪类来实现&#xff0c;但是直接的利用伪类还不行&#xff0c;因为普通状态下菜单隐藏了&am…

C#里面的继承

举个例子&#xff1a;有一个基类RectangleEx1 classRectangleEx2 {3 privateint_x, _y, _w, _h;4 5 publicintx6 {7 get{ return_x; }8 set{ _x value; }9 }10 publicinty11 {12 get{ return_y; }13 set{ _y value; }14 }15 publicintw16 {17 get{ return_w; }18 set{ _w value…

Vue-Router的路由实例构造配置

可以通过在创建路由实例的时候传入不同的对象来选择不同的配置&#xff0c;这里的’linkActiveClass’代表的是给被激活的<router-link>添加一个叫做’active’的类名&#xff0c;然后我们就可以在css中给被激活标签设置不同的CSS了 其余的还有