javascript - 模块模式和 document.ready

Question

我已经开始学习 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,
    };
}());

为了使此代码正常工作，我必须在 View 中调用 init 方法，如下所示:

<script>
    $(document).ready(function() {
        PersonallInformation.init();
    })        
</script>

是否可以避免在 View 中调用init？

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

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

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

Answer 1

简短的回答是否定的

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

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

您并没有真正使用模块partern，因为您实际上只是将函数封装在另一个函数中，因此如果您在 (function (){...}()) 之间移动整个代码，您将拥有相同类型的封装到 document.ready 在这种情况下，您可以将函数的最后部分更改为

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

即内联 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');
  }
}());

然后你可以这样调用它:

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