Module的加载实现

浏览器加载

标签的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

转载来源:慕课网

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容