这是什么样的模式？

Question

I've learnt development by looking at other people's codes, so I'm not very good with terminologies. Lately I've been writting my JS/Jquery this way:

$(document).ready(function() {
    testingFunc.init();
});

var testingFunc = {
    $object: $('#object'),
    init: function() {
        var _that = this;
        console.log($object);
    }
}

Can someone please tell me if this a pattern of some sort? Or can someone please tell me how to describe the code I've done above?

Answer 1

This particular style represented in your code is an " object literal " pattern. It differs only slightly from a " module " pattern when you find yourself not requiring specific properties or methods to be private.

Before getting into a trap of terminologies, you may want to understand (in principle) what Javascript patterns are, and then identify those which may be architecturally best-fit for your project.

You may get an in-depth understanding from this mini-book from Addy Osmani:

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

And a high-level article from him:

http://addyosmani.com/largescalejavascript/

Answer 2

Perhaps you can name it the Object Literal pattern like used by Rebecca Murphey in her article. However I do not think that it's widely adopted as an official name for this kind of code structure, but it seems appropriate.

Answer 3

The first part is using a jQuery selector with the listener "ready". What this means is that the callback function attached to the selector and listener will run once the document (in this case the browser window) is ready (in web terms, this means when the page finishes loading).

The second part of your code is following a standard called object literal, which is a JavaScript methodology that follows the principles of key->value

Answer 4

I guess you are wondering about the ready function. In order to understand how it works, you have to know that when you load an HTML page into you browser, the HTML structure is turned into a javascript tree called "DOM" (Document Object Model). In your sample, the DOM is referenced through the variable named document . To populate this tree, each markup has to be initialized as a javascript object. Once this job is done, the "ready" event is raised, invoking every function which is bound to it. To summarize :

$(document).ready(function () { testingFunc.init(); });
// translation : Once the DOM has been initialized, call "init".

Regarding your code, $('#object') attempts to query the DOM tree to find a node with an id set to "object" (eg <div id="object"> ). However, the document is probably not yet fully initialized. As a result, this query might fail. To avoid this risk you should rather do this :

var testingFunc = {
    $object: null,
    init: function() {
        this.$object = $('#object');
        console.log(this.$object);
    }
}

You can think of the DOM as a folder structure, where each folder and file is an HTML markup. jQuery browses the DOM tree the same way that you browse your files explorer.