Question

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

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

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

所需功能：

处理跨浏览器的不一致性，如冠军（IE 6 +，Chrome，FF 2 +，Safari 3+）。
事件处理（排队/装订/广播）
高效选择器引擎
链接
带有基本动画的DOM操作
从模块中轻松构建和版本化

我遇到了EnderJS和MicroJS，但我似乎无法找到很多讨论。我现在对Ender更熟悉和感兴趣，因为它似乎解决了所有上述功能，几乎开箱即用，"The Jeesh"的重量为7.5k。在我的情况下，只需要几个额外的包就可以将它推到10k，这是完美的，因为我只需要几个k来充实任何自定义模块。它还允许我编写和版本化不同的模块，这些模块可以在构建时合并并压缩到主库中，以及定义一个独特的命名空间来将它们保存在一起并希望保护它。恩德图书馆的另一个引人注目的作品是NodeJS的使用，无论如何我更喜欢玩它。然而，说了这些之后，我仍然对其他想法持开放态度。

所以我的问题是：

有没有人对EnderJS或MicroJS有任何经验，或者对我想要完成的事情有另一种解决方案/方法？我意识到这不是"chatty, open-ended questions"的地方，这不是我的意图。我只是在寻找有关构建轻量级自定义库的最佳方法的建议，而无需重新发明轮子，而是插入最新的微库。

Answer 1

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

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

不知何故，Ender成为了“微库”开发的最前沿，但实际上我们所追求的是将松散耦合的模块（无论它们的大小）放在一起。 jQuery在抽象其选择器引擎（Sizzle）方面迈出了第一步，但遗憾的是其余部分是相互依赖的（dom，事件，动画，ajax，utils，promises），因此无法挑选和拉出你想要的东西。 / p>

另外，关于Ender的一个简洁的事情是能够将模块发布到NPM并能够将它们移植到您的项目by name中，从而允许您build only what you need, when you need it

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

让我们（@ded或@fat）知道您是否有任何问题，我们将非常愿意帮助解决问题

Answer 2

我最近使用过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构建更轻，并推迟一些加载，但一般来说，如果它首先是轻的你应该没问题。

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

最后，你可能已经清楚了解，你也可以在Ender中进行noConflict，以防他们已经有另一个库存在。

在构建和配置Ender时，您可能希望利用ender-wallet来提供一种API视图，允许您删除根本不需要的库。

hotlinked screenshot：

Answer 3

鉴于此：

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

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

如果您加载了noConflict，则需要发出$来电，以防该网站使用load进行jQuery以外的操作。通过观察script元素上的readystatechange事件（您必须在IE上使用loaded并观察complete或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(); } } }状态），可以轻松完成此操作然后在完成后再进行。

在今天的电信世界中，与首先设置HTTP连接的成本相比，15k下载和31k下载之间的差异是琐事。

这种需求负载实际上是一小部分代码，按照以下几点：

script

请注意http元素上的网址。这样对https和noConflict页面（details）都很友好。另请注意，如果我们加载它，我正在检查最小的jQuery版本并使用更严格的ourjQuery形式。无论哪种方式，在调用回调时，jQuery符号指的是具有最小版本的加载副本。

更新：解决上面的评论：

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

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

但如果您对此感到担心，那么坦率地说，我只是使用与$不同的符号（并且根本不使用{{1}}）在您自己的CDN上托管稍微修改过的jQuery ）。在今天的电信世界中，31k与15k是不成问题的;主要成本是首先建立连接。如果你愿意的话，你可以通过删除你不需要的部分来减少这一点，尽管遗憾的是jQuery的内部结构有点像泥潭，选择性地删除功能可能并不简单（取决于它的功能）。 / p>

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

3 个答案: