自定义轻量级 JavaScript 库：EnderJS 和 MicroJS

Question

我正在开发一个自定义的轻量级 JavaScript 库，该库需要在主要浏览器以及众多独立站点上稳定运行，而不会影响现有库或命名空间或受到现有库或命名空间的影响。也许最重要的是，该库需要轻量级（最多约 15k）。

更新为了澄清对这样一个小型库的需求：这是网站将拉入其页面的第三方服务。我们需要使一切尽可能轻量、快速和独立，因为我们无法控制现有的库、速度或页面加载。 15k 是服务的动态内容访问的库的目标数量。

此时，我的想法是从我能找到的最简洁的类似 jQuery 的基础开始，然后使用自定义模块进行扩展。

所需功能：

• 像冠军一样处理跨浏览器不一致问题（IE 6+、Chrome、FF 2+、Safari 3+）。
• 事件处理（排队/绑定/广播）
• 高效的选择器引擎
• 链接
• 使用基本动画
• 模块中轻松构建和版本控制

DOM 操作 可以从我遇到的 EnderJS 和 MicroJS 但我似乎找不到很多的讨论。此时我对 Ender 更加熟悉和感兴趣，因为它似乎使用 “The Jeesh” 重 7.5k。在我的例子中，添加几个额外的包只会将其推至 10k，这将是完美的，因为我只需要几 k 来充实任何自定义模块。它还允许我编写不同的模块并对其进行版本控制，这些模块可以在构建时合并并压缩到主库中，并定义一个独特的名称空间将其全部组合在一起并希望对其进行保护。 Ender 库的另一个引人注目的部分是它对 NodeJS 的使用，无论如何我都想尝试更多。然而，话虽如此，我仍然对其他想法持开放态度。

所以我的问题是：

有没有人有过 EnderJS 或 MicroJS，或者有另一种解决方案/方法来实现我想要完成的任务？我意识到这不是“闲聊、开放式问题”的地方，这也不是我的意图。我只是在寻找有关构建轻量级自定义库的最佳方法的建议，而无需重新发明轮子，而是插入最新的可用微型库。

Answer 1

我是《安德》的共同创作者之一，我会为 Fazal 的话+1。

关于 Jeesh 的注释，尽管对 Ender 来说是一个不错的入门包，但真正的力量在于能够通过其不断增长的模块集来扩展 Ender。您可以在这里查看它们： https://github.com/ender- js/Ender/wiki/Ender-package-list

不知何故，Ender 成为了“微库”开发的前沿，但我们真正追求的是在松散耦合的模块上放置一个内聚的接口（但是它们有大有小）。 jQuery 在抽象其选择器引擎（Sizzle）方面迈出了伟大的第一步，但不幸的是，它的其余部分是相互依赖的（dom、事件、动画、ajax、utils、promise），因此无法选择和提取您想要的内容。

另一方面，Ender 的一个巧妙之处是能够将模块发布到 NPM 并能够按名称将它们移植到您的项目中，允许您仅构建您需要的内容，当你需要它

值得一看 http://enderjs.com/learn 上的学习视频将使您更好地了解如何编写包，建造和消耗。您会发现将 Ender 设置到您的环境中非常简单，而且实际上使用起来非常有趣。

如果您有任何疑问，请告诉我们（@ded 或 @fat），我们将非常乐意帮助解决问题

Answer 2

我最近使用过 Ender，确实没有遇到任何问题。有几个 jQuery 函数一开始就无法使用，但任何相当擅长 JavaScript 的人都可以绕过这个。特别是考虑到 Ender 具有与 jQuery 几乎相同的结构和扩展方式。

我最近在一个实时网站上使用了 Ender，有趣的是，我使用了来自 microjs.com 的几个脚本以及我自己的函数文件，并且所有 JavaScript 的重量都在 15k 左右。让您的整个站点代码的权重在该范围内或更少并不困难。

除了构建 Ender 的轻量级版本（例如从 Jeesh 开始）之外，您可能还需要考虑异步加载，达斯汀·迪亚兹：

<script src="ender.min.js"></script>

<script>
$.require('/js/core.min.js', 'core')

$.ready('core', function () {
  $(document).ready(function () {
    $('<p>hello world</p>').appendTo('body')
      .bind('click', function (e) {
        $.require('/js/ajax.min.js', function () {
          $(e.target).css('position', 'relative')
            .animate({
              left: 500
            })
        })
      })
  })
})
</script>

