# 组件简介

# 设计初衷

在互联网软件的研发中JQuery无时无刻不在,研发项目时需要写大量的JS进行表单数据的处理以及UI操作交互,使用起来特别的繁琐,维护成本也比较高,后台就想能否设计出一套简洁易读的JS库来帮我们完成一系列的增删改查等操作的JS库,让公共的JS库去帮我们实现这些事情,而不用每次开发模块时都一次次重复性的写一些高频率,可读性查的代码,由此我们痛定思痛,决定研发一套符合现实需要又能完美的实现功能的JS,基于JQuery的强大功能特性及使用价值,我们框架的底层架构就是对JS及Layui的友好分封装,暴露了API接口可供调用,框架本身就是对JQuery和Layui的二次封装,本地Layui开箱即用的精神,我们在封装JS组件时也本着简单易读,开箱即用的理念,本框架中主要包括两个自定义核心JS类,common.js和function.js库,common.js库主要实现偏向底层对接JQuery方法的封装,而function.js核心库主要调用common.js提供的方法同时衔接UI操作的调用,同时封装和暴露了体验有的API接口层给外部调用。这样开发时只需要关注UI的实现即可,一切的增删改查操作全部让JS组件去实现,我们只需要遵循规范给API提供一系列动态可配置的参数即可,整个模块中唯一需要写的JS就是模块JS,主要定义了列表的字段,以及调用的组件方法,如下所示:

layui.use(['function'], function () {
    //声明变量
    var func = layui.function
        , $ = layui.$;

    if (A == 'index') {
        //【TABLE列数组】
        var cols = [
            {type: 'checkbox', fixed: 'left'}
            , {field: 'id', width: 80, title: 'ID', align: 'center', sort: true, fixed: 'left'}
            , {field: 'name', width: 300, title: '职级名称', align: 'center'}
            , {field: 'status', width: 100, title: '状态', align: 'center', templet: '#statusTpl'}
            , {field: 'sort', width: 80, title: '排序', align: 'center'}
            , {field: 'create_user_name', width: 100, title: '创建人', align: 'center'}
            , {field: 'create_time', width: 180, title: '创建时间', align: 'center', sort: true}
            , {field: 'update_time', width: 180, title: '更新时间', align: 'center', sort: true}
            , {fixed: 'right', width: 150, title: '功能操作', align: 'center', toolbar: '#toolBar'}
        ];

        //【渲染TABLE】
        func.tableIns(cols, "tableList");

        //【设置弹框】
        func.setWin("职级", 500, 300);

        //【设置状态】
        func.formSwitch('status', null, function (data, res) {
            console.log("开关回调成功");
        });
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

就是如此简单,整个模块的JS很简洁、可读性高,一切复杂的表单提交、复杂的UI交互及计算、表单参数处理全部交给JS组件库去处理,我们只需要提供自定义参数传入即可,整个增删改查等一系列操作都不用我们关注,只需要如上所示JS就可帮助我们完成。

# 发展历程

  • 经过几个月的撰写和完善,我们出了第一版JS组件库,此时只有一个主要JS,即:common.js核心库,在项目的实际开发中,各种场景的高频使用及动态性,发现一个单独的JS无法满足各种场景的需要,同时随着封装越来越多的方法,单体JS显得有点臃肿和杂乱,已经不能很好的使用中大型项目的研发需要,因此进行了彻底的重构;

  • 深思熟虑之后在重构的同时,增强了可扩展性、高可读性、高可用性,在实现多场景现实需求的基础上,增加灵活性的同时简化了部分方法的写法,不仅提交了效率,而且可读性也很高,因此重构common.js之后,嫁接common.js底层库和UI用户操作之前桥梁的function.js类库应运而生,此JS只负责API接口的调用以及业务数据处理,如:列表数据的渲染、添加编辑时弹框、日期选择、switch开关、网络请求(Ajax)等等功能全部交由common.js去完成,function.js值复杂上层的传输、指挥及任务调度功能,对表单数据进行验证和调用等,从而划分各自需要负责的事情,这样的好处是我们后期框架升级的可塑性和可维护性高,避免了重复写相同的代码,所有的操作全部封装成一个个各自功能独立而又丰富的方法,如:初始化表单(tabIns)、弹窗(showWin)、开关(formSwitch)、日期选择(initDate)、网络请求、上传文件(uploadFile)、表单提交(submitForm)及增删改查等等。