JavaScriptタグのdata-xxx属性値を解析する(Scriptタグ上の属性を解析する)

5264 ワード

web

JavaScriptでは外のjsや埋め込みjsを導入するのが普通です.scriptタグを書くことによって実現されます.

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

//   

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

外部のjsを導入する時、部分コードは動的に値を決めたり、設定を指定したりして、異なる効果を実現する必要があります.
例えば:

"//a.com/tools.min.js"</span> <span class="hljs-typedef"><span class="hljs-keyword">data</span>-<span class="hljs-keyword">type</span>="open">

//    tools.min.js    data-type

方法1:
使用者がscriptタグを定義する時、一つのidを定義して実現することを規定しています.

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

しかし、このような制限が大きいので、この方法は勧められません.
方法二:
httml 5の新特性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

深度分析javascript call方法は継承の原理を実現します.