# 组件简介

# 设计初衷

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

layui.use(['func'], function () {

    //声明变量
    var func = layui.func
        , $ = 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: 200, title: '名称', align: 'center'}
            , {field: 'status', width: 100, title: '状态', align: 'center', templet: '#statusTpl'}
            , {field: 'sort', width: 100, title: '显示顺序', align: 'center'}
            , {field: 'createUserName', width: 100, title: '添加人', align: 'center'}
            , {field: 'createTime', width: 180, title: '创建时间', align: 'center'}
            , {field: 'updateUserName', width: 100, title: '更新人', align: 'center'}
            , {field: 'updateTime', width: 180, title: '更新时间', align: 'center'}
            , {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
32
33

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

# JQuery的优势

1、轻量级

JQuery非常轻巧,采用Dean Edwards编写的Packer压缩后,大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后,大小只有18KB。

2、强大的选择器

JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及JQuery独创的高级而且复杂的选择器,另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器。由于JQuery支持选择器这一特性,因此有一定CSS经验的开发人员可以很容易的切入到JQuery的学习中来。

3、出色的DOM操作的封装

JQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery轻松地完成各种原本非常复杂的操作,让JavaScript新手也能写出出色的程序。

4、可靠的事件处理机制

JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华,是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面,JQuery也做得非常不错。

5、完善的Ajax

JQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

6、不污染顶级变量

JQuery只建立一个名为JQuery的对象,其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权,绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存,在项目中放心地引用而不需要考虑到后期的冲突。

7、出色的浏览器兼容性

作为一个流行的JavaScript库,浏览器的兼容性是必须具备的条件之一。JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行。JQuery同时修复了一些浏览器之间的的差异,使开发者不必在开展项目前建立浏览器兼容库。

8、链式操作方式

JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作,可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。

9.隐式迭代

当用JQuery找到带有“.myClass”类的全部元素,然后隐藏他们时。无需循环遍历每一个返回的元素。相反,JQuery里的方法都被设计成自动操作的对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,从而大幅度地减少代码量。

10、行为层与结构层的分离

开发者可以使用选择器选中元素,然后直接给元素添加事件。这种将行为层与结构层完全分离的思想,可以使JQuery开发人员和HTML或其他页面开发人员各司其职,摆脱过去开发冲突或个人单干的开发模式。同时,后期维护也非常方便,不需要在HTML代码中寻找某些函数和重复修改HTML代码。

11、丰富的插件支持

JQuery的易扩展性,吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持,而且还不断有新插件面试。

12、完善的文档

JQuery的文档非常丰富,现阶段多位英文文档,中文文档相对较少。很多热爱JQuery的团队都在努力完善JQuery中文文档,例如JQuery的中文API。

# 发展历程

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

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