ES6简写属性名和方法名可显著减少组件配置中重复书写。通过语义化常量、工厂函数、展开运算符及变量复用,提升可维护性与一致性。

直接用对象方法简写(即 ES6 的「简写属性名」和「简写方法名」)能显著减少属性面板配置中重复的键值对书写,尤其在定义大量组件配置项时效果明显。核心思路是:当变量名与属性名一致,或函数名与方法名一致时,省略冗余的 key: value 写法。
用简写属性名统一管理组件配置
比如 Button 组件的属性列表,传统写法要重复写 label 和 value:
❌ 传统写法(冗余)
const buttonAttribute = [ { label: '设置按钮文字', value: 'caption' }, { label: '设置危险按钮', value: 'danger' }, { label: '设置按钮禁用', value: 'disabled' }];
✅ 简写写法(推荐)
提前定义语义化常量,再利用简写属性名自动推导:
const CAPTION = 'caption';const DANGER = 'danger';const DISABLED = 'disabled';const buttonAttribute = [ { label: '设置按钮文字', value: CAPTION }, { label: '设置危险按钮', value: DANGER }, { label: '设置按钮禁用', value: DISABLED }];
更进一步,若 label 文本也与 key 高度相关,可结合模板字符串动态生成,避免硬编码文本。
用简写方法名封装通用配置生成逻辑
很多组件共用相似的配置结构(如开关控制、尺寸选择),可抽象为工厂函数,并用简写方法名减少调用开销:
const commonConfigs = { switch: (key, label) => ({ type: 'switch', col: key, label }), input: (key, label) => ({ type: 'input', col: key, label }), select: (key, label, options) => ({ type: 'select', col: key, label, props: { options } })};
使用时直接调用,无需重复写完整对象结构:
const buttonConfig = [ commonConfigs.input('caption', '按钮文字'), commonConfigs.switch('disabled', '是否禁用'), commonConfigs.select('size', '按钮尺寸', ['small', 'middle', 'large'])];
结合解构与展开运算符批量注入默认配置
每个配置项通常需带 type、col、label 三个必填字段。可定义一个基础模板对象,再用展开运算符注入特有字段:
const baseField = { type: 'input', props: {} };const inputField = { ...baseField, col: 'placeholder', label: '占位提示' };const numberField = { ...baseField, type: 'inputNumber', col: 'width', label: '宽度' };
这样既保证结构一致性,又避免每项都手动写 type 和空 props。
配置 JSON 描述中直接复用变量名作为 key
在描述面板 UI 的 JSON 中,col 字段常与组件实际 prop key 完全一致。可直接用变量名赋值,不额外声明字符串:
const PROP_KEYS = { caption: 'caption', ghost: 'ghost', shape: 'shape'};const json = [ { type: 'input', col: PROP_KEYS.caption, label: '按钮文字' }, { type: 'switch', col: PROP_KEYS.ghost, label: '幽灵模式' }];
后续修改 prop 名称时,只需改一处变量定义,所有引用自动同步,降低维护成本。

















