智慧场景 数字孪生 开发资讯 设计沙龙
主页 > 洞察 > 开发资讯 > 微信开发
常见问题84 APP开发1348 微信开发61 网站开发196 APP行业动态181 APP运营16 课件制作8 小程序开发343 小程序运营8 新媒体运营87
开发方案
幼教数字化内容课件
大屏数据可视化
新零售渠道中台
医疗健康
最新文章
1.微信分销系统开发有哪些模式？需要注意哪些事项？
2.微信公众号开发公司之微信公众号运营
3.微信二次开发 一些你不知道的事！
4.开发电商公众号真的适合做电商运营吗？
5.开发微信小程序对企业有什么好处？上海小程序开发公司哪家好？
热门文章
最新标签
IT人力外包
智慧楼宇解决方案
数字孪生
数据可视化

  • H5开发（五）：HTML5 微数据、拖放、Web Workers

    adinnet / 2017-09-01 13:38 /微信开发

    HTML5 微数据

    微数据是一种在网页中提供附加语义的标准化方式。

    微数据允许我们定义自定义元素以及在网页中嵌入自定义属性。从较高的角度而言，微数组由一组名-值对组成。

    这个分组被称作条目，每个名-值对就是一个属性。条目和属性使用普通元素表示。

    示例

    • 用 itemscope 属性创建一个条目。

    • 给条目添加一个属性，itemprop 属性用于条目的后代。

    这里有两个条目，其中每个条目都有一个 "name" 属性：

    <div itemscope>
 <p>My name is <span itemprop="name">Zara</span>.</p>
</div>

<div itemscope>
 <p>My name is <span itemprop="name">Nuha</span>.</p>
</div>

    属性值通常是字符串，但是它可以是下列数据类型。

    全局属性

    微数据引入了五个全局属性，这些属性适用于在任意元素以及为数据提供上下文机制。

    属性描述
    itemscope用于创建一个条目。itemscope 属性是一个布尔值属性，说明页面上有微数据以及它从哪里开始。
    itemtype这个属性是一个有效的 URL，用于定义条目以及为属性提供上下文。
    itemid这个属性是条目的全局标识符。
    itemprop这个属性为条目定义属性。
    itemref这个属性提供了一个附加元素列表来抓取条目的名-值对。

    属性数据类型

    属性通常有一个正如上面的例子中提到的字符串值，但是它们的值也可以是 URLs。下面的例子中有一个 "image" 属性，它的值是一个 URL：

    <div itemscope>
    <img itemprop="image" src="tp-logo.gif" alt="TutorialsPoint">
</div>

    属性的值也可以是日期，时间或者日期和时间。下面是一个使用 time 元素和 datetime 属性的实现。

    <div itemscope>
My birthday is:
<time itemprop="birthday" datetime="1971-05-08">
   Aug 5th 1971
