javascript - 使用 OOP 编写 jQuery 插件

Question

就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放， visit the help center以获得指导。

已关闭 11 年前。

我想知道当前编写 jQuery 插件的“最先进”是什么。我阅读了很多不同的方法，但我不知道哪一种最适合。

您能否推荐一些有用的链接/模板，用于使用 OOP 编写 jQuery 插件。

谢谢

Answer 1

基本规则是:

1. 不要让你的代码弄乱 jQuery 命名空间 - 应该有每个插件只能添加一个方法到 jQuery 对象的根目录中，或者到 jQuery.fn

2. 使用立即执行的匿名函数来确保代码仅运行一次

3. 传入 jQuery 对象作为参数，标识符为 $，可以在此范围内安全地使用 $ :)

4. 记住当您向 jQuery.fn 添加新方法时，this 是绑定(bind)到 jQuery 包装集，您不必再次包装它!

5. 使用this.each循环遍历所有匹配的元素

6. 从您的插件返回 this 以启用可链接性(当然，除非您的插件返回不同的值)

7. 允许选项传入并覆盖在某些默认对象上(您也将其公开以供覆盖)

8. 允许用户为全局更改重新设置默认值

   (function($) { //see point 3
   
       var defaults = {
          someDefaultValues : "value"
       };
   
       $.fn.myPlugin = function(options) { // see point 1, only 1 method
   
          var settings = $.extend({}, defaults, options); //see point 7
   
           this.each(function() { //see point 5
   
              var currentElement = $(this); //"this" now refers to current DOM element
              //put bulk of logic here
   
           });
   
           return this; //see point 6
       };
       //see point 8, enables users to completely override defaults, rather than per call via options
       $.fn.myPlugin.defaults = defaults; 
   
   })(jQuery); //see point 2
   

请参阅 jQuery 文档了解 good guide ，它们讨论了更高级的细节，考虑到您可能希望如何为每个插件执行多个方法，以及在元素和其他事物上存储数据。我拥有的大部分东西