构建JavaScript框架时如何实现图书馆不可知论？

Question

我已经开始研究构造JavaScript框架。

我不想在这里重新发明轮子，尤其是在浏览器怪癖方面，并且我知道在这一点上，我将不得不依靠某些常用的库来处理低级问题。

问题是，我不确定如何将外部库依赖于某些功能（例如dom操纵），而不将其与我的设计联系在一起。

实际的例子将有助于提出更好的观点，但是我还没有进入设计阶段，我只是想避免从错误的脚步入手。

因此，我正在寻找一些示例，准则，最佳实践或可能对这种情况有帮助的模式。

有见识吗？

编辑：关于我为什么要这样做的一点说明。
我的目标是构建比jQuery之类的大多数传统库更像应用程序框架的东西。
考虑分层架构，其中库适合基础架构层（根据Evans在域驱动设计中的定义），并处理事件，dom遍历和操纵等事情。

Answer 1

这是一个非常广泛的问题，但是如果我是您，我将使用jQuery作为基础。 这也是一个非常容易扩展和添加功能的库。

Answer 2

我建议您获取一份ExtJS副本，然后看看它们如何为替换产品的基础核心提供支持。 您可以使用其较高级的库，例如网格，树等，但是可以选择使用YUI或原型代替其Ext核心。

那应该给你一个很好的起点。

编辑以回答评论：

下载ExtJS后，请查看“适配器”文件夹。 在其中，您将看到使ExtJS与其他库一起使用的各种适配器。 您将快速了解它们如何定义功能，这些功能又利用适当的基础库。

Answer 3

隔离您的代码：

在代码的单独部分中，尽可能充分地使用外部库。

以jQuery为例，只需指定一个与jQuery接口的部分，然后在库的该部分中使用jQuery，就像没有明天一样，并为其提供其余代码专用的接口功能。

坦白说，如果您将一个库与您的代码集成在一起，并尝试使其足够通用，以至于可以将其与其他内容进行微不足道的交换，那么您可能会将中立该库，以至于您可能还没有在其中包含它所有。

接受如果您最终交换库可能需要重写，但是为此提供库接口代码是它自己的单独部分，为此您可以做准备，并且可以使用那些外部库编写更少通用，更强大的代码并保存自己很多工作。

Answer 4

这不会回答您的模式问题，而是有关框架的一句话。 所有现代JavaScript库在相互配合方面都非常擅长，但是其中一些优于其他。 只需确保它们的库不会胡闹地修补具有任意属性的核心对象，或者不要将其与全局命名空间混为一谈，那么您应该一切顺利。 JQuery和YUI都是经过精心设计和命名空间的库。 Dojo也相当不错，但是几年前，当查看所有选项时，Dojo似乎鼓励在标记中使用专有元素属性作为JS挂钩。 当时，Prototype是一个库，里面充斥着String / Array之类的对象，与其他对象的配合不好。 我还没有看过/使用过Dojo或Prototype，所以请带一点盐。 我正在同一个应用程序中积极使用YUI和JQuery； YUI用于小部件和事件管理，JQuery用于选择器/ DOM操作。

Answer 5

我建议您根据计划编写的框架的要求，选择一个通用库或根本不选择任何库。 没有更多信息就很难提出任何建议，例如您的框架旨在实现什么，谁将使用它以及在什么样的环境中使用。

如果您正在考虑编写合理复杂性的脚本，那么我建议您自己学习相关的“低级” DOM操作技术。 这并不像某些著名的通用库的奉献者所相信的那样困难。

Answer 6

使用某种接口链接到库。

不要做：

$("blah").something();

做

something("blah")

function something(id){
  $(id).something();
}

由于您可以调用something（）20次，因此如果只在1个地方实际使用该库，则更新起来会更简单。

它会增加开发时间，然后增加复杂性，但您不会像以前那样依赖库。

Answer 7

我认为这很难做到。 如果您确实想要这种行为，我想您必须手动映射要包含其支持的所有库所涵盖的功能。

这样实现看起来像：

yourLibrary.coreFramework = 'prototype';
yourLibrary.doStuff();

并且您的librar将以以下方式对其进行处理：

function doStuff() {
   var elem = getElement('id');
   // do stuff with 'elem';
}

function getElement(id) {
   switch(this.coreFramework) {
       case 'prototype': return $(id);
       case 'jquery': return $('#'+id);
       /* etc */
   }
}

Answer 8

查看jQuery或原型框架。

如果您决定需要，则将其扩展。