数据结构设计与设置
从这节开始开始正式的功能制作，插件开发虽然是一件规模比较小的工作，也需要进行需求分析，主要是为了设计出能符合需求的数据结构。根据预想的功能需要两种数据结构，一种用来存储图层数据，这个一维数据使用数组来存储即可，另一种用来存贮命名设置的数据则是树形的，一级分类节点下还能有二级分类节点，同时每个分类节点下均可以存储多个命名配置信息，将名称与图层数据中的图层关联起来。我们考虑将第一级分类的节点存贮在数组中，每个节点内置存贮其子节点与配置信息的数据。设计后的数据结构如下：
layers: [layer...]
layer: id, name
categorys: [category...]
category: id, name, c_arr => [category...], d_arr => [data...]
data: id, name, layer_id
接下来在后端文件夹中添加quick_naming.rb文件，在其中创建QuickNaming模块，使用SuDb::ArrayDb类来作为两种数据结构的存储容器，在使用module_function关键字将后面定义的所有方法设置为模块方法后，开始编写操作数据的各种接口。根据需求需要提供对图层与命名设置数据的导入、导出与初始化功能，还有对其中的元素(包括图层、两级分类与配置信息)进行添加、删除与修改属性等等的功能，这样子就需要编写数十个接口，而且其中有很多冗余代码，不好管理。需要考虑对这些接口进行抽象，将相同的部分提取出来统一进行调用，为此我们又在后端文件夹中添加了unified_data_operation_interface.rb文件，即统一数据操作接口，通过定义operate_arr方法作为入口，根据传入的参数以数组为基本单位进行各种操作。
写完接口功能后，在后端的local_server.rb与前端的global_function.js文件中添加对统一数据操作接口的调用封装，就可以在前端获取到这些数据并进行操作了。在编写前端页面前，有三个问题点需要讲一下：
- 由于SU提供的窗口中没有控制台对象，js中使用console.log()函数将导致窗口未响应。
- A标签中的href属性不能为
javascript:void(0);，这将导致窗口未响应。 - IE9中button标签没有添加属性type="button"将被回车调用，产生预料外的情况。
然后先开始编写图层设置页面，使用Vue来实现这类功能非常方便直观，每个vue文件可以包含组件模板、组件的配置数据以及只会作用于该组件模板元素的样式。可在methods选项中定义调用接口的函数，然后在created钩子函数中添加获取图层数据函数refresh_data的调用，它会在组件创建时执行，获取目前的图层数据并赋值给layer_list变量。模板中的图层列表就会根据其中的数据进行展开。通过在模板中的输入框与按钮上绑定函数，即可在输入与点击按钮时调用对应的接口来操作后端的对象。
接着编写命名设置页面，这个页面的功能比上个页面要复杂一点，元素数量也更多，需要分级获取数据。在其中使用了不少的计算属性来保持中间状态，还使用了之前注册的一个选择组件obj-select，通过html标签在模板中引用组件并传递数据，轻松完成了调用一个拥有搜索功能的下拉框的操作。
完成两个设置页面后，实现功能所需要的后台数据配置就都完成了，下一节将讲述如何在使用界面利用这些数据并修改选中对象的名称与图层。