动态扩展 jQuery 插件答案

【问题标题】：dynamically extend jQuery plugin动态扩展 jQuery 插件
【发布时间】：2016-02-19 18:11:13
【问题描述】：

我想创建一个灵活的 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 是每个项目的基础插件，如果需要，我会向插件添加额外的功能/方法，如表单验证或图像上传器（通过加载额外的外部脚本）。这不应该没有实例化，直接在插件内部。如您所料，上面的代码不起作用..：/ 如果可能的话，有什么想法吗？谢谢

【问题讨论】：

this 不是你想象的那样。在所有$.fn.someMethod() 中，它是由选择器表示的元素集合，它允许return this 用于jQuery 方法链接
这是一个非常大的问题，因为没有比其他方法更好的方法......这也取决于您最终想要什么。这是一个完全有效的示例 (jsfiddle.net/jfqatfvz)，但经过简化...
插件插件我认为你的意思是工厂。查看 jQuery 的 widget factory 以获得使用或灵感。

标签： javascript jquery jquery-plugins

【解决方案1】：

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

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

<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>

【讨论】：