在这个主干TodoMVC示例中，这些模式是什么？

Question

调查todomvc骨干代码示例。js/折叠中的结构：

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

app.js

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

集合/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({
    });
})();

视图/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变量是全局的，并封装整个骨干应用程序，以减少全局命名空间污染。这里，您可以找到更多有关命名空间模式的详细信息。 如果尚未初始化，var app = app || {}将使用新的空对象初始化全局app变量。否则它将不会被触及。
2. 职能：

- `$(function(){})` is a shortcut for jQuery's `$(document).ready(function(){})`. [Docs](https://learn.jquery.com/using-jquery-core/document-ready/)
- `(function(){})()` is an [Immediately-invoked function expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) without parameters
- `(function($){ /* here $ is safe jQuery object */ })(jQuery)` is IIFE with parameter - `jQuery` object will be passed as `$` into that anonymous function

​

​

$(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>

​

Answer 2

虽然尤里解释了所有模式之间的差异，但它忽略了您需要这些模式的“原因”。

起搏和范围

以下模式的首要目标主要是名称空间和作用域，有不同的好处。避免污染全局命名空间是一种很好的做法，而且由于JavaScript没有将名称空间作为核心功能，因此其他模式已经融合以解决这个问题。

见如何声明命名空间？。

全局命名空间

var app = app || {}; // if it doesn't exist yet, make it an new object.

为了避免污染全局命名空间 (AKA使一切成为全局变量)，您只创建一个变量，在其中插入应用程序的所有其他模块。

然后，每个文件将其模块导出到唯一的全局变量中。

注意，如果一个模块依赖于另一个模块，那么文件的顺序仍然很重要。

如果我们查看TodoMVC实例，它们按照特定的顺序包含文件：

<script src="js/models/todo.js"></script>
<script src="js/collections/todos.js"></script>
<script src="js/views/todo-view.js"></script>
<script src="js/views/app-view.js"></script>
<script src="js/routers/router.js"></script>
<script src="js/app.js"></script>

范围界定

假设您在一个文件中声明了var test = 2;，并且它是整个模块中使用的一个关键变量。然后，在另一个文件中，复制在第一个模块中使用的良好模式。您刚刚重写了test变量，现在，它是两个模块之间共享的。

为了将本地函数和变量私有于模块，可以使用立即调用函数表达式(IIFE)对它们进行范围调整。块范围是相对较新的，还没有很好的支持，所以最安全的方法是使用函数范围。

var app = app || {}; // global

(function () {
    // private to this scope
    var Todos = Backbone.Collection.extend({});

    // export the Todos constructor to the global app namespace
    app.Todos = Todos;

    function localFunction(param) { /** snip **/ }
})();