如何创建一个包含特殊功能的格式良好的全局javascript对象

时间:2012-03-17 14:06:25

标签: javascript oop

我正在创建一个严重依赖JavaScript的小项目。我来自php / mysql,现在踩到了node.js / javascript / mongodb,我想说这是一个非常的思想开关。

我想创建一个简单的对象,它具有一些我可以在页面中使用的特殊功能。我一直在看一些教程,并查看jquery和backbone等库,但我需要对我的决定提出最终建议。

我只需要一些小功能,没有跨浏览器支持,这就是为什么我不选择像骨干这样的东西。当我在JavaScript编程上有更好的崩溃时,可能会对此进行不适当的改变。

令我困惑的是,是否使用new,或者将代码包装到自动调用函数中。

我看到jquery在window中创建了一个对象而不是公开它,但我不知道它是如何工作的。

足够的介绍,现在到了这一步。我创造了这样的东西:

var $s = Object.create({

    page: Object.create({

        title: 'pagetitle',
        html: '',
        data: {},

        render: function(){
            // Basic render function
        }

    }),

    socket: Object.create({
        // My websocket connection
    }),

    store: function(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
    },

    retrieve: function(key) {
        var value = localStorage.getItem(key);
        return value && JSON.parse(value);
    },

    slugify: function(slug){
        return slug.replace(/[^a-zA-Z 0-9-]+/g,'').toLowerCase().replace(/ /g,'-');
    }

});

这只是我输入的几个随机函数。

我还没有测试过,这是一个草稿,我想知道这是否有用。

现在我觉得我可以做一些这样的事情:

$s.page.html = 'somehtml';
$s.page.render();

// Maybe
$s.store( $s.page.title, $s.page.html );

我使用jQuery和jQuery模板,所以这样的事情是可能的:

$.tmpl( $s.page.html, $s.page.data ).appendTo( "#content" );

1 个答案:

答案 0 :(得分:7)

这里不需要任何花哨的东西。您可以使用以下方法创建全局javascript对象:

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

然后您可以这样称呼:

myGlobalObject.testFunction();

您经常使用的一种稍微灵活的设计模式是:

var myGlobalObject = myGlobalObject || {};

myGlobalObject.testFunction = function() {
    // put your code here
};

当可能有许多不同的代码片段对myGlobalObject有贡献时使用它们,并且它们都希望确保在向其添加属性之前正确声明它。这种方式,如果它尚不存在则创建它,如果它已经存在,则在其上留下可能已存在的方法和属性。这允许多个模块分别为myGlobalObject提供初始化,而不考虑它们加载的顺序。