具有多种功能的jQuery插件

我目前有一个基于网络的应用程序，它严格依赖第三方soap服务器为网站提供信息。这个应用程序几乎没有JavaScript，几个元素从jQuery UI和几个jQuery的东西（比任何其他原因更简单）。具有多种功能的jQuery插件

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

所以我们有这个基于php的服务器端库，它使用soap获取信息，生成HTML并将数据发送给用户。现在乐趣开始了，我们希望采用这个服务器端代码并使其成为模块化，并构建一个jQuery插件来与服务器端进行交互。我遇到麻烦的部分是如何在插件中使用多个函数（也许这是错误的方法，请更正我），我可以随意调用每一个函数。

的基本思想如下：

皂服务器允许访问所有的基础表，每个表具有一个特定的WSDL和定义了一组可用于每个表的功能。这些功能对于所有表格都是相同的。

我们有一个例子：

得到
getRecords
插入
更新

删除

(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);

因此，拨打肥皂服务器需要一个ID来标识表中的哪条记录，getRecords呼叫接受查询并返回多条记录，插入插入记录，更新更新记录等。

要执行获得致电我想做一些如：

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

的结果将是使用id =“格”的股利将与任何get函数的插件为myplugin返回定义与做更新元件。

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

感谢意见/反馈！

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

来源

2011-02-01 Chris

有几个帖子沿着类似的路线，所以我不认为你远离你想要做的事情，你只是调用稍微不同的东西，在你的插件中使用字符串和开关来改变函数用户：[与多个功能的jQuery插件]（http://stackoverflow.com/questions/2624489/jquery-plugin-with-multiple-functions），[创建一个多功能的jQuery插件]（http：// stackoverflow。 com/questions/4096451 /创建一个jQuery的插件与多功能） – Scoobler 2011-02-01 14:30:35

@Scoobler：不知道我是如何错过了这些，我发誓我拖了SO搜索jquery插件相关的材料昨晚整晚问任何事情。感谢您将我链接到这些帖子。 – Chris 2011-02-01 14:36:01

这是一个简单而有效的方法，但与你的代码所展示的，你会打电话.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。

来源

2011-02-01 14:27:42

具有多种功能的jQuery插件

回答

相关问题