Question

我正在使用Udacity的“javascript设计模式”，我偶然发现了一个调用jQuery对象的代码，如下所述：

在retain.js文件（https://github.com/draconar/ud989-retain/blob/master/js/retain.js）中，代码以调用jQuery对象“$（）”开始。在其中，我们可以找到声明和初始化的Model-Octopus-View。

$(function(){

    var model = {
        init: function() {
            if (!localStorage.notes) {
                localStorage.notes = JSON.stringify([]);
            }
        },
        add: function(obj) {
            var data = JSON.parse(localStorage.notes);
            data.push(obj);
            localStorage.notes = JSON.stringify(data);
        },
        getAllNotes: function() {
            return JSON.parse(localStorage.notes);
        }
    };


    var octopus = {
        addNewNote: function(noteStr) {
            model.add({
                content: noteStr
            });
            view.render();
        },

        getNotes: function() {
            return model.getAllNotes();
        },

        init: function() {
            model.init();
            view.init();
        }
    };


    var view = {
        init: function() {
            this.noteList = $('#notes');
            var newNoteForm = $('#new-note-form');
            var newNoteContent = $('#new-note-content');
            newNoteForm.submit(function(e){
                octopus.addNewNote(newNoteContent.val());
                newNoteContent.val('');
                e.preventDefault();
            });
            view.render();
        },
        render: function(){
            var htmlStr = '';
            octopus.getNotes().forEach(function(note){
                htmlStr += '<li class="note">'+
                        note.content +
                    '</li>';
            });
            this.noteList.html( htmlStr );
        }
    };

    octopus.init();
});

我不知道为什么它驻留在jQuery对象中，我也不知道如何在应用程序的生命周期内访问它。例如，我试图通过控制台操纵它，但没有用。

Answer 1

它做了两件事：

$(function() { ... })是$(document).ready(function() { ... });的简写。这可确保所有HTML标记都已完成加载并已由浏览器解析 - 此时可以安全地修改DOM。
它为您的代码提供了一个闭包，可以防止全局范围污染，并使外部脚本更难修改或劫持您的代码。关闭很好。如果要从控制台访问某些内容，则需要首先通过在全局（窗口）对象上设置变量将其“公开”到世界。因此，如果您想要通过控制台访问变量foo，则需要在某处编写window.foo = foo; ...并确保在发布应用程序之前删除该代码。

Answer 2

代码执行以下操作：

$(function(){

    // Some procedural stuff here... declaring variables and functions, 
    // assigning values to variables, etc.

});

在功能上等同于：

function thingsToDo(){
    // Procedural stuff
}
$(thingsToDo);

以下是：

的简写

function thingsToDo(){
    // Procedural stuff
}
$(document).ready(thingsToDo);

这是jQuery的谈话

Please execute all that procedural stuff when the DOM is ready. If the DOM
is already ready right now, you can execute the stuff now. Thank you.

为什么封装$（）中的函数

2 个答案: