具有多種功能的jQuery插件

Question

我目前有一個基於網絡的應用程序，它嚴格依賴第三方soap服務器爲網站提供信息。這個應用程序幾乎沒有JavaScript，幾個元素從jQuery UI和幾個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位置。

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。