具有多种功能的jQuery插件

Question

我目前有一个基于 Web 的应用程序，该应用程序严格依赖第 3 方肥皂服务器为网站提供信息。这个应用程序几乎没有 javascript，一些从 jQuery UI 中提取的元素和一些 jQuery 的东西（更多的是为了简单而不是任何其他原因）。

这个应用程序正在回归以增强功能，我的想法是基于我们依赖于数据的soap服务器，每个soap请求都需要一个往返，我们真的希望减少对单个http请求进行多次往返。因此，我的想法是让应用程序基于 ajax，并且只更新用户希望看到的内容区域。

所以我们有了这个基于php的服务器端库，它使用soap获取信息、生成HTML并将数据发送给用户。现在有趣的事情开始了，我们想要使用这个服务器端代码并​​将其模块化并构建一个 jQuery 插件来与服务器端交互。我无法收集的部分是如何在一个插件中拥有多个功能（也许这是错误的方法，请纠正我）我可以随意调用每个功能。

基本思路如下：

soap 服务器允许访问它的所有底层表，每个表都有一个特定的 WSDL，并为每个表定义了一组可用的函数。这些功能对于所有表都是相同的。

我们有例如：

• 得到
• 获取记录
• 插入
• 更新

• 删除

  (function( $ ){
  var methods = {
      init: function( options){
          //initialize the plugin 
          return this.each(function(){
              var $this = $(this),
                  data = $this.data();
          });
      },
      get : function(id){
          var getQuery = 'sys_id='+id;
          $.ajax({
              type: "POST",
              url: "get.php",
              data: getQuery,
              cache: false,
              success: function(result){
                  if(result.error){
                      //error notify user error occured... 
                  }else{
                      //success, update user ... 
                  }
              }
          });
          return false;
      },
      getRecords : function( ){
  
      },        
  };
  
  $.fn.myPlugin = function ( method ){
      if( methods[ method ]){
          return methods[ method ].apply(this, Array.prototype.slice.call( arguments,     1 ));
      }else if(typeof method === 'object' || !method){
          return methods.init.apply(this, arguments);
      }else{
          $.error('Method ' + method + 'does not exist on jQuery.ServiceNow');
      }
  };
  })( jQuery );
  

所以对soap服务器的get调用需要一个ID来识别表中的哪条记录，getRecords调用接受一个查询并返回多条记录，插入插入一条记录，更新更新一条记录等。

为了执行 get 调用，我想做一些事情，例如：

 $("#div").myPlugin.get(arguments); 

结果将是 id="div" 的 div 将被更新，并返回插件 myPlugin 中定义用于处理该元素的任何 get 函数。

这是正确的方法吗，有没有更好的方法，我都湿了吗？这是我的第一个 jQuery 插件，我觉得我来自面向对象的世界，我习惯于构建事物，然后调用它们的函数/方法和/或使用字段。也许这就是我心态不对的问题。

感谢 cmets/反馈！

我的想法是在 jQuery 插件中构建类似的东西，以便能够将这些调用传递给服务器，并且服务器上的 php 将根据您想要的资源确定 WSDL 位置。

Answer 1

这是一种简单有效的方法，尽管使用您显示的代码，您可以像这样调用.get：

$('#div').myPlugin('get', arguments);

这是 jQuery UI 使用的方法。因此，您可能想研究他们的Widget Factory works，甚至将其合并到您自己的代码中。

---

获得与您的示例类似的语法的另一种方法：

var methods = {/* Methods same as above */};

$.fn.myPlugin = function() {
    var Obj = function () {},
        obj;

    Obj.prototype = methods;
    obj = new Obj();
    obj.els = this;

    return obj;
};

然后这样称呼它：

$('#div').myPlugin().get(arguments);

如果您需要在方法中引用 this 来引用选定的 jQuery 对象（例如 $('#div')），请改用 this.els。