Javascript 模块模式和文档.ready

我已经开始学习javascript模块模式，我有以下代码：

// PersonalInformation.js

var PersonallInformation = (function () { 

   $.validator.addMethod("checkPhoneNumber", function (value, element) {

        if (!value) return true;
        return /^((\+7)|8)(700|701|702|705|707|712|713|717|718,721|725|726|727|777)[0-9]{7}$/.test(value);
    }, "Wrong phone format");

    function updateQTip() {

        $('div.invalid_form').qtip({
            content: function (api) {
                var text = $(this).prev();
                return "<div class='tip_cont'><span class='simple cost'><span class='corner'></span>" + $(text).attr('data-description') + "</span></div>";
            },
            position: {
                target: 'mouse',
                adjust: { x: 5, y: 17 }
            },
            style: {
                tip: { corner: false }
            }
        });
    }

    function updateError() {
        $('.invalid_form').closest('.wrap_input').addClass('error');
        $('#reg_form_pay input').each(function(element) {
            if ($(this).hasClass('invalid_form')) {
                $(this).closest('.wrap_input').addClass('error');
            } else {
                $(this).closest('.wrap_input').removeClass('error');
            }
        });
        updateQTip();
    }

    function validateForm() {
        $("#reg_form_pay").validate({
            rules: {
                Email: { required: true, email: true },
                PhoneNumber: { required: true, checkPhoneNumber: true },
                FirstName: { required: true },
                Surname: { required: true }
            },
            messages: {
                Email: '',
                PhoneNumber: '',
                FirstName: '',
                Surname: ''
            },
            errorClass: "invalid_form",
            errorElement: "div",
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            onkeyup: false,
            showErrors: function (errorMap, errorList) {

                this.defaultShowErrors();
                updateError();
            }
        });
    }

    function privateInit() {
        validateForm();
        console.log('init ok');
    }


    return {
        init: privateInit,
    };
}());

是否可以避免在视图中调用

init

更新： 我用以下方式重写了它：

function library(module) {
    $(function() {
        if (module.init) {
            module.init();
        }
    });
    return module;
}

var PersonallInformation = library(function () {
...

简而言之，答案是否定的

validateForm方法使用DOM完成其工作。如果在document.ready之前调用init方法，则行为未指定

您必须调用document.ready中的某些方法

您并没有真正使用模块partern，因为实际上您只是在另一个函数中封装函数，所以如果您将整个代码从（function（）{…}（））移动到document.ready，那么您就可以将函数的最后一部分更改为

validateForm();
console.log('init ok');

Ie内联init函数

编辑

重写可能类似于：

 var setupValidate = (function () { 
    return function(options) {
          var defaultOptions = {
               qtipOptions : {
                  content: function (api) {
                      var text = $(this).prev();
                      return "<div class='tip_cont'><span class='simple cost'><span class='corner'></span>" + $(text).attr('data-description') + "</span></div>";
                   },
                   position: {
                     target: 'mouse',
                     adjust: { x: 5, y: 17 }
                   },
                   style: {
                      tip: { corner: false }
                   }
               },
               formSelector : "#reg_form_pay",
               invalidFormSelector : 'div.invalid_form',

         };
         options = $.extend(defaultOptions,options);
         $.validator.addMethod("checkPhoneNumber", function (value, element) {

            if (!value) return true;
            return /^((\+7)|8)(700|701|702|705|707|712|713|717|718,721|725|726|727|777)[0-9]{7}$/.test(value);
         }, "Wrong phone format");

         function updateQTip() {
            $(options.invalidFormSelector).qtip();
         }

    function updateError() {
        $(options.invalidFormSelector).closest('.wrap_input').addClass('error');
        $(options.formSelector).find("input").each(function(element) {
            if ($(this).hasClass('invalid_form')) {
                $(this).closest('.wrap_input').addClass('error');
            } else {
                $(this).closest('.wrap_input').removeClass('error');
            }
        });
        updateQTip();
    }

    function validateForm() {
        $(formSelector).validate({...});
    }

        validateForm();
        console.log('init ok');
  }
}());

---

你能建议如何重写它吗？

 var setupValidate = (function () { 
    return function(options) {
          var defaultOptions = {
               qtipOptions : {
                  content: function (api) {
                      var text = $(this).prev();
                      return "<div class='tip_cont'><span class='simple cost'><span class='corner'></span>" + $(text).attr('data-description') + "</span></div>";
                   },
                   position: {
                     target: 'mouse',
                     adjust: { x: 5, y: 17 }
                   },
                   style: {
                      tip: { corner: false }
                   }
               },
               formSelector : "#reg_form_pay",
               invalidFormSelector : 'div.invalid_form',

         };
         options = $.extend(defaultOptions,options);
         $.validator.addMethod("checkPhoneNumber", function (value, element) {

            if (!value) return true;
            return /^((\+7)|8)(700|701|702|705|707|712|713|717|718,721|725|726|727|777)[0-9]{7}$/.test(value);
         }, "Wrong phone format");

         function updateQTip() {
            $(options.invalidFormSelector).qtip();
         }

    function updateError() {
        $(options.invalidFormSelector).closest('.wrap_input').addClass('error');
        $(options.formSelector).find("input").each(function(element) {
            if ($(this).hasClass('invalid_form')) {
                $(this).closest('.wrap_input').addClass('error');
            } else {
                $(this).closest('.wrap_input').removeClass('error');
            }
        });
        updateQTip();
    }

    function validateForm() {
        $(formSelector).validate({...});
    }

        validateForm();
        console.log('init ok');
  }
}());

$(function(){
    setupValidate (/*with options if you'd like to change the default*/);
});