276
說說jQuery UI 1.8的組件體係特點
jQuery以其良好的api設計在前端開發中造成了極大的影響力，他們的“write less do more”這個宗旨得到了充分的體現，但是他的UI庫又是一個怎麼樣的體係結構呢，他們的UI庫的api設計的怎麼樣呢？
我還是通過一段偽代碼，來演示下如何來寫一個jQuery UI組件：
(function($) { //私有變量和方法 這裏是代碼 $.widget("ui.dialog", {//組件名稱 //共有方法和屬性，定義在prototype上 options: {//配置屬性 }, _create: function() { //dom操作 //綁定事件 }, //執行默認的動作 _init: function() { if ( this.options.autoOpen ) { this.open(); } }, //銷毀組件 destroy: function() { }, //返回生成組件的dom元素 widget: function() { return this.uiDialog; }, //設置和獲取配置項 option: function(key, value){ $.Widget.prototype._setOption.apply(self, arguments); } } }); $.extend($.ui.dialog, { //類屬性和方法 }); }(jQuery)); 如果用到繼承 $.widget($.ui.Simpledialog, $.ui.dialog ,{ //共有屬性和方法在這裏定義 })
這裏我們可以看到隻要調用$.widget(String name, Options prototype).，就可以生成一個jQuery UI的組件，那麼這個方法幫我們做了什麼工作呢？
1. 如果僅僅生成一個獨立的組件，我們直接調用$.widget(String name, Options prototype)，其中第一個方法就是組件的名稱，第一個參數就是組件的一些共有屬性和方法。
2. 如果需要用到繼承，我們就用$.widget(String name, String baseName,Options prototype),這個的第二個參數就是基類的名稱了。
3. $.widget向我們提供了create方法來生成dom和綁定事件，_init方法來執行一些默認的動作，_setOption來設置一個配置屬性項，widget用來獲取生成組件的外層dom元素，destroy用來銷毀組件，option()用來獲取和設置配置項，我們可以再自己寫的組件中覆蓋這些方法。
使用dialog控件:
$('#dialog').dialog({ autoOpen: false, show: 'blind', hide: 'explode' }); 初始化後設置配置項： $( ".selector" ).dialog( "option", "autoOpen", false ); 獲取配置項： $( ".selector" ).dialog( { autoOpen: false } ); 初始化後綁定事件： $( ".selector" ).bind( "dialogopen", function(event, ui) {}); 初始化後調用方法： $( ".selector" ).dialog( "open" )
Ok，現在為止我們已經會開發和使用用jQuery UI1.8開發的dialog,我們來總結下jQueryUI1.8庫的一些特點：
1. 在API的使用上仍然秉承了jQuery核心庫的特點，獲取和設置屬性使用同一個方法。
2. 在$.widget沒有為控件綁定事件的接口，必須自己手工在create中進行綁定。
3. jqueryUI有著強大的自定製組件的功能，我們很方便你的自定義的自己的樣式的組件，具體請看（https://jqueryui.com/themeroller/）
雖然JQueryUI1.8有很優秀的地方，但是由於它的組件都是第三方貢獻的，代碼的可維護性較差，也沒有代碼的管理結構，性能方麵也比較牽強，因此組織大型的RIA應用的時候，如果您不是一個JavaScript ninja,您還是不要使用這個ui框架了，總之它的ui庫還是比較年輕。但是可以使用jQuery核心庫，核心庫還是很風光的，歡迎大家看這邊文章https://news.csdn.net/a/20100327/217617.html。
最後更新：2017-04-02 04:26:01