9.实战 3：动态渲染 .vue 文件的组件—— Display

2019-07-18  本文已影响0人  中午吃啥_f330

实战 3：动态渲染 .vue 文件的组件—— Display

你可能用过 jsfiddle 或 jsbin 之类的网站，在里面你可以用 CDN 的形式引入 Vue.js，然后在线写示例，实时运行，比如下面这个例子：

https://jsfiddle.net/c87yh92v/

不过，这类网站主要是一个 html，里面包含 js、css 部分，渲染侧是用 iframe 嵌入你编写的 html，并实时更新。在这些网站写示例，是不能直接写 .vue 文件的，因为没法进行编译。

再来看另一个网站 iView Run（之前小节也有提到），它是能够在线编写一个标准的 .vue 文件，并及时渲染的，它也预置了 iView 环境，你可以使用 iView 组件库全部的组件。本小节，我们就来实现这样一个能够动态渲染 .vue 文件的 Display 组件，当然，用到的核心技术就是上一节的 extend 和 $mount。

接口设计

一个常规的 .vue 文件一般都会包含 3 个部分：

回忆一下用 extend 来构造一个组件实例，它的选项 template 其实就是上面 <template> 的内容，其余选项对应的是 <script>，样式 <style> 事实上与 Vue.js 无关，我们可以先不管。这样的话，当拿到一个 .vue 的文件（整体其实是字符串），只需要把 <template>、<script>、<style> 使用正则分割，把对应的部分传递给 extend 创建的实例就可以。

Display 是一个功能型的组件，没有交互和事件，只需要一个 prop：code 将 .vue 的内容传递过来，其余工作都是在组件内完成的，这对使用者很友好。当然，你也可以设计成三个 props，分别对应 html、js、css，那分割的工作就要使用者来完成。出于使用者优先原则，苦活累活当然是在组件内完成了，因此推荐第一个方案。

实现

在 src/components 目录下创建 display 目录，并新建 display.vue 文件，基本结构如下：

<!-- display.vue -->
<template>
  <div ref="display"></div>
</template>
<script>
  export default {
    props: {
      code: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        html: '',
        js: '',
        css: ''
      }
    },
  }
</script>

父级传递 code 后，将其分割，并保存在 data 的 html、js、css 中，后续使用。

我们使用正则，基于 <> 和 </> 的特性进行分割：

// display.vue，部分代码省略
export default {
  methods: {
    getSource (source, type) {
      const regex = new RegExp(`<${type}[^>]*>`);
      let openingTag = source.match(regex);

      if (!openingTag) return '';
      else openingTag = openingTag[0];

      return source.slice(source.indexOf(openingTag) + openingTag.length, source.lastIndexOf(`</${type}>`));
    },
    splitCode () {
      const script = this.getSource(this.code, 'script').replace(/export default/, 'return ');
      const style = this.getSource(this.code, 'style');
      const template = '<div id="app">' + this.getSource(this.code, 'template') + '</div>';

      this.js = script;
      this.css = style;
      this.html = template;
    },
  }
}

getSource 方法接收两个参数：

分割后，返回的内容不再包含 <template> 等标签，直接是对应的内容，在 splitCode 方法中，把分割好的代码分别赋值给 data 中声明的 html、js、css。有两个细节需要注意：

  1. .vue 的 <script> 部分一般都是以 export default 开始的，可以看到在 splitCode 方法中将它替换为了 return，这个在后文会做解释，当前只要注意，我们分割完的代码，仍然是字符串；
  2. 在分割的 <template> 外层套了一个 <div id="app">，这是为了容错，有时使用者传递的 code 可能会忘记在外层包一个节点，没有根节点的组件，是会报错的。

准备好这些基础工作后，就可以用 extend 渲染组件了，在这之前，我们先思考一个问题：上文说到，当前的 this.js 是字符串，而 extend 接收的选项可不是字符串，而是一个对象类型，那就要先把 this.js 转为一个对象。

不卖关子，来介绍 new Function 用法，先看个示例：

const sum = new Function('a', 'b', 'return a + b');

console.log(sum(2, 6)); // 8

new Function 的语法：

new Function ([arg1[, arg2[, ...argN]],] functionBody)

arg1, arg2, ... argN 是被函数使用的参数名称，functionBody 是一个含有包括函数定义的 JavaScript 语句的字符串。也就是说，示例中的字符串 return a + b 被当做语句执行了。

上文说到，this.js 中是将 export default 替换为 return 的，如果将 this.js 传入 new Function 里，那么 this.js 就执行了，这时因为有 return，返回的就是一个对象类型的 this.js 了。

如果你还不是很理解 new Function，可以到文末的扩展阅读进一步了解。除了 new Function，你熟悉的 eval 函数也可以使用，它与 new Function 功能类似。

知道了这些，下面的内容就容易理解了：

<!-- display.vue，部分代码省略 -->
<template>
  <div ref="display"></div>
</template>
<script>
  import Vue from 'vue';
  
  export default {
    data () {
      return {
        component: null
      }
    },
    methods: {
      renderCode () {
        this.splitCode();

        if (this.html !== '' && this.js !== '') {
          const parseStrToFunc = new Function(this.js)();

          parseStrToFunc.template =  this.html;
          const Component = Vue.extend( parseStrToFunc );
          this.component = new Component().$mount();

          this.$refs.display.appendChild(this.component.$el);
        }
      }
    },
    mounted () {
      this.renderCode();
    }
  }
</script>

extend 构造的实例通过 $mount 渲染后，挂载到了组件唯一的一个节点 <div ref="display"> 上。

现在 html 和 js 都有了，还剩下 css。加载 css 没有什么奇技淫巧，就是创建一个 <style> 标签，然后把 css 写进去，再插入到页面的 <head> 中，这样 css 就被浏览器解析了。为了便于后面在 this.code 变化或组件销毁时移除动态创建的 <style> 标签，我们给每个 style 标签加一个随机 id 用于标识。

在 src/utils 目录下新建 random_str.js 文件，并写入以下内容：

// 生成随机字符串
export default function (len = 32) {
  const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
  const maxPos = $chars.length;
  let str = '';
  for (let i = 0; i < len; i++) {
    str += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return str;
}

不难理解，这个方法是从指定的 a-zA-Z0-9 中随机生成 32 位的字符串。

补全 renderCode 方法：

// display.vue，部分代码省略
import randomStr from '../../utils/random_str.js';

export default {
  data () {
    return {
      id: randomStr()
    }
  },
  methods: {
    renderCode () {
      if (this.html !== '' && this.js !== '') {
        // ...
        if (this.css !== '') {
          const style = document.createElement('style');
          style.type = 'text/css';
          style.id = this.id;
          style.innerHTML = this.css;
          document.getElementsByTagName('head')[0].appendChild(style);
        }
      }
    }
  }
}

当 Display 组件销毁时，也要手动销毁 extend 创建的实例以及上面的 css：

// display.vue，部分代码省略
export default {
  methods: {
    destroyCode () {
      const $target = document.getElementById(this.id);
      if ($target) $target.parentNode.removeChild($target);

      if (this.component) {
        this.$refs.display.removeChild(this.component.$el);
        this.component.$destroy();
        this.component = null;
      }
    }
  },
  beforeDestroy () {
    this.destroyCode();
  }
}

当 this.code 更新时，整个过程要重新来一次，所以要对 code 进行 watch 监听：

// display.vue，部分代码省略
export default {
  watch: {
    code () {
      this.destroyCode();
      this.renderCode();
    }
  }
}

以上就是 Display 组件的所有内容。

使用

新建一条路由，并在 src/views 下新建页面 display.vue 来使用 Display 组件：

<!-- src/views/display.vue -->
<template>
  <div>
    <h3>动态渲染 .vue 文件的组件—— Display</h3>

    <i-display :code="code"></i-display>
  </div>
</template>
<script>
  import iDisplay from '../components/display/display.vue';
  import defaultCode from './default-code.js';

  export default {
    components: { iDisplay },
    data () {
      return {
        code: defaultCode
      }
    }
  }
</script>


// src/views/default-code.js
const code =
`<template>
    <div>
        <input v-model="message">
        {{ message }}
    </div>
</template>
<script>
    export default {
        data () {
            return {
                message: ''
            }
        }
    }
</script>`;

export default code;

如果使用的是 Vue CLI 3 默认的配置，直接运行时，会抛出下面的错误：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

这涉及到另一个知识点，就是 Vue.js 的版本。在使用 Vue.js 2 时，有独立构建（standalone）和运行时构建（runtime-only）两种版本可供选择，详细的介绍请阅读文末扩展阅读 2。

Vue CLI 3 默认使用了 vue.runtime.js，它不允许编译 template 模板，因为我们在 Vue.extend 构造实例时，用了 template 选项，所以会报错。解决方案有两种，一是手动将 template 改写为 Render 函数，但这成本太高；另一种是对 Vue CLI 3 创建的工程做简单的配置。我们使用后者。

在项目根目录，新建文件 vue.config.js：

module.exports = {
  runtimeCompiler: true
};

它的作用是，是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后就可以在 Vue 组件中使用 template 选项了，但是应用额外增加 10kb 左右（还好吧）。

加了这个配置，报错就消失了，组件也能正常显示。

以上就是 Display 组件所有的内容，如果你感兴趣，可以把它进一步封装，做成 iView Run 这样的产品。

结语

这个小小的 Display 组件，能做的事还有很多，比如要写一套 Vue 组件库的文档，传统方法是在开发环境写一个个的 .vue 文件，然后编译打包、上传资源、上线，如果要修改，哪怕一个标点符号，都要重新编译打包、上传资源、上线。有了 Display 组件，只需要提供一个服务来在线修改文档的 .vue，就能实时更新，不用打包、上传、上线。

还有一点很重要的是，可以看到，在 iView Run 里，默认是直接可以写 iView 组件库的全部组件，并没有额外引入，这是因为 Display 所在的工程，已经将 iView 安装在了全局，Vue.extend 在构造实例时，已经可以使用全局安装的插件了，如果你还全局安装了其它插件，比如 axios，都是可以直接使用的。

扩展阅读

上一篇下一篇

猜你喜欢

热点阅读