一个近乎完美的vue页面复用方案

前言

问大家一个问题，曾经的你是否也遇到过，一个项目中有好几个页面长得基本相同，但又差那么一点，想用 vue extends 继承它又不能按需继承html模板部分，恰好 B 页面需要用的 A 页面 80% 的模板，剩下的 20% 由 B 页面自定义，举个栗子：

我们假设这是两个页面，B页面比A页面多了个p标签，剩余的东西都一样，难道仅仅是因为这一个 p标签就要重新写一份模板吗？相信大部分伙伴解决方式是把公共部分抽成一个组件来用，这是一个好的做法。没错，但是来了，老板让你在标题1、标题2下面分别插入一段内容，这会儿你是不是头大了？难道只能重写一份了吗？当然不是，来开始我们的填坑之路~

准备工作

准备以下工具包：

node-html-parser: 将html生成dom树官网

bash 复制代码

npm install --save node-html-parser

思路

子页面提供继承的父页面的路径，如下：

js 复制代码

<template extend="./xxx.vue">
</template>

子页面需要通过一个自定义标签（假设是 extend）的方式，来决定如何拓展父页面，如下就应该是一个替换的操作,它最少应该具备拓展类型 type 与目标节点 target 属性。

js 复制代码

<template extend="./xxx.vue">
  <div>
    <extend type="replace" target="#div_1">
      <a>通过replace替换掉父页面下id为div_1的元素 </a>
    </extend>
  </div>
</template>

最终它生成的应该是除了 id 为 div_1元素被<a>通过replace替换掉父页面下id为div_1的元素 </a>替换掉之外，剩下的全部和xxx.vue一样的页面。

梳理需求点

子页面继承父页面既可以完全继承，也可以通过某种方式以父页面为基板，对其进行增、删、改。方便理解，我们先定义一个自定义标签 extend,子页面通过该标签对其继承的页面操刀动手术，为了实现一个比较完善的继承拓展，extend 标签需要具备以下属性：

Extend Attributes

参数	说明	类型	可选值
type	指定扩展类型	string	insert(插入)、replace(替换)、remove(移除)、append(向子集追加)
position	指定插入的位置(仅在 type 取值 insert 时生效)	string	before(目标前)、after(目标后)
position	指定插入的位置(仅在 type 取值 append 时生效，用于指定插入成为第几个子节点)	number	-
target	指定扩展的目标	string

实现需求

新建一个vue2的项目，项目结构如下：

我们的继承拓展通过自定义loader在编译的时候实现，进入到src/loader/index.js

js 复制代码

const extend = require('./extend');
module.exports = function (source) {
     // 当前模块目录
     const resourcePath = this.resourcePath;
     // 合并
     const result = new extend(source, resourcePath).mergePage();
     // console.log('result :>> ', result);
     // 返回合并后的内容
     this.callback(null, result);
};

实现继承拓展主要逻辑代码：src/loader/extend.js

js 复制代码

const parser = require('node-html-parser');
const fs = require('fs');
const pathFile = require('path');
/**
 * 通过node-html-parser解析页面文件重组模板
 * @param {String} source 页面内容
 * @param {String} resourcePath 页面目录
 * @returns {String} 重组后的文件内容
 */
class Extend {
    constructor(source, resourcePath) {
        this.source = source;
        this.resourcePath = resourcePath;
    }
    // 合并页面
    mergePage() {
        // 通过node-html-parser解析模板文件
        const pageAst = parser.parse(this.source).removeWhitespace();
        // 获取template标签extend属性值
        const extendPath = pageAst.querySelector('template').getAttribute('extend');
        if (!extendPath) {
            return pageAst.toString();
        }
        // extendPath文件内容
        const extendContent = fs.readFileSync(pathFile.resolve(pathFile.dirname(this.resourcePath), extendPath), 'utf-8');
        // extendContent文件解析
        const extendAst = parser.parse(extendContent).removeWhitespace();
        // 获取页面文件标签为extend的元素
        const extendElements = pageAst.querySelectorAll('extend');

        extendElements.forEach((el) => {
            // 获取对应属性值
            const type = el.getAttribute('type');
            const target = el.getAttribute('target');
            const position = parseInt(el.getAttribute('position'));

            // 匹配模板符合target的元素
            let templateElements = extendAst.querySelectorAll(target);

            // type属性为insert
            if (type === 'insert') {
                templateElements.forEach((tel) => {
                    // 通过position属性判断插入位置 默认为after
                    if (position === 'before') {
                        el.childNodes.forEach((child) => {
                            tel.insertAdjacentHTML('beforebegin', child.toString());
                        });
                    } else {
                        el.childNodes.forEach((child) => {
                            tel.insertAdjacentHTML('afterend', child.toString());
                        });
                    }
                });
            }
            // type属性为append
            if (type === 'append') {
                templateElements.forEach((tel) => {
                   const elNodes = el.childNodes;
                   let tlNodes = tel.childNodes;
                   const len = tlNodes.filter((node) => node.nodeType === 1 || node.nodeType === 3).length;
                    // 未传position属性或不为数字、大于len、小于0时默认插入到最后
                    if(isNaN(position) || position > len || position <= 0){
                        elNodes.forEach((child) => {
                            tel.insertAdjacentHTML('beforeend', child.toString());
                        });
                    }else {
                        tlNodes =  [...tlNodes.slice(0, position-1), ...elNodes, ...tlNodes.slice(position-1)]
                        tel.set_content(tlNodes);
                    }
                });
            }
            // type属性为replace
            if (type === 'replace') {
                templateElements.forEach((tel) => {
                    tel.replaceWith(...el.childNodes);
                });
            }
            // type属性为remove
            if (type === 'remove') {
                templateElements.forEach((tel) => {
                    tel.remove();
                });
            }
        });
        // 重组文件内容
        const template = extendAst.querySelector('template').toString();
        const script = pageAst.querySelector('script').toString();
        const style = extendAst.querySelector('style').toString() + pageAst.querySelector('style').toString() 
        return`${template}${script}${style}`
    }

}
module.exports = Extend;

