Question

我正在创建一个大约6页的基本网站，我的javascript结构设置如下：

var MYSITE = {};

// this gets the class on the body in the HTML
MYSITE.getPage = function(){
   var _bodyClass = $('body').attr('class').split(/\s/),
       curPage    = _bodyClass[ 0 ];
   return curPage;
};

MYSITE.Common = (function(){
    var init = function(){
       // do global stuff
    };       

    return {
       init: init 
    }
})();

MYSITE.Home = (function(){
   var init = function(){
       // do homepage specific stuff
   };
   return {
       init: init
   }
})();

MYSITE.About = (function(){
   var init = function(){
       // do about page specific stuff
   };
   return {
       init: init
   }
})();

// etc

// DOM Ready
$(function() {
    MYSITE.Common.init();

    if( MYSITE.getPage() === 'home' ) {
        MYSITE.Home.init();
    }

    if( MYSITE.getPage() === 'about' ) {
        MYSITE.About.init();
    }

    // etc
});

我想根据HTML中的body类来调用这些特定的函数。到目前为止我已经尝试了这个并且它有效，但每次我添加页面时我都要更新我的JS。

如何根据HTML中的body类自动触发正确的模块功能？

Answer 1

使用bodys类引用对象中的属性名称，只需首先将首字母大写。

$(function() {
    MYSITE.Common.init();

    var site = MYSITE.getPage();

    site = site.charAt(0).toUpperCase() + site.slice(1); // capitalize first

    MYSITE[site].init();
});

基于Body Class的自动调用函数

1 个答案: