javascript - 使用 Javascript 对象文字存储变量

Question

我正在使用 Paul Irish 的基于 DOM 的路由模式 ( http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/ ) 作为组织代码的一种方式。

我的问题是：如何使用这种方法存储/回调我想在整个站点中使用的变量？

通常我会做类似的事情：

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

Answer 1

除非我遗漏了什么，否则您应该能够执行以下操作。

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(){}
    }
}