Question

我想创建一个灵活的jquery插件来处理表单，这是我的标记+代码：

<div id="myform" validate="1">form</div>

    <script>

        (function ($) {
            $.fn.myForm = function()
            {
                var me = this;
                if(me.attr("validate"))
                {
                    me.validate();
                }
            };

        })(jQuery);

        // code from external file eg. myform_validate.js
        $.fn.myplugin.validate = function () {
            // form validation here
            alert("validate");
        };

        $(document).ready(function(){
            $('#myform').myForm();
        });

    </script>

我想要实现的是一些插件插件结构，这意味着myForm是每个项目的基本插件，如果需要，我会在插件中添加额外的功能/方法，如表单验证或图像上传器（通过加载额外的外部脚本）。这应该是没有实例化，直接在插件内。正如您所料，上面的代码不起作用..：/ 任何想法，如果可能的话？感谢

Answer 1

可能有很多方法可以达到预期的效果。在这里，检查来自＆＃34;外部文件＆＃34;的validate方法。已定义，如果是，则将validate设置为myForm的属性;利用Function.prototype.call在this

中设置validate

＆＃13;

(function($) {
  function myForm() {
    me = this;
    if (me.attr("validate")) {
      if (myForm.validate) {
        myForm.validate.call(me)
        .text(me.text() + " validated")
        .css("color", "green");
      }
    };
    return me
  };
  try {
    if (validate && typeof validate === "function") {
      myForm.validate = validate
    } 
    // catch `ReferenceError` if `validate` is not defined
  } catch (e) {
    alert(e.message)
  }

  $.fn.myForm = myForm;

})(jQuery);

// code from external file eg. myform_validate.js
$(document).ready(function() {
  $("#myform").myForm();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
  // external file
  function validates() {
    // form validation here
    console.log(this)
    alert("validate");
    // `this` : `#myform`
    return this
  };
</script>
<div id="myform" validate="1">form</div>

＆＃13;

动态扩展jQuery插件

1 个答案: