在JavaScript 中我们通常在引入外面js 或者内嵌js 都是通过写 script 标签来实现
<script type="text/javascript">
console.log(1-2);
</script>
// 或者
<script src="//a.com/tools.min.js"></script>在引入外面js 的时候部分代码需要动态确定值或者指定配置来实现不同的效果
如：
<script src="//a.com/tools.min.js" data-type="open"></script>
// 需要在tools.min.js 知道 data-type 的值来确定代码执行逻辑方法一：
规定使用者在定义script 标签时定义一个id 来实现
var dom = document.getElementById("xx");
var val = dom.getAttribute("xxx");
但是这样的局限性很大，不推荐此方法
方法二：
通过html5 的新特性 dataset 属性来实现
<!DOCTYPE >
<html>
<head>
<title>解析JavaScript 标签的data-xxx 属性值</title>
<meta charset="utf-8" />
</head>
<body>
</body>
<script data-type="11" data-json='{"a":"a","b":1}' data-aaa-bbb="aaa" type="text/javascript">
/**
* 获取当前script 标签对象
* @param {Object} window
*/
function currentScript(window) {
var document = window.document;
return document.currentScript || (function() {
var scripts = document.getElementsByTagName("script");
return scripts[scripts.length - 1];
})();
}
/**
* 解析data attr
* @param {Object} tag
*/
function parseDataAttr(tag) {
var options = {};
for(var opt in tag.dataset) {
if(tag.dataset.hasOwnProperty(opt)) {
try {
options[opt] = JSON.parse(tag.dataset[opt]);
} catch(_) {
options[opt] = tag.dataset[opt];
}
}
}
return options;
}
// 测试
var opt = parseDataAttr(currentScript(window));
console.log(opt)
</script>
</html>判断浏览器是否支持dataset 方法：
1502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
