2

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、次のようにビューでメソッドを呼び出す必要があります。

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

ビューで呼び出す必要がないようにすることは可能initですか?

更新: 次のように書き直しました。

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

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

1 に答える 1

3

短い答えはノーです

validateForm メソッドは DOM を使用してその作業を行います。document.ready の前に init メソッドを呼び出した場合、動作は規定されていません。

document.ready で何らかのメソッドを呼び出す必要があります。

実際には関数を別の関数にカプセル化しているだけなので、実際にはモジュール partern を使用していないため、コード全体を (function (){...}()) 間でドキュメントに移動すると、同じ種類のカプセル化が行われます。その場合、関数の最後の部分を次のように変更できます

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*/);
});
于 2012-10-02T09:24:01.587 に答える