上飛

Question

嗨創建方法，我想創作一個jQuery插件，我需要有元素訪問的方法，他們作爲那樣的對象，如初始化後：

$('.list').list({some options}); //This initializes .list as a list 

//now I want it to have certain methods like: 
$('.list').find('List item'); //does some logic that I need 

我

嘗試

$.fn.list = function (options) { 
    return this.each(function() { 
     // some code here 
     this.find = function(test) { 
      //function logic 
     } 
    } 
} 

和其他幾個不同的嘗試，我只是不知道該怎麼做。

編輯：

我會盡力解釋這一點。

我想把一張桌子變成一個列表，基本上就像列計算機上的列標題和可排序項目和一切之間的一個列表。您啓動表像

$(this).list({ 
    data: [{id: 1, name:'My First List Item', date:'2010/06/26'}, {id:2, name:'Second', date:'2010/05/20'}] 
}); 

.list命令將使<tbody>排序，並做了一些其他的初始任務，然後將下面的方法添加到元素：
.findItem(condition)將允許您找到某個項目條件（如findItem('name == "Second"')
.list(condition)會列出符合給定條件的所有項目
.sort(key)將所有物品通過給定的關鍵
等

012排序

要做到這一點，最好的方法是什麼？

Answer 1

我在這裏找到這個解決方案： http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html

這似乎做的正是我需要的。

(function($) { 
    var TaskList = function(element, options) 
    { 
     var $elem = $(element); 
     var options = $.extend({ 
      tasks: [], 
      folders: [] 
     }, options || {}); 

     this.changed = false; 
     this.selected = {}; 

     $elem.sortable({ 
      revert: true, 
      opacity: 0.5 
     }); 

     this.findTask = function(test, look) { 
      var results = []; 

      for (var i = 0,l = options.tasks.length; i < l; i++) 
      { 
       var t = options['tasks'][i]; 
       if (eval(test)) 
       { 
        results.push(options.tasks[i]); 
       } 
      } 
      return results; 
     } 

     var debug = function(msg) { 
      if (window.console) { 
       console.log(msg); 
      } 
     } 
    } 

    $.fn.taskList = function(options) 
    { 
     return this.each(function() { 
      var element = $(this); 

      if (element.data('taskList')) { return; } 

      var taskList = new TaskList(this, options); 

      element.data('taskList', taskList); 

     }); 
    } 

})(jQuery); 

然後，我有

$('.task-list-table').taskList({ 
     tasks: eval('(<?php echo mysql_real_escape_string(json_encode($tasks)); ?>)'), 
     folders: eval('(<?php echo mysql_real_escape_string(json_encode($folders)); ?>)') 
    }); 
    var taskList = $('.task-list-table').data('taskList'); 

，我可以用taskList.findTask(condition);

而且由於構造有$elem我也可以像list(condition)等方法，這工作完全編輯jQuery的實例。

Answer 2

this.each是不需要的。這應該做到：不建議

$.fn.list = function (options) { 
    this.find = function(test) { 
     //function logic 
    }; 
    return this; 
}; 

注意，你會覆蓋jQuery的本地find方法，以及這樣做。

---

此外，對於它的價值，我不認爲這是一個好主意。假設jQuery實例只有從jQuery的原型對象繼承的方法，因此我覺得你想要做的事與通常接受的jQuery插件行爲不一致 - 即不返回this對象（jQuery實例）。

Answer 3

如果您希望這些方法在任何jQuery對象上都可用，您必須將它們中的每一個添加到jQuery的原型中。原因是每次您撥打$(".list")時都會創建一個新的對象，並且您附加到前一個對象的任何方法都將丟失。

分配給每個方法jQuery的原型爲：

jQuery.fn.extend({ 
    list: function() { .. }, 
    findItem: function() { .. }, 
    sort: function() { .. } 
}); 

的list方法這裏是特殊，因爲它可以在兩種情況下被調用。首先，初始化列表時，第二次通過條件查找特定項目。您必須以某種方式區分這兩種情況 - 無論是通過參數類型還是其他參數。

如果爲未通過列表插件初始化的對象調用這些方法，還可以使用data API拋出異常。當第一次調用('xyz').list({ .. })時，將某個狀態變量存儲在該對象的數據緩存中。當稍後調用其他任何方法 - 「list」，「findItem」或「sort」時，檢查對象是否在其數據高速緩存中包含該狀態變量。

更好的方法是命名空間插件，以便list()將返回擴展對象。這三個擴展方法可以在其返回值上調用。界面如下：

$('selector').list({ ... }); 
$('selector').list().findOne(..); 
$('selector').list().findAll(..); 
$('selector').list().sort(); 

或者第一次保存對返回對象的引用，並直接調用它的方法。

var myList = $('selector').list({ ... }); 
myList.findOne(..); 
myList.findAll(..); 
myList.sort();