Javascript 动态创建方法

您好，我正在尝试编写一个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

将使

可排序，并执行一些其他初始任务，然后向元素添加以下方法：

.findItem（条件）

将允许您根据条件查找特定项目（如

findItem（'name==“Second”）

.list（condition）

将列出与给定条件匹配的所有项目

.sort（key）

将按给定键对所有项目进行排序
等等

---

执行此操作的最佳方法是什么？

此操作。不需要每个

。此操作应能：

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

注意，您将覆盖jQuery的本机

find

方法，不建议这样做

---

---

另外，不管它值多少钱，我认为这不是一个好主意。假设jQuery实例只具有从jQuery的原型对象继承的方法，因此我觉得您想要做的事情与普遍接受的jQuery插件行为不一致——即返回

this

对象（jQuery实例）未更改。

如果希望这些方法在任何jQuery对象上可用，则必须将它们中的每一个添加到jQuery的原型中。原因是每次调用

$（“.list”）

时，都会创建一个新的对象，并且附加到以前的此类对象上的任何方法都将丢失

将每个方法分配给jQuery的原型，如下所示：

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

这里的

list

方法很特殊，因为它可以在两种情况下调用。第一种是在初始化列表时，第二种是在根据条件查找特定项时。您必须以某种方式区分这两种情况—参数类型或其他参数

如果为未使用列表插件初始化的对象调用这些方法，您还可以使用

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

我在这里找到了这个解决方案：

这似乎正是我需要的

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

（函数（$）{
var TaskList=函数（元素、选项）
{
变量$elem=$（元素）；
变量选项=$.extend({
任务：[]，
文件夹：[]
}，选项|{}）；
this.changed=false；
this.selected={}；
$elem.sortable({
回复：对，
不透明度：0.5
});
this.findTask=函数（测试、查看）{
var结果=[]；
for（var i=0，l=options.tasks.length；i

那我有

    $('.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');

$（'.task list table'）.taskList({
任务：评估（“（）”），
文件夹：eval（“（）”）
});
变量taskList=$（'.task list table'）。数据（'taskList'）；

我可以使用
taskList.findTask（条件）；

由于构造函数有
$elem
，我也可以编辑jQuery实例，比如
list（condition）
等方法。这非常有效。
你能提供一个更详细的例子吗？很难说你想要什么……而且已经被采用了：）标题的可能重复是误导性的，这些不是即时创建的方法。抱歉，我不知道如何准确解释@redsquare对此表示感谢，我将尝试这样做。这是一篇关于构建插件的有趣读物，以便您以后可以使用元素的数据访问它：这里是一个入门格式（-all by Doug Neiner），虽然我通常同意，但情况并非总是如此，我能想到的一个主要例子是validate插件…这完全取决于您的需要。我尝试过这样做（将.find更改为.findItem），结果出现了错误$（'.list box'）。findItem不是一个函数感谢您提供的信息，这实际上非常有帮助。我终于意识到为什么我的方法不存在。我不能执行
$list=$（'.list'）.list（{options}）并从此点开始使用$list？无论如何，我找到了另一个解决方案，我将把它作为一个答案发布+1尽管如此thanks@Rob-您可以这样做，只要在
list
方法中，您使用所需的所有函数扩展jQuery对象，并从现在开始引用
$list
来调用这些函数。也就是说，我认为你的方法更好。