寻找：最小化跨浏览器的Javascript库

Question

我懂一些JavaScript，但刚意识到我对于跨浏览器问题知之甚少。像IE中事件回调函数中的this对象（例如xhr.onreadystatechange = function () { ... }）不是指向应用该函数的对象，而是指向window，这并不是很有用。

在SO上有一个印象深刻且全面的差异列表。

是否还有一个库可以解决这些讨厌的跨浏览器问题，而不需要销售整个生活方式加上带滑动效果的圆角？我知道jQuery很棒（而且模块化，我知道，UI作为额外的部分；我敢打赌其他库也很棒），但我正在寻找更接近根源的东西，更精简，消除讨厌的问题。不必将DOM包装成糖果。

更新

感谢大家的建议。我将查看MyLib、microJS、Ender和Sizzle。GWT虽然肯定是跨浏览器的，但我认为它不是一种轻量级的方法，但绝对是一个有趣的方法。

- Lumi

---

@SimeVidas jQuery是一个庞大臃肿的库。你只使用了其中的20%。 - Raynos

@Raynos但由于依赖关系是线性的，你不能进入github并通过仅包括直到模块X的代码来切断死权重吗？ - Moses

@Moses 不是的。jQuery不是模块化的。它要么全部加载，要么什么都没有。 - Raynos

@Raynos 你说得对。那31KB的确拖慢了我的4Mbit平面连接。更不用说执行代码需要20ms。我为什么要忍受这个？！:) - Šime Vidas

@SimeVidas jQuery从缓存加载只需400毫秒。而不使用缓存则需要1.3秒。这差距太大了。 - Raynos

Answer 1

你想要什么？

只需查看microJS并下载您需要的库。

正如之前提到的，您可以使用Ender进行捆绑。

- Raynos

Answer 2

jQuery不是模块化的——它只有全部或者没有。如果您想要一个可靠、跨浏览器的库，而且可以根据需要精简，那么很难超越MyLibrary：http://www.cinsoft.net/mylib.html。

"MyLibrary"这个名字意味着，当您下载和定制它时，它就成为了您自己的库。

它非常可靠、快速，并且极其模块化。您可以使用您所需的部分并删除任何不必要的内容。

顺便说一句，许多像jQuery这样的库并不真正是“跨浏览器”的，它们是多浏览器——它们只支持一小部分浏览器，并不关心其余的浏览器。另一方面，MyLibrary被编写成真正的跨浏览器库。它还提供了出色的特性检测快捷方式，因此您可以轻松编写具有回退能力的健壮代码。

- RobG

---

“真正的跨浏览器”感觉像是浪费。谁在乎NN4的错误呢？ - Raynos

谢谢，@RobG。你打的字符比其他人多，所以我接受了你的答案。:-) 说真的，我意识到我的问题引发了一些需要进一步研究的建议。感谢大家分享你们的经验。 - Lumi

@Raynos - 处理旧浏览器中的错误是确保您的代码健壮性的绝佳方法。您无法预测未来的错误，但如果您已经处理了所有旧错误，那么您可以更加自信地面对未来。 - RobG

@RobG...所以说，绕过非常模糊、古老和损坏的行为实际上增加了未来的可靠性吗？我非常怀疑。使用多浏览器库没有任何问题。 - Raynos

“所以说，围绕着非常模糊、古老和错误的行为进行黑客攻击实际上会增加未来的可靠性？”是的，不是因为“黑客攻击”，而是因为代码经过了彻底的测试，并且通常提供高度兼容的备用方案。多浏览器库的问题在于它们需要不断更新以适应新的浏览器，并且随意决定放弃对旧浏览器的支持。 - RobG

Answer 3

"极简跨浏览器JavaScript库" + "我想要更接近根源的内容"

我立刻想到了MyLib。
你甚至可以使用这个在线工具来构建自己的定制版。

- Knu

Answer 4

我认为你应该看一下Ender，由Dustian Diaz和Jacob Thornton在Twitter工作。

Ender不是传统意义上的JavaScript库。所以不要着急去用Ender替换jQuery或MooTools...这是行不通的....但是！你可以从Ender构建一个库，这样就行得通了。而且你现在就应该这么做。

因为：Ender是一个开放、强大的、由微到宏的API，用于组合您自己的自定义JavaScript库；它将独立模块封装成一个简洁、直观、熟悉的界面，使您不必费心。

- Alfred

Answer 5

JavaScript中this的问题在于，对于不习惯它总是获取上下文值的人来说，它可能有点令人困惑，换句话说，它总是指向执行代码当前上下文中的对象。

在某些事件、间隔等情况下，this指向window是绝对正常的，因为JavaScript中许多属性（也许太多了）都附加到window对象上。

至于要使用哪个JS库来完成您的工作...如果您不想整体使用jQuery，那么它最重要的部分始终存在，它处理DOM内部对象的选择，并且对于跨浏览器兼容性非常重要。

它被称为Sizzle，可以在这里找到。它不像jQuery那样提供花哨的东西，但它很小并且提供了一个很好的跨浏览器选择页面元素的方式。

- user188654

---

关于这个的评论是错误和误导性的。它不是"上下文"。让初学JavaScript的人困惑的是，它是由函数的调用方式来设置的（并且可以被调用者设置为任何值），而不是由函数的声明或初始化来设置的。因此，对于那些不了解它如何工作的人来说，它的值可能不是预期的值。 - RobG

@RobG 我不知道你对“上下文”这个词的理解，但我非常确定JavaScript中每本书都会提到当前执行代码的状态被称为上下文。无论是通过函数调用、闭包等方式进行上下文更改，这都是完全不同的事情。 - user188654

在ECMA-262中描述了一个执行上下文，其中包括许多内容，包括作用域链、执行/变量对象、变量和参数等。其中一个项目是this关键字，它实质上是一个保留的局部变量。将其称为表示上下文是误导性的，它只是更大概念的一部分。它的值对函数本身、其上下文甚至调用方式都没有任何信息。 - RobG

@RobG，你能再仔细读一下我的帖子，并告诉我在哪里我有提到“this指向任何上下文”吗？我说的是“`它将始终指向当前执行代码上下文中的对象”。如果这听起来还不够明确的话，很抱歉我无法再清楚地解释了。 - user188654

@holodoc，@RobG，让我困惑的不是this本身。我知道那些。还有apply()提供的JS奇技淫巧。让我困惑的是，给定xhr.onreadystatechange = function () { ... }，与FF表现正常不同，IE不将处理程序应用于xhr，而是应用于window。我想你们可以看出为什么这不是预期的。这是一个库需要解决的问题。 - Lumi

Answer 6

你可以看看GWT..但它也会为你提供一种生活方式——Java开发环境。但这也带来了调试器、适当的IDE、更容易的面向对象编程，它可以编译成优化的跨浏览器JavaScript等。而且你总是可以根据需要混合使用本地JavaScript。

- filip-fku