HTML5的data-*自定义属性

HTML5增加了一项新功能是自定义数据属性,也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性,来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。目前采取这样的做法的框架也有很多,最常见的当属jQueryMobile。
具体使用方法例下:
<div id = "head" data-home = "http://blog.youkuaiyun.com/xmtblog" data-author = "伪专家"></div>
在传统的做法中我们可以配合jquery使用,如下:
$("#head").attr("data-home");
$("#head").attr("data-home","new");
或者纯js做法:
在IE浏览器里,我们通过获取对象后直接调用就可以了
document.getElementById("head").["data-home"];
document.getElementById("head").["data-home"] = "new";
在火狐和谷歌浏览器里,我们可以通过getAttribute方法来实现调用:
document.getElementById("head").getAttribute("data-home");
document.getElementById("head").setAttribute("data-home","new");
再HTML5中的简洁操作方法:(dataset属性存取data-*自定义属性的值)
这种方式通过访问一个元素的 dataset 属性来存取 data-* 自定义属性的值。这个 dataset 属性是HTML5 JavaScript API的一部分,用来返回一个所有选择元素 data- 属性的DOMStringMap对象。
使用这种方法时,不是使用完整的属性名,如data-home来存取数据,应该去掉data-前缀。
还有一点特别注意的是:data-属性名如果包含了连字符,例如:data-date-of-birth ,连字符将被去掉,并转换为驼峰式的命名,前面的属性名转换后应该是:dateOfBirth。
<div id = "head" data-home = "http://blog.youkuaiyun.com/xmtblog" data-author = "伪专家" data-date-of-birth>QQ群:135430763</div>
<script type="text/javascript">
	var el = document.querySelector('#head');
	console.log(el.id); 
	console.log(el.dataset);//一个DOMStringMap
	console.log(el.dataset.home); 
	console.log(el.dataset.author); 
	console.log(el.dataset.dateOfBirth); 
	el.dataset.dateOfBirth = '1985-01-05'; // 设置data-date-of-birth的值.
	//判断属性
	console.log('testAttr' in el.dataset);//false
	el.dataset.testAttr = 'testAttr';
	console.log('testAttr' in el.dataset);//true
</script>
如果你想删掉一个 data-属性 ,可以这么做: delete el.dataset.home ;  或者 el.dataset.home = null;。
这样操作起来是不是非常的方便。但有些浏览器可能还不支持。所以在此期间最好用的getAttribute和setAttribute来操作或配合jquery进行使用。
data-属性选择器
在实际开发时,可以根据自定义的data-属性选择相关的元素。例如使用querySelectorAll选择元素:
//选择所有包含'data-div'属性的元素
document.querySelectorAll ('[data-div]') ;
//选择所有包含'data-a-href' 属性值为red的元素
document.querySelectorAll ('[data-a-href="#"]') ;
同样的我们也可以通过data-属性值对相应的元素设置CSS样式,例如下面这个例子:
<style type ="text/css">
    .head {
         width : 256px ;
         height : 200px ;
     }
 
    .head[data-a='btn-a'] {
         color : brown
    }
 
    .head[data-a='btn-color'] {
         color : red
    }
