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

我正在编写一个自定义jQuery插件，以便能够就地编辑记录。我没有做过很多JavaScript，所以我不太熟悉闭包和对象在JavaScript中的工作方式

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

• 用户单击行上的编辑链接
• 进行ajax调用以获取表单的HTML
• 返回的表单HTML有一个提交按钮和一个取消按钮
• 单击“取消”按钮时，表单向上滑动
• 单击submit按钮时，表单将被提交（并验证），并在成功时向上滑动到表行

下面的代码是我到目前为止的代码。我觉得很多部分都可以移动到它们自己的函数中，但我不知道该怎么做，因为我需要在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);

（函数（$）{
$.fn.editInPlace=函数（参数）{
//设置默认设置，并允许覆盖它们
var config=$.extend（{}{
editActionSelector:“.edit”，
deleteActionSelector:'.delete'
}，参数）；
//将该功能应用于所有选定行
返回此值。每个（函数（）{
var$row=$（此）；
//预备行
$row.wrapInner（“”）；
var$formWrapper=$（''）.hide（）.appendTo（$row）；
//当用户单击编辑链接时
$row.find（config.editActionSelector）。单击（函数（e）{
e、 预防默认值（）；
如果（$formWrapper.is（':visible'））{
回来
}
var url=$（this.attr（'href'）；
//加载编辑表单html
$.get（url、函数（数据）{
$formWrapper.html（数据）.slideDown（）；//显示表单
//当用户单击“取消”按钮时
$formWrapper.find（'.cancel'）。单击（函数（e）{
e、 预防默认值（）；
$formWrapper.slideUp（）；
});
//当用户单击提交按钮时
$formWrapper.find（'form'）.submit（函数（e）{
e、 预防默认值（）；
警报（“提交的表格”）；
});
});
});
});
};
})（jQuery）；

更新： 我发现这篇文章很有帮助：

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

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

（函数（$）{
$.fn.editInPlace=函数（参数）{
var config=$.extend（{}{
editActionSelector:“.edit”，
deleteActionSelector:'.delete'
}，参数）；
返回此值。每个（函数（）{
var$row=$（此）；
prepareRow（$世界其他地区）；
//…其他代码
});
//私有函数，因为它存在于另一个函数中
函数prepareRow（$row）{
$row.wrapInner（“”）；
$（''）.hide（）.appendTo（$row）；
};
};
})（jQuery）；

---

然而，我很快就注意到，使用这种方法（以我目前的理解），我正在将所有变量传递给私有方法。我不认为这是最好的方法，但我不知道如何做否则。

您的代码很好。它对于一个功能来说并不太长（至少对我来说是这样）。如果你真的想，你可以把那些匿名函数移到命名的私有函数。我只是刚刚开始，我简化了StackOverflow=/