在自定义控件开发中，开发者经常会碰到一些问题。例如，自定义控件没有注册（代码中没有注册控件id）、自定义控件在IE11上没显示（使用了不兼容IE11的语法）。而事实上，这些问题都可以在开发自定义控件过程中避免。

为提高自定义控件开发效率，便于后期开发者添加功能及维护、输出高质量的自定义控件，本文将针对开发者经常碰到的问题，从准备工作、代码编写到打包上传三个方面，为开发者定制一份自定义控件的开发规范（包括务必遵守和推荐执行两方面）。

注册自定义控件时，控件id组成规则应为 `开发商标识-领域标识-控件名称` 以确保控件id的唯一性。同时，命名需采用小写方式，可以用中划线分隔或者使用小写驼峰命名，避免出现大写的控件id。

正例【emoji】：

// 开发商标识：kingdee，领域标识：hr，控件名称：search-box
KDApi.register('kingdee-hr-search-box', MyFunction)

反例【emoji】：

// 这些都是不可取的
KDApi.register('SearchBox', MyFunction) // 控件id命名规则应为 `开发商标识-领域标识-控件名称`,且为小写
KDApi.register('kingdee_hr_search_box', MyFunction) // 控件id命名应该使用中划线分割

当自定义控件需要渲染页面元素时，必须使用 `model.dom.innerHTML` 挂载页面元素。

 正例【emoji】：

KDApi.getTemplateStringByFilePath('./html/entry.html', model).then(function (result) {
  model.dom.innerHTML = result
})

 反例【emoji】：

KDApi.getTemplateStringByFilePath('./html/entry.html', model).then(function (result) {
  // 加载了html文件，并没有使用
})

es6/es7语法在IE11上兼容性极差。如果自定义控件项目没有经过babel转译，应避免使用es6/es7语法 (vue、react项目可使用)。

 正例【emoji】：

function getName () {}

反例【emoji】：

// es6语法在ie11上兼容性极差，如果项目没有经过babel转译，应尽量避免
const getName = () => {}

所有的变量都应该定义在函数作用域。这样可以避免污染全局变量，并且全局变量是不会被垃圾回收的，容易引起内存泄漏等问题。

正例【emoji】：

function getName() {
   var name = '张三'
}

反例【emoji】：

window.name = '张三'

严禁使用该类样式文件，因为此样式会重置页面上对应标签的样式。

反例【emoji】：

html,body,div,span {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  font-weight:normal;
  vertical-align:baseline;
}

禁止使用全局标签选择器，以防止全局样式被污染。

正例【emoji】：

.search-box-header {
  width: 100%;
}

反例【emoji】：

div {
  width: 100%;