从常量实例化 Javascript 对象

Question

我正在使用 Workbox 库构建一个渐进式网络应用程序。有一个示例 on the Workbox doc 表明可以使用常量省略导入语句。

带有导入语句的代码：

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst()
);

没有导入语句的代码：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies; // same as const CacheFirst = workbox.strategies.CacheFirst
const {CacheableResponse} = workbox.cacheableResponse;  

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst()
);

如何使用常量而不是导入来实例化 CacheFirst 对象 (new CacheFirst())？这是 ES6 特性还是 Workbox 特有的特性？无法在 Google 或 SO 上找到答案。 CacheFirst 对象与常量有什么关系？

因为我来自 PHP，所以这个结构对我来说是新的。

Answer 1

让我们关注三行之一。

导入

import {CacheFirst} from 'workbox-strategies';

这会查找模块 workbox-strategies 并导入它的导出成员，因此它必须看起来有点像这样：

// in node_modules/workbox-strategies/index.js:

function CacheFirst(){
  // implementation... - could also be a class with constructor before transpilation etc.
}
export CacheFirst;

没有导入但有 `importScripts`

现在来看第二个例子。这里的魔法实际上发生在

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

它必须做类似

的事情

// in https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js

// define global var workbox
var workbox = {};
// isolate rest of the declarations so they don't pollute the global namespace
(()=>{
  function CacheFirst(){
    // implementation... - could also be a class with constructor before transpilation etc.
  }
  workbox.strategies = {
    CacheFirst: CacheFirst, //create a member named CacheFirst and assign the function CacheFirst to it - could use AutoProperties
  }
})();

所以在 importScripts() 调用之后你有一个全局 workbox 对象。现在您只需为它的一些成员起别名以便于访问。使用解构这看起来像

const {CacheFirst} = workbox.strategies;
// create actual instance
const myCacheFirstStrat = new CacheFirst();

但你也可以直接使用全局 webpack 对象

const myCacheFirstStrat = new workbox.strategies.CacheFirst();

这是否回答了您的问题？

从常量实例化 Javascript 对象

Instantiate Javascript object from constant

javascript

workbox

导入

没有导入但有 `importScripts`

从常量实例化 Javascript 对象

Instantiate Javascript object from constant

javascript

workbox

导入

没有导入但有 importScripts

没有导入但有 `importScripts`