我正在修改一些包含大量 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 $ = {}?
var $ = {}
示例 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 并慢慢迁移您的代码。我认为这对约翰来说是一个绝妙的举动!:)