[英]How to start with OOP Javascript
我現在已經學習了8個月左右的Javascript,5個月前,我找到了從事前端開發人員的工作,並且我對JavaScript有了更深入的了解,這是我喜歡的事情。 最近,我注意到我的代碼看起來很丑陋,因為其中包含許多函數和全局變量,因此我開始閱讀一些有關設計模式的文章。 現在我有一些對我有用的東西,但是我不確定這是否是一個好習慣,無論如何,我希望你們看看代碼,並告訴我我可以改進什么,以及使用模塊化的更好方法是什么javascript中的模式,也可以建議我一些有關模塊化模式和Javascript的材料。
JAVASCRIPT代碼:
var responsiveModule = {
settings: {
device: false,
button: $(".responsive-btn"),
target: $("nav ul"),
mobileClass: "toggle-menu",
bgImage: '<img class="background-image" src="img/background.jpg" alt="">',
bgImageSelector: $(".background-image"),
windowWidth: $(window).width(),
},
init: function(){
responsiveModule.checkDevice();
responsiveModule.replaceImages();
responsiveModule.bindFunctions();
responsiveModule.listenResize();
},
checkDevice: function(){
if(this.settings.windowWidth > 992){
this.settings.device = "desktop";
} else {
this.settings.device = "mobile";
}
},
bindFunctions: function(){
var buton = this.settings.button,
muelleBtn = this.settings.muelleBtn;
buton.on("click touchstart", function(e){
e.preventDefault();
responsiveModule.animateMenu(responsiveModule.settings);
});
},
animateMenu: function(settings){
var device = settings.device,
target = settings.target,
mobileAnimation = settings. mobileClass;
if(device == "mobile"){
target.toggleClass(mobileAnimation);
}
},
replaceImages: function(){
var bgContainer = $("#main-content"),
bgImage = responsiveModule.settings.bgImage,
device = responsiveModule.settings.device,
backgroundSelector = $(".background-image");
if(device == "desktop" && backgroundSelector.length == 0){
bgContainer.append(bgImage);
}else if(device == "mobile" && backgroundSelector.length == 1){
backgroundSelector.remove();
}
},
listenResize: function(){
$(window).on("resize", function(){
responsiveModule.checkDevice();
responsiveModule.replaceImages();
responsiveModule.settings.windowWidth = $(window).width();
});
}
}
var tooltipModule = {
settings: {
tooltipState: false
},
init: function(){
tooltipModule.bindUIfunctions();
},
bindUIfunctions: function(){
var device = responsiveModule.settings.device;
if(device == "mobile"){
$(".ship").on("click", function(e){
e.preventDefault();
tooltipModule.manageTooltip(e);
});
}else{
$(".muelle-item").addClass("desktop");
}
},
manageTooltip: function(e){
var tooltip = $(e.currentTarget).next(),
tooltips = $(".tooltip");
tooltips.removeClass("display");
tooltip.addClass("display");
}
}
$(document).on("ready", function(){
responsiveModule.init();
tooltipModule.init();
});
你所擁有的還算不錯。 但是,我不喜歡您使用Singletons。 最好將ResponseModule和tooltipModule分開,但是我建議使用顯示模塊模式(這對我來說很喜歡):
var ResponsiveModule = function() {
var settings = {
// ...
};
var init = function() {
checkDevice();
replaceImages();
bindFunctions();
listenResize();
}
var checkDevice = function() {}
var bindFunctions = function() {}
var animateMenu = function() {}
var replaceImages = function() {}
var listenResize = function() {}
return {
init: init
}
}
var responsiveModule = ResponsiveModule();
responsiveModule.init();
您可以從該模塊創建所需數量的實例。 而且您有私有范圍。
這是有關javascript中設計模式的最佳書籍之一: http : //addyosmani.com/resources/essentialjsdesignpatterns/book/
以下是我對JavaScript的一些了解: http ://krasimirtsonev.com/blog/article/JavaScript-is-cool-modular-programming-extending
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.