1

Question

我正在修改一些包含大量jQuery的代码，但我不确定某些jQuery语句在做什么。

在jQuery代码的顶部有

jQuery.noConflict

* 1。我明白那个。但是有一些代码有：

<script type="text/javascript">
(function($) {

$(document).ready(function() {

    jQuery.fn.fixEmail = function() {
    {
   return $(this).each(function() {
       var $s = $(this);                  
           ...code...
        }
}
</script>

我认为因为noConflict而使用了jQuery。什么是参数$？

* 2。在另一个功能中，他们使用

<script type="text/javascript">
jQuery(function(){
    var $ = jQuery;
    var cc = {
        mode : 'teaser',
        featureVisible : true,
        $loader : '<p class="loadingAnimation"><img height="32" src="' +
                config.xoImgUrl +
                '/images/ajax-loader.gif" width="32" /></p>',
                ....more code...
            }
}
</script>

所以他们从noConflict设置$ jQuery。但为什么？他们可能刚刚使用过jQuery吗？

* 3。我想要使用的插件由以下内容初始化：

   var $j = jQuery.noConflict();
    var $ = {};
    $j(document).ready(function(){
        $j.history.init(pageload);
        $j("a[@rel='history']").click(function(){
            ...more code...
        });
    });

我理解noConflict的作用，var $ = {}做了什么？

Answer 1

示例1：

我认为你错过了一些代码：

(function($) {

$(document).ready(function() {

    jQuery.fn.fixEmail = function() {
    {
   return $(this).each(function() {
       var $s = $(this);                  
           ...code...
        }
}
)(jQuery); //This line was missing in your code.

让我们重新编写一下这段代码，以了解发生了什么。

function complicatedFunction($) {
          // the document.ready call goes here.
}

接下来，您将如何调用此功能？

complicatedFunction(someObject);

因此，在complexFunction $ 内部引用 someObject 。同意？

如果你写

complicatedFunction(jQuery);

然后在函数内部， $ 引用 jQuery 对象。所以里面的一切，complexFunction都可以使用'$'，就像普通的jQuery用户一样。

回到原始代码，如果我们决定不命名此函数，即将其设为匿名，您可以将代码可视化，如

(function($) { })(jQuery);

您正在创建一个匿名函数，使用一个名为$的参数。你立即调用这个匿名函数传递jQuery对象。这样，您不会修改全局$对象，但匿名函数中的所有代码都像$一样可用。很酷，不是吗？：）

示例2：

jQuery(function(){
        var $ = jQuery;
        var cc = {
                mode : 'teaser',
                featureVisible : true,
                $loader : '<p class="loadingAnimation"><img height="32" src="' +
                                config.xoImgUrl +
                                '/images/ajax-loader.gif" width="32" /></p>',
                ....more code...
            }
});

与示例1类似，我还没有看到这种编码风格。（我甚至不确定这是否有效）

无论如何，在传递给jQuery的匿名函数中，你可以本地化$的使用而不影响其他代码。是的，他们可以简单地在任何地方使用jQuery对象，但这将非常冗长，不是吗？

示例3：

var $ = {};

上面的行定义了一个空对象并将其分配给变量$。

与做法相同，

var $ = new Object();

这与使用两种不同语法定义数组的方式类似。

var items = [];  //same as var items = new Array();

一点历史

请记住，'$'没有任何固有的特殊之处。它是一个变量名称，就像其他任何名称一样。在早些时候，人们习惯使用document.getElementById编写代码。因为JavaScript区分大小写，所以在编写document.getElementById时出错是正常的。我应该资本'b'的'by'吗？我应该资助我的Id吗？你得到漂移。因为函数是JavaScript中的一等公民，所以你总是可以这样做

var $ = document.getElementById; //免于document.getElementById！

当Prototype库到达时，他们将其功能命名为“$”，获取DOM元素。几乎所有的JavaScript库都复制了这个想法。 Prototype还引入了$$函数来使用CSS选择器选择元素。

jQuery也改编了$ function但扩展了它以使它接受所有类型的“选择器”来获得你想要的元素。现在，如果您已经在项目中使用Prototype并想要包含jQuery，那么您将遇到问题，因为'$'可以引用Prototype的实现或jQuery的实现。这就是为什么jQuery可以选择noConflict，这样你就可以在你的项目中包含jQuery，它使用Prototype并慢慢迁移你的代码。我认为这对John来说是一次精彩的举动！：）

Answer 2

1

您是否在该代码段的末尾遗漏了一些代码？通常惯例是这样做：

jQuery.noConflict();

(function($){

$(document).ready(function() {

    jQuery.fn.fixEmail = function() {
    {
   return $(this).each(function() {
       var $s = $(this);                  
           ...code...
        }
}

})(jQuery);

请注意，在底部，jQuery作为参数传递给函数表达式，因此$等于jQuery，但只在该函数表达式中。

2

他们本可以使用jQuery，但他们可能依赖于使用$的复制/粘贴代码。

3

我可能会重构这些以使用类似于我在＃1中提到的约定。我不确定为什么他们将$等于一个物体，但它有一股难闻的气味。

Answer 3

这段代码很臭。他们正在使用另一个JavaScript库吗？

$通常是JQuery函数，但我相信Prototype也使用它。这可能是Prototype代码吗？ 2：你是对的。至少我想不出一个理由。 3：将{}重置为新对象。基本上取消了JQuery

Answer 4

我认为您已经看过Using jQuery with other JS libraries了吗？我认为该页面回答了您的问题（请参阅页面底部的“引用魔术 - jQuery快捷方式”部分）。

总结：

传递$是一种在功能块中使用jQuery而不会永久覆盖它的方法。
我猜只能说作者更喜欢简洁的$而不是jQuery。
这是在另一个街区吗？为方便起见，我认为他们希望将$重用于其他目的而不会永久覆盖它。

不同冲突避免机制的使用在您发布的代码中有点不一致，因此如果您能够，您可能希望重构它。

jQuery和$问题

4 个答案:

1

2

3