JavaScript 기능을 최소화 하시겠습니까?

Question

함수/호출 프로 시저가 동일한 JavaScript 함수 코딩을 최소화하는 방법이 있습니까? ...

자바 스크립트 나는 좋은 방법은 그것을 설명 할 완전히 모르겠지만 여기에 아래의 코드는 다음과 같습니다

$(function() { 
$('#CartDialog').dialog({ 
    autoOpen:false, 
    title:"Shopping Cart", 
    width:600, 
    minWidth:600, 
    maxWidth:600, 
    minHeight:300, 
    maxHeight:600, 
    modal:true, 
    show:{effect: "blind"}, 
    hide:{effect: "fade"} 
    }); 
$('#CartLink').on('click', function() { 
    $('#CartDialog').dialog('open'); 
}); 
}); 
$(function() { 
$('#LoginDialog').dialog({ 
    autoOpen:false, 
    title:"Login/Register", 
    width:650, 
    maxWidth:650, 
    height:250, 
    maxHeight:600, 
    resizable:false, 
    modal:true, 
    show:{effect: "blind"}, 
    hide:{effect: "fade"} 
}); 
$('#LoginLink').on('click', function() { 
    $('#LoginDialog').dialog('open'); 
}); 
}); 
$(function() { 
$('#LogoutDialog').dialog({ 
    autoOpen:false, 
    title:"Logout Confirmation", 
    width:250, 
    height:250, 
    resizable:false, 
    modal:true, 
    show:{effect: "blind"}, 
    hide:{effect: "fade"} 
    }); 
$('#LogoutDialog').on('click', function() { 
    $('#LogoutDialog').dialog('open'); 
}); 
}); 
$(function() { 
$('#MyAccountDialog').dialog({ 
    autoOpen:false, 
    title:"Login/Register", 
    width:600, 
    minWidth:600, 
    maxWidth:600, 
    minHeight:300, 
    maxHeight:600, 
    modal:true 
    }); 
$('#MyAccountDialog').on('click', function() { 
    $('#MyAccountDialog').dialog('open'); 
}); 
}); 

홈페이지 문서 아이디어 : 나는

<div class="TopShortLinks" id"CartDialog"></div> 
<div class="TopShortLinks" id"LoginDialog"></div> 
<div class="TopShortLinks" id"LogoutDialog"></div> 
<div class="TopShortLinks" id"MyAccountDialog"></div> 

을하려고했는데 클래스를 호출 한 다음 div id를 사용하여 가능한 한 중앙 자바 스크립트 함수에 제안 할 아이디어를 고쳐서 현재 표시된대로 올바른 데이터를 결정해야합니다.

이해하기 쉽습니다.

Answer 1

내가 대화 창을 모두을 시작하는 데 사용됩니다 하나 개의 함수를 정의하는 일을 제안 :

function show_dialog(selector, settings){ 
    var default_settings = { 
    modal: true, 
    autoOpen: false, 
    minWidth:600, 
    minHeight:30, 
    ... 
    } 
    $.extend(default_settings, settings); 
    $(selector).dialog(default_settings); 
} 

당신은 관련 DOM 요소의 선택과 모든 고유의 설정을 포함하는 객체를 전달합니다 각 대화 상자. 이 함수에는 default_settings 개체가 정의되어 있습니다.이 개체에는 모든 호출에서 동일한 설정이 모두 들어 있지만 함수에 전달 된 설정 개체는 개체를 "병합하는"$.extend() function을 사용하여 이러한 기본값을 재정의 할 수 있습니다.

사용 예제 :

이

show_dialog("#CartDialog", { 
    minWidth:700, 
    maxWidth:500, 
    minHeight:100, 
    maxHeight:800 
}); 

이 함수 호출이 선택으로 #CartDialog를 사용하여 전달되는 값으로 기본 minWidth 및 minHeight 우선합니다. show_dialog에 정의 된 다른 모든 설정은 modal, autoOpen 등으로 유지됩니다.