如何模塊化jQuery？

Question

我想模塊化下面的代碼，也有在全球範圍內聲明的對象功能，這是一個非常不好的做法

$(document).ready(function() { 
    $('#registrationForm').on('submit', function(event) { 
     var valid = checkValidate(); 
     if(!valid) { 
      event.preventDefault(); 
     } 
    }); 

    $('#termsAccepted').on('change', function() { 
     if($(this).is(":checked")) { 
      $('.error').hide(); 
     } 
    }); 

    $('#otherPaymentId').hide(); 
    $('#paymentId').on('change', showPaymentIdBox); 
}); 

var showPaymentIdBox = function() { 
    var myRadio = $('input[type=radio][name=paymentId]:checked').val(); 

    if (myRadio == 0) { 
     $('#otherPaymentId').hide().val(''); 
    } else { 
     $('#otherPaymentId').show(); 
    } 
} 

var checkValidate = function() { 
    var validity = true; 

    if(!$('#termsAccepted').is(":checked")) { 
     $('.error').text('Please agree to the terms').show(); 
     validity = false; 
    } 

    if($('#otherPaymentId').val() == "" && $('input[type=radio][name=paymentId]:checked').val() == 1) { 
     $('.error').text('Please enter a valid payment id field').show(); 
     validity = false; 
    } 

    if(!checkEmail($('#otherPaymentId').val()) && $('input[type=radio][name=paymentId]:checked').val() != 0) { 
     $('.error').text('Please enter a valid payment id field').show() 
     validity = false; 
    } 

    return validity; 
} 

var checkEmail = function(email) { 
    if(email != '') { 
     var regex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; 
     return regex.test(email); 
    } else { 
     return false; 
    } 
} 

是使用匿名函數包裝一個方式來處理它，任何提示？一個人怎麼能改進呢？

Answer 1

您可以通過多種方式組織代碼。

1命名空間。

var myapp = myapp || {}; 

myapp = { 
init: function(){ 
    //initialization and events 
    $('#registrationForm').on('click', ...) 
    ... 
}, 
showPaymentIdBox: function(){}, 
checkValidate: function(){}, 
checkEmail: function(){} 
} 

2 AMD/CommonJS的模塊

Requirejs/Browserify等。

例如： - VAR showPaymentIdBox =要求（ 'showPaymentIdBox'）;

3 ES6

webpack/Babblejs

例如： 進口 「showPaymentIdBox」;

Answer 2

你爲什麼要模塊化？你想避免functuin名稱衝突？在這種情況下，您可以將文檔中的函數移動到文檔就緒塊中：

 
$(document).ready(function(){ 

    $('#registrationForm').on('submit', function(event){ 
     var valid = checkValidate(); 
     if(!valid){ 
      event.preventDefault(); 
     } 
    }); 

    $('#termsAccepted').on('change', function(){ 
     if($(this).is(":checked")){ 
      $('.error').hide(); 
     } 
    }); 

    $('#otherPaymentId').hide(); 
    $('#paymentId').on('change', showPaymentIdBox); 


    // define functions inside $(document).ready 
    function showPaymentIdBox() { ... } 
    function checkValidate() { ... } 
}); 

這與命名空間解決方案類似。

Christian

Answer 3

javascript中有很多命名空間模式。

請參閱this偉大的職位。

$(document).ready(function(){ 

    app.modularized.publ("xyz"); 

}); 

var app = window.app || {} 

// If "app" is defined use an empty object. "app" is the namespace 

app.modularized = function(){ // module 

    // private members 

    var privateVar, privateVar2, 

    foo = function() {}, 

    bar = function(text){ 
      alert(" ... " + text); 
    } 

    // public interface 

    return {   
     publ: bar 
    } 

}(); // a.k.a Revealing Module Pattern.