如何使用Web组件缓解JavaScript库膨胀

我从未听说过标准化javascript框架。然而，有了HTML5，早期版本的HTML中曾经需要javascript框架的一些部分现在已经作为标准功能添加到HTML5中（例如标签<canvas>、圆角边框、阴影效果等），这是解决您所提到的问题的第一步。

老实说，我不认为这会发生，或者至少在不久的将来不会发生。所有这些框架都有自己的目的、优点和缺点。除非你能构建一个巨大的javascript库，以某种方式将它们结合在一起，否则整个网络上总是会使用不同的库。

另一个重要点是不同库之间的竞争，这使得javascript市场不断增长，并提出了新的创新。如果你想制作一个所有人都能使用的标准javascript库，你也可以消除不同框架之间的竞争，从而保持创新和进步。

使用web组件并不一定能缓解库的膨胀，事实上，您可以通过使用自定义构建来精简库（链接适用于Lo Dash，但其他流行的库也有构建步骤）。这里的某种自动化可能非常有用，即一个可以扫描源代码并根据您使用的函数生成自定义构建的工具。

我认为随着npm的兴起，这样的图书馆变得越来越不重要了。Lo Dash就是一个很好的例子，因为它的功能是作为独立模块在npm上发布的，但你也有类似Sizzle的东西，jQuery使用的CSS选择器引擎。如果你仔细观察，你会发现很多插件都是在没有jQuery作为依赖项的情况下编写的，或者它在项目的路线图中删除了依赖项，或者有人已经将项目分叉以删除对另一个库的依赖项。例如，Exoskeley，一个完全下划线&jQuery免费版的Backbone。

我不认为我们会看到另一个流行的实用程序库，如jQuery或下划线；使用npm，我们可以简单地选择我们想要的模块，以及依赖于这些大型库的fork项目，只使用他们需要的模块或完全无依赖的版本来重写它们。

有了AMD和requirejs，这已经成为现实。您可以定义一些源代码的依赖关系；在代码中，您可以声明该组件只需要例如microjax，而不需要整个jQuery库：，而不是链接到单片库

define(['microajax'], function(microAjax) {
    microAjax("/resource/url", function (res) {
      alert (res);
    });
});

查看microjs网站，了解更多像这样的帮助程序库。

就web组件而言，我希望这些组件的作者以这样的方式编写组件，这样他们就不需要像jQuery这样可以做任何事情的大型库。如果他们这样做了，我也希望我能用叉子把它们叉起来，自己把所有不必要的部分都剪掉。：-）

编辑：这篇24ways文章很好地介绍了原生JS功能的兴起，这些功能最终将取代jQuery。值得一提的是，jQuery是在JavaScript实现大不相同的时候编写的；但随着标准化程度的提高和API的一致性的提高，对原生功能包装器的需求有所减少。例如，现在我们有了querySelectorAll:

// jQuery
$('.counter').each(function (index) {
  $(this).text(index + 1);
});
// Vanilla JavaScript
var counters = document.querySelectorAll('.counter');
[].slice.call(counters).forEach(function (elem, index) {
  elem.textContent = index + 1;
});

我们只是尝试将我们的web组件javascript保持在最低限度，使其占用空间非常小。因此，我们不需要使用下划线，而只需要使用本机的ES6等价物（考虑到现有的use web组件，这并不是一个很大的扩展）。

然后，我们用一个html文件、一个css文件和一个js文件封装我们的web组件。它们实际上可以由多个文件组成，但我们的构建过程会处理好这一点。我们的javascript文件与Browserify捆绑在一起，允许我们使用npm模块，同时将它们很好地打包在我们的web应用程序中。

这提供了非常好的微小但黑框的web组件，它们可以共享公共模块而不会发生任何冲突，也不必担心AMD的开销，只需简单的commonjs即可实现所有功能。

如果我们确实需要在多个组件之间捆绑一个沉重的库，我们要么将该库设置为外部库，然后将其传入，将其包含在应用程序中（这就是使用backbone.js的方法，因为backbone.jsp使用instanceof而不是duck类型，使得多个backbone..js实例无法相互通信），或者让web组件使用像wzrd.in这样的浏览cdn服务器将其捆绑在一起——然而，对于父web应用程序来说，处理大型dep要好得多，就好像web组件使用不同的cdn一样，那么你就有问题了。

假设我开发了对underscore.js有依赖关系的组件A，并希望使用对lodash.js 1.*版本有依赖性的组件B和C，等等。我看不出有任何方法可以标记依赖项和库版本。

1999年有一个旧的ECMA规范（ECMA-290），它指定了一个组件机制，其中包括依赖项和库版本的元素和属性：

<component
name="com.mycompany.selectnav"
displayname="SelectNav"
src="selectnav.js"
env="client"
hint="Navigational Select List"
version="1.0"
needsform="yes">
</component>

对于依赖项，请使用customizer元素。对于版本控制，请使用meta元素。例如：

<customizer type="ecmascript" url="http://com.com/foo">
  <meta name="version" value="1.1b"/>
</customizer>

用于现代实现的JSON编码如下所示：

{
"component":
 {
 "name":"com.mycompany.selectnav",
 "displayname":"SelectNav",
 "src":"selectnav.js",
 "env":"client",
 "hint":"Navigational Select List",
 "version":"1.0",
 "needsform":"yes",
 "customizer":
   {
   "type":"ecmascript",
   "url":"http://com.com/foo",
   "meta":
     {
     "name":"version",
     "value":"1.1b"
     }
   }
 }
}

与CDN API、API检查器和按需脚本加载器集成的生命周期回调将是另一个选项：

createdCallback => check API URL => createElement for dependent script tags => onload event for dependent script tags => appendChild for dependent script tags

以下项目中的HTML子集是一个已经尝试过多次的解决方案：

• GitHub-ampproject/amphtml:amphtml源代码、示例和文档。有关详细信息，请参阅下文。

• XHTML™基本1.1-第二版

• X标记★Web组件

• 覆盖范围ext

• 如何用摇树清理您的JavaScript构建

• 消除未使用的CSS

• 使用webpack和源地图浏览器分析并最小化客户端捆绑包的大小

• polyfill.io

参考

• ECMA-290:ECMAScript组件规范（PDF）

• 基于浏览器的分布式进化计算：性能和伸缩行为（ACM）

• 自定义元素回调队列

• Web组件自定义元素规范：自定义元素类型

• CommonJS模块的懒惰评估

• 小型模块的成本

• Yepnope从带有回退的CDN加载（示例）

• 为CDN回退提供本地JS和CSS资源·Edd Mann

• 插件优点和缺点

• Caja游乐场