2013-05-06 82 views
1

我玩弄保羅愛爾蘭的基於DOM的路由模式(http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/)的方式來組織我的代碼。存儲變量與Javascript對象字面

我的問題是:如何在我的網站中使用此方法存儲/回撥變量?

通常我只會做這樣的事情:

var $button = $('.button'); 
var $link = $('.link'); 

如何集成的變量上面存儲到下面的模式?

NS = { 
    common : { 
    init: function(){ 
     $button.doSomething(); 
     } 
    }, 
    home : { 
    init: function(){ 
     $link.doSomethingElse(); 
     } 
    }, 
    utils : { 
    init: function(){} 
    } 
} 

UTIL = { 

    fire : function(func,funcname, args){ 
    // indicate your obj literal namespace here 
    var namespace = NS; 

    funcname = (funcname === undefined) ? 'init' : funcname; 
    if (func !== '' && namespace[func] && typeof namespace[func][funcname] == 'function'){ 
     namespace[func][funcname](args); 
    } 

    }, 

    loadEvents : function(){ 

    // get body id 
    var bodyId = document.body.id; 
    var classNm = document.body.className; 

    // fire up common 
    UTIL.fire('utils'); 
    UTIL.fire('common'); 

    //fire up page specific js 
    UTIL.fire(bodyId); 
    UTIL.fire(bodyId,classNm); 
    } 

}; 

// kick it all off here 
$(document).ready(UTIL.loadEvents); 
+0

Mhh,就像你用任何其他對象文字做的那樣。 'NS.home.init();'或存儲'NS.home.init = function(){};' – yckart 2013-05-06 22:08:41

+0

我想說的是,我想要在變量中存儲站點範圍的元素,以便我可以在我的JavaScript文件中的任何地方訪問它們.. – cusejuice 2013-05-06 22:15:16

+0

您是否考慮過使用其他JavaScript框架?最近我一直在使用http://knockoutjs.com/,並且可以擴展基本viewModel來保存這些功能。有點像繼承對象。 -HTH – vprasad 2013-05-06 23:20:09

回答

0

除非我遺漏了一些東西,否則您應該可以做到以下幾點。

NS = { 
    domElements: { 
     $button: null, 
     $link: null 
    }, 
    common : { 
     init: function(){ 
      if (NS.domElements.$button === null) { 
       NS.domElements.$button = $('.button'); 
      } 
      var $button = NS.domElements.$button; 
      $button.doSomething(); 
     } 
    }, 
    home : { 
     init: function(){ 
      if (NS.domElements.$link === null) { 
       NS.domElements.$link = $('.link'); 
      } 
      var $link = NS.domElements.$link; 
      $link.doSomethingElse(); 
     } 
    }, 
    utils : { 
     init: function(){} 
    } 
}