• 如何引入公共代码?


    刚开始写项目的时候,有多少个页面,就复制多少次公共的代码(如头部,尾部)。显然这不是明智之举。下面介绍一种引入公共头部的方法。

    1、首先在页面引入该JavaScript文件(include.js)。

    (function(window, document, undefined) {
        var Include39485748323 = function() {}
        Include39485748323.prototype = {
            //倒序循环
            forEach: function(array, callback) {
                var size = array.length;
                for(var i = size - 1; i >= 0; i--){
                    callback.apply(array[i], [i]);
                }
            },
            getFilePath: function() {
                var curWwwPath=window.document.location.href;
                var pathName=window.document.location.pathname;
                var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName));
                var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1);
                return localhostPaht+projectName;
            },
            //获取文件内容
            getFileContent: function(url) {
                var ie = navigator.userAgent.indexOf('MSIE') > 0;
                var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
                o.open('get', url, false);
                o.send(null);
                return o.responseText;
            },
            parseNode: function(content) {
                var objE = document.createElement("div");
                objE.innerHTML = content;
                return objE.childNodes;
            },
            executeScript: function(content) {
                var mac = /<script>([sS]*?)</script>/g;
                var r = "";
                while(r = mac.exec(content)) {
                    eval(r[1]);
                }
            },
            getHtml: function(content) {
                var mac = /<script>([sS]*?)</script>/g;
                content.replace(mac, "");
                return content;
            },
            getPrevCount: function(src) {
                var mac = /..//g;
                var count = 0;
                while(mac.exec(src)) {
                    count++;
                }
                return count;
            },
            getRequestUrl: function(filePath, src) {
                if(/http:///g.test(src)){ return src; }
                var prevCount = this.getPrevCount(src);
                while(prevCount--) {
                    filePath = filePath.substring(0,filePath.substr(1).lastIndexOf('/')+1);
                }
                return filePath + "/"+src.replace(/..//g, "");
            },
            replaceIncludeElements: function() {
                var $this = this;
                var filePath = $this.getFilePath();
                var includeTals = document.getElementsByTagName("include");
                this.forEach(includeTals, function() {
                    //拿到路径
                    var src = this.getAttribute("src");
                    //拿到文件内容
                    var content = $this.getFileContent($this.getRequestUrl(filePath, src));
                    //将文本转换成节点
                    var parent = this.parentNode;
                    var includeNodes = $this.parseNode($this.getHtml(content));
                    var size = includeNodes.length;
                    for(var i = 0; i < size; i++) {
                        parent.insertBefore(includeNodes[0], this);
                    }
                    //执行文本中的额javascript
                    $this.executeScript(content);
                    parent.removeChild(this);
                    //替换元素 this.parentNode.replaceChild(includeNodes[1], this);
                })
            }
        }
        window.onload = function() {
            new Include39485748323().replaceIncludeElements();
        }
    })(window, document)
    

      2、在需要的地方引入,例如(<include src=" header.html"> </include>)。

  • 相关阅读:
    Linux下tar-rar-unrar解压/压缩缩命令大全
    Linux文件和目录权限详细讲解
    Mac版PhpStorm之XAMPP整合apache服务器配置
    android adb pull push
    Android刷机教程之LG Nexus 5X线刷官方Nexus系列教程
    Android RecyclerView.Adapter notifyDataSetChanged 不起作用
    Android Gradle Build Error:Some file crunching failed, see logs for details解决办法
    Mac平台与Windows平台下AndroidStudio增量升级
    Android与JS之间跨平台异步调用
    Android Studio 打包签名发布New Key Store
  • 原文地址:https://www.cnblogs.com/candy-Yao/p/7400165.html
Copyright © 2020-2023  润新知