功能类似于 jQuery 的模块化 Javascript 库答案

【问题标题】：Modular Javascript library with functionality similar to jQuery功能类似于 jQuery 的模块化 Javascript 库
【发布时间】：2009-06-02 00:31:39
【问题描述】：

jQuery 和类似的库为 DOM 遍历和操作提供了许多有用的 API。如果您的网站有大量重复访问者，那么使用它们很容易证明是合理的，因为缓存将抵消最终用户的任何带宽成本。

在其他情况下，网站的访问者可能始终是唯一的，因此这些库的带宽损失相对于开发团队的收益而言可能过于严重。

是否有任何库提供这种样式的 DOM 交互，同时允许您选择与您的页面相关的部分。

例如，

jQuery('#myId').addClass('error');

jQuery 中的许多其他 API 可以在几行代码中复制，从而避免了大约 50kB 的下载量。

所以问题是，是否存在包含这些函数且对库的其他方面几乎没有依赖性的库，还是我需要根据需要自己创建它们？

是否有可用的机制/工具将现有的库（如 jQuery）分解成最小的组件？

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

正如 here 所讨论的，如果您使用 google 作为库的主机，用户可能在访问您的网站之前已经将其缓存。

This page 显示支持哪些库。目前：

jQuery
jQuery 用户界面
原型
script.aculo.us
MooTools
道场
SWFObject 新！
雅虎！用户界面库 (YUI) 新功能！

我完全支持你自己，但如果你不使用库，请确保你知道所有浏览器版本的所有错误。

不过，这不是一个坏主意。如果您可以创建自定义版本的 jQuery，那就太好了。我特别喜欢 iPhone 的 Mobile Safari 和 Adobe AIR，它去掉了所有非 webkit 的东西。

【讨论】：

已考虑使用 Google 托管版本。我们不能保证用户将缓存该项目，并且用户群的合理部分不在宽带连接上。用户体验是最重要的。该站点还用于安全内容，因此并不完全需要外部托管。我不太喜欢自己动手，这不是企业的核心竞争力。最终我只想找到一种方法，或者有一个工具可以选择 jQuery 等所需的部分。
我听说 jQuery 正在开发移动版本，我认为没有支持最时髦的桌面浏览器所需的所有垃圾。

【解决方案2】：

jQuery 的生产版本是 19k，和一个相当小的图像一样。在我的书中没有严重的带宽惩罚！

编辑：..也值得每一千。

【讨论】：

为了清楚起见，它是 19k after gzip（应该适用于大多数传输）。 1.3.2 的缩小版实际上是 56k。由于大多数其他库不宣传该数字，因此根据其压缩后的大小进行比较可能会导致混淆。

【解决方案3】：

MooTools 允许您只下载您想要的部分。因此，如果您想要的只是 JSON AJAX 请求就足够了，那么您已经得到了。

http://mootools.net/core

【讨论】：

是的，很好。一旦你引入元素和元素样式，你就达到了 30k。我想如果你不做太多其他事情，这比 jQuery 节省了很多。

【解决方案4】：

查看Sly。只有 3kB。

【讨论】：

这只是一个选择器引擎吧？我相信你不能用它来操纵它。 Sizzle、Peppy 和其他类似
不过，这并不是一个糟糕的开始。使用选择器引擎，操作应该不会太难。

【解决方案5】：

对不起，我不知何故丢失了询问 JS 库冲突解决方案的页面。

我有同样的问题，但现在我在玩了一些 JQuery 脚本后解决了它。我知道 * 有点痛苦，但让我们一步一步来吧。

首先让我告诉你，在我的项目中，我使用了两个不同的库。我正在使用 Lightwindow 和 JQuery。我无法使两个库都正常运行，但我想出了以下脚本。您必须在每个要使用 JQuery 函数的函数中使用此脚本：

//这行说，美元符号$是属于JQuery库的。

jQuery(文档).ready(函数($) { //你的源代码放在这里。

});

让我们稍微详细地使用它。在我的场景中，我有一个点击按钮，假设调用以下函数：

        function popups(message, heading, actionlink, linkName) {

//这是告诉源代码其余部分的 LINE //识别JQuery函数。

            jQuery(document).ready(function($) {

            // get the screen height and width    
            var maskHeight = $(document).height();    
            var maskWidth = $(window).width();  


            // assign values to the overlay and dialog box  
            $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();  
            $('#dialog-box1').show();  


            // display the message  
            $('#dialog-message-row').html(message);  
            $('#dialog-message-heading').html(heading);  
            $('#dialog-message-actionlink').html("<a onclick=function('x') class='button' id='delete'>"+linkName+"</a>");

           });//CLOSE JQuery translator
        }

【讨论】：