/dataset

The util used to get customise data(by HTML tag's data-attribute)

Primary LanguageJavaScript

dataset

The util used to get customise data(by HTML tag's data-attribute).It does not depend on and other javascript frameworks.

What is the dataset?

The dataset is a util used to get customise data(HTML tag data-attribute).It is very lightly,i hope you will enjoy it :-)

dataset's website:http://qiqicartoon.com/projects/dataset

Usage

HTML: Turn this
<div data-type="username" 
         data-age="23" 
         data-userAddress='{"province":"ZheJiang","city":"HangZhou"}'
         data-vip="true" data-email="null"
         data-company='{"china":"[\"Alipay\",\"Taobao\"]"}'
         data-avatars='[{"google":["img.png","img2.png"]}]'
>
</div>
Data: You want into this
{
  type: 'username',    {String}
  age: 23,             {Number}
  userAddress: {       {Object}
    province: 'ZheJiang',
    city: 'HangZhou'
  },
  vip: true,           {Boolean}
  email: null,         {Object}
  company:{            {Object}
     "china":["Alipay","Taobao"]
  },
  avatars:[{"google":["img.png","img2.png"]}] {Object}
}
So you can do this
dataset(document.querySelectorAll('div')[0])	

Yea, so easy!

Merits

It does not depend on and other javascript frameworks.

The reason why the dataset is lightly, because the dataset for HTML tag's [data-attribute] made simple encapsulate.

The dataset solves HTML5 element.dataset dont't deal with data type problem.Note that, HTML5 element.dataset put all the customise data are as string return.

The dataset compatible with the lower level of the browser(Don't supported HTML5),such as IE6,IE7 and IE8.

Compatible

  • Chrome all
  • Firefox all
  • Safari all
  • Opera all
  • IE6+
  • Windows Phone 7 IE
  • iOS Safari all
  • Android OS browser all
  • UC browser 7.9+

dataset qrcode

Shooting this code to open