Question

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

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

感谢任何帮助......提前感谢！

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);

});

Answer 1

以下内容仅供我参考，但您可能会发现它很有用。

根据您的应用程序所构成的内容进行思考可能会有所帮助，然后它们可能是模块的候选者。所以在你的例子中，“标头”似乎是你感兴趣的东西。

因此，使用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硬编码到模块中。因此，我们可以在需要此功能的其他应用程序中重用Masthead模块，但可能使用不同的DOM ID。

将。

这是一个简单的示例，但Backbone和Dojo等框架/库（以及更多，更多）更进一步。

如何将此代码分解为两个RequireJs模块

1 个答案: