easyui parser源码分析和使用方法

源码分析

parser模块是easyloader第一个加载的模块，它的主要作用，就是扫描页面上easyui开头的class标签，然后初始化成easyui控件。

/**
     * parser模块主要是解析页面中easyui的控件
     */
    $.parser = {
        // 是否自动解析
        auto: true,

        // 可以被解析的控件
        plugins:['linkbutton','menu','menubutton','splitbutton','layout',
                 'tree','window','dialog','datagrid',
                 'combobox','combotree','numberbox','validatebox',
                 'calendar','datebox','panel','tabs','accordion'
        ],

        // 解析函数
        parse: function(context){
            if ($.parser.auto){
                for(var i=0; i<$.parser.plugins.length; i++){
                    (function(){
                        // 控件名
                        var name = $.parser.plugins[i];
                        // 查找class为easyui-控件名的jq对象，例如，easyui-layout
                        var r = $('.easyui-' + name, context);

                        if (r.length){
                            // 如果有这个对象，那么判断它有没有初始化函数
                            if (r[name]){
                                // 如果有直接调用
                                r[name]();
                            } else if (window.easyloader){
                                // 如果没有用easyloader把模块的js文件载入进来，再调用
                                easyloader.load(name, function(){
                                    r[name]();
                                })
                            }
                        }
                    })();
                }
            }
        }
    };

    // 调用parse方法，实际上easyloader中已经调用了，我估计这个是给不是easyloader加载时使用的
    $(function(){
        $.parser.parse();
    });
})(jQuery);

使用方法

easyui加载模块组件可以有2种方式：

1，通过设置class属性的方式

2，使用JavaScript的方式进行渲染

这本质上是通过parser解析器来实现的，一般是自动触发完成整个页面的解析。

parser主要作用

1，parser自动渲染：

最主要的运用场景: 

只要我们书写相应的class,easyui就能成功的渲染页面。 

这是因为解析器在默认情况下,会在dom加载完成的时候($(docunment).ready)被调用,而且是渲染整个页面。

2，parser解析器手动渲染：

需要手动调用的情况是: 

当页面已经加载完成,但是此时我们使用js生成的DOM中包含了easyui支持的class,并且我们也有将其渲染成easyui组件的需求。在这种情况下就需要手动调用parser

<div class="easyui-accordion" id="tt">
        <div title="title1">1</div>
<div title="title2">2</div>
</div>

当上面代码的生成是在easyui渲染界面完成之后,easyui不会一直监听页面,所以该段代码不会被渲染成“手风琴DIV”的样式。 

此时就需要我们手动去渲染了。

注意：

解析目标位指定DOM的所有子孙元素,不包括DOM本身。

$parser.parser($('tt').parent())

并非

$.parser.parse($('#tt'));

注意：

上面的id不能是为当前组件的id，必须为当前组件父容器的id。也就是说这个jQuery选择器必须是解析组件的父级以上的节点，潜台词就是这个查找出来的节点相当于一个容器,它只会解析容器里面的内容。

<div id="cc">
    <div id="Window" class="easyui-window"></div>
</div>

$.parser.parse('#cc');

这么使用id为Window的节点才会正常。

$.parser.parse();不传参是解析页面中所有定义为easyui组件的节点。