Html5(1)

一. 自定义属性（dataset）

data-name:dataset.name
data-name-first:dataset.nameFirst

<div data-hello="world"></div>
  <script> var oDiv = document.getElementsByTagName("div")[0]; alert(oDiv.dataset.hello); </script>

自定义属性在属性库中有重要作用，如jquery mobile。

二. js加载

js的加载会影响后面内容的加载，很多浏览器都采用了并行加载js，但还是会影响其他内容。
html5的defer和async

• defer：延迟加载，会按顺序执行，在onload执行前会被触发
• async：异步加载，加载完就触发，有顺序问题

labjs库（js异步加载库）

三. 历史管理

onhashchange：改变hash值来管理，当hash值改变是触发此事件。
html5中history：
服务器下运行
pushState：三个参数：数据 标题（都没实现）地址（可选）popstate事件：读取数据 event.state
注意：网址是虚假加的，需要再服务器端指定对应页面，不然刷新后就找不到页面。

<div id="div1"></div>
<script> var btn = document.getElementById("btn"); var oDiv = document.getElementById("div1"); var json = {}; btn.onclick = function(){ var arr = randomNum(35,7); var num = Math.random(); json[num] = arr; oDiv.innerHTML = arr; window.location.hash = num; } window.onhashchange = function(){ alert("change"); oDiv.innerHTML = json[window.location.hash.substring(1)]; } function randomNum(sum,num) { var arr = []; var newArr = []; for(var i = 0; i < sum; i++) { arr.push(i); } for(var i = 0; i < num; i++) { newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1)); } return newArr; } </script>

html5中

<Button id="btn">随机选彩票</Button>
<div id="div1"></div>
<script> var btn = document.getElementById("btn"); var oDiv = document.getElementById("div1"); btn.onclick = function(){ var arr = randomNum(35,7); history.pushState(arr,''); oDiv.innerHTML = arr; } window.onhashchange = function(ev){ oDiv.innerHTML = ev.state } function randomNum(sum,1)); } return newArr; } </script>