Question

我最近遇到过与此类似的代码，

// Simplified example..
var Application = 
    {
        MemberVar1: null,
        MemberVar2: null,

        Initialize: function ()
        {
            Application.MemberVar1 = 'Foo';
            Application.MemberVar2 = 'Bar';

            console.log("Initializing..");

            Application.GetMemberVars();
        },
        GetMemberVars: function ()
        {
            console.log(Application.MemberVar1 + ' ' + Application.MemberVar2);    
        }
    };

$(Application.Initialize);

此模式/方法/样式的名称是什么？使用OOP原则而不使用我之前见过的样式，例如原型设计。与其他流行风格相比，这种风格有什么好处？

Answer 1

这是一个简单的一次性对象文字，正在被创建......它们可以包含函数......也许这就是你扔的东西。

最后一行只是将Application.Initialize函数作为$(document).ready回调函数传递给jQuery

根据下面的评论，这就是代码实际执行的内容（以及如何将其编写得更短/更容易）

$(function()
{
    console.log("Initializing..");
    console.log("Foo Bar");//replace this with variables you declare @top of anon. function if you want
});

作为一个模块（您可以找到有关模块模式here的更多信息）：

var Application = (function()
{
    var memberVar1, memberVar2,
    getMemberVars = function()
    {
        return memberVar1 + ' ' + memberVar2;
    };
    return {init: function()
    {
        memberVar1 = 'Foo';
        memberVar2 = 'Bar';
        console.log('initializing...');
        console.log(getMemberVars());
    }};
}());
$(Application.init);

Application现在是一个对象文字，只有一个属性（init）：一个函数，因为它是在该IIFE范围内声明的，所以可以访问该范围内的所有变量。这对你来说是封闭的魔力。您也可以轻松地为成员变量添加getter和setter：

var Application = (function()
{
    var memberVars = {},//turned into object literal...
    getMemberVars = function(all)
    {
        var i;
        if(typeof all === 'string' || typeof all === 'number')
        {
            return memberVars[all];
        }
        all = [];
        for (i in memberVars)
        {
            if (memberVars.hasOwnProperty(i))
            {
                all.push(memberVars[i]);
            }
        }
        return all;//or all.join(' '), as you please
    },
    get = function(name)
    {

        return typeof name === 'undefined' ? name : memberVars[name]; 
    },
    set = function(name, val)
    {
        memberVars[name] = val;
    };
    return {init: function()
    {
        memberVars.one = 'Foo';
        memberVars.two = 'Bar';
        console.log('initializing...');
        console.log(getMemberVars().join(' '));
    },
    get: get,
    set: set};//just add getter and setter here
}());

Answer 2

这与您的代码具有相同的行为：

var Application = (function() {
    var app = {
        MemberVar1: null,
        MemberVar2: null,
        GetMemberVars: function() { /* ... */},
        Initialize: function() {
            this.MemberVar1 = 'Foo';
            this.MemberVar2 = 'Bar';
            console.log('Initializing..');
            this.getMemberVars();
        }
    };
    $(function() {app.Initialize();});
    return app;
}());

但是你很可能不希望Initialize函数闲置。所以这会简化它：

var Application = (function() {
    var app = {
        MemberVar1: null,
        MemberVar2: null,
        GetMemberVars: function() { /* ... */}
    };
    $(function() {
        app.MemberVar1 = 'Foo';
        app.MemberVar2 = 'Bar';
        console.log('Initializing..');
        app.getMemberVars();
    });
    return app;
}());

除非你真的担心代码试图在jQuery的Application.MemberVar1事件之前访问document.ready等，否则你可以进一步简化它：

var Application = (function() {
    var app = {
        GetMemberVars: function() { /* ... */}
    };
    $(function() {
        app.MemberVar1 = 'Foo';
        app.MemberVar2 = 'Bar';
        console.log('Initializing..');
        app.getMemberVars();
    });
    return app;
}());

我假设定义那些MemberVar需要一些实际的工作，而不是像示例中的简单字符串。如果情况并非如此，那么我会将其最后改为

var Application = (function() {
    var app = {
        MemberVar1: 'Foo';
        MemberVar2: 'Bar';
        GetMemberVars: function() { /* ... */}
    };
    $(function() {
        console.log('Initializing..');
        app.getMemberVars();
    });
    return app;
}());

Answer 3

如果您只使用某个对象的一个实例，则不需要使用原型。

在这种情况下，很明显Application对象是独一无二的，作者并不打算创建任何额外的Application副本。

谈论风格......资本骆驼案看起来很难看。通用协议是仅将CapitalCamelCase用于对象构造函数。我个人认为也可以使用带逻辑的独特对象（应用程序）。但是应该避免将它用于函数名和变量。

谈论模式......它接近单身模式。但是不要过多考虑它。来自Java世界的所有OOP模式在JS世界中失去了部分吸引力。其中一些完全解体。专注于JS解决问题的方法。

这个JS遵循什么类型的模式？

3 个答案: