easyUI前端框架的运行原理

悠悠 2024-05-08 06:31 85阅读 0赞

#### 文章目录 ####

*  理论知识
 *  回调函数
 *  参考链接

## 理论知识 ##

最近用到了easyUI框架，所以简析一下原理。如果说的不对还希望各位指正~

easyUI通过jQuery的parse解析器对页面元素进行查找，当发现某一标签的类为easyUI所定义的类时，就将该标签封装成easyUI组件。

在js代码中我们只需要按照官网为easyUI框架的组件设置属性即可正常工作，注意组件的事件方法也是属性哦，其属性值就是一个函数。这样框架会自动将事件注册到浏览器中，当有事件来临时会调用相应方法。

类似于这样：注意到loader属性是一个回调函数，那么什么是回调函数呢？

$("#tb").datagrid({
        
            pagination: true,
            singleSelect: true,
            fitColumns: true,
            scrollbarSize: 0,
            pageList: [5, 10, 20, 30, 40, 50],
            striped: true,
            rownumbers: false,
            nowrap: false,
            width: easyuitools.fixWidth(100),
            columns: [
                [
                    {
        
                        field: 'xuhao',
                        title: '序号',
                        width: 50,
                        align: 'center'
                    },
                    {
        
                        field: 'APP_NO',
                        title: '申请编号',
                        width: 300,
                        align: 'center'
                    },
                ]
            ],
            rowStyler: function (index, row) {
        
                if ((index % 2) === 0) {
        
                    return TABLE_COLOR_SINGLE;
                } else {
        
                    return TABLE_COLOR_ODD;
                }
            },
            onLoadSuccess: function (data) {
        
                $(this).datagrid("fixRownumber");
            },
            loader: function (param, success) {
        
                var para = {
        
                    "page": param.page,
                    "size": param.rows
                };
                // 查询参数
                $.extend(para, easyuitools.formVal('overTimeOrder'));
                exportPara = para;
                request.getInfo('repeat_call/searchOverdue', 'post', para, function (res) {
        
                    var total = res.total ? res.total : 0;
                    var data = [];
                    if (res.list.length === 0) {
        
                        layer.msg("暂无数据");
                        for (var i = 0; i < para.size; i++) {
        
                            data.push({
        });
                        }
                    } else {
        
                        res.list.forEach(function (v, i) {
        
                            var dic = {
        
                                'xuhao': i + (param.rows) * (para.page - 1) + 1
                            };
                            $.extend(dic, v);
                            data.push(dic)
                        });
                        // 数据不够行,空表格填充
                        if (data.length < para.size) {
        
                            for (var i = data.length; i < para.size; i++) {
        
                                data.push({
        })
                            }
                        }
                    }
                    success({
        
                        rows: data,
                        total: total
                    });
                });
            }
        });

## 回调函数 ##

回调函数简单来说就是父方法去调用子方法的参数，如A方法是我们自己写的向浏览器发起AJAX请求的方法，B方法是操作系统发出请求的方法。

我们为了向远程服务器请求数据，肯定要用A方法调用B方法，然后将操作系统本身的B方法所返回的结果传递给A方法或者另一个C方法。

这时问题就出现了，我们用A方法调用B方法，此时A方法是父类方法，B方法是子类方法。正常情况下，父类方法是访问不到子类方法所定义的变量的，那么该如何将方法B的参数传递给方法A或方法C呢？

解决办法就是把方法B要调用的整个方法引用作为参数传递给方法B，这样就达到了相应的要求。

## 参考链接 ##

[easyUI解析原理][easyUI]

[easyUI]: https://blog.csdn.net/weixin_33797791/article/details/93440837