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

作为一个多年来一直试图通过创建（HTML）组件来帮助内容作者开发和维护大型网站的人，我真的很高兴看到web组件在w3c、google和mozilla获得跟踪。但在我看来，规范中没有针对javascript库膨胀的措施

假设我开发的组件

A

依赖于

underline.js

，并希望使用依赖于

lodash.js

version 1.*的组件

B

和

C

。
我看不到任何标记依赖项和库版本的方法。当我们谈论有多个团队和利益相关者的网站时，这可能会导致巨大的图书馆膨胀

当前的解决方案是在全球范围内对整个网站的批发客户机框架进行标准化。当您在不同的服务器端框架（如

LifeRay

（java）、

EpiServer

（.net）、

Django

（python）等）上投入大量资源时，这是很困难的。每个框架都有首选的客户端库

我将web组件视为将服务器端框架与客户端代码解耦的一种手段，但忽略客户端依赖处理是令人担忧的

是在规范中我遗漏了它，还是有我不知道的缓解这个问题的策略

[提到的库只是示例。这个问题与框架、库和服务器端语言无关]

更新

---

谢谢大家的回答。我感到惊讶的是，最近没有人提及或大肆宣传这一点。我完全赞同影子DOM、作用域样式、自定义元素等概念，但我没有看到任何地方提到如何处理JavaScript依赖关系。正如@Daniel Baulig正确编写的那样，他根本没有提到JavaScript。我承认这个问题几乎无法回答。然而，当@Daniel Bailig提到ES6模块时，我认为他是最接近的。我个人认为，我们将在ES6模块和require.js之间找到一个可持续的解决方案。

我从未听说过标准化javascript框架。然而，在HTML5中，一些在早期版本的HTML中曾经需要javascript框架的部分现在已经作为标准功能添加到HTML5中（例如标记

、圆角边框、阴影效果等等），这是解决您提到的问题的第一步

老实说，我不认为这会发生，至少在不久的将来不会。所有这些框架都有自己的目的、优点和缺点。在您能够构建一个巨大的javascript库并以某种方式将它们结合在一起之前，web上始终会使用不同的库

---

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

这是一个困扰我一段时间的问题，尤其是在面临 维护许多开发人员都涉及到的代码。你经常遇到 中包含多个JS库（其中一些基本上做相同的事情） 一个解决方案，更不用说使用同一框架的不同版本了 在一个解决方案中

我正在考虑的或者说“一个”潜在的解决方案是创建一种 调解人框架

基本思想是“针对”中介编写代码（从不直接访问/使用js库，而是通过中介使用它），从而本质上使代码不可知（与其“父”库解耦），并在下面包含中介实现

这不会解决我/我们眼前的问题或膨胀，但无论我写什么web组件 将能够跨框架运行

以下是一个小小的概念证明：

例如，调解人包括：

JQuery（1.9.1）

Mootools（1.4.5）

原型（1.7.1.0）

YUI（3.10.3）

Dojo（1.9.1）

分机（3.4.0）

Zepto（1.0）

但没有什么能阻止任何人创建自己的中介框架，从而“抽象”其他中介框架 调停者，嗯，所以可能也会导致膨胀（使事情变得更糟而不是更好）

我想这取决于你自己制定标准；）

在当前的环境中，似乎没有一种特定的方法来定义依赖项，甚至没有版本。组件应不使用任何库/依赖项，或与它们紧密耦合

这意味着每个主要的库可能都会带来它们自己的组件集，这些组件期望这些库已经加载

可能会在这方面提供帮助，但他们目前也没有提供任何版本控制机制

所有这些都表明，该规范处于相当早期的阶段，可能会发生变化。向规范作者提出依赖性问题可能会将该主题带到表中，甚至可能在规范固化之前解决。 最后，无论平台和语言如何，使用不同的库在单个代码库中执行相同的任务始终是软件开发中的一个问题，并且将继续是一个问题。您只需商定在代码库中使用哪些框架/库，即使这意味着将您与其他人隔离

---

此外，如果您现在已经对为web开发独立组件感兴趣，您可能想看看

库膨胀不一定通过使用web组件来缓解，事实上，您可以缩减库（链接用于Lo Dash，但其他流行库有构建步骤）。这里的某种自动化可能非常有用，即可以扫描

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

// 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;
});

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

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

{
"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"
     }
   }
 }
}

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