javascript - 此 Backbone TodoMVC 示例中的这些模式是什么

Question

调查 todomvc backbone codes example .js/fold 中的结构:

├── app.js
├── collections
│   └── todos.js
├── models
│   └── todo.js
├── routers
│   └── router.js
└── views
    ├── app-view.js
    └── todo-view.js

应用程序.js

var app = app || {};
$(function () {
    'use strict';
    // kick things off by creating the `App`
    new app.AppView();
});

collections/todos.js

var app = app || {};

(function () {
    'use strict';
    var Todos = Backbone.Collection.extend({
    model: app.Todo,
    app.todos = new Todos();
})();

模型/todo.js

var app = app || {};

(function () {
    'use strict';
    app.Todo = Backbone.Model.extend({
    });
})();

views/app-view.js

var app = app || {};
(function ($) {
    'use strict';
    app.AppView = Backbone.View.extend({
})(jQuery);

我有两个问题:

1. 为什么 var app = app || {} 在每个文件中？

2. $(function(){})、(function(){})() 和 (function ($))(jQuery)?

Answer 1

1. app 变量是全局的，封装了整个 Backbone 应用程序以最小化全局 namespace 污染。 Here您可以找到有关命名空间模式的更多详细信息。

   var app = app || {} 使用新的空对象初始化全局 app 变量(如果尚未初始化)。否则它将保持不变。

2. 功能:

   • $(function(){}) 是 jQuery 的 $(document).ready(function(){}) 的快捷方式。 Docs
   • (function(){})() 是一个 Immediately-invoked function expression (IIFE)无参数
   • (function($){/* 这里 $ 是安全的 jQuery 对象 */})(jQuery) 是带参数的 IIFE - jQuery 对象将作为 $ 进入那个匿名函数

$(function() {
  console.log("Document ready event");
});

$(document).ready(function() {
  console.log("Document ready event");
});

(function() {
  console.log("Immediately-invoked function expression without parameters");
})();

(function($) {
  console.log("Immediately-invoked function expression with parameter. $ is a jQuery object here:");
  console.log($.fn.jquery);
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>