解析JavaScript 标签的data-xxx 属性值(解析script 标签上属性)

在JavaScript 中我们通常在引入外面js 或者内嵌js 都是通过写 script 标签来实现

<script type="text/javascript">
  console.log(1-2);
script>

// 或者

<script src="//a.com/tools.min.js">script>

在引入外面js 的时候部分代码需要动态确定值或者指定配置来实现不同的效果

如:



// 需要在tools.min.js 知道 data-type 的值来确定代码执行逻辑

方法一:

规定使用者在定义script 标签时定义一个id 来实现

var dom = document.getElementById("xx");
var val = dom.getAttribute("xxx");

但是这样的局限性很大,不推荐此方法

方法二:

通过html5 的新特性 dataset 属性来实现


<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 方法:

https://html5demos.com/dataset/

https://www.w3schools.com/tags/att_global_data.asp

你可能感兴趣的:(web)