关于javascript:你还在这样使用layuilayuiform篇

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/java…

源码及应用demo：

https://gitee.com/ten-ken/sty…

本文来源于：程序员ken，专属平台有csdn、思否(SegmentFault)、 简书、 开源中国(oschina)、掘金，转载请注明出处。