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…

太极

昨天&#xff0c;学了一点太极&#xff0c;也让我终于明白&#xff0c;书本代替不了的所谓的口传心授。 桩功&#xff1a; 手掌向前&#xff0c;最后腰也有前倾&#xff0c;背和臀部的后和手的前伸成为一个对比&#xff0c; 臀部的下和头顶的上&#xff0c;成为一个互拉 可以通…

linux下修改主机名

我用的是Fedora12系统&#xff0c;默认情况下&#xff0c;主机名是&#xff1a;localhost.localdomain&#xff0c;这个名字真是太难看了&#xff0c;于是就想着修改一下主机名。 在网上搜索了下&#xff0c;有好几种方法&#xff0c;我就不多说了&#xff0c;我只介绍我自己最…

ES6之Module的语法(3)

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

到了新公司

由于原公司撤资&#xff0c;今天是新公司的第一天上班&#xff0c;希望自己能走好&#xff1a;&#xff09; 转载于:https://www.cnblogs.com/treeyh/archive/2008/04/21/1164709.html

group by的使用

在sql语句中经常用到group by&#xff0c;但是对其并不是太了解&#xff0c;所以记录下来&#xff1a; select A,cout(*) 数量 from table_name group by A; group by 的使用有一条原则&#xff0c;那就是select 后面的所有列中没有使用聚合函数到必须出现在group by 后面。 那…

定时关机,适用于windows系统

命令&#xff1a; at 23:00:00 shutdown -s

ES6之Module 的加载实现(1)

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

c#同类型操作最终得到的结果将是同类型

例&#xff1a;decimal a (decimal) ( 1 / 2 ); //a的值是 0declmal b (decimal) ( (decimal)1 / (decimal)2 ) //b的值是0.5 转载于:https://www.cnblogs.com/lswweb/archive/2008/04/22/1165336.html

不断尝试,终能到达彼岸

不断尝试&#xff0c;终能到达彼岸 看山是山&#xff0c;看水是水&#xff1b;看山不是山&#xff0c;看水不是水&#xff1b;看山还是山&#xff0c;看水还是水。——佛家中人生三大境界 最近有一个用django开发的项目需要部署&#xff0c;项目用到了djangorestfulframework&a…

ES6之Module 的加载实现(2)

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

Linux tail 命令详解

用途从指定点开始将文件写到标准输出。使用tail命令的-f选项可以方便的查阅正在改变的日志文件&#xff0c;tail -f filename会把filename里最尾部的内容显示在屏幕上&#xff0c;并且不但刷新&#xff0c;使你看到最新的文件内容。语法标准语法tail [ -f ] [ -c Number | -…

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

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

判断字符串中有多少汉字

如何判断字符串中有多少汉字代码实例&#xff1a; <html xmlns"http://www.w3.org/1999/xhtml" ><head> <title>标题页</title> </head> <body> <script language"JavaScript"> function cal(str) { re…

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 < …