Javascript “数据包含”属性可能如何工作？

我正在分析一个站点，我看到div上有一个datainclude属性

根据一篇Resig文章，我看到数据是HTML5规范的一部分

我还可以看到div在向服务器发出xhr请求时被一些响应HTML所取代。此机制基本上用于在客户端加载模块

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

我的问题是XHR是如何启动的

我习惯于通过ID、类或某种选择器访问DOM

我看不到选择器，所以我不知道它是如何完成的

以下是Chrome发布的js列表

---

现在，许多JS库在很多东西上使用任意前缀。检查站点正在使用的库，然后阅读其文档以了解其存在的原因。

如今，许多JS库使用任何前缀。检查站点正在使用的库，然后阅读它的文档以了解它存在的原因。

您可以根据数据属性选择DOM元素，或者根据它们的值，或者仅根据它们的存在。例如，使用jQuery，该选择器将为您提供具有data include属性的所有元素：$[data include]。所以大致上，如果您想加载一组由数据属性data include在一组div中给出的URL，您可以这样做

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

---

这就是收集这些元素的方式，然后我假设您循环遍历它们并从该属性加载脚本。这回答了您的问题吗？

您可以通过数据属性选择DOM元素，或者根据它们的值，或者仅仅是它们的存在。例如，使用jQuery，该选择器将为您提供具有data include属性的所有元素：$[data include]。所以大致上，如果您想加载一组由数据属性data include在一组div中给出的URL，您可以这样做

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

---

这就是收集这些元素的方式，然后我假设您循环遍历它们并从该属性加载脚本。这是否回答了您的问题？

数据包含由客户端包含使用。带有data include='URL'的元素将自动替换为URL的内容。

数据包含由-client-side include使用。包含数据include='URL'的元素将自动替换为URL的内容。

查看的源代码后，我了解到这是如何完成的：

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编写得更短，但这并不是必需的，因为对于这样一个简单的任务，您必须包含一个完整的库

在查看的源代码后，我了解到这是如何完成的：

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编写得更短，但这并不是必需的，因为对于这样一个简单的任务，您必须包含一个完整的库

您正在查看的站点。它使用什么javascript库？如果您没有看到任何选择器，那么很可能没有使用Jquery。可能是Angular.js？如果使用jQuery，可以使用.data“include”获取此属性，它将为您提供脚本中的值，然后您可以对其进行操作。@Tchi-我在脚本中添加了一个列表question@Chrill-很高兴知道，但是jQuery是如何做到的，我的意思是什么是按属性搜索的DOM方法？可能是基于给定的库使用jQuery完成的。您正在查看的站点。它使用什么javascript库？如果您没有看到任何选择器，那么很可能没有使用Jquery。可能是Angular.js？如果使用jQuery，可以使用.data“include”获取此属性，它将为您提供脚本中的值，然后您可以对其进行操作。@Tchi-我在脚本中添加了一个列表question@Chrill-很高兴知道，但是jQuery是如何做到的，我的意思是，按属性搜索的DOM方法是什么？可能是基于给定的库使用jQuery完成的。我只是在想如何使用jQuery用10行代码编写这个方法。@如果您在原始问题中提到这一点，cadegalt会很好。@cadegalt实际代码是35行，但大部分都是XMLHttpRequest样板文件。但是他们仍然觉得有必要提供一个最小化的版本。是的，它适用于现代浏览器，因为它不包括抽象所有类型ajax请求的facade模式。我认为ajax请求的jQuery有数百行代码。我喜欢这种风格的编码，简单、现代、切中要害。我只是在想如何使用jQuery用10行代码编写它。@cadegalt如果你在你的或

---

原始问题。@cadegalt实际代码是35行，但大部分是XMLHttpRequest样板文件。但是他们仍然觉得有必要提供一个最小化的版本。是的，它适用于现代浏览器，因为它不包括抽象所有类型ajax请求的facade模式。我认为ajax请求的jQuery有数百行代码。我喜欢这种风格的编码，简单，现代，切中要害。