大概半个月前，@balbo 同学鼓励我，将之前写的一个viewer.js示例，封装成一款Enhancer组件

然而我懒癌发作，直到昨天才开始动手，磕磕碰碰花了一天半时间，在各位大佬（@lambda和@balbo）的帮助下，完成了第一款组件的开发

总体来说，开发Enhancer组件，和自定义窗口比较类似，多了一些控制台的开发工作，现在把这次组件开发遇到的问题记录一下，也方便有兴趣的朋友们尝试一下组件开发

0.viewer.js

关于viewer.js的介绍不再贴了，可以到我之前的帖子查看

附上之前自定义窗口上使用viewer.js的帖子：在自定义窗口上部署viewer.js

1.搭建开发环境

按照官方给出的文档，就可以轻松搭建好开发环境，文档地址：0.创建组件

搭建好组件开发环境之后，选定一款自己用的最顺手的文本编辑器，我选用vscode

在整个开发过程中，我们只需要对src目录进行操作，所以在vscode中，打开组件目录下的src目录，目录结构如图：

src下有三个文件夹，其中：

configurator是控制台配置器的源码目录

lib可供存放第三方js、css文件，这次开发需要用到的viewer.min.js，viewer.min.css就存放在这个目录

widget则是组件的源码目录，这个目录中的开发工作和自定义窗口几乎一致

2.配置器开发

配置器开发，需要一定的html知识，把需要用到的配置项写成html页面，展示给用户

2.1 html页面：

{{locale.inline}}的写法是html中的变量，方便切换语言

如果需要设置默认值，可以直接写入到value属性中

2.2 js文件

在js文件中指定：可以使用什么样的数据源，数据源的样例以及最重要的：如何把用户的修改后配置信息读取

关注并编写以下几个函数

initDataSource：配置数据源格式说明，以及允许使用的数据源

setProfile：读取已保存的配置信息，并渲染到配置器页面

getProfile：用户点击保存时，如何读取整理页面上的配置信息

2.3 语言文件

一看就懂的，不细说了

3. 组件开发

3.1 窗口视图

自定义窗口的窗口视图对应的是src\widget\index.html文件

3.2 窗口样式

src\widget\index.less

3.3 控制器

在控制器中略有不同，自定义窗口只需要关注各种事件（初始化、受影响、提供变量等）

组件开发，还需要在此载入第三方资源、载入配置信息等

3.3.1 载入第三方资源

我把需要用到的第三方js、css放到src\lib目录下了，然后通过如下语句加载

import viewer_css from  '../lib/viewer.min.css';
import viewer_js from '../lib/viewer.min.js';

再次感谢@lambda @balbo 的帮助：求助：在组件开发中，如何引入第三方js、css

3.3.2 组件控制器

接下来的工作就和自定义窗口几乎一致了：自定义窗口中的init对应的是construct。其他的事件：isValid、getData、affected都与自定义窗口完全一致

最后，如果需要用jq来获取窗口组件，建议写：$container.find('#...')，这样可以获取到该窗口中的组件，而不会影响到其他窗口

在construct中，$container已经定义好了，其他事件需要使用 const $container = this.getContainer();来获取定义

4. 源码

https://github.com/mingqing6364/enhancer_viewerjs