jquery 插件和闭包答案

【问题标题】：jquery plugins and closuresjquery 插件和闭包
【发布时间】：2012-07-23 23:53:26
【问题描述】：

我正在制作一个表单验证功能，并有以下代码

(function ( $ ) {
    $.fn.validate_thing = function (success_call_back) {
        var call_back = true;
        debugger;
        if (!this.is('form')) {
            return false;
        }

        $('input.empty').each(function() {
            if(!$(this).text()) {
                alert($(this).attr('name'));
                call_back = false;
            }
        });
    }
})(jQuery);

问题是，当页面加载时，我收到一个 javascript 错误，指出 (jQuery) 行上的“对象不是函数”。如果我使用调试器逐步完成此操作，我不会遇到此问题。如果我把它放在一个文档就绪函数中，我就不会遇到这个问题。我在想这可能与运行此脚本时未加载 jQuery 有关，但我在包含此代码的库之前包含了 jQuery 库，更不用说如果我不在闭包中执行此操作，即这样做

$.fn.validate_thing = function (success_call_back) {
    var call_back = true;
    debugger;
    if (!this.is('form')) {
        return false;
    }

    $('input.empty').each(function() {
        if(!$(this).text()) {
            alert($(this).attr('name'));
            call_back = false;
        }
    });
}

它有效。

所以我有一些解决这个问题的方法，但我仍然想知道为什么会这样。提前致谢。

这是我之前在 javascript 页面中的内容

engine = new function() {
this.request = function ( params ) {
    var data = params.data ? params.data : '';

    if (params.url) {
        var url = params.url;
        var page = document.URL.split('/').pop();
        var page = page.split('.')[0];
        data += 'content_page='+page+'.tpl';
    }
    else {
        var url = document.URL;
    }

    debugger;
    if (params.action) {
        data += data ? '&action='+params.action : "action="+params.action;
    }

    $.ajax({
        url : url,
        type : 'POST',
        data : data,
        dataType: 'json',
        success : function(data) {
            debugger;
            if (data && data.partials) {
                for (var key in data.partials) {
                    var element = data.partials[key];
                    $('#'+element.partial_name).replaceWith(element.partial_content);
                }
            }
        },
        error : function (jqXHR, textStatus, errorThrown) {
            debugger;

            alert('ajax error: '+errorThrown);
        }
    }).success(params.success);
}
}

【问题讨论】：

那部分之前还有其他代码吗？如果您在最后一行出现错误，它可能会将括号 ( function() { ... } ) 解释为代码之前的任何函数调用（我承认，这是一个很长的镜头）。
(function($){})(jQuery); 立即执行一个函数，传入jQuery 对象（将是函数内部的$）。对于您正在做的事情，我认为没有必要进行封闭
@MrOBrian：在定义 jQuery 插件时通常会这样做。全局的 $ 可能不是指 jQuery。
@FelixKling 是的，我的所有插件都以这种方式包装，没有任何问题，但由于他提到它可以在没有包装的情况下工作，我只是提供它似乎没有必要在本案
@MrOBrian 我可以忽略它，但我对为什么会发生这种情况而不是如何解决它感兴趣，因为我已经有一些解决方法，但感谢您的建议。

标签： jquery closures

【解决方案1】：

如果您在最后一行出现错误，则很可能 JavaScript 将括号 ( function() { ... } ) 解释为代码前面任何内容的函数调用。如果您在上一行中忘记了分号，就会发生这种情况。

考虑一下：

var foo = {};
var bar = foo
(function() {

}());

请注意，foo 后面缺少分号，因此 JavaScript 将代码解释为 foo(...)，从而引发错误

对象不是函数

【讨论】：