如何將此代碼分解爲兩個RequireJs模塊

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代碼被硬編碼到模塊中。因此，我們可以在需要此功能的其他應用程序中重複使用標頭廣告模塊，但可能使用不同的DOM標識。

這可能是認爲這是分離什麼東西都是從我們如何使用它方便。

這是一個簡單的例子，但像Backbone和Dojo（還有很多更多）等框架/庫可以進一步提高這一點。