javascript - 用插件函数打破 jQuery 方法链

Question

我想要实现的是构建一个插件来对元素执行一些验证逻辑，但我想继续使用下一个链方法，但是如果停止并中止下一个链是不行的。

比如我有这个

;(function($, window, document, undefined) {
  var pluginName = 'check';

  $.fn[pluginName] = function(options) {
    return this.each(function() {
      if (!$.data(this, 'plugin_' + pluginName)) {
        $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
      }
    });
  }

  function Plugin(element, options) {
    // Do the logic here
  }
})(jQuery, window, document);

因此，为了在回调后继续链，您必须返回this，就像我在上面的插件中所做的那样。

jQuery( document ).ready( function($) {

button.check().on( 'click', function(){
    // do something
});});

但是如果我只想在满足check函数逻辑条件时才执行click函数呢。

Answer 1

您可以使用 Object.freeze() 创建一个普通对象防止对象的属性被改变；将对象分配给 $._data(this[0]).events在插件中不允许写入 "events"元素属性 $._data()对象。

;
(function($) {
  $.fn.check = function(type, conditions) {
    const el = this;
    let condition = conditions || el[0].tagName === "DIV";
    // if element `.tagName` is `"DIV"` do not set events
    if (condition && !type) {
      if (!$._data(el[0])["events"]) {
        let e = Object.defineProperty(new Object(), "events", {
          value: null
        });
        Object.freeze(e);
        $._data(el[0]).events = e

        return el
      }
    }
    if (type && type === "bool") {
      return condition
    }
    if (type && type === "delete") {
      $._data(el[0]).events = null;
      return this
    }
  }
})(jQuery);
$(function() {
  console.log("check called, do not attach events, try clicking DIV");
  $("div").check().on("click", function(e) {
      console.log(this)
    })
    .on("mouseover", function(e) {
      console.log(this)
    });
  // boolean 
  console.log("check boolean:", $("div").check("bool"));
  console.log("allow events in ten seconds");
  setTimeout(function() {
  // delete 
  console.log("check delete:", $("div").check("delete")[0].tagName);
  console.log("click DIV");
  $("div").on("click", function(e) {
     console.log(this)
  });
  }, 10000)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div>click</div>