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

时间:2011-11-28 05:44:07

标签: javascript

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

3 个答案:

答案 0 :(得分:5)

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

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

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

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

答案 1 :(得分:2)

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

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

例如,一个模块可能会创建一个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变量。这些必须保留方法;使它们成为自由函数可能会导致错误。

答案 2 :(得分:0)

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