为operamasks增加HTML扩展方式的组件调用

#为operamasks增加HTML扩展方式的组件调用

##背景
之前的[博文](http://www.cnblogs.com/p2227/p/3540858.html)中有提及到，发现easyui中的combobox,datebox,layout都有效率问题，其中layout的问题在[这里](http://www.cnblogs.com/p2227/p/3541162.html)有直接的解决方法，而combobox,datebox的问题其实在layout的DEMO中也处理了，这里主要是写其处理过程。


##处理旧问题，发现新问题
既然easyui的组件有问题，没什么好说了，换另外一个组件好了，当时试了很多UI解决方案，鉴于界面、效率及源代码的质量问题，决定用`operamasks`去替换easyui中的combobox和datebox

但是用惯了easyui的人会发现，easyui有一个很大的特点是，有很多属性可以直接写在html上，例如

**<div ></div>**

iconCls和title就会直接加上去产生的组件上，而且也可以用类名去声明组件，这些operamasks都没有

但是不要紧，两边的源代码都有，研究一下就OK了


##分析easyui源代码
虽然easyui的源代码混淆了，但是认真看也能发现问题的（PS：后来发现[这里](http://jquery-easyui.googlecode.com/svn/trunk)有未经混淆的代码了）
里面有一个叫`parseOptions`的函数，就是把HTML上的属性转化为组件能使用的属性。

而根据类名去渲染就更加容易找到了，因为API中直接就有一个`$.parser.parse`的方法，分析一下其源代码即可。

##为operamasks增加HTML扩展方式的组件调用
经过测试和其他细节调整，最后代码是这样的
```javascript 
var om = {
        dataStore:{},
        parse:function(key){
                var setData = {
                                "Button":{
                                        parseOptions:function(obj){
                                                var $obj = obj instanceof jQuery ? obj : $(obj);
                                                return {
                                                        //图片是用地址放上去的，而不是css，不科学，待改进
                                                        icons: {left:$obj.attr("iconLeft") || $obj.attr("iconCls"),right:$obj.attr("iconRight")}
                                                }
                                        }
                                },
                                "Calendar":{
                                        parseOptions:function(obj){
                                                var $obj = obj instanceof jQuery ? obj : $(obj);
                                                return {
                                                }
                                        }
                                },
                                "Combo":{
                                        parseOptions:function(obj){
                                                var $obj = obj instanceof jQuery ? obj : $(obj);
                                                return {
                                                        value:$obj.val(),
                                                        readOnly:/(readonly)|(true)/i.test($obj.attr("readOnly")) ? true : false,
                                                        dataSource:$obj.attr("dataSource"),
                                                        inputField:$obj.attr("inputField"),
                                                        optionField:$obj.attr("optionField") || "text",
                                                        valueField:$obj.attr("valueField") || "value"
                                                }
                                        }
                                },
                                "NumberField":{
                                        parseOptions:function(obj){
                                                var $obj = obj instanceof jQuery ? obj : $(obj);
                                                return {
                                                        allowDecimals:/true/i.test($obj.attr("allowDecimals")) ? true : false,
                                                        allowNegative:/true/i.test($obj.attr("allowNegative")) ? true : false,
                                                        decimalPrecision:$obj.attr("decimalPrecision")
                                                }
                                        }
                                },
                                "Panel":{
                                        parseOptions:function(obj){
                                                var $obj = obj instanceof jQuery ? obj : $(obj);
                                                return {
                                                        width:$obj.css('width'),
                                                        height:$obj.css("height"),
                                                        collapsed:$obj.attr("collapsed") == "true",
                                                        collapsible:$obj.attr("collapsible") == "true" || $obj.attr("collapsed") == "true" || true
                                                }
                                        }
                                },
                                "Tabs":{
                                        parseOptions:function(obj){
                                                var $obj = obj instanceof jQuery ? obj : $(obj);
                                                return {
                                                }
                                        }
                                }
                        }
                return key ? setData[key] : setData;
                
        },
        omDocReady:function(){
                //$.om.omCombo.prototype.options.editable = false;
                $.extend($.om.omCombo.prototype.options,{ //改变下拉框的默认值
                        forceSelection : true,
                        filterDelay : 200,
                        listMaxHeight : 200,
            inputField:"text",
            optionField:"text",
            valueField:"value"
                });
                $.om.omCalendar.prototype.options.editable = false;
                        
                var sd = om.parse();
                $.each(sd,function(key,val){
                        $(".oma-"+key).each(function(oid,odm){
                                var $obj = $(odm);
                                var conf = sd[key].parseOptions($obj);
                                $obj["om"+key](conf);
                        });
                })
        }
}

```
[完整的DEMO](http://p2227.github.io/demo/applyLayout/playout.html)

##HTML扩展方式与纯JS调用
一开始使用extjs的时候，推崇的是纯JS调用式的使用组件，即
```javascript 
$("#id").Component({
    properties1:value1,
    properties2:value2
})
```
现在在项目实践中发现，easyui可以直接把属性定义在HTML上，通过源代码的察看发现，其实他们最终都是纯JS调用在起作用，但是直接定义在HTML上更加容易入门，对于项目中一些新手来说更加好用。反正经过我的封装，项目组的其他不太熟悉前端的人使用起来是方便了。