制作特定于 Meteor 模板的函数并可由其事件处理程序访问答案

【问题标题】：Making functions specific to Meteor templates and accessible by its event handlers制作特定于 Meteor 模板的函数并可由其事件处理程序访问
【发布时间】：2015-03-06 20:23:57
【问题描述】：

有没有一种方法可以让我制作特定于模板且可由模板的事件处理程序访问的函数？我不想污染全局命名空间。

当我第一次注意到我在事件处理程序之间以类似于以下方式重复大量代码时遇到了这个问题：

Template.options.events({
    "click .btn-1": function(e) {
        // do something
        var div;
        div = $(e.target);
        if (div.hasClass("active")) {
          return div.removeClass("active");
        } else {
          return div.addClass("active");
        }
      },
    "click .btn-2": function(e) {
        // do something else
        var div;
        div = $(e.target);
        if (div.hasClass("active")) {
          return div.removeClass("active");
        } else {
          return div.addClass("active");
        }
    }
});

请注意，我并不是想找到一种组合选择器的方法，我已经知道如何做到这一点。请注意，每个按钮的作用不同，但有几行重复的代码。我想在不污染全局命名空间的情况下尽可能保持 DRY。

【问题讨论】：

标签： javascript meteor meteor-helper

【解决方案1】：

Meteor 项目中的每个文件都有自己的本地范围。如果您使用function blah() { ... } 或var blah = function () { ... } 在一个文件中定义函数，则该文件之外将无法访问该函数。只有blah = function () { ... }（没有var）定义了一个真正的全局。

如果这还不够，您可以在立即调用的函数表达式 (IIFE) 中定义局部函数：

(function () {
    function toggleActive(div) {
        if (div.hasClass("active")) {
            div.removeClass("active");
        } else {
            div.addClass("active");
        }
    }

    Template.options.events({
        "click .btn-1": function (e) {
            // do something
            toggleActive($(e.target));
        },
        "click .btn-2": function (e) {
            // do something else
            toggleActive($(e.target));
        }
    });
})();

// toggleActive is inaccessible here

【讨论】：