编写一个更好的 jQuery 插件答案

【问题标题】：Writing a better jQuery plugin编写一个更好的 jQuery 插件
【发布时间】：2023-03-19 00:34:02
【问题描述】：

目前我的 jQuery 插件在 if 语句中运行它的逻辑。

例如我有：

(function($) {
    $.fn.myplugin = function(action) {

        if(action == "foo"){

        }

        if(action == "bar"){

        }

        if(action == "grapefruits"){            

        }

    }
})(jQuery);

有没有更好的方法来解决这个问题？

事件处理程序也一样，我可以在插件中声明它们吗？

【问题讨论】：

标签： javascript jquery events plugins

【解决方案1】：

您可以在一个对象中存储不同的函数并使用索引器，如下所示：

(function($) {
    var methods = {
        foo: function(action) { ... },
        bar: function(action, someParam) { ... },
        grapefruits: function(action, param1, param2) { ... },
        ...
    };

    $.fn.myplugin = function(action) {    
        methods[action].apply(this, arguments);
    }
})(jQuery);

【讨论】：

我可以用$("....")包装一个字符串并添加一些可以操作字符串的函数吗？

【解决方案2】：

没有理由多次检查动作，是吗？你也可以使用else if。我个人不喜欢switch的语法，更喜欢这种风格。你可以这样做

    if(action == "foo"){
    }
    else if(action == "bar"){
    }
    else if(action == "grapefruits"){            
    }
    else{
    //this is the default/unspecified case
    }

另一种选择是将每个名称作为名称存储在对象中。例如，这也经常在 Python 中完成。

   var plugin_actions={
      'foo':function(){},
      'bar':function(){},
      'grapefruits':function(){}
       }
   plugin_actions[action]();

【讨论】：

第二种解决方案丢失了this 上下文和参数。看我的回答。