xml地图|网站地图|网站标签 [设为首页] [加入收藏]
到作用域,的一次更新说明
分类:web前端

关于 Node.js 里 ES6 Modules 的一次更新说明

2017/04/27 · JavaScript · es6

原文出处: James M Snell   译文出处:凹凸实验室   

几个月前,我写了一篇文章来描述 Node.js 现存的 CommonJS 模块和新的 ES6 模块系统的许多不同,也说明了在 Node.js 内核中实现这个新模型的内在的一些挑战。现在,我想分享一下关于这件事情的进展情况。

从上下文,到作用域(彩蛋:理解闭包)

2017/10/18 · JavaScript · 1 评论 · 作用域

原文出处: 天方夜   

IE9 跨域请求兼容

2018/05/31 · JavaScript · 跨域

原文出处: CntChen   

明白你什么时候该知道你需要知道的东西

在这之前,如果你还没准备好,你可以花一点时间来看一下我之前的描述这两个模块架构上存在许多根本区别的文章。总结来说就是:CommonJS 与 ES6 Modules 之间的关键不同在于代码什么时候知道一个模块的结构和使用它。

举个栗子,假如我现在有一个简单的 ComminJS 模块(模块名叫'foobar'):

JavaScript

function foo() { return 'bar'; } function bar() { return 'foo'; } module.exports.foo = foo; module.exports.bar = bar;

1
2
3
4
5
6
7
8
function foo() {
  return 'bar';
}
function bar() {
  return 'foo';
}
module.exports.foo = foo;
module.exports.bar = bar;

现在我们在一个叫 app.js 的 JS 文件中引用它

JavaScript

const {foo, bar} = require('foobar'); console.log(foo(), bar());

1
2
const {foo, bar} = require('foobar');
console.log(foo(), bar());

当我执行 $node app.js 的时候,Node.js 已二进制的形式加载 app.js 文件,解析它,并且开始执行里面的代码。在执行过程中,里面的 require() 方法被调用,然后它会同步的去加载 foobar.js 的内容进内存,同步的解析编译里面的 JavaScript 代码,同步的执行里面的代码,然后返回 module.exports 的值当做 app.js 里的 require('foobar') 的返回值。当 app.js 里的 require() 方法返回的时候,foobar 模块的结构就已经知道了,并且可以被使用。所有的这些事情都发生在 Node.js 进程事件循环的同一个周期里。

要理解 CommonJS 与 ES6 Modules 之间的不同至关重要的是,一个 CommonJS 的模块在没有被执行完之前,它的结构(API)是不可知的 — 即使在它被执行完以后,它的结构也可以随时被其他代码修改。

现在我们用 ES6 的写法来写同样的模块:

JavaScript

export function foo() { return 'bar'; } export function bar() { return 'foo'; }

1
2
3
4
5
6
export function foo() {
  return 'bar';
}
export function bar() {
  return 'foo';
}

并且在代码中引用它:

JavaScript

import {foo, bar} from 'foobar'; console.log(foo()); console.log(bar());

1
2
3
import {foo, bar} from 'foobar';
console.log(foo());
console.log(bar());

从 ECMAScript 统一的标准来看,ES6 Modules 的步骤与 CommonJS 里已经实现的有很大的不同。第一步从硬盘上加载文件内容大致上是相同的,但是可能是异步的。当内容加载完成后,会解析它。在解析的同时,模块里被 export 声明定义的结构会在组件内容被执行之前就探知出来。一旦结构被探知出来,组件的代码就会被执行。这里重要的是记住所有的 import 和 export 语句都会在代码执行之前被解析出来。另一点是在 ES6 中是允许这个解析的步骤异步执行的。这就意味着,在 Node.js 的机制中,加载脚本内容、解析模块的 import 和 export 、执行模块代码将发生在多个事件循环里。

图片 1前言

近几天在编程群中的聊天,让我发现了很多人并不清楚什么是上下文(context)、什么是作用域(scope),而且纠结在其中。我当初对这两个概念也只有粗浅的理解,不过我从一开始就不怎么困惑,因为我清楚自己对这一问题的认识边界。现在,我对它们的认识也只加深了一点点。不过,群聊中小伙伴的热情鼓舞了我——很多最最初学的小伙伴,想到和思考的是很多我从没考虑过的问题,小伙伴们真是达到了“进一寸有一寸的欢喜”这一境界。见贤思齐,我决定把这一点点进步记录下来。


IE9 跨域请求兼容

Chrome: You will die! IE9: Not today!

1
2
Chrome:  You will die!
IE9:     Not today!

时机很重要

在评估 ES6 Modules 的可实现性之前,我们关注的重点是怎么样无缝衔接的实现它。比如我们希望它可以可以实现同时对两种模块的支持,这样可以很大程度上对用户是透明的。

可惜,事情并不是这么简单…

尤其是 ES6 Modules 的加载、解析和执行都是异步的,这就导致不能通过 require() 来引用一个 ES6 模块。原因是 require() 是一个完全同步的函数。如果我们去修改 require() 的语义让它可以进行异步加载的话,那对于现有的生态系统将会产生巨大的破坏。所以我们有考虑在 ES6 的 import() 函数提议(详情)通过之后建模实现一个 require.import() 函数。这个函数会返回一个 Promise 在 ES6 模块加载完成后标记完成。这不是最好的方案,但是它可以让你在现有的 Node.js 里以 CommonJS 的格式来使用。

有一点好消息是在 ES6 模块里可以很方便地使用 import 来引用一个 CommonJS 模块。因为在 ES6 模块里异步加载不是必须的。ECMAScript 规范进行一些小修改就可以更好地支持这种方式。但是所有这些工作过后,还有一个重要的事情…

上下文与作用域的关系

很多人弄不清除,原因当然是既不了解上下文,也不了解作用域——我是说,几乎没有人明白上下文是什么而不明白作用域是什么,反之亦然。上下文(context)和作用域(scope)都是编译原理的知识,具体编程语言有具体的实现规则,本文关注 JavaScript 语言的实现。首先需要关注的是,这两个概念的关系非常密切,所以先了解它们的关系,有助于理解它们到底是什么。

上下文(context)和作用域(scope)的关系:

上下文是一段程序运行所需要的最小数据集合;作用域是当前上下文中,按照具体规则能够访问到的标识符(变量)的范围。

后文是对上下文和作用域更详细的解释,知道了上面指出的关系,往下阅读时就可以加深对这一关系的理解了。


背景

搭建公司官网的框架时采用了 vuejs, 使用 history router mode 来做 SEO 优化, 使用 fetch 做网络请求, fetch 用 whatwg-fetch 做 polyfill. 根据百度浏览器市场份额统计, 2017年全年 IE9 的占有率达到 9.50%, 并且 vue 框架也是兼容到 IE9, 所以项目要求兼容到 IE9.

但是 fetch polyfill 并不兼容 IE9, 这篇文章追溯问题原因并提出解决方法.

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:到作用域,的一次更新说明

上一篇:没有了 下一篇:前者底蕴进级,要求计划的步骤
猜你喜欢
热门排行
精彩图文