javascript - 在Jquery不工作的情况下,为什么我的方法可以以替换?

  显示原文与译文双语对照的内容
0 0

问题

我刚开始学习 javascript 。 我试图用更模块化的方式来重现一段工作的代码。 它能帮助我保持整洁,更好地理解它。

我相信有更好的或者简洁的方法来实现代码所做的,请不要提到,你可以节省你的呼吸。 这里的要点是通过使用代码来学习我不理解的东西。

代码的作用是什么

它为方法切换创建了一个替代方法,该方法已经被否决,然后可以在下面的样式中使用

below 是原始代码:


$.fn.clicktoggle = function(a, b) {
return this.each(function() {
 var clicked = false;
 $(this).click(function() {
 if (clicked) {
 clicked = false;
 return b.apply(this, arguments);
 }
 clicked = true;
 return a.apply(this, arguments);
 });
});
};

below 是我以前的代码版本:


function call_a_or_b (a,b) {
 var clicked = false;
 function alternate (a,b) {
 if (clicked) {
 clicked = false;
 return a.apply(this, arguments);
 }
 else {
 clicked = true; 
 return b.apply(this, arguments);
 }
 }//end function alternate


 return $(this).each(function () {$(this).click(alternate(a,b))}); 
}//end function call_a_or_b

$.fn.clicktoggle = function(a,b) { call_a_or_b(a,b); };

问题

  1. 为什么原始版本使用 return this.each 而不是 return $(this).each

    • 注:我不能在版本上使用 this,否则会返回错误: Uncaught TypeError: Object [object global] has no method 'each'
  2. each 不是一个jQuery方法?

    • 我理解使用 this 时,可以在上面调用DOM方法,但不能调用jQuery方法。 反之亦然.
  3. 为什么我的版本不工作? 我犯了什么错?

    • 注:我没有错误,因此调试更困难。
时间: 原作者:

0 0
  1. inside 一个插件对象 this 引用了插件启动的jQuery包装对象,而不是它的他方法的dom对象。
  2. 因为 this 是jQuery包装器对象 .each()
  3. 你的实现中存在多个问题
    1. 调用 call_a_or_b 时,不会将执行上下文传递给方法,因此 this inside 将方法引用到 window 对象
    2. 作为一个经验规则,要在jQuery中启用链接,你需要返回jQuery包装器,你不需要这样做
    3. 在替代方法中存在关闭和invokation相关问题

try


(function ($) {
 function call_a_or_b(a, b) {

//for each matched element the clicked variable should be a closure one, so needed to rearrage it a bit 
 function alternate(el) {
 var clicked = true;
 $(this).click(function () {
 if (clicked) {
 clicked = false;
 return a.apply(this, arguments);
 } else {
 clicked = true;
 return b.apply(this, arguments);
 }
 })
 }//end function alternate

 return $(this).each(alternate);
 }//end function call_a_or_b

 $.fn.clicktoggle = function (a, b) {
//call the method with the current execution context and return the value returned fromit
 return call_a_or_b.apply(this, arguments);
 };
})(jQuery);

演示: Fiddle 。

原作者:
0 0

在给 $.fn 赋值时,它在jQuery的上下文中执行,所以 this 是一个jQuery对象。 在窗口的上下文中最可能执行的函数。 如果更改最后一行,则它应该完全相同:


$.fn.clicktoggle = call_a_or_b(a,b);

...