從數組中執行頁面模塊

我有這個示例模塊，我想在不進行單獨調用的情況下進行初始化，而是通過在使用者頁面中有一個數組來使每個頁面都有一個包含所需模塊名稱的小陣列。從數組中執行頁面模塊

我已經這樣做了，但它不會調用模塊：

var navModule = (function() { 
    var nav = {}; 
    var navHTMLobjs = { 
     navList: $('#nav'), 
     listItems: $('#nav').find('li'), 
     listLinks: $('#nav').find('a') 
    }; 
    nav.bindOver = function() { 
     navHTMLobjs.navList.on('mouseover mouseout', 'li a', function(e) { 
      if (e.type == 'mouseover') { 
       $(this).addClass('over'); 
      } 
      if (e.type == 'mouseout') { 
       $(this).removeClass('over'); 
      } 
     }); 
    }; 
    nav.isOverBinded = function() { 
     return navHTMLobjs.navList.data('events').hasOwnProperty('mouseover') && navHTMLobjs.navList.data('events').hasOwnProperty('mouseout'); 
    }; 
    nav.turnOff = function() { 
     navHTMLobjs.navList.off('mouseover mouseout'); 
    }; 
    nav.isNavTurnedOff = function() { 
     return !navHTMLobjs.navList.data.hasOwnProperty('events'); 
    }; 
    nav.init = function() { 
     this.bindOver(); 
    }; 
    return nav; 
}); 
//var myNav = new navModule($('#nav')); 
//myNav.init(); 
// So I want to only include this array which will be written by 
//back end and each page will only have its required bits. 
var pageModules = ['navModule']; 
for (var m in pageModules) { 
    var fn = window[pageModules[m]]; 
    //var fn = Function(pageModules[m]); This says navModule is not defined :(
    if (typeof fn === 'function') { 
     var inner = new fn(); 
     inner.init(); 
    } 
}

目前FN返回未定義

也讓我知道這是去了解這一點，如果沒有正確的方式也許是一個建議。

感謝

來源

2012-07-12 XGreen

它會更好，如果你能突出什麼是你要尋找的。所以我們可以更好地回答。 – Sujay 2012-07-19 13:06:18

可能是我沒有得到一點，卜如果去掉括號覆蓋匿名函數比它不會被立即envoked並會訪問通過window[pageModules[m]]

你的情況來調用時功能立刻envokes nav.init - > nav.bindOver，它沒有任何return語句，所以結果undefined

var navModule = function() { 
       var nav = {}; 
       var navHTMLobjs = { 
        navList: $('#nav'), 
        listItems: $('#nav').find('li'), 
        listLinks: $('#nav').find('a') 
       }; 
       nav.bindOver = function() { 
        navHTMLobjs.navList.on('mouseover mouseout', 'li a', function(e) { 
         if (e.type == 'mouseover') { 
          $(this).addClass('over'); 
         } 
         if (e.type == 'mouseout') { 
          $(this).removeClass('over'); 
         } 
        }); 
       }; 
       nav.isOverBinded = function() { 
        return navHTMLobjs.navList.data('events').hasOwnProperty('mouseover') && navHTMLobjs.navList.data('events').hasOwnProperty('mouseout'); 
       }; 
       nav.turnOff = function() { 
        navHTMLobjs.navList.off('mouseover mouseout'); 
       }; 
       nav.isNavTurnedOff = function() { 
        return !navHTMLobjs.navList.data.hasOwnProperty('events'); 
       }; 
       nav.init = function() { 
     console.log('i am called'); 
        this.bindOver(); 
       }; 
       return nav; 
      };

來源

2012-07-17 11:40:52 shershen

使用你的代碼複製，粘貼和增加console.log(fn);之前，如果段工作正常，顯示功能的fn內容。

你得到的未定義可能來自於inner.init()什麼都不返回的事實。

來源

2012-07-17 10:58:29

檢查了這一點。它似乎爲我工作得很好。 http://jsfiddle.net/sujay/ec8bU/

你會注意到的唯一區別是，我已經刪除了navModule定義之前var關鍵字。

我建議你願意的東西去像RequireJS

來源

2012-07-17 12:07:25 Sujay

我有一個服務器端機制，只爲視圖中的需求模塊提供服務。我是否仍然需要js來啓動它們？ – XGreen 2012-07-18 09:22:36

@XGreen不，你不知道。這只是一個建議。它使事情變得簡單。我希望jsFiddle可以正常工作。如果您遇到問題，請告訴我。 – Sujay 2012-07-18 10:11:53

從數組中執行頁面模塊

回答

相關問題