好的，自定义loader已经编写完成，在vue.config.js里面配置好我们的loader

js 复制代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: [
            {
              loader: require.resolve('./src/loader'),
            },
          ],
        },
      ],
    },
  },
})

接下来我们尝试编写A页面和B页面：

A.vue：

html 复制代码

<template>
  <div class="template">
      <div id="div_1" class="div">父页面的div_1</div>
      <div id="div_2" class="div">父页面的div_2</div>
      <div id="div_3" class="div">父页面的div_3</div>
      <div id="div_4" class="div">父页面的div_4</div>
      <div id="div_5" class="div">父页面的div_5</div>
      <div id="div_6" class="div">父页面的div_6</div>
      <div id="div_7" class="div">父页面的div_7</div>
      <div id="div_8" class="div">父页面的div_8</div>
  </div>
</template>
<script>
export default {
  name: 'COM_A',
  props: {
    msg: String
  }
}
</script>
<style scoped>
.div {
  color: #42b983;
  font-size: 1.5em;
  margin: 0.5em;
  padding: 0.5em;
  border: 2px solid #42b983; 
  border-radius:  0.2em;
}
</style>

B.vue:

html 复制代码

<template extend="./A.vue">
  <div>
    <extend type="insert" target="#div_1" position="after">
      <div id="div_child" class="div">子页面的div_5</div>
    </extend>
    <extend type="append" target="#div_3" position="2">
      <a> 子页面通过append插入的超链接 </a>
    </extend>
  </div>
</template>
<script>
import A from './A.vue'
export default {
  name: 'COM_B',
  extends: A,//继承业务逻辑代码
  props: {
    msg: String
  }
}
</script>
<style scoped>
#div_child {
  color: #d68924;
  font-size: 1.5em;
  margin: 0.5em;
  padding: 0.5em;
  border: 2px solid #d68924;
}
a {
  color: blue;
  font-size: 0.7em;
}
</style>

我们在App.vue下引入B.vue

js 复制代码

<template>
  <div id="app">
    <B/>
  </div>
</template>
<script>
import B from './components/B.vue'
export default {
  name: 'App',
  components: {
    B
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

当我们执行编译的时候，实际上B.vue的编译结果如下：

html 复制代码

<template>
  <div class="template">
    <div id="div_1" class="div">父页面的div_1</div>
    <div id="div_child" class="div">子页面的div_5</div>
    <div id="div_2" class="div">父页面的div_2</div>
    <div id="div_3" class="div">
      父页面的div_3
      <a> 子页面通过append插入的超链接 </a>
    </div>
    <div id="div_4" class="div">父页面的div_4</div>
    <div id="div_5" class="div">父页面的div_5</div>
    <div id="div_6" class="div">父页面的div_6</div>
    <div id="div_7" class="div">父页面的div_7</div>
    <div id="div_8" class="div">父页面的div_8</div>
  </div>
</template>
<script>
export default {
  name: 'COM_B',
  props: {
    msg: String
  }
}
</script>
<style scoped>
.div {
  color: #42b983;
  font-size: 1.5em;
  margin: 0.5em;
  padding: 0.5em;
  border: 2px solid #42b983;
  border-radius: 0.2em;
}
</style>
<style scoped>
#div_child {
  color: #d68924;
  font-size: 1.5em;
  margin: 0.5em;
  padding: 0.5em;
  border: 2px solid #d68924;
}

a {
  color: blue;
  font-size: 0.7em;
}
</style>

注意我们在B.vue使用了extends继承了组件A，这里是为了能复用业务逻辑代码,最后我们运行代码，页面输出为：

结语

在真实的项目当中，我们遇到大量重复的页面但是又有小区别的页面，是可以通过这种方式减少我们的代码量，当然也许有更好的办法，也希望大伙能提出宝贵的建议。