#為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 id="win" iconCls="icon-save" title="My Window"></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上更加容易入門，對于項目中一些新手來說更加好用。反正經過我的封裝，項目組的其他不太熟悉前端的人使用起來是方便了。

轉載于:https://www.cnblogs.com/p2227/p/3541824.html

總結

以上是生活随笔為你收集整理的为operamasks增加HTML扩展方式的组件调用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。