通过这样做，你基本上可以使原始渲染器构建更轻，并推迟一些加载，但一般来说，如果一开始就很轻，你应该没问题。

您可能还想利用 Ender 为您提供的 Google 闭包编译器，以便与 ender 一起编译您的站点代码。

最后，您可能很清楚，您也可以在 Ender 中执行 noConflict，以防万一他们已经存在另一个库。

当你构建和配置 Ender 时，你可能会想要利用 ender-wallet ，它会给你一个排序API 视图，允许您删除可能根本不需要的库。

热链接截图：

Answer 3

鉴于此：

澄清对这样一个小型库的需求：这是网站将拉入其页面的第三方服务。我们需要使一切尽可能轻量、快速和独立，因为我们无法控制现有的库、速度或页面加载。 15k 是服务的动态内容访问的库的目标数字。

我建议通过 CDN 之一使用按需加载的 jQuery（Google 或 Microsoft 的；我认为 Google 的使用较多，但您想测试一下）。您的代码可以检测 jQuery 是否已加载，如果已加载则使用它 (~0k)，如果没有加载，则动态添加一个 script 元素以从 CDN 中提取它。如果用户使用该 CDN 中的 jQuery 访问过任何其他站点，则该脚本很可能来自缓存 (~0k)。如果没有，当然，那么您将获得约 31k 而不是约 15k 的点击量，但同样，您经常不会获得任何点击量，或者只是来自 CDN 的“未修改”响应的点击量。

如果您确实加载了它，则需要发出 noConflict 调用，以防网站将 $ 用于 jQuery 以外的其他内容。通过监视 script 元素上的 load 事件可以轻松完成此操作（您必须在 IE 上使用 readystatechange 并监视 loaded 或 complete 状态），然后在完成时执行。

在当今的电信世界中，与最初建立 HTTP 连接的成本相比，15k 下载和 31k 下载之间的差异是微不足道的。

该需求加载实际上是一小段代码，大致如下：

function loadJQuery(cb) {
    var d, s, t;

    if (typeof jQuery === "function"
        && parseFloat(jQuery.fn.jquery) >= 1.5) { /* Or whatever */
        window.ourjQuery = jQuery;
        if (cb) {
            cb();
        }
        return;
    }

    d = document;
    s = d.createElement('script');
    t = d.body || d.getElementsByTagName('head')[0] || d.documentElement;

    s.onload = loaded;
    s.onreadystatechange = handleReadyStateChange;
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
    t.appendChild(s);

    function loaded() {
        if (s) {
            s = undefined;
            window.ourjQuery = jQuery.noConflict(true);
            if (cb) {
                cb();
            }
        }
    }

    function handleReadyStateChange() {
        if (s && (s.readyState === "loaded" || s.readyState === "complete")) {
            loaded();
        }
    }
}    

注意 script 元素上的 URL。因此它对 http 和 https 页面都很友好 (详细信息）。另请注意，我正在检查最低 jQuery 版本，并在加载它时使用更严格的 noConflict 形式。无论哪种方式，当调用回调时，ourjQuery 符号引用具有最低版本的加载副本。

---

更新：针对您的上述评论：

这是个好主意，但不幸的是，这对我们来说并不是一个真正的选择。我同意来自 Google CDN 的 jQuery 很可能会被缓存——节省负载——并且我们可以根据需要进行检查和扩展，但它似乎不像我们自己提供的那样可扩展或稳定。该网站可能会决定覆盖一些 jQuery 模块以满足他们的需求或更糟的需求。我们需要的是一个轻量级的独立库，我们可以完全控制它，并且可以根据需要进行扩展和分支。目标是该库将从我们的 CDN 进行缓存和版本控制。

是的，网站修改基本 jQuery 功能的风险很小。 非常风险很小。如果你将自己限制在核心 API（而不是插件等）上，坦率地说，我认为这不值得担心。

但如果你担心这一点，那么坦率地说，我只是使用托管在你自己的 CDN 上的稍微修改过的 jQuery，使用与 jQuery 不同的符号（并且不使用 $ 根本)。在当今的电信世界中，31k 与 15k 的区别不是问题；主要成本将首先在于建立连接。如果您愿意，您可能可以通过删除不需要的部分来减少一点，尽管遗憾的是 jQuery 内部有点混乱，并且有选择地删除功能可能并不微不足道（取决于它是什么功能）。