utils 与 plugin

在前面的章节中提到按钮组件的点击触发调用openUrl 插件的openUrl方法打开页面， 为什么不在按钮组件中引入业务utils公共方法库中的openUrl方法而要单独提炼出插件？

功效不同

如果按钮组件中引入了openUrl方法，则约束了组件的按钮点击功能只能是打开页面，而如果按钮点击时仅对外emit一个消息， 至于最终触发了什么逻辑，完全由用户配置决定，那么按钮点击的功能将是千变万化的。

如何选取

设计组件的时候怎么判定是用utils来沉淀还是独立出插件？

如果少了这个方法会导致组件的基本功能无法完成，那么就以utils沉淀，将其打包进组件包体。如果是可动态衔接的功能，就独立出插件， 可以把插件看作是动态的、可插拔的 utils。

设计组件的时候切忌把组件的业务粒度做到太大，即便是遇到需求：按钮点击打开页面，我们仍可以拆分出按钮组件和openUrl插件， 其中openUrl插件示例如下。

// openUrl 插件的基本方法，少了它不行，来源 utils 公共方法库。
import { openUrl } from '@utils/open';

/**
 * 插件对外开放编辑：1，是否立即执行 openUrl。2，页面地址。
 * @param {boolean} props.isImmediate
 * @param {string} props.url
 */
export default function myPlugin({ props }) {

  if (props.isImmediate && props.url?.trim()) {
    openUrl(props.url)
  }

  // 返回 openUrl 方法供其他组件触发执行
  return {
    openUrl
  }
}

myPlugin.isPlugin = true;

该插件预设了 2 个可编辑属性，其面板如：