utils :1 模板字符串通用匹配 ;2异步加载JS文件; 3 getElementsByClassName()方法重写

1 模板字符串通用匹配

    <script type="text/html" id="tmp">
        <div class="name">
            <p class="gae">
                {{name}}
            </p>
            <img src="{{src}}" alt="">
        </div>
    </script>
    <script>
        var tmp = document.getElementById('tmp'),
            opt = {
                name:888,
                src:'sdasdadadadasd'
            };
        // setTmpToHtmlStr(tmp.innerHTML,new RegExp(/{{(.*?)}}/,'gim'),opt);
        /**
         * @param tpl 模板字符串
         * @param regExp 正则
         * @param opt 要匹配的对象
         * 
        */
        function setTmpToHtmlStr(tpl,regExp,opt){
            return tpl.replace(regExp,function(node,key){
                console.log(opt[key]);
                return opt[key];
            });
        }

2异步加载JS文件

  // 这是异步加载JS文件;deferIE独有;async W3C标准
        /**
         * @param url 文件路径
         *  @param url 要执行的方法
         * */
         asyncDownLoadJS('js/unique.js','ab')
        function asyncDownLoadJS(url,fn){
            var script = document.createElement('script'),
                head = document.getElementsByTagName('head')[0];

            script.type = 'text/javascript';
            // IE 独有
            if(script.readyState){
                script.onreadytatechange = function (){
                    var state = script.state;
                    if(state == 'complate' || state == 'loaded'){
                        utils[fn]();
                    }
                }
                
            }else{
                script.onload = function(){
                    console.log(11111)
                    utils[fn]();
                }
            }
            //放在后面防止事件不触发;有缓存时,可能不触发
            script.src = url;

            head.appendChild(script);
        }

        // 利用onload事件; 等onload事件触发后再去 下载JS文件
        (function () {
            function asyncDownLoadJS1() {
                var script = document.createElement('script'),
                    head = document.getElementsByTagName('head')[0];

       
                script.type = 'text/javascript';
                //已经开始下载

                script.src = 'js/unique.js';
                console.log(script);
                head.appendChild(script);
            }

            if (window.attachEvent) {
                window.attachEvent('onload', asyncDownLoadJS1);
            } else {

                window.addEventListener('load', asyncDownLoadJS1, false);

            }
        })();

3 getElementsByClassName()方法重写

// getElementsByClassName
 Document.prototype.myGetElementsByClassName =  Element.prototype.myGetElementsByClassName = function(className){

    var allDom = this.getElementsByTagName('*'),
        len = allDom.length,
        item,
        result = [];

    //方法简单判断
    // for (var index = 0; index < len; index++) {
    //     item = allDom[index];
    //     var classs = item.className;
    //     console.log(classs)
    //     if(classs.indexOf(className) != -1){
    //         result.push(item)
    //     }
    // }
    //除去特殊情况 ,空格 空白字符等
    for (var index = 0; index < len; index++) {
        item = allDom[index];
        var classs = trimSpace(item.className).trim(),
            classArr = classs.split(' '),
            classArrLen = classArr.length;
        
        for(var j = 0; j < classArrLen; j++){
            if(className ===classArr[j]){
                result.push(item);
                break;
            }
        }
        
    }
    // 去掉空格 制表符 等空白字符; class= "  name   name "
    function trimSpace(str){
        return str.replace(/\s+/g,' ');
    }
    return result;
 }
posted @ 2020-06-16 22:21  古月大叔  阅读(142)  评论(0编辑  收藏  举报