求js的封装问题，dataset

Question

<input name="birthdate" class="datepicker" data-defaultdate="-20y" readonly="readonly"/>
$(".datepicker").each(function(){
      var param = {
     autoSize : true,
changeMonth : true,
changeYear : true,
     dateFormat : "yy-mm-dd"
      };
      if (this.dataset && this.dataset.defaultdate)
      param.defaultDate = this.dataset.defaultdate;
      else
      param.minDate = 1;
      $(this).datepicker(param);
    });代码如上，data-defaultdate="-20y" 的值使用this.dataset.defaultdate 的值来获得，请问这是什么语法，this.dataset 是什么意思呀？？非常感谢！！！

Answer 1

这个 datepicker 是 jqueryui 里的一个组件吧。。
他应该把传过来的 data值付给了这个 jquery个体。
所以 data-xxx="nnn" 这种值应该都能以 this.dataset.xxx 得到相应的值。
当然，应该也可以通过 this.data('xxx') 来得到。
以上是我的猜测，具体的还请楼下来解答，或者直接看 jqueryui的代码。。

Answer 2

（1）dataset是HTML5中为html元素添加的一个新属性，这个属性的值是一个对象(该对象是html元素通过‘data-’方式添加的属性名及属性值的集合)。
比如你提到的input：<input name="birthdate" class="datepicker" data-defaultdate="-20y" readonly="readonly"/>
//接下来取一下input.dataset并验证
var ele=document.getElementsByTagName('input')[0],
    obj=ele.dateset;
    console.log(typeof obj);//浏览器控制台显示结果为：object
    console.log(obj);//浏览器控制台显示结果为：{defaultdate: "-20y"}再回到你的例子中，'if (this.dataset && this.dataset.defaultdate)'的用法就很简答明了了，同理如果input标签中还有其他的data-name=value，在js中都可以通过this.dataset.name来获取value。（2）不过通过dataset获取到的对象并不是js传统意义上的对象，它在HTML5中的名称是DomStringMap,它有许多有用且有意思的特性，但是它的兼容性不太好，楼主可以自行google一下。

Answer 3

谢谢纠错。
难道这是因jquery的用法而新出的标准？

Answer 4

谢谢纠错。
难道这是因jquery的用法而新出的标准？现在的web变得越来越复杂，需求也越来越多，原来DOM中的api在实现需求的时候会显得麻烦，效率低甚至无法满足需求只好借助js。因此，HTML5针对这种情况新增加了诸多特性，希望通过完善DOM使其尽可能的通过自身的元素以及API高效地完成文档操作，js可以更专注与程序（各司其职）。
所以，dataset的产生应该是基于一个这样的大的需求，具体到它被添加到新标准中，应该主要是为了简化节点属性操作以便与配合js实现更多的功能。楼主的日历插件就是个很好的例子。
jquery也只是js类库中的一个，这些新东西的添加可以说是和js的发展有关系，说是因为jquery而添加还是牵强一些。

Answer 5

谢谢纠错。
难道这是因jquery的用法而新出的标准？现在的web变得越来越复杂，需求也越来越多，原来DOM中的api在实现需求的时候会显得麻烦，效率低甚至无法满足需求只好借助js。因此，HTML5针对这种情况新增加了诸多特性，希望通过完善DOM使其尽可能的通过自身的元素以及API高效地完成文档操作，js可以更专注与程序（各司其职）。
所以，dataset的产生应该是基于一个这样的大的需求，具体到它被添加到新标准中，应该主要是为了简化节点属性操作以便与配合js实现更多的功能。楼主的日历插件就是个很好的例子。
jquery也只是js类库中的一个，这些新东西的添加可以说是和js的发展有关系，说是因为jquery而添加还是牵强一些。
说的不错！！<input name="birthdate" class="datepicker" defaultdate="-20y" readonly="readonly"/>$(this).attr('defaultdate');这样也可以获得 -20y，只是这样是用了js对吧。那段代码中this和$(this) 又有什么区别呢？ 是否 this是js对象，$(this)是jqury对象？另外html的标准在哪里找啊？
谢谢仁兄！

Answer 6

html5的标准有没有官方文档啊？？

Answer 7

http://www.w3.org/TR/2011/WD-html5-20110525/

Answer 8

谢谢纠错。
难道这是因jquery的用法而新出的标准？现在的web变得越来越复杂，需求也越来越多，原来DOM中的api在实现需求的时候会显得麻烦，效率低甚至无法满足需求只好借助js。因此，HTML5针对这种情况新增加了诸多特性，希望通过完善DOM使其尽可能的通过自身的元素以及API高效地完成文档操作，js可以更专注与程序（各司其职）。
所以，dataset的产生应该是基于一个这样的大的需求，具体到它被添加到新标准中，应该主要是为了简化节点属性操作以便与配合js实现更多的功能。楼主的日历插件就是个很好的例子。
jquery也只是js类库中的一个，这些新东西的添加可以说是和js的发展有关系，说是因为jquery而添加还是牵强一些。
说的不错！！<input name="birthdate" class="datepicker" defaultdate="-20y" readonly="readonly"/>$(this).attr('defaultdate');这样也可以获得 -20y，只是这样是用了js对吧。那段代码中this和$(this) 又有什么区别呢？ 是否 this是js对象，$(this)是jqury对象？另外html的标准在哪里找啊？
谢谢仁兄！（1）嗯，$(this)是jquery对象，但是this不是js对象，是dom对象。
还是用你的代码来说吧：$(".datepicker").each(function(){
      var param = {
         autoSize : true,
            changeMonth : true,
            changeYear : true,
         dateFormat : "yy-mm-dd"
      };
        //下面的this指的就是input元素对应的dom对象，即：document.getElementsByTagName('input')[0]
        //也正是因为是dom对象，所以具有dataset属性。如果换做$(this).dataset就会报错，因为$(this)
        //是jquery对象，没有这样的属性。
      if (this.dataset && this.dataset.defaultdate)
       param.defaultDate = this.dataset.defaultdate;
      else
       param.minDate = 1;
       //下面的$(this)就是input元素对应的jquery对象，
       //html元素对应的jquery对象有很多jquery已经写好的方法可以调用比如.css()设置样式，
       //.attr()读取属性等等。除了这些jquery自带方法外，网上还有很多插件（也就是别人写好的方法）
       //供jquery对象调用。你用的datepicker就是一个插件（新方法）。
       //同理如果是this.datepicker()也会报错，因为只有jquery对象（$(this)）才能调用该方法。
       $(this).datepicker(param);
    });（2）HTML5虽然有很多好的特性和便捷的用法，但只是趋势尚未成标准，浏览器的支持也不尽人意，因此实际开发中很少会用到，个人觉得大体了解下即可。至于官方文档，本人也未曾仔细研究过，基本都是在W3c上看的，楼主可以参考下。
http://www.w3school.com.cn/html5/index.asp