12

我正在开发一个自定义的轻量级 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有任何经验，或者对我想要完成的事情有另一种解决方案/方法？我意识到这不是“喋喋不休，开放式问题”的地方，这不是我的意图。我只是在寻找有关在不重新发明轮子的情况下构建轻量级自定义库的最佳方法的建议，而是插入可用的最新微库。

4

3 回答 3

16

我是 Ender 的共同创造者之一，我会 +1 Fazal 的话。

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

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

另一方面，Ender 的一大优点是能够将模块发布到 NPM 并能够将它们移植到您的项目by name中，从而使您能够build only what you need, when you need it

值得查看http://enderjs.com/learn上的学习视频，这将使您更好地了解包的创作、构建和使用方式。您会发现将 Ender 设置到您的环境中非常简单，而且实际上使用起来非常有趣。

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

于 2011-07-06T00:59:21.327 回答
12

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

我最近在一个现场网站上使用了 Ender，有趣的是，我使用了来自 microjs.com 的几个脚本以及我自己的函数文件，所有 JavaScript 的重量都在 15k 左右。使您的整个站点代码的权重大约等于或小于该值并不难。

除了构建轻量级版本的 Ender，例如从 Jeesh 开始，您可能还需要考虑异步加载，Dustin Diaz提供了一个示例：

<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 视图，允许您删除您可能根本不需要的库。

热链接截图：
截屏

于 2011-07-04T15:39:54.220 回答
4

鉴于这种：

澄清对这样一个小型库的需求：这是一个第三方服务，网站会拉入他们的页面。由于我们无法控制现有的库、速度或页面加载，我们需要尽可能保持轻量、快速和独立。15k 是仅用于服务的动态内容访问的库的目标编号。

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

noConflict如果你确实加载了它，你会想要发出一个调用，以防网站使用$jQuery 以外的东西。这很容易通过观察元素load上的事件来完成script（您必须readystatechange在 IE 上使用并观察其中一个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）都很友好。另请注意，我正在检查最低 jQuery 版本并使用更严格的形式来加载它。无论哪种方式，在调用回调时，符号都会引用具有最低版本的加载副本。httpsnoConflictourjQuery

更新：解决您的上述评论：

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

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

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

于 2011-06-28T05:32:38.543 回答