1

我创建了下面的代码以将 2 个按钮动态加载到 ID 为masthead. 然后在showMenus单击每个按钮时运行一个名为的函数，运行一些 jQuery 动画。一切都包装在 RequireJS 模块中。

代码按原样工作正常，但我认为将其分解为两个单独的 RequireJS 模块/文件可能会更好：一个加载页面上的按钮，另一个运行该showMenus功能。我确实参考了RequireJS API 文档，但找不到答案。

任何帮助表示赞赏...在此先感谢！

require(['jquery'], function ($) {

  var header = document.getElementById("masthead"),
  $navMenu = $("#site-navigation-list"),
  $searchBox = $("#searchform"),
  menuButton = document.createElement("div"),
  searchButton = document.createElement("div"),
  showMenus;

  $(menuButton).attr("id", "menu");
  $(searchButton).attr("id", "search");

  header.appendChild(searchButton);
  header.appendChild(menuButton);

  // break the code below into its on RequireJS module?

  showMenus = function(btn,el) {
  $(btn).click(function() {
    if (el.is(":visible") ) {
      el.slideUp({
        complete:function(){
          $(this).css("display","");
        }
      });
     } else {
      el.slideDown();
     }
  });
};

showMenus(menuButton, $navMenu);
showMenus(searchButton, $searchBox);

});
4

1 回答 1

2

以下仅是我的意见，但您可能会发现它很有用。

从构成您的应用程序的事物的角度考虑可能会有所帮助，然后它们可能是模块的候选者。因此，在您的示例中，“标头”似乎是您感兴趣的东西。

因此，使用 RequireJS，我们可以创建一个表示通用刊头的新模块：

// Masthead module
define(['jquery'], function ($) {

    function showMenus (btn, el) {
        function toggle (el) {
            if (el.is(":visible")) {
                el.slideUp({
                    complete:function(){
                        $(this).css("display","");
                    }
                });
            } else {
                el.slideDown();
            }
        }
        $(btn).click(function() {
            toggle(el);
        });
    }

    // A Masthead is an object that encapsulates a masthead DOM element.
    // This is a constructor function.
    function Masthead (mastheadElement) {
        // 'this' is the masthead object that is created with the 'new'
        // keyword in your application code.
        // We save a reference to the jQuerified version of mastheadElement.
        // So mastheadElement can be a DOM object or a CSS selector.
        this.$mastheadElement = $(mastheadElement);
    }

    // Add a method to Masthead that creates a normal button
    Masthead.prototype.addButton = function (id) {
        var $btn = $("<div/>").attr("id", id);

        this.$mastheadElement.append($btn);

        return $btn;
    };

    // Add a method to Masthead that creates a 'toggling' button
    Masthead.prototype.addTogglingButton = function (id, elementToToggle) {
        // ensure we have a jQuerified version of element
        elementToToggle = $(elementToToggle);

        // Reuse the existing 'addButton' method of Masthead.
        var $btn = this.addButton(id);

        showMenus($btn, elementToToggle);

        return $btn;
    };

    // return the Masthead constructor function as the module's return value.
    return Masthead;
});

然后在我们的实际应用代码中使用这个模块：

// Application code using Masthead module
require(["Masthead"], function (Masthead) {
    // We create a new Masthead around an existing DOM element
    var masthead = new Masthead("#masthead");
    // We add our buttons.
    masthead.addTogglingButton("menu", "#site-navigation-list");
    masthead.addTogglingButton("search", "#searchform");
});

这种方法的优点是没有 DOM id 被硬编码到模块中。因此，我们可以在其他需要此功能但可能使用不同 DOM id 的应用程序中重用标头广告模块。

将其视为将事物是什么与我们如何使用它们分开可能会很方便。

This is a simple example, but frameworks/libraries like Backbone and Dojo (and many, many more) take this further.

于 2013-03-31T20:35:56.320 回答