如何引入公共代码?

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

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>([\s\S]*?)<\/script>/g;
            var r = "";
            while(r = mac.exec(content)) {
                eval(r[1]);
            }
        },
        getHtml: function(content) {
            var mac = /<script>([\s\S]*?)<\/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>)。

时间: 2024-07-30 14:41:57

如何引入公共代码?的相关文章

引入公共头部

现在的网站大多数都有公共的头部和尾部,如果在每个页面都复写一次,不仅仅加大了工作量,也不利于后期的维护,如果能将公共的部分单独建文件引入,就提高了工作效率,整理集中文件引入公共文件的方式如下: 1.html文件 新建公共头部文件,利用ifram引入 ,代码如下: <iframe marginwidth=0 marginheight=0 hspace=0 vspace=0 iframeborder=0 scrolling=no src="header.html" height=12

如何在vuejs中抽出公共代码

当我们在使用vue构建中大型项目时,通常会遇到某些经常用的方法以及属性,比如说搭建一个员工管理系统,请求的url需要一个共同的前缀,或者在某几个view中需要用到时间,这个时间是通过某方法格式化之后的等等,如果每次用到都写共同的代码,那样如果之后有变动的话维护起来会非常麻烦. 所以我们就得想办法抽出公共代码,因为vue是组件化开发,我们就会很自然的与es6的module模块化联系到一起.其实当我们在搭建项目结构时就应该先提前埋下伏笔,有一个util文件夹,里面放的就是我们要写的公共代码,其实很多

webpack提取公共代码。

webpack.optimize.CommonsChunkPlugin这个是内置方法到时候new就行了. 首先创 var webpack=require('webpack') var path=require('path') module.exports={ entry:{ 'pageA':'./src/pageA', 'pageB':'./src/pageB', 'vendor':['lodash'] }, output:{ path:path.resolve(__dirname, './di

抽取公共代码

如果要彻底明白 Webpack V4 版本如何抽取公共代码,就要设计一个场景来支持抽取公共代码的多种形式,能够从代码运行的结果中查看实际的效果,从效果中深入理解各个参数的作用. 场景设计 在设计场景之前,首先要明白公共代码抽取常见的几种情况: 抽取 Webpack 运行时代码 直接加载的代码抽取(静态引入) node_modules 中的代码 项目中的业务代码 按需加载的代码抽取(动态引入) node_modules 中的代码 项目中的业务代码 经过分析会发现,现在常见的场景就五种,设计一个应用

基于webpack实现多html页面开发框架六 提取公共代码

一.解决什么问题 1.如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包 2.单独打包common.js对性能有帮助,浏览器下载一次后会缓存下来,不会重复下载 二.未抽取公共代码的状况 基于之前代码,测试如下: 1.在assets/js文件夹下新建common.js,输入如下代码: 1 export function printCommon(){ 2 console.log("common"); 3 } 2.

通达OA公共代码 php常用检测函数

通达OA公共代码 php常用检测函数 从通达OA公共代码扒下的php常用检测函数代码,学习php的朋友可以参考下. check_type.php(使用类型检验函数) 复制代码 代码如下: <?php /*********************/ /* */ /* Version : 5.1.0 */ /* Author : RM */ /* Comment : 071223 */ /* */ /*********************/ function is_number( $str )

系统管理模块_部门管理_改进_抽取添加与修改JSP页面中的公共代码_在显示层抽取BaseAction_合并Service层与Dao层

系统管理模块_部门管理_改进1:抽取添加与修改JSP页面中的公共代码 commons.jspf <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <meta http-equiv="Conten

The way of Webpack learning (II.) -- Extract common code(多页面提取公共代码)

学习之路基于webpack3.10.0,webpack4.0之后更新. 多页面提取公共代码!!! 一:文件关系 pageA --> subA.subB --> moduleA pageB --> subA.subB --> moduleA 那么pageA.pageB 的公共代码就是subA.subB .moduleA. 二:webpack.config.js文件配置 var webpack = require('webpack') var path = require('path'

webpack配置提取公共代码

公共代码提取功能是针对多入口文件的: 背景:在pageA.js和pageB.js中分别引用subPageA.js和subPageB.js webpack.config.js文件: 1 var path = require('path') 2 module.exports = { 3 entry:{ 4 pageA:'./src/pageA.js', 5 pageB:'./src/pageB.js' 6 }, 7 output: { 8 filename: "[name].js", 9