原型继承问题

时间:2016-02-29 10:17:24

标签: javascript inheritance prototype

我是原型继承概念的新手,我有以下内容:

var dynamicPropertyOverview = new Tab($('#dynamicPropertyOverview'), $('.edit-search'));
dynamicPropertyController.init($('#dynamicPropertyOverview'), $('.edit-search'));
dynamicPropertyOverview.setUpPill(); 
$(window).resize(dynamicPropertyOverview.setUpPill.bind(dynamicPropertyOverview));

var dynamicPropertyReview = new Tab($('#dynamicPropertyReviews'), $('.edit-search'));
dynamicPropertyController.init($('#dynamicPropertyReviews'), $('.edit-search'));
dynamicPropertyReview.setUpPill(); 
$(window).resize(dynamicPropertyReview.setUpPill.bind(dynamicPropertyReview));

var dynamicPropertyMap = new Tab($('#dynamicPropertyMap'), $('.edit-search'));
dynamicPropertyController.init($('#dynamicPropertyMap'), $('.edit-search'));
dynamicPropertyMap.setUpPill(); 
$(window).resize(dynamicPropertyMap.setUpPill.bind(dynamicPropertyMap));

我的原型函数如下:

function Tab(page, pill) {
    this.page = page;
    this.pill = pill;
}

Tab.prototype.setUpPill = function () {
    if(dynamicPropertyController.isDynamicPropertyOverview(this.page) && checkMobileAndTabletVisibility.isTabletView()){
        dynamicPropertyController.addSearchModalMobileTrigger();
        if(!pillView.isSearchBarNotHidden()){
            pillView.hideSearchBarDisplayPill(this.page, this.pill);
        }
    }
    else{
        dynamicPropertyController.addSearchBarDesktopTrigger();
    }
};

我遇到的问题是每次调用一个新实例时:

1) var dynamicPropertyOverview = new Tab($('#dynamicPropertyOverview'), $('.edit-search'));
2) var dynamicPropertyReview = new Tab($('#dynamicPropertyReviews'), $('.edit-search'));
3) var dynamicPropertyMap = new Tab($('#dynamicPropertyMap'), $('.edit-search'));

将始终被下一个覆盖。

我认为解决这个问题的一种方法是将每个实例包装在if语句中:

 if($('#dynamicPropertyReviews').length){
    var dynamicPropertyReview = new Tab($('#dynamicPropertyReviews'), $('.edit-search'));
    dynamicPropertyController.init($('#dynamicPropertyReviews'), $('.edit-search'));
    dynamicPropertyReview.setUpPill(); 
    $(window).resize(dynamicPropertyReview.setUpPill.bind(dynamicPropertyReview));
}

虽然它有效但我想了解是否有更好的方法来解决这个问题。

添加了动态专家控制器:

var dynamicPropertyController = (function() {

    var searchBarModalTrigger = 'js-open-mobile-search';

    function isDynamicPropertyOverview(page){
        return page.length;
    }

    function addSearchModalMobileTrigger(){
        $('.edit-search').removeClass('display-searchBar').addClass(searchBarModalTrigger);
    }

    function addSearchBarDesktopTrigger(){
        $('.edit-search').removeClass(searchBarModalTrigger).addClass('display-searchBar');
    }

    function init(page, pill){
        if(page.length){
            pillView.hideSearchBarDisplayPill(page, pill);
        }

    }

    return {
        isDynamicPropertyOverview: isDynamicPropertyOverview,
        addSearchModalMobileTrigger: addSearchModalMobileTrigger,
        addSearchBarDesktopTrigger: addSearchBarDesktopTrigger,
        init: init
    }

})();

0 个答案:

没有答案