jQuery 扩展和闭包

Question

我正在学习 javascript，同时我也在尝试更多地了解 jQuery。我在 JS 中创建了一个非常简单的“表单控制器”，所以当我创建将表单作为参数传递的对象时，它会获取连接的事件并劫持提交：

var FormController = function (form) {

    // private field
    var _form = $(form);
    var _url = _form.attr('action');
    var _isValid = false;

    $(form).submit(function (e) {
        submitForm();
        e.preventDefault();
    });

    var disableAll = function () {
        _form.find('select,input,textarea').attr('disabled', 'disabled')
    };

    var enableAll = function () {
        _form.find('select,input,textarea').removeAttr('disabled')
    };

    var submitForm = function () {

        disableAll();
        _isValid = true;

        if (_isValid) {
            $.ajax({
                url: _url,
                type: 'POST',
                success: function (data, textStatus, jqXHR) {
                    enableAll();
                    var obj = jQuery.parseJSON(jqXHR.responseText);
                    print(data.Result ? data.Result : "[No Result]");
                    print(textStatus.toString());
                },
                error: function (data, textStatus, jqXHR) {
                    print(textStatus);
                    _form.css('border', '1px solid Red');
                    enableAll();
                }
            });
        }
    };

    // public fields and functions
    return {
        getIsValid: function () { return _isValid; },
        submit: function () { return submitForm(); }
    };
};

它按预期工作。现在我想创建一个 jQuery 扩展，所以我可以将该对象应用到结果中：

$.fn.formController = function () {
    return this.each(function (i, item) {
        new FormController(item);
    });
};

我也按预期工作，但是...... GC 会收集那个对象吗？还是因为事件是连线的，所以算作引用？

现在，我想让我的控制器的实例保持可用，以便在创建后对它们进行操作，例如调用方法。像这样的：

$('#myForm').formController('submit');

我尝试了几种方法来做到这一点，但我无法做到。我试图用一个跟踪项目等的对象来封闭......但我只是把“这个”弄乱了。

这样做的正确方法是什么？而且我假设我到目前为止所做的一切都可能是错误的，即使它有效。

谢谢。

更新

对不起，如果问题不够清楚。我的目标是一种我可以做的方式：$('#myForm').formController('submit');，然后该函数将找到与该 HTML 对象关联的“FormController”对象，并调用此“提交”成员。

我想实现这样的目标：

$.fn.formController = function (name) {

    if(!document._items)
        document._items = [];

    if (name) {
        return this.each(function (i, item) {
            var id = $(item).data('form-controller');

            if (id) {
                var fc = document._items[id];
                var member = fc[name];
                if (member) {
                    if (typeof member == 'function')
                        member();
                }
            }
        });
    }
    else {    
        return this.each(function (i, item) {
            var id = document._items.push(new FormController(item)) - 1;
            $(item).data('form-controller', id.toString());
        });
    }
};

这种方法的问题是我将一个集合保存为全局对象，而我想要的是使其成为内部对象。我尝试过关闭，但我只遇到了“this”（指向 DOMwindow）或“_items”变量为空的问题。

解决这个问题的正确方法是什么？

Answer 1

您可以使用 jQuery UI 的小部件工厂，它为您提供了开箱即用的功能：

$.widget("vtortola.formcontroller", {
    _create: function() {
         // Use `this.element` to initialize the element.
         // You can also use this.options to get the options object that was passed.
    },
    _destroy: function() {
        // You can unbind events here to remove references from the DOM, so is'll get
        // deleted by the garbage collector.
    },
    submit: function() { /* ... */ }
});

// Example
$('#form').formcontroller({foo: 123}); // Calls `_create()` with the supplied options
$('#form').formcontroller('submit'); // Calls the `submit` method

小部件工厂还为您提供选项 setter/getter、默认选项和其他很酷的东西。有关详细信息，请参阅 the official docs 和 tutorial at bililite。如果你不使用 jQuery UI 做其他东西，你可以单独使用widget factory code，它不依赖于 jQuery UI 的其他部分。

如果您不喜欢使用 jQuery UI 的小部件工厂，您可以将对象直接存储在 .data() 上（这也是小部件工厂所做的），无需保留它们的集合并手动跟踪.您的代码将类似于：

$.fn.formController = function () {
    var args = arguments;
    return this.each(function (i, item) {
        var $this = $(this), _obj;
        // When calling `$(..)`.formController() with arguments when the object already
        // exists, it treats the first argument as the method name and passes the rest
        // as arguments to that method.
        if (arguments.length && (_obj = $this.data('FormController'))) {
            _obj[args[0]].apply(_obj, Array.prototype.slice.call(args, 1));
        } else {
            $this.data('FormController', new FormController(item));
        }
    });
};

Answer 2

使用

(function($){
    $.fn.formController = function(parameter1, parameter2){
            //this = #myForm
    }
)(jQuery);

并阅读this

Answer 3

我也尝试过创建一个集合作为函数本身的属性。

它有效，但我不知道它有多正确/合适：D

$.fn.formController = function (name) {

    if (name) {
        return this.each(function (i, item) {
            var id = $(item).data('form-controller');

            if (id) {
                var fc = $.fn.formController.Items[id];
                print('get: ' + id + ' ' + (fc?'found':'not found'));
                var member = fc[name];
                if (member) {
                    if (typeof member == 'function')
                        member();
                }
            }
        });
    }
    else {

        return this.each(function (i, item) {
            var id = $.fn.formController.Items.push(new FormController(item)) - 1;
            print('add: ' + id);
            $(item).data('form-controller', id.toString());
        });
    }
};
$.fn.formController.Items = [];