`data-include`属性可能如何工作？

Question

我正在分析网站，我发现div上有data-include属性。

根据Resig文章，我发现data-是HTML 5规范的一部分。

我还可以看到div正在被一些响应HTML替换，因为它会向服务器发出xhr请求。这种机制主要用于加载模块客户端。

<div data-include='some.path'></div>

我的问题是XHR是如何解雇的？

我以前通过ID #或类.或某种选择器来访问DOM。

我看不到选择器，所以我无法弄清楚它是如何完成的？

以下是根据Chrome

的js列表

Answer 1

csi.js使用

data-include - 客户端包含。带有data-include='URL'的元素会自动替换为URL的内容。

Answer 2

您可以按数据属性选择DOM元素，可以是它们的值，也可以只是它们的存在。例如，使用jQuery，此选择器将为您提供具有data-include属性的所有元素：$("[data-include]")。因此粗略地说，如果你想在一堆div中加载由数据属性data-include给出的一堆URL，你可以这样做。

$('[data-include]').each( function() {
  var path = $(this).data('include');
  // Do something with this path
});

这就是你如何收集这些元素，然后我假设你遍历它们并从该属性加载脚本。这会回答你的问题吗？

Answer 3

如今，许多JS库都使用任何前缀来处理许多事情。检查网站使用的库，然后阅读它的文档以了解它的原因。

Answer 4

在查看csi.js的源代码后，我了解到它是如何完成的：

window.onload = function() {

  var elements = document.getElementsByTagName('*'),
      i;
  for (i in elements) {

    if (elements[i].hasAttribute && elements[i].hasAttribute('data-include')) {
        fragment(elements[i], elements[i].getAttribute('data-include'));
    }
  }
  function fragment(el, url) {
    var localTest = /^(?:file):/,
        xmlhttp = new XMLHttpRequest(),
        status = 0;

    xmlhttp.onreadystatechange = function() {
        /* if we are on a local protocol, and we have response text, we'll assume things were sucessful */
        if (xmlhttp.readyState == 4) {
            status = xmlhttp.status;
        }
        if (localTest.test(location.href) && xmlhttp.responseText) {
            status = 200;
        }
        if (xmlhttp.readyState == 4 && status == 200) {
            el.outerHTML = xmlhttp.responseText;
        }
      }

      try { 
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
      } catch(err) {
        /* todo catch error */
      }
  }
}

他基本上只使用vanilla JS并抓取所有元素，循环遍历它们以查看哪些属性具有data-include，然后为他找到的每个属性创建一个新的http请求。它非常简单，可以在jQuery中写得更短，但是没有必要，因为你必须为这么简单的任务包含一个完整的库。