在Javascript中定义和调用函数的最佳方法

Question

下面是我发布的一些示例Javascript，它显示了定义和调用javascript函数的两种不同方式。

这些不同的方法有名称吗？

哪种方法更受青睐？

第一个代码块看起来非常简单，几乎与定义和调用的过程PHP函数相同。

第二个我意识到设置更像一个类/命名空间它只是让我有点困惑，因为我还没有研究过多的javascript。 我是否认为所有这些函数都可以在任何一种方法中编码为第一个或第二个代码块并且仍然有用？

对不起，如果我的问题不够明确，我会在需要时进行修改，感谢您的帮助/信息

initCommentsHelp();

function initCommentsHelp() {
    $('#view-comments-help-a').live('click', function() {
      $('#comments-help').slideToggle("normal");
      return false;
    });
}

VS这样做

Screenshot.Like.Shot.toggle();
Screenshot.Comment.toggle();
Screenshot.Flag.flag();
Screenshot.Flag.unflag();

var Screenshot = {
    Like: {
        Shot: {
            toggle: function() {
                if ($('.fav a.fav-toggle.processing').length == 0) {
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: data,
                        beforeSend: function() {
                            $('.fav-toggle').addClass('processing');
                            $link.text('Wait...');
                        },
                        success: function(responseHtml) {
                            $('#like-section').replaceWith(responseHtml);
                        }
                    });
                }

                return false;
            }
        },
    Comment: {
                toggle: function() {
                    var link = $(this);
                    var data = link.hasClass('liked-by-current-user') ? {_method: 'delete'} : null;
                    $.ajax({
                        type: 'POST',
                        url: this.href,
                        data: data,
                        success: function(responseHtml) {
                            link.closest('.comment').replaceWith(responseHtml);
                        }
                    });

                    return false;
            }
        }
    },
    Flag: {
        // Flag a screenshot as inappropriate or Appropriate
        flag: function(){
            var link = $(this);
            var screenshotId = link.modelId();
            if(!confirm("Are you sure you want to flag this shot?"))
                return false;

            $.ajax({
                type: 'POST',
                url: this.href,
                data: {
                    screenshot_id: screenshotId
                },
                success: function(responseHtml) {
                    $('#flag-section').html(responseHtml);
                }
            });

            return false;
        },
        unflag: function() {
            var link = $(this);
            var screenshotId = link.modelId();
            $.ajax({
                type: 'POST',
                url: this.href,
                data: {
                    _method: 'delete',
                    screenshot_id: screenshotId
                },
                success: function(responseHtml) {
                    $('#flag-section').html(responseHtml);
                }
            });

            return false;
        }
    },
};

Answer 1

第一种方法通常优选用于编写独立功能。 你可以把它们写成

function testFunction() {
  // your code here...
}

要么

var testFunction = function() {
  // your code here...
}

您发布的第二个示例用于命名空间对象。 您可以在本文中阅读有关命名空间的更多信息： JavaScript中的命名空间

Answer 2

作为对象属性的函数（通过对象引用调用，例如obj.func() ）就是所谓的“方法”。 与对象无关的函数称为“自由函数”。 方法具有不提供给自由函数的特殊访问权限。 这些权限究竟取决于语言，但所有OO语言都包含一个特殊变量（您可以将其视为隐藏参数），可在函数体中访问该方法所绑定的对象。 在JS中，此参数的名称是this 。

this存在于自由函数中，它引用全局对象。 您可以将自由函数和全局变量视为全局默认对象的属性。 对于浏览器，全局对象是window 。 因此，自由函数类似于全局变量，通常是坏的 。 自由函数不会像全局变量那样经常导致问题，但它们仍然可以，并且出于同样的原因。 因此，一些开发人员使用对象作为名称空间来防止名称冲突。

例如，一个模块可能会创建一个sign函数，该函数返回一个数字是正数，负数还是0.另一个模块可能有一个数字签名消息的sign函数。 这些模块由不同的公司创建，每个公司都不知道另一个。 想象一下，开发人员想要使用这两个模块。 如果两者都被定义为自由函数，则以第二个定义的第二个将替换第一个，在另一个模块中造成严重破坏。 为了防止这种情况，可以将每个函数定义为单独对象的属性。

自由函数和方法之间的实际区别在于如何访问它们。 方法作为对象的属性进行访问，而自由函数可以通过名称或变量直接访问。 请注意，根据您访问它的方式，可以将相同的函数视为方法或自由函数。

var obj = {
    type: 'method',
    meth: function (){
        return this.type;
    }
};
var func = obj.meth,
    name = 'free';

// the following two lines call the same function, though `this` will be bound differently for each.
obj.meth(); // returns 'method'
func();     // returns 'free'

您甚至可以使用自由函数并以多种方式将其作为方法调用：

function func(a, b) {
    return this.foo+a+b;
}
var obj = {foo: 'bar'};
// call func as a method using the `call` method
func.call(obj, 'baz', 'bam');
// call func as a method using the `apply` method
func.apply(obj, ['baz', 'bam']);

// call func as a method in the usual way
obj.meth = func;
obj.meth(1, 2); // 'foo12'

如果你仔细观察你的第二个样本，你会注意到大多数方法都使用this变量。 这些必须保留方法; 使它们成为自由函数可能会导致错误。

Answer 3

一个是定义对象中的函数，另一个是仅定义函数。 函数是JavaScript中的第一类对象，因此它们不需要定义对象。