Javascript 如何模块化jQuery？

我正在尝试模块化下面的代码，有一些对象函数是全局声明的，这是一种非常糟糕的做法

$(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;
    }
}

---

使用匿名函数包装器是实现它的一种方法吗，有什么提示吗？如何改进这一点？

您可以用多种方式组织代码

1名称空间。 2个AMD/CommonJS模块 /等等

例如：- var showPaymentIdBox=require（'showPaymentIdBox'）

3 ES6 /

例如：

---

导入“showPaymentIdBox”

为什么要模块化？是否要避免函数名冲突？在这种情况下，只需将函数移到document ready块中即可：

$(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() { ... } }); $（文档）.ready（函数（）{ $（'#registrationForm'）。在（'submit'，函数（事件）{ var valid=checkValidate（）； 如果（！有效）{ event.preventDefault（）； } }); $（'#termsaccept'）。on（'change'，function（）{ 如果（$（this）.is（“：checked”））{ $（'.error'）.hide（）； } }); $（'#otherPaymentId'）.hide（）； $（'#paymentId'）。在（'change'，showPaymentIdBox）上； //在$（document.ready）中定义函数 函数showPaymentIdBox（）{…} 函数checkValidate（）{…} }); 这与名称空间解决方案类似

---

Christian

javascript中有许多名称空间模式

看到伟大的帖子

$(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.

“如何才能在这方面有所改进？”-嗯，你已经指出了一个不好的做法和一个普遍接受的解决方案，所以我从这里开始。。

$(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.