私は現在 8 か月間 Javascript を学んでいます。5 か月前にフロント エンド開発者としての仕事を見つけ、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();
});