阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.watch 中文 API 文档

      插件 jQuery.watch 中文 API 文档 https://github.com/RickStrahl/jquery-watch

      一个 jQuery 插件,用于通知您元素中的 CSS,属性或属性更改

      这个小型 jQuery 插件允许您监视对任何 DOM 元素的 CSS 样式,属性或属性的更改,并触发回调以响应受监视样式或属性的任何更改。

      您可以指定要监视的元素和任意数量的 CSS 属性属性或属性名称,如果其中任何一个属性或属性名称发生更改,则会通过您提供的函数委托通知您更改。函数委托接收具有属性名称和当前值数组的对象,以及触发更改的索引。

      用法

      要使用该插件,请在页面中添加对 jQuery 的引用和对此插件的引用:

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="scripts/jquery-watch.min.js"></script>
      
      

      要连接一个元素以便在脚本代码中进行监视,请使用:

      // some element to monitor
      var el = $("#notebox");
      
      // hook up the watcher
      el.watch({
          // specify CSS styles or attribute names to monitor
      	properties: "top,left,opacity,attr_class,prop_innerHTML",
      
          // callback function when a change is detected
          callback: function(data, i) {
      		var propChanged = data.props[i];
              var newValue = data.vals[i];
      
      		var el = this;
      		var el$ = $(this);
      
              // do what you need based on changes
              // or do your own checks
      	}
      });
      

      您只需指定要监视的 CSS 样式或属性,然后挂钩回调函数,并等待更改通知进入。

      请注意,您可以获得大量通知,尤其是在淡入淡出操作期间监视不透明度或在拖动操作期间监视顶部 / 左侧时,您应该将此函数中的代码保持在最低限度。

      观看属性和内容更改

      您还可以通过观察与给定 jQuery DOM 元素集关联的任何直接属性来监视属性更改。

      例如,假设您有一个更改 DOM 元素中某些文本的按钮:

      <button id="btnChangeContent">Change Content</button>
      <div id="SomeContent">Some Content that can change.</div>
      
      

      要捕获程序更改,您现在可以使用以下代码:

      $("#btnChangeContent").click(function () {
          // assign text programmatically
          $("#SomeContent").text("Hello - time is " + new Date());
      });
      // watch the content
      $("#SomeContent").watch({
          properties: "prop_innerHTML",
          watchChildren: true,
          callback: function (data, i) {
              console.log("text changed");
              alert('text changed' + data.vals[i]);
          }
      });
      

      每当您单击按钮并更改文本时,都会从观察者通知中弹出一个警告框。

      句法

      语法使用附加到元素选择器的标准 jQuery 插件行为:

      $("#Element").watch(options)
      
      

      选项看起来像这样:

      var options = {
          // CSS styles or Attributes to monitor as comma delimited list
          // For attributes use a attr_ prefix
          // Example: "top,left,opacity,attr_class,prop_innerHTML"
          properties: null,
      
          // interval for 'manual polling' (IE 10 and older)
          interval: 100,
      
          // a unique id for this watcher instance
          id: "_watcher",
      
          // flag to determine whether child elements are watched
          watchChildren: false,
      
          // Callback function if not passed in callback parameter
          callback: null
      }
      

      要设置的主要必需属性是 properties 可以包含任何 CSS 样式属性(顶部,左侧,不透明度,显示等),前缀为 attr_(attr_class,attr_readonly,attr_src 等)的属性名称或前缀为 prop_' (prop_innerHTML, prop_value etc). attr_ andprop_` 的属性名称 jQuery 的 attr()和 prop()函数分别用于检查相关的密钥。

      另一个必需属性是 callback 允许您指定在一个(或多个)属性更改时调用的回调函数的属性。回调函数接收两个参数,这两个参数是包含受监视属性数组和最新值的数据对象的实例。

      回调函数的实现如下所示:

      function changeCallback(data, i) {
      	// data object and index into the arrays
          var changedProperty = data.props[i];
          var newValue = data.vals[i];
      
          // this is the element affected
          var el$ = $(this)
      
          //... do your logic
      }
      
      

      如果您只关心收到通知并且您不关心更改或更新的值,则可以忽略这些参数 - 这实际上很常见。在这种情况下,您可以在代码中进行自己的检查,以查找已更改的内容或根据需要更新其他属性。

      如果您想知道哪个元素导致事件触发,您可以使用上面显示的代码来检索 changedProperty 和 newValuefor 属性。

      请注意,在回调函数执行期间关闭更改事件跟踪,以避免触发导致潜在浏览器锁定的递归事件。如果需要进行需要更新影响进一步更改事件的 DOM 的更改,则应该使用 setTimeout() 延迟执行,直到回调完成为止。

      示例用法

      举个例子,考虑一下你有几个 HTML 元素 - 两个盒子,你想把一个盒子从另一个盒子中取出:

      <div class="container">
          <div id="notebox" class="notebox">
              <p>
                  This is the master window. Go ahead drag me around and close me!
              </p>
              <p>
                  The shadow window should follow me around and close/fade when I do.
              </p>
              <p>
                  There's also a timer, that fires and alternates a CSS class every
                  3 seconds.
              </p>
          </div>
      
          <div id="shadow" class="shadow">
              <p>I'm the Shadow Window!</p>
              <p>I'm shadowing the Master Window.</p>
              <p>I'm a copy cat</p>
              <p>I do as I'm told.</p>
          </div>
      </div>
      
      

      有两个方框#notebox 和#shadow,我们要做的是监视#notebox 上的更改并影响#shadow 的行为以保持#shadow 绑定并同步到#notebox。

      以下代码监视#notebox,以便我们可以判断监视值何时更改:

      var el = $("#notebox");
      el.draggable();
      
      // Also update a CSS Class on a 3 sec timer
      var state = false;
      setInterval(function () {
          $("#notebox")
              .removeClass("class_true")
              .removeClass("class_false")
              .addClass("class_" + state);
          state = !state;
      }, 3000);
      
      // Hook up CSS and Class watch operation
      el.watch({
          properties: "top,left,opacity,attr_class",
          callback: watchShadow
      });
      
      // this is the handler function that responds
      // to the events. Passes in:
      // data.props[], data.vals[] and an index for active item
      function watchShadow(data, i) {
          // you can capture which attribute has changed
          var propChanged = data.props[i];
          var valChanged = data.vals[i];
      
          // element affected is 'this'
          var el = $(this);
          var sh = $("#shadow");
      
          // get master current position
          var pos = el.position();
          var w = el.outerWidth();
          var h = el.outerHeight();
      
          // and update shadow accordingly
          sh.css({
              width: w,
              height: h,
              left: pos.left + w + 4,
              top: pos.top,
              display: el.css("display"),
              opacity: el.css("opacity")
          });
      
          // Class attribute is more tricky since there are
          // multiple classes on the parent - we have to explicitly
          // check for class existance and assign
          sh.removeClass("class_true")
              .removeClass("class_false");
          if (el.hasClass("class_true"))
              sh.addClass("class_true");
      }
      

      当您运行此代码时,您基本上会看到#shadow 在拖动或移动时跟随#notebox,在#notebox 淡出时淡出。您还会看到#shadow 的 CSS 类每 3 秒更改一次,以响应#notebox 上的更改。

      请注意,上面的代码实际上并不依赖于传递给 watchShadow 函数的参数,而是进行自己的检查以查看需要更新的内容。事实上,此代码只是更新所有相关属性,无论它们是否已更改。虽然效率较低,但它允许更简单的代码,并且取决于您需要对 DOM 执行多少更改,无论如何都可以非常快。你的旅费可能会改变。如果您需要影响更大的更改,则使用特定属性更新 UI 可能更合适。

      看着儿童元素

      您还可以通过设置。watchChildren 为 true 查看突变记录来查看子节点的更改,以确定是否已删除或添加节点:

      $list.watch({
              properties: 'prop_innerHTML',
              watchChildren: true,
              callback: function (data, i, mutations) {
      
                  mutations.forEach(function(record) {
                      if (record.type === 'childList' && record.removedNodes.length > 0) {
                          console.info('removed item');
                      } else if (record.addedNodes.length > 0) {
                          console.info('added item');
                      }
                  });
              }
          });
      

      浏览器支持

      这个插件几乎适用于任何浏览器,因为它使用间隔轮询对旧版浏览器进行了回退。现代浏览器使用高效的 API 来通知浏览器的更改。

      此插件依赖 MutationObserver 于现代浏览器中的 API 来检测元素上的更改事件。所有当前版本的 Chrome,Mozilla,Safari,Safari iOS 和 Internet Explorer 11 均支持此 API。

      较旧版本的 IE(10 及更早版本)和任何不支持的旧浏览器 MutationObserver 仍然可以通过使用低效的 setInterval() 轮询机制来工作。它可以工作,但是在检测到的事件和回调执行之间总是存在轻微的,可配置的延迟。但是,此回退应该适用于任何浏览器,因此提供向后兼容性。您可以调整轮询延迟(默认为 10 毫秒),但是您要小心不要过于频繁地轮询以避免减慢浏览器操作,尤其是在较慢 / 较旧的设备 / 机器上。

      目录
      目录