这个Backbone TodoMVC示例中的这些模式是什么

查看todomvc骨干代码示例 。 js / fold中的结构:

├── 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(); }); 

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

浏览量/应用-view.js

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

我有两个问题:

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

  2. $(function(){})(function(){})()(function($))(jQuery)之间有什么区别?

  1. app变量是全局的,封装整个Backbone应用程序,以最大限度地减少全局命名空间污 在这里您可以找到有关命名空间模式的更多详细信息。

    var app = app || {} var app = app || {}如果尚未初始化,则使用新的空对象初始化全局app变量。 否则它将不受影响。

  2. function:

    • $(function(){})是jQuery的$(document).ready(function(){})的快捷方式。 文件
    • (function(){})()是一个没有参数的立即调用的函数表达式(IIFE)
    • (function($){ /* here $ is safe jQuery object */ })(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); 
  

虽然Yurii解释了所有模式之间的差异,但它缺少了“为什么”你需要这些模式。

命名空间和范围

以下模式的总体目标主要是命名空间和范围,具有不同的好处。 避免污染全局命名空间是一种很好的做法,并且由于JavaScript没有将命名空间作为核心function,因此其他模式已经淹没以解决这个问题。

请参见如何声明命名空间 。

全局命名空间

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

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

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

请注意,如果模块依赖于另一个模块,则文件的顺序仍然很重要。

如果我们查看TodoMVC示例 ,它们按特定顺序包含文件:

       

作用域

想象一下你宣布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 **/ } })();