</time>
</div>

    属性本身也可以是一组名-值对，通过在元素上放置 itemscope 属性来声明属性。

    微数据 API 支持

    如果浏览器支持 HTML5 微数据 API，那么全局 document 对象上就会有一个 getItems() 函数。如果浏览器不支持微数据，getItems() 函数就会是 undefined。

    function supports_microdata_api() {
  return !!document.getItems;
}

    Modernizr 还不支持微数据 API 检测，因此我们需要使用像上面一样列出的函数来检测。

    HTML5 微数据标准包含 HTML 标记（主要用于搜索引擎）和一系列 DOM 函数（主要用于浏览器）。

    我们可以在网页中引入微数据标记，不理解微数据属性的搜索引擎将会忽略它们。但是，如果需要通过 DOM 访问或者操作微数据，我们还需要检查浏览器是否支持微数据 DOM API。

    定义微数据词汇表

    要定义一个微数据词汇表我们需要一个只想有效网页的命名空间 URL。例如  词汇表的微数据属性时，它会解析出这些属性并把他们存储到其他页面数据的旁边。

    HTML5 拖放

    拖放（DnD）是一个强大的用户界面相关的概念，借助鼠标点击的帮助，它让复制，重新排序以及删除条目变得很容易。这就允许用户在某个元素上点击并按住鼠标按键，把它拖到另外一个位置，然后释放鼠标按键把与元素放到该位置。

    要使用传统的 HTML4 实现拖放的功能，开发者要么使用复杂的 JavaScript 变成，要么使用 JavaScript 框架，比如 jQuery 等等。

    现在 HTML5 提出了拖放（DnD）API，为浏览器带来了原生拖放支持，让编码变得更容易。

    所有的主流浏览器比如 Chrome，FireFox 3.5 以及 Safari 4 等等都支持 HTML5 拖放。

    Drag 和 Drop 事件

    下面列出了一些在执行拖放操作各个阶段会触发的事件：

    事件描述
    dragstart用户开始拖动对象时触发。
    dragenter鼠标初次移到目标元素并且正在进行拖动时触发。这个事件的监听器应该之指出这个位置是否允许放置元素。如果没有监听器或者监听器不执行任何操作，默认情况下不允许放置。
    dragover拖动时鼠标移到某个元素上的时候触发。大多数时候，监听器触发的操作与 dragenter 事件相同。
    dragleave拖动时鼠标离开某个元素的时候触发。监听器应该移除用于放置反馈的高粱或插入标记。
    drag对象被拖拽时每次鼠标移动都会触发。
    drop拖动操作结束，放置元素时触发。监听器负责检索被拖动的数据以及在放置位置插入它。
    dragend拖动对象时用户释放鼠标按键的时候触发。

    注意：只会触发拖动事件；拖动操作期间鼠标事件，比如 mousemove 并不会触发。

    DataTransfer 对象

    所有 drag 和 drop 事件的事件监听器都接收一个 Event 对象作为参数，它有一个叫做 dataTransfer 的只读属性。event.dataTransfer 返回与事件相关的 DataTransfer 对象，如下所示：

    function EnterHandler(event) {
    DataTransfer dt = event.dataTransfer;
    .............
}

    DataTransfer 对象持有 drag 和 drop 操作相关的数据。可以检索这些数据以及设置 DataTransfer 对象相关联的各种属性，正如下面所阐述的：

    S.N.DataTransfer 属性及其描述
    1dataTransfer.dropEffect [ = value ] 

    • 返回当前选中的操作类型。

    • 这个属性也可以设置改变当前选中的操作。

    • 可选值为none，copy，link和move。

    2dataTransfer.effectAllowed [ = value ] 

    • 返回允许的操作类型。

    • 这个属性也可以设置改变允许的操作。

    • 可选值为none，copy，copyLink，copyMove，link，linkMove，move，all和uninitialized。

    3dataTransfer.types 

    返回列出设置给 dragstart 事件格式的 DOMStringList。此外，如果任意文件被拖拽，那么其中一个类型将会是字符串“Files"。

    4dataTransfer.clearData( [ format ] ) 

    移除指定格式的数据。如果省略参数则移除所有数据。

    5dataTransfer.setData(format, data) 

    添加给定的数据。

    6data = dataTransfer.getData(format) 

    返回指定的数据。如果没有该数据则返回空字符串。

    7dataTransfer.files 

    如果有，返回表示被拖拽文件的 FileList。

    8dataTransfer.setDragImage(element, x, y) 

    使用给定的元素更新拖拽反馈信息，替换先前指定的反馈信息。

    9dataTransfer.addElement(element) 

    把给定的元素添加到用来渲染拖拽反馈的元素列表。

    Drag 和 Drop 过程

    下面是实现拖拽操作的步骤：

    步骤1：创建一个可拖拽对象

    下面是要采用的步骤：

    • 如果想要拖动某个元素，需要设置元素的 draggable 属性为 true。

    • 给 dragstart 设置一个事件监听器存储拖拽数据。

    • 事件监听器 dragstart 会设置允许的效果（copy，move，link或者是组合形式的）。

    下面是一个让对象可拖拽的示例：

    <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA, #boxB {
   float:left;padding:10px;margin:10px; -moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px;  }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
   ev.dataTransfer.effectAllowed='move';
   ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
   ev.dataTransfer.setDragImage(ev.target,0,0);
   return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to drag the purple box around.</div>

<div id="boxA" draggable="true" 
        ondragstart="return dragStart(event)">
   <p>Drag Me</p>
