求js的封装问题，dataset

2013-08-01 02:01:21 214 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

HZERO前端开发完整示例：从React+DataSet到企业级应用实战在企业级中后台系统开发中，React以其组件化与声明式特性，成为构建复杂数据驱动界面的主流框架。其单向数据流和清晰的生命周期，使得状态管理更可预测。结合Choerodon UI这类深度定制企业级组件库，开发者能快速实现与后端服务的标准化对接。然而，复杂业务场景下的表单、表格数据联动与状态管理，仍是工程实践中的挑战。为此，HZERO框架引入了核心的DataSet数据管理模型，它将字段定义、校验规则、查询参数与提交适配器集中管理，通过强约束规范数据操作模式，显著提升团队协作与复杂页面的开发效率。本文聚焦于Dat 阅读详情

<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 是什么意思呀？？

非常感谢！！！

...全文

一些自己常用的封装的代码 1.access数据访问层using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls. 阅读详情

zhangyyy_10

JavaScript 87,984 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

阿鱼 2013-08-01

打赏
举报

引用 5 楼 zhangyyy_10 的回复:

[quote=引用 4 楼 qwklove 的回复:] [quote=引用 3 楼 k3179 的回复:] [quote=引用 2 楼 qwklove 的回复:] （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一下。

谢谢纠错。

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

街头小贩 2013-08-01

打赏
举报

引用 6 楼 zhangyyy_10 的回复:

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

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

zhangyyy_10 2013-08-01

打赏
举报

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

zhangyyy_10 2013-08-01

打赏
举报

引用 4 楼 qwklove 的回复:

[quote=引用 3 楼 k3179 的回复:] [quote=引用 2 楼 qwklove 的回复:] （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一下。

谢谢纠错。

阿鱼 2013-08-01

打赏
举报

引用 3 楼 k3179 的回复:

[quote=引用 2 楼 qwklove 的回复:] （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一下。

谢谢纠错。

螃蟹k3179 2013-08-01

打赏
举报

引用 2 楼 qwklove 的回复:

（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一下。

谢谢纠错。

难道这是因jquery的用法而新出的标准？

阿鱼 2013-08-01

打赏
举报

（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一下。

螃蟹k3179 2013-08-01

打赏
举报

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

求js的封装问题，dataset

相关推荐