</style>
<div class = "head" data-qq = "QQ群:135430763" data-a = "btn-a" > button按钮 </div>
<div class = "head" data-qq = "QQ群:135430763" data-a = "btn-color" > button按钮</div>
欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习! 
<think>好的,我现在要回答用户关于微信小程序开发中data-*自定义属性和模块引用的问题。首先,我需要回忆一下相关的知识点,并结合提供的引用内容来确保回答的准确性。 用户提到data-*自定义属性,我记得在小程序中,可以通过在组件标签上使用data-xxx来绑定数据,然后在事件处理函数中通过事件对象获取。需要确认具体的使用步骤,比如如何设置和获取这些属性。根据引用[3],用户可能已经看过组件中类名的定义,但这里需要关注的是data-*属性,可能需要结合事件处理来讲解。 然后是模块引用,也就是如何使用require或import来引入外部JS模块。需要说明模块的定义和导出方式,以及如何在其他文件中引入使用。引用[4]提到npm构建的问题,但用户的问题可能更多是关于代码模块化,而不是npm包,所以可能不需要涉及构建配置,除非用户的问题涉及到。 接下来,我需要检查提供的引用内容是否有相关内容。引用[1]提到安装类型定义库,引用[2]介绍纯数据字段,引用[3]是组件类名的例子,引用[4]是npm构建的问题。可能引用[2]中的纯数据字段和data-*属性相关,但需要区分开,data-*是用于传递数据到事件处理,而纯数据字段是不参与渲染的数据。所以需要明确两者的不同,避免混淆。 现在,我需要组织回答的结构: 1. 先解释data-*自定义属性的使用方法,包括如何设置、如何获取,可能结合wxml中的例子和js中的事件处理函数。 2. 然后讲解模块引用的方法,如何导出模块,如何引入,可能给出一个简单的例子,比如工具函数模块。 3. 结合引用内容,可能需要提到引用[2]中的纯数据字段,但需要指出两者的区别,避免用户混淆。 4. 最后生成相关问题,确保覆盖用户可能进一步提问的方向,比如性能优化、数据传递的其他方法等。 需要注意使用正确的格式,行内公式用$...$,但在这个问题中可能不太涉及数学公式,但需要遵循其他格式要求,比如代码块用反引号,引用标识放在相关段落末尾。例如,在讲解模块引用时,如果提到纯数据字段,可以引用[2]。 同时,用户的问题中提到了“引用模块”,可能包括两种:自定义JS模块和npm模块。根据引用[1],如果使用npm安装的模块,可能需要配置构建,但用户的问题可能更基础,所以先讲自定义模块的引用,再简要提及npm模块可能需要构建步骤,如引用[4]提到的配置问题。 现在开始组织内容: 第一部分:data-*自定义属性 - 在WXML中设置data-属性,比如data-id="{{id}}" - 在事件处理函数中,通过e.currentTarget.dataset.id获取 - 注意:属性名会被转换为驼峰式,例如data-user-id变成userId - 举例说明,可能用点击事件,如bindtap,然后在js中获取数据 第二部分:模块引用 - 使用module.exports或exports导出函数、对象等 - 在需要的地方使用require(path)引入 - 例如,创建一个util.js模块,导出函数,然后在其他js文件中引入使用 - 如果使用npm模块,需要构建npm,但引用[4]提到项目结构问题,可能需要调整miniprogramRoot 第三部分:可能的相关问题 - data-属性与纯数据字段的区别(引用[2]) - 模块化开发的最佳实践 - 如何处理npm模块的安装和构建问题(引用[1]和[4]) 最后生成相关问题,比如如何传递复杂数据、模块化封装技巧、npm构建问题等。 需要确保回答正确,没有错误。例如,data-属性的获取是否正确,模块导出的语法是否正确,是否提到转换驼峰命名的问题。同时,引用相关引用内容,比如在讲解模块引用时,提到npm构建问题可以参考引用[4],或者在讲解纯数据字段时引用[2]。</think>### 微信小程序 data-* 自定义属性与模块引用开发教程 #### 一、data-* 自定义属性 **data-*** 是小程序中用于在组件上绑定自定义数据的属性,常用于事件传递参数。 1. **设置 data-* 属性** 在 WXML 组件标签中,通过 `data-属性名` 绑定动态或静态值: ```html <view bindtap="onClick" data-id="123" data-user-info="{{ {name: 'Alice'} }}">点击传递数据</view> ``` 2. **获取 data-* 属性** 在事件处理函数中,通过 `event.currentTarget.dataset` 获取属性值,属性名会自动转换为**驼峰格式**: ```javascript Page({ onClick(e) { const id = e.currentTarget.dataset.id; // "123" const userInfo = e.currentTarget.dataset.userInfo; // {name: 'Alice'} } }) ``` > 注意:若属性名为 `data-user-id`,则获取时需用 `datasetId`[^3]。 #### 二、模块引用方法 小程序支持通过 `require` 或 ES6 的 `import` 引入外部 JS 模块。 1. **定义模块** 在 `utils/util.js` 中编写工具函数并导出: ```javascript function formatTime(date) { return date.toLocaleString(); } module.exports = { formatTime }; // CommonJS 导出 ``` 2. **引用模块** 在页面或组件的 JS 文件中引入并使用: ```javascript const util = require('../../utils/util.js'); // 相对路径 Page({ onLoad() { const time = util.formatTime(new Date()); } }) ``` 3. **npm 模块支持** 若使用 npm 包(如 `miniprogram-api-typings`),需先在项目根目录执行构建: ```bash npm install -D miniprogram-api-typings ``` 并在开发者工具中点击 **工具 > 构建 npm**,确保 `miniprogramRoot` 配置正确[^4]。 #### 三、注意事项 - **纯数据字段**:若数据仅用于逻辑处理且不参与渲染,可声明为 `pureDataPattern`(如 `_internalValue`),提升性能[^2]。 - **data-* 限制**属性值需为字符串或可序列化对象,避免传递复杂函数。 --- §§ 1. 如何在小程序中传递对象或数组类型的 data-* 属性? 2. 模块引用时如何处理循环依赖问题? 3. 纯数据字段与 data-* 属性的核心区别是什么? 4. npm 构建失败常见原因有哪些?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值