1.前言：
layui用了几年，这个框架十分适合我们后台人员开发。简单易用，用的较多的模块肯定是table模块和form模块了。但是在一个开发团队中，不同的人开发水平的差异，如果没有调用统一的公共方法，那就会造成很多样式的不同和公共的bug出现到不同的页面 从而出现耗费过多的精力修改bug。所以我们需要做的是统一样式和方法的调用，将其二次封装以便于开发人员的调用。另一方面也能减少代码的冗余量。
2. layui-form的封装
2.1.针对select组件的封装
2.1.1 结构
一般不同的是select里面的option不同，所以html里面的select标签 会保留在页面上。
2.1.1.1 解析数据源匹配到前端固有的取值方式
只需要一个select方法，构建页面的下拉框，那select的方法里面需要哪些东西？
肯定需要四部分【重点】：
2.1.1.2 ajax的配置包括请求参数
2.1.1.3 绑定的select集合及它的lay-filter
绑定的select的id的集合，这个肯定是数组，select的lay-filter属性值，这个拥有监听点击事件，以便进行回调，还有就是默认的select的选中值捆绑，可以设置默认选中
2.1.1.4 解析数据设置option
重点就是每个option 的文本值和value的设置，这个在参数keyValues里面设置，使用数组对象，单个里面为{key:'',value:'',extra:''}，处理第几个select时采用针对的key value 和extra ，以便正常的数据源正常的取值，另外提醒一下extra是个额外的扩展字段，存于没有option的data-info里面。
2.1.1.5 事件的回调
这个包括下拉框的回调 和 因为后端的格式不一定跟前端的一样，所有返回的数据需要重新解析，这点在parseData的回调方法中得以体现，返回的格式为下图所示,还有就是样式不能适配业务直接走successBack方法，定义了successBack方法，就不能构建select控件了，切记。
2.1.1.6 局部代码
ps: select也有单独封装，引用layui_select.js即开，使用方式：var laySelect = new LaySelect(); laySelect.select({...});
2.1.2 使用demo
var LayForm = new LayForm();
//非联动 --> 注意同一个表单只能‘使用’一次select 方法 不然原数据会被覆盖
// 需要使用多个 建议引用layui-select.js 通过多次创建对象调用调用select方法
LayForm.select({
elems: ['#interest', '#profession', '#money'],
layFilters: ['interest', 'profession', 'money'],
defaultValues: ['game', 'jiaoshi', '0050'],
url: 'xxx://192.168.0.xxx:6889/rest/test/getMsg',
where: {
root: 'zhongguo'
}
})
2.2 单纯的构建form [表单]
这里就快速带过了，里面我构建编辑器，一个init方法即可构建整个表单，这里只需要绑定form标签和提交按钮 的lay-filter ，加上了两个回调事件，一个是设置时间 编辑器等控件 、自定义规则、添加事件监听 等业务，另外一个是针对表单提交的回调。
2.2.1 使用demo
var LayForm = new LayForm();
LayForm.init({
formFilter: 'demo',
submitFilter: 'demo1'
}, {
"username": "我是谁",
"phone": "18225840789",
date: "2020-03-02",
password: '7324362'
}, function(form, layer, layedit, laydate) {
laydate.render({
elem: '#date'
});
}, function(form, layer, layedit, laydate, data) {
console.log(data)
});
在线文档：
https://ten-ken.gitee.io/javascriptdocs/docs/index.html
源码及使用demo：
本文来源于：程序员ken，专属平台有csdn、思否(SegmentFault)、 简书、 开源中国(oschina)、掘金，转载请注明出处。