</div>
<div id="boxB">Dustbin</div>
</center>
</body>
</html>

    便于学习上述概念 - 请使用更新版的 FireFox，Safari 或 Chrome 进行<a rel="nofollow" href="http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-58.htm" "="" style="box-sizing: border-box; padding: 0px; margin: 0px; background-color: transparent; color: rgb(45, 133, 202); text-decoration: none;">在线练习。

    步骤2：放置对象

    为了接受放置，放置目标至少要监听三个事件。

    • dragenter 事件，用来确定放置目标是否接受放置。如果放置被接受，那么这个事件必须取消。

    • dragover 事件，用来确定给用户显示怎样的反馈信息。如果这个事件被取消，反馈信息（通常就是光标）就会基于 dropEffect 属性的值更新。

    • 更后是 drop 事件，允许执行真是的放置。

    下面是把一个对象放入另一个对象的示例：

    <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA, #boxB {
   float:left;padding:10px;margin:10px;-moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px;  }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
   ev.dataTransfer.effectAllowed='move';
   ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
   ev.dataTransfer.setDragImage(ev.target,0,0);
   return true;
}
function dragEnter(ev) {
   event.preventDefault();
   return true;
}
function dragOver(ev) {
    return false;
}
function dragDrop(ev) {
   var src = ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(src));
   ev.stopPropagation();
   return false;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to move the purple box into the pink box.</div>

<div id="boxA" draggable="true" 
     ondragstart="return dragStart(event)">
   <p>Drag Me</p>
</div>
<div id="boxB" ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">Dustbin</div>
</center>
</body>
</html>

    HTML5 Web Workers

    JavaScript 被设计为运行在一个单线程环境中，这意味着多个脚本不能同时运行。考虑这样一种情况，我们需要处理 UI 事件，查询和处理大量的 API 数据以及操作 DOM。

    在 CPU 使用率过高的情况下 JavaScript 还会造成浏览器假死。我们来举一个简单的例子，用 JavaScript 运行一个大循环：

    <!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
  <script>
      function bigLoop(){
         for (var i = 0; i <= 10000000000; i += 1){
            var j = i;
         }
         alert("Completed " + j + "iterations" );
      }
      function sayHello(){
         alert("Hello sir...." );
      }
  </script>
</head>
<body>
   <input type="button" onclick="bigLoop();" value="Big Loop" />
   <input type="button" onclick="sayHello();" value="Say Hello" />
</body>
</html>

    尝试运行在线示例来查看其结果 — 可以使用任何浏览器运行在线尝试。

    停止 Web Workers

    Web Workers 不能自行停止，但是启动它们的页面可以通过调用 terminate() 方法停止它们。

    worker.terminate();

    被终止的 Web Worker 将不再响应消息或者执行任何附加的计算。我们并不能重启 worker；但是，可以使用同一 URL 创建一个新的 worker。

    错误处理

    下面的代码展示了一个在 Web Worker JavaScript 文件中错误处理函数输出错误日志到控制台的例子。这个带有错误处理代码的例子如下所示：

    <!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
  <script>
      var worker = new Worker('bigLoop.js');
      worker.onmessage = function (event) {
        alert("Completed " + event.data + "iterations" );
      };

      worker.onerror = function (event) {
         console.log(event.message, event);
      };

      function sayHello(){
         alert("Hello sir...." );
      }
  </script>
</head>
<body>
   <input type="button" onclick="sayHello();" value="Say Hello"/>
</body>
</html>

    浏览器支持检测

    下面的代码可用于浏览器中检测是否支持 Web Worker 特性：

    <!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
  <script src="/js/modernizr-1.5.min.js"></script>
  <script>
   if (Modernizr.webworkers) {
      alert("Congratulation!! you have web workers support." );
   }else{
      alert("Sorry!! you do not have web workers support." );
   }
  </script>
</head>
<body>
   <p>Checking for Browser Support for web workers</p>
</body>
</html>

    可以尝试在线示例查看结果 - 请使用不同的浏览器运行<a rel="nofollow" href="http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-62.htm" "="" style="box-sizing: border-box; padding: 0px; margin: 0px; background-color: transparent; color: rgb(45, 133, 202); text-decoration: none;">在线示例。


本文标签：
上一篇：高端网站如何设计？高端网站设计注意事项有哪些？ 下一篇：房地产行业网站建设方案