在JavaScript對象或外部有事件會更好嗎？

在JavaScript對象或外部有事件會更好嗎？在JavaScript對象或外部有事件會更好嗎？

例如下面是一些簡單的代碼來產生在頁面底部彈出一個工具欄（我使用jQuery在這裏）：

tool_bar = {  
    show : function() { 
    $('#bottomBox') 
     .show() 
     .animate({ 'bottom' : '0' }, 700) 
    ; 
    }, 
    close : function() { 
    $('#bottomBox').hide();  
    } 
}; 

$(function() { 
    $('#bottomBox span').click(function() { 
    tool_bar.hide(); 
    }); 
}); 

window.onload = function() { 
    tool_bar.show(); 
};

在上面我有tool_bar外的事情目的。這是更好還是這個：

tool_bar = {  
    show : function() { 
    window.onload = function() { 
     $('#bottomBox') 
     .show() 
     .animate({ 'bottom' : '0' }, 700) 
     ; 
    }; 
    }, 
    close : function() { 
    $('#bottomBox span').click(function() { 
     $('#bottomBox').hide();  
    }); 
    } 
}; 

$(function() { 
    tool_bar.close(); 
}); 

tool_bar.show();

應該提到，兩者都有效。我只是想知道什麼是更好的做法。

來源

2011-10-26 TK123

我建議封裝是一個有價值的目標。這意味着你封裝了該對象內的一個對象的行爲。外部世界應該能夠控制安裝或移除對象，並且能夠控制客戶端可能想要的任何其他行爲，但是在對象「內部」的行爲應該完全在對象內部實現（至少對於默認行爲）。

在您的具體情況，我想你應該讓外部代理安裝工具欄或刪除工具欄，但一旦安裝該工具欄的操作應該由工具欄本身來處理。

我建議像這樣憑藉這些優勢的實現：

所有的行爲都被封裝在對象中
因爲ID在傳遞給構造，就可以有一個以上的
對象負責管理它自己的事件處理程序，外部世界不必知道這一點。
它有show()和hide()外部可用的方法。
您可以輕鬆添加其他行爲。

你會實現這樣的工具欄：

var bottomToolbar = new tool_bar("bottomBox", true);

而且，這裏是該對象的代碼：

// id is a required argument 
// show is an optional argument (true means to show it as soon as possible) 
var tool_bar = function(id, show) { 
    this.id = '#' + id; 

    this.show = function() { 
     $(this.id).show().animate({ 'bottom' : '0' }, 700); 
    }; 

    this.hide = function() { 
     $(this.id).hide(); 
    }; 

    // .ready() code will either be fired immediately if document already ready 
    // or later when document is ready, so the code can be used either way 
    $(document).ready(function() { 
     if (show) { 
      this.show(); 
     } 
     $(this.id + " span").click(function() { 
      this.hide(); 
     }); 
    }); 
}

來源

2011-10-26 23:05:08 jfriend00

我只想做：

$(function() { 

    var bottom = $('#bottomBox') 
    .show() 
    .animate({ 
     'bottom': '0' 
    }, 700); 

    $('span', bottom).click(function() { 
    bottom.hide();  
    }); 

});

你也可以讓它變成一個插件：

$.fn.toolbar = function(){ 

    this 
    .show() 
    .animate({ 
     'bottom': '0' 
    }, 700); 

    $('span', this).click(function() { 
    $(this).parent().hide();  
    }); 

    return this; 

} 

$(function() { 

    $('#bottomBox').toolbar(); 

}

來源

2011-10-26 21:38:45 Guffa

看來，OP有一個人'show（）'方法有一個很好的理由。隱藏之後，能夠再次顯示它會很高興。你的實現不再有'show（）'方法。 – jfriend00

@ jfriend00：看起來並不如此。問題中的第二個實現沒有這種展示方法。 – Guffa

好的，但第一個實現。 – jfriend00

那些你有一些聲明的或內置的 - 它並不真正的問題，在哪裏你重新定義它的價值;

在你的情況下，兩個代碼的結果將是相同的。唯一的區別是，當你聲明：var x = "x";以外的函數或者如果或者任何運算符 - 它將成爲一個全局變量，並立即賦值。您也可以將空變量var x;聲明爲全局變量，並按函數或通過任何運算符分配值，該運算符將停留在此處。由於window.onload是一個全局對象的事件 - 沒關係，你在哪裏給它賦值。

來源

2011-10-26 21:41:41

我贊成機制和政策的分離，所以在你的例子我會組織我的代碼在第一種方式。

第二種方式是不壞雖然，我只是一個）調用函數不同的東西像showOnLoad()，和b）使用正確的事件註冊（Guffa的回答有什麼可能註冊一個「上的最好辦法加載「事件），而不是分配到window.onload。

來源

2011-10-26 21:48:24 millimoose

在JavaScript對象或外部有事件會更好嗎？

回答

相關問題