小编典典

jQuery 和 $ 问题

all

我正在修改一些包含大量 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>

我知道使用 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 $ = {}


阅读 155

收藏
2022-03-24

共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 时出错是很正常的。我应该将“by”的“b”大写吗?我应该将 Id 的“i”大写吗?你明白了。因为函数是 JavaScript 中的一等公民,所以你总是可以这样做

var $ = document.getElementById; //从 document.getElementById 中解放出来!

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

jQuery 还调整了 $ 函数,但扩展为使其接受所有类型的“选择器”来获取您想要的元素。现在,如果您已经在项目中使用 Prototype 并且想要包含 jQuery,那么您将遇到问题,因为 ‘$’ 可以引用 Prototype 的实现或 jQuery 的实现。这就是为什么 jQuery 有 noConflict 选项的原因,这样您就可以在使用 Prototype 的项目中包含 jQuery 并慢慢迁移您的代码。我认为这对约翰来说是一个绝妙的举动!:)

2022-03-24