Question

我正在编写一个自定义jQuery插件，以便能够编辑记录。我没有做过很多JavaScript，因此我对JavaScript中闭包和对象的工作原理不是很熟悉。

简而言之，这就是脚本的工作原理：

用户点击一行的修改链接。
进行ajax调用以获取表单的HTML。
返回的表单HTML有一个提交按钮和一个取消按钮。
单击取消按钮时，表单会向上滑动。
单击提交按钮后，表单将被提交（并经过验证），并在成功时向上滑动表格行。

以下代码是我目前所拥有的。我觉得很多部分都可以移动到自己的函数中，但是我不知道怎么做，因为我需要绑定从AJAX调用返回的html元素上的函数。

如何将我的一些代码移动到更小的函数中？

(function($){
    $.fn.editInPlace = function(params) {

        //set up default settings, and allow them to be overridden
        var config = $.extend({}, {
            editActionSelector: '.edit',
            deleteActionSelector: '.delete'
        }, params);

        //apply the functionality to all rows selected
        return this.each(function() {

            var $row = $(this);

            //prepare row
            $row.wrapInner('<div class="data"></div>');
            var $formWrapper = $('<div class="form"></div>').hide().appendTo($row);

            //when the user clicks the edit link
            $row.find(config.editActionSelector).click(function(e){

                e.preventDefault();
                if ($formWrapper.is(':visible')) {
                    return;
                }

                var url = $(this).attr('href');

                //load the edit form html
                $.get(url, function(data){
                    $formWrapper.html(data).slideDown(); //show the form

                    //when the user clicks the cancel button
                    $formWrapper.find('.cancel').click(function(e){
                        e.preventDefault();
                        $formWrapper.slideUp();
                    });

                    //when the user clicks the submit button
                    $formWrapper.find('form').submit(function(e){
                        e.preventDefault();
                        alert('form submitted');
                    });
                });
            });
        });
    };

})(jQuery);

更新

我发现这篇文章很有用：OOP in JS, Part 1: Public/Private Variables and Methods

如果我理解正确，您不需要做任何花哨的事情来创建只能从插件中访问的功能（私有方法）。你可以在你的插件中创建一个功能，它将是私人的（如果我错了请纠正我）。

(function($){

    $.fn.editInPlace = function(params) {

        var config = $.extend({}, {
            editActionSelector: '.edit',
            deleteActionSelector: '.delete'
        }, params);

        return this.each(function() {

            var $row = $(this);

            prepareRow($row);

            //...other code
        });

        //private function since it exists within another function
        function prepareRow($row) {
            $row.wrapInner('<div class="data"></div>');
            $('<div class="form"></div>').hide().appendTo($row);
        };
    };

})(jQuery);

然而，我很快注意到这种方法（我目前的理解）我将所有变量传递给私有方法。我不认为这是最好的方式，但我不明白该怎么做。

如何在自己的自定义jQuery插件中移动代码（和调用）函数？

更新

0 个答案: