浏览器加载
标签的async属性也可以打开,这时只要加载完成,渲染引擎就会中断渲染立即执行。执行完成后,再恢复渲染。
ES6模块允许内嵌在网页中,语法行为与加载外部脚本一致;
importutils from"./utils.js";// other code
外部的模块脚本(foo.js),有几点需要注意:
(1) 代码是在模块作用域之中运行,而不是在全局作用域运行,模块内部的顶层变量,外部不可见。
(2) 模块之中,可以使用import命令加载其他模块(.js后缀不可省略,也可以使用export命令输出对外接口)
(3)模块之中,顶层的this关键字返回undefined,而不是指向window,也就是说:在模块顶层使用this关键字是无意义的;
(4)同一个模块如果加载多次只执行一次;
//实例模块importutilsfrom"https://www.baidu.com/js/utils.js";constx=1;console.log(x===window)// falseconsole.log(this===undefined)//truedeletex;//语法错误,不能删除x
利用顶层的this等于undefined这个语法点,可以侦测当前代码是否在 ES6 模块之中。
constisNotModuleScript=this!==undefined;
ES6模块与CommonJS模块的差异
(1)CommonJS模块输出的是一个值的拷贝,ES6模块输出得失值的引用;
(2)CommonJS模块是运行时加载,ES6模块是编译时输出接口。
CommonJS模块输出的是值的拷贝,也就是说一旦输出一个值,模块内部的变化就影响不到这个值;
//lib.jsvarcounter=3;functioninCounter(){counter++;}module.exports={counter:counter,inCounter:inCounter,};//在main.js里面加载这个模块varmod=require(".lib");console.log(mod.counter);//3mod.inCounter();console.log(mod.counter);//3
lib.js模块加载以后,他的内部变化就影响不到输出的mod.counter了,这是因为mod.counter是一个元素类型的值;
ES6模块的运行机制与CommonJS不一样,js引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。原始值变了,import加载的值也会跟着变。因此,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。
//lib.jsexportlet counter=3;exportfunctioninCounter(){counter++;}//main.jsimport{counter,inCounter}from"./lib";console.log(counter);//3inCounter();console.log(counter);//4
ES6 模块输入的变量counter是活的,完全反应其所在模块lib.js内部的变化。
内部变量
ES6 模块应该是通用的,同一个模块不用修改,就可以用在浏览器环境和服务器环境。为了达到这个目标,Node 规定 ES6 模块之中不能使用 CommonJS 模块的特有的一些内部变量。
首先,就是this关键字。ES6 模块之中,顶层的this指向undefined;CommonJS 模块的顶层this指向当前模块,这是两者的一个重大差异。
其次,以下这些顶层变量在 ES6 模块之中都是不存在的。
arguments
require
module
exports
filename
dirname
CommonJS模块的加载原理
CommonJS的一个模块,就是一个脚本文件,require命令第一次加载该脚本,就会执行这个脚本,然后在内存生成一个对象。
{id:"...",exports:{...},loaded:true,...}
Node内部加载模块后生成的一个对象,该对象的id属性是模块名,exports属性是模块输出的各个接口,loaded属性是一个布尔值,表示该模板的脚本是否执行完毕,等等属性;
以后需要用到这个模块的时候就会到export属性上面取值,即使再次执行require命令,也不会再次执行该模块,而是到缓存之中取值,也就是说:CommonJS模块无论加载多少次,只在第一次加载时运行一次,以后再加载,就返回第一次运行的结果;
作者: MGT360124
链接:http://www.imooc.com/article/20630?block_id=tuijian_wz
转载来源:慕课网
网友评论