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

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

背景

之前的博文中有提及到,发现easyui中的combobox,datebox,layout都有效率问题,其中layout的问题在这里有直接的解决方法,而combobox,datebox的问题其实在layout的DEMO中也处理了,这里主要是写其处理过程。

处理旧问题,发现新问题

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

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

<div id="win" iconCls="icon-save" title="My Window"></div>

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

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

分析easyui源代码

虽然easyui的源代码混淆了,但是认真看也能发现问题的(PS:后来发现这里有未经混淆的代码了) 里面有一个叫parseOptions的函数,就是把HTML上的属性转化为组件能使用的属性。

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

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

经过测试和其他细节调整,最后代码是这样的

  1. var om = {
  2. dataStore:{},
  3. parse:function(key){
  4. var setData = {
  5. "Button":{
  6. parseOptions:function(obj){
  7. var $obj = obj instanceof jQuery ? obj : $(obj);
  8. return {
  9. //图片是用地址放上去的,而不是css,不科学,待改进
  10. icons: {left:$obj.attr("iconLeft") || $obj.attr("iconCls"),right:$obj.attr("iconRight")}
  11. }
  12. }
  13. },
  14. "Calendar":{
  15. parseOptions:function(obj){
  16. var $obj = obj instanceof jQuery ? obj : $(obj);
  17. return {
  18. }
  19. }
  20. },
  21. "Combo":{
  22. parseOptions:function(obj){
  23. var $obj = obj instanceof jQuery ? obj : $(obj);
  24. return {
  25. value:$obj.val(),
  26. readOnly:/(readonly)|(true)/i.test($obj.attr("readOnly")) ? true : false,
  27. dataSource:$obj.attr("dataSource"),
  28. inputField:$obj.attr("inputField"),
  29. optionField:$obj.attr("optionField") || "text",
  30. valueField:$obj.attr("valueField") || "value"
  31. }
  32. }
  33. },
  34. "NumberField":{
  35. parseOptions:function(obj){
  36. var $obj = obj instanceof jQuery ? obj : $(obj);
  37. return {
  38. allowDecimals:/true/i.test($obj.attr("allowDecimals")) ? true : false,
  39. allowNegative:/true/i.test($obj.attr("allowNegative")) ? true : false,
  40. decimalPrecision:$obj.attr("decimalPrecision")
  41. }
  42. }
  43. },
  44. "Panel":{
  45. parseOptions:function(obj){
  46. var $obj = obj instanceof jQuery ? obj : $(obj);
  47. return {
  48. width:$obj.css(‘width‘),
  49. height:$obj.css("height"),
  50. collapsed:$obj.attr("collapsed") == "true",
  51. collapsible:$obj.attr("collapsible") == "true" || $obj.attr("collapsed") == "true" || true
  52. }
  53. }
  54. },
  55. "Tabs":{
  56. parseOptions:function(obj){
  57. var $obj = obj instanceof jQuery ? obj : $(obj);
  58. return {
  59. }
  60. }
  61. }
  62. }
  63. return key ? setData[key] : setData;
  64. },
  65. omDocReady:function(){
  66. //$.om.omCombo.prototype.options.editable = false;
  67. $.extend($.om.omCombo.prototype.options,{ //改变下拉框的默认值
  68. forceSelection : true,
  69. filterDelay : 200,
  70. listMaxHeight : 200,
  71. inputField:"text",
  72. optionField:"text",
  73. valueField:"value"
  74. });
  75. $.om.omCalendar.prototype.options.editable = false;
  76. var sd = om.parse();
  77. $.each(sd,function(key,val){
  78. $(".oma-"+key).each(function(oid,odm){
  79. var $obj = $(odm);
  80. var conf = sd[key].parseOptions($obj);
  81. $obj["om"+key](conf);
  82. });
  83. })
  84. }
  85. }

完整的DEMO

HTML扩展方式与纯JS调用

一开始使用extjs的时候,推崇的是纯JS调用式的使用组件,即

  1. $("#id").Component({
  2. properties1:value1,
  3. properties2:value2
  4. })

现在在项目实践中发现,easyui可以直接把属性定义在HTML上,通过源代码的察看发现,其实他们最终都是纯JS调用在起作用,但是直接定义在HTML上更加容易入门,对于项目中一些新手来说更加好用。反正经过我的封装,项目组的其他不太熟悉前端的人使用起来是方便了。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。