sv-print可视化打印组件不完全指南⑤

上期探讨了sv-print简单的插件机制，以及实现了参数的重写 ，项目是TS 创建的，参数的写法 就显得那么格格不入了。所以本期探索探索用ES6的写法来重构它，让后续编写更加的方便。

前言

如果你对 ES6 或者 原型链 不熟悉。那么本期，你将有所收获，本着授人以鱼不如授人以渔 的思想。本篇从调试分析 ，到实战落地。

调试分析

上篇说的，它几个核心的方法: createTarget、getValue、setValue、destroy 以及可选的 css。

见下方代码，看着就难受😢

js 复制代码

const fieldOptionFun = (configs: any) => {
  return function () {
    function t() {
      this.name = "field";
    }
    return (
      (t.prototype.createTarget = function (t, i, e) {
      }),
      (t.prototype.getValue = function () {
      }),
      (t.prototype.setValue = function (t: any) {
      }),
      (t.prototype.destroy = function () {
      }),
      t
    );
  }
};

看不懂先别慌，发个朋友圈先(~~console.log~~)

js 复制代码

const testFun = filedOption();
const test = new testFun();
console.log(test);

思考🤔：为什么要这样写？咱们可以复制的函数，让 AI 解释一下。

亮相参数对象：

ES6改写

为了继承，为了简洁。

新增一个基类：baseOption.ts

js 复制代码

export interface BaseOption {
  /**
   * 参数名称
   */
  name: string;
  /**
   * 会修改 DOM 样式的属性才需要: eg: color, backgroundColor
   * @param printElement 元素对象
   * @param value 该属性值
   */
  css?(printElement: HTMLElement, value: string | number | boolean): void;
  /**
   * 创建参数DOM
   * @param printElement 元素对象
   * @param options 元素参数
   * @param printElementType 元素类型对象
   */
  createTarget(printElement: any, options: any, printElementType: any): HTMLElement;

  getValue(): string | number | boolean;

  setValue(value: string | number | boolean): void;

  destroy(): void;
}

重新实现fieldOption

新建一个 fieldOption.ts

js 复制代码

export class FieldOption implements BaseOption {
  public name: string = "field";
  isSelect: boolean = false;
  target: any = null;
  vueApp: any = null;
  vueAppIns: any = null;
  configs: any = {};

  constructor(configs: any) {
    this.configs = configs;
  }

  createTarget(printElement: any, options: any, printElementType: any): HTMLElement {
    const fileds = printElement.getFields();
    this.isSelect = fileds && fileds.length > 0;
    const el = globalThis.$(
      `<div class="hiprint-option-item hiprint-option-item-row">
          <div class="hiprint-option-item-label">字段名</div>
          <div class="hiprint-option-item-field">
            <div id="fieldOption">
            </div>
          </div>
          `
    );
    this.target = el;
    this.vueApp = createApp(fieldVueApp, {
      onChange: (value) => {
        console.log("onChange", value);
        printElement && printElement.submitOption();
      },
      options: fileds || this.configs.fieldList,
      dialog: this.configs.dialog,
    });
    this.vueApp.use(Button);
    this.vueApp.use(Modal);
    this.vueApp.use(AutoComplete);
    setTimeout(() => {
      this.vueAppIns = this.vueApp.mount("#fieldOption");
    }, 0);
    return this.target;
  }
  getValue(): string | number | boolean {
    return this.vueAppIns && this.vueAppIns.getValue();
  }
  setValue(value: string | number | boolean): void {
    setTimeout(() => {
      if (this.vueAppIns) {
        this.vueAppIns.setValue(value);
      }
    }, 0);
  }
  destroy(): void {
    if (this.vueApp) {
      this.vueApp.unmount();
    }
    this.target.remove();
  }
}

稍微改吧改吧，亮个相，测试一下效果，它的原型链是否正常：

可以看到，核心方法在原型链上。咱们存储为全局变量测试一下方法

啊哈，能调用就行成了 ~ 但是整体流程还是有报错的，如下图：

不要慌，不要慌，报错意思是咱们传的不是一个构造函数。

嘿嘿，那不就好说了嘛。 套一套

js 复制代码

export const FieldOptionFun = (configs: any) => {
  return function () {
    return new FieldOption(configs);
  };
};

咱们对比输出看看实际对象：

后者，我们明显可以看到对象的痕迹。

看看整个fieldOption.ts文件

这样思路一打开，咱们可以有更好的去拓展实现参数的处理。

所以控制台是再基础不过的调试手段了。大家一定要仔细探索观察输出的对象格式。

总结

本篇深入探索了参数对象的格式，在控制台中寻找到了重要线索。结合AI可以快速知晓函数具体作用。以及匿名函数、立即执行函数。

控制台输出的对象，其实也是很细致的，比如文本、字符串它的颜色是不一样的，function 也有特殊的标识。

问题并没有你想象的那么难处理，重要的是找对方法。

如果需要源码，公众号回复：plugin-demo

如果看到这里，你还是疑问，想要一对一技术指导，欢迎私信联系我。

记得点个赞咯~

评论区也可交流，想要不简说说什么技术，疑难解答。

下期再见👋🏻