javascript - Meteor.js/Handlebars.js - 了解程序编码风格和范围

Question

我是第一次使用 Meteor.js 框架，我无法理解模板系统的事件顺序(从未使用过 Handlebars.js)，以及如何处理范围。

我有一个名为 audio.js 的文件。在其中，我定义了一个类并使用该类初始化了一个变量:

// Question about this as well, how do I properly make a jQuery class?
// Is this the right way?
$.Audio = function() {}

$.Audio.prototype = {
  init: function() {
      this.ele = $('.blahblah');
  }
  startAudio: function() {
      // do things
  }
}

var Music = new $.Audio();

所以我的 var Music 是在 audio.js 中创建的。

现在，在另一个 js 文件中，我正在执行一些模板函数:

Template.bars.rendered = function {
    Music.startAudio();
}

但是我从该行得到了一个 Uncaught ReferenceError: Music is not defined。

主要问题:

作用域在 Meteor.js 中是如何工作的？如何在另一个文件的模板函数中引用我在一个文件中声明的 Music 变量？

不太重要的问题，可能不容易回答，因为这不是一个很好的问题。我如何在程序上用 meteor 编写 javascript？这是我第一次使用模板。我习惯于在 DOM 中列出(或加载 DOM 或使用监听器触发事件​​等)时呈现 javascript。我不明白如何使用模板将 javascript 中的事件逻辑链联系在一起。

Answer 1

来自 Meteor 文档:

• Files in directories named lib are loaded first.

• Files that match main.* are loaded after everything else.

• Files in subdirectories are loaded before files in parent directories, so that files in the deepest subdirectory are loaded first (after lib), and files in the root directory are loaded last (other than main.*).

• Within a directory, files are loaded in alphabetical order by filename.

另外，这里有一些关于导出变量的文档:

// File Scope. This variable will be visible only inside this
// one file. Other files in this app or package won't see it.
var alicePerson = {name: "alice"};

// Package Scope. This variable is visible to every file inside
// of this package or app. The difference is that 'var' is
// omitted.
bobPerson = {name: "bob"};

因此，如果您希望您的 music var 在其他文件中可用，请执行以下操作:

• 将您的audio.js 文件放在lib 文件夹中，例如lib/audio.js 或client/lib/audio.js。这将确保它在其他文件之前加载。

• 不要使用 var 关键字声明您的 music 变量。只需执行 music = new $.Audio(); 这会将 music 附加到全局范围，允许稍后加载的文件访问它。

为什么有必要？ Meteor 将所有文件包装在一个 IIFE 中.因此，例如，如果您的文件如下所示:

var MyClass = function() {};
var myInstance = new MyClass();

然后 Meteor 将像这样包装该文件:

(function() {
  var MyClass = function() {};
  var myInstance = new MyClass();
})();

现在 var 对其他文件不可用，因为 JavaScript 的函数作用域。不使用 var 声明的变量将附加到全局范围，无论它们可能包含在什么函数中。

Less important question, which might not easily be answered because it's not a very good question. How do I procedurally write javascript with meteor? This is the first time I've worked with templating. I am used to javascript being rendered as it is listed in the DOM (or as the DOM is loaded or events are fired using listeners, etc). I don't understand how to tie together a logical chain of events in javascript using templates.

去阅读文档。您可以在 http://docs.meteor.com/ 访问它们.阅读每一行——它会回答你可能有的许多这样的问题。简而言之，您可以在模板上定义事件处理函数，当模板内的 HTML 元素发生事件时，这些函数将被触发。您还可以在模板上定义辅助函数，它可以依赖于响应式数据源，并且会在这些响应式数据源发生变化时自动重新运行(这将导致模板重新呈现). Meteor 文档的模板部分对此进行了介绍。

想法是这样的:您的模板定义了应该为您的应用呈现的 HTML 的结构。此 HTML 由响应式(Reactive)数据源驱动，并在响应式(Reactive)数据源每次更改时重新呈现。这确保您的 HTML 始终与您的数据同步，而且您不必编写任何自定义 DOM 操作代码!因此，对于执行顺序的一个简单示例:

1. 响应式(Reactive)数据源(例如，Session、Meteor.Collection，或您自己使用 Deps 的响应式(Reactive)数据源) 是用初始值创建的。

2. 依赖于您的数据源的模板辅助函数使用数据源的初始值执行。

3. 模板使用辅助函数的结果呈现，辅助函数包含在模板中，如 {{myHelper}}。模板事件处理程序自动附加到生成的 HTML DOM。

4. 在 DOM 上触发事件，例如单击按钮。

5. 事件处理程序已运行。也许该事件处理程序会更改响应式(Reactive)数据源。

6. 辅助函数发现数据源已更改，并自动重新运行。

7. 使用辅助函数的新值自动重新呈现模板的相关部分。