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

在Javascript中定义和调用函数的最佳方法,javascript,Javascript,下面是我发布的一些Javascript示例,展示了定义和调用Javascript函数的两种不同方式 这些不同的方法有名字吗 首选哪种方法 第一个代码块看起来非常简单,与定义和调用过程PHP函数非常相似 第二个我意识到的是,设置起来更像是一个类/名称空间,这让我有点困惑,因为我还没有太多地研究javascript。我认为所有这些函数都可以用任何一种方法作为第一个或第二个代码块进行编码,并且仍然可以工作,这是正确的吗 对不起,如果我的问题不够清楚,如果需要我会修改,谢谢你的帮助/信息 initCom

下面是我发布的一些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;
        }
    },
};

一个是在对象中定义函数,另一个只是自己定义函数。函数是JavaScript中的第一类对象,因此它们不需要定义对象

第一种方法通常是编写独立函数的首选方法。你可以把它们写成

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


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

作为对象属性的函数(通过对象引用调用,例如,
obj.func()
)就是所谓的“方法”。与对象无关的函数称为“自由函数”。方法具有自由函数没有的特殊访问权限。确切地说,这些特权取决于语言,但是所有OO语言都包含一个特殊的变量(您可以认为它是隐藏的参数),可以在函数体中访问该方法绑定到的对象。在JS中,此参数的名称为
this

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

例如,一个模块可能创建一个
符号
函数,该函数返回一个数字是正、负还是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
变量。这些方法必须保持不变;让它们成为自由函数可能会导致bug

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'