Java程式員的JavaScript學習筆記（14——擴充jQuery UI）

Java程式員的JavaScript學習筆記（14——擴充jQuery UI）
計劃按如下順序完成這篇筆記：
Java程式員的JavaScript學習筆記（1——理念）Java程式員的JavaScript學習筆記（2——屬性複製和繼承）Java程式員的JavaScript學習筆記（3——this/call/apply）Java程式員的JavaScript學習筆記（4——this/閉包/getter/setter）Java程式員的JavaScript學習筆記（5——prototype）Java程式員的JavaScript學習筆記（6——物件導向類比）Java程式員的JavaScript學習筆記（7——jQuery基本機制）Java程式員的JavaScript學習筆記（8——jQuery選取器）Java程式員的JavaScript學習筆記（9——jQuery工具方法）Java程式員的JavaScript學習筆記（10——jQuery-在“類”層面擴充）Java程式員的JavaScript學習筆記（11——jQuery-在“對象”層面擴充）Java程式員的JavaScript學習筆記（12——jQuery-延伸選取器）Java程式員的JavaScript學習筆記（13——jQuery UI）Java程式員的JavaScript學習筆記（14——擴充jQuery UI）這是筆記的第14篇，今天我們在上一篇的基礎上，擴充Easyui。
這是筆記的最後一篇，接下來的計劃是：學習下移動端html+css+javascript。
學習方法是：做例子，這樣更有動力也更有成效。
現在的想法是逐個實現的介面，頁面效果和風格盡量貼近。
頁面效能積累不多，以後專題學習，這次先不考慮。

    作者部落格：http://blog.csdn.net/stationxp       作者微博：http://weibo.com/liuhailong2008        轉載請取得作者同意 

回正題。

1 目標
做一個web控制項，實現功能：顯示此系列筆記的目錄。

控制項使用方法：

$('#p').hailongjsnote();

支援屬性：sort——asc正序，desc倒敘。
支援方法：getCount 得到條數。
事件： preload 和 loaded。
形如：

$('#p').hailongjsnote('option','sort','desc');var cnt = $('#p').hailongjsnote('getCount');
$('#p').hailongjsnote('on','loaded',function(event,notes){    //});

2 逐個開發功能2.1 先顯示出來檔案清單：
jquery.hailongjsnote.js
hailongjsnote.css -- 可能用不到，我不傾向在組件中將樣式寫死
demo.html
還有：
jquery.min.js
jquery.parser.js

實現準系統，代碼如下：

/** * hailongjsnote *      author : liuhailong *   date   : 2014-10-28 * Dependencies: *   jquery.mini.js / jquery.js             *      jquery.parser.js */(function($){        function init(target){        $(target).addClass('hailongjsnote');        $(target).html('
');        return $(target);    }        function setContent(target,notes){        var item , htm = '';        for(var idx = 0; idx < notes.length; ++idx){                item = notes[idx];                htm += '
'+item.title+'
';        }        $(target).find('ul').html(htm);    }        $.fn.hailongjsnote = function(options, param){        if (typeof options == 'string'){            var method = $.fn.hailongjsnote.methods[options];            if (method){                return method(this, param);            }        }                options = options || {};        return this.each(function(){            var state = $.data(this, 'hailongjsnote');            if (state){                $.extend(state.options, options);            } else {                state = $.data(this, 'hailongjsnote', {                    options: $.extend({}, $.fn.hailongjsnote.defaults, $.fn.hailongjsnote.parseOptions(this), options),                    jsnote: init(this),                    notes : $.fn.hailongjsnote.getNotes()                });            }            setContent(this,state.notes);        });    };      $.fn.hailongjsnote.parseOptions = function(target){        return $.extend({}, $.parser.parseOptions(target, ['width','height','sort','click']));    };        $.fn.hailongjsnote.getNotes = function(){        return [            {    sn:1,                title:'Java程式員的JavaScript學習筆記（1——理念） ',                href:'http://blog.csdn.net/stationxp/article/details/40020009'            },{                sn:2,                title:'Java程式員的JavaScript學習筆記（2——屬性複製和繼承） ',                href:'http://blog.csdn.net/stationxp/article/details/40068345'            },{                sn:3,                title:'Java程式員的JavaScript學習筆記（3——this/call/apply） ',                href:'http://blog.csdn.net/stationxp/article/details/40130687'            },{                sn:4,                title:'Java程式員的JavaScript學習筆記（4——this/閉包/getter/setter） ',                href:'http://blog.csdn.net/stationxp/article/details/40146441'            },{                sn:5,                title:'Java程式員的JavaScript學習筆記（5——prototype） ',                href:'http://blog.csdn.net/stationxp/article/details/40205967'            },{                sn:6,                title:'Java程式員的JavaScript學習筆記（6——物件導向類比） ',                href:'http://blog.csdn.net/stationxp/article/details/40264845'            },{                sn:7,                title:'Java程式員的JavaScript學習筆記（7——jQuery基本機制） ',                href:'http://blog.csdn.net/stationxp/article/details/40384477'            },{                sn:8,                title:'Java程式員的JavaScript學習筆記（8——jQuery選取器） ',                href:'http://blog.csdn.net/stationxp/article/details/40476959'            },{                sn:9,                title:'Java程式員的JavaScript學習筆記（9——jQuery工具方法） ',                href:'http://blog.csdn.net/stationxp/article/details/40480185'            },{                sn:10,                title:'Java程式員的JavaScript學習筆記（10——jQuery-在“類”層面擴充） ',                href:'http://blog.csdn.net/stationxp/article/details/40492735'            },{                sn:11,                title:'Java程式員的JavaScript學習筆記（11——jQuery-在“對象”層面擴充） ',                href:'http://blog.csdn.net/stationxp/article/details/40497837'            },{                sn:12,                title:'Java程式員的JavaScript學習筆記（12——jQuery-延伸選取器） ',                href:'http://blog.csdn.net/stationxp/article/details/40501123'            },{                sn:13,                title:'Java程式員的JavaScript學習筆記（13——jQuery UI） ',                href:'http://blog.csdn.net/stationxp/article/details/40534209'            },{                sn:14,                title:'Java程式員的JavaScript學習筆記（14——擴充jQuery UI） ',                href:'http://blog.csdn.net/stationxp/article/details/40535073'            }        ];    }        $.fn.hailongjsnote.defaults = {        width: '500px'    };})(jQuery);

2.2 加 sort 標籤屬性

實現：
修改setContent代碼即可：

function setContent(target,notes){        var item , htm = '';        var opts = $.data(target, 'hailongjsnote').options;//opts裡存著各種參數        if('desc' == opts.sort){                for(var idx = notes.length-1; idx >=0; --idx){                        item = notes[idx];                        htm += '
'+item.title+'
';                }        }else{                for(var idx = 0; idx < notes.length; ++idx){                        item = notes[idx];                        htm += '
'+item.title+'
';                }        }        $(target).find('ul').html(htm);}

2.3 通過js加 sort 屬性$('#p').hailongjsnote('option','sort','desc');
hailongjsnote函數需要修改定義，以支援多個參數，最好用argumets,typeof 實現。

    $.fn.hailongjsnote = function(options, param,param2){        if (typeof options == 'string'){            var method = $.fn.hailongjsnote.methods[options];            if (method){                return method(this, param,param2);            }        }

增加如下代碼實現：

   $.fn.hailongjsnote.methods = {        //$('#p').hailongjsnote('option','sort','desc');        option: function(jq,opt,param){            var state = $.data(jq[0], 'hailongjsnote');            var opts =  state.options;            if(param === undefined ){//沒有傳入第三個參數                    if(opt){                            // 所有的屬性都可以讀取                            return opts[opt];                        }            }else{                    // 給屬性設值，不是每個屬性都允許                    if(opt){                            opts[opt] = param; // 緩衝的值也自動更新了吧？                            if(opt=='sort'){                                    setContent(jq,state.notes);                            }                    }            }        }    };

2.4 增加方法var cnt = $('#p').hailongjsnote('getCount');
增加方法：

    $.fn.hailongjsnote.methods = {        getCount : function(jq){                var state = $.data(jq[0], 'hailongjsnote');                var notes = state.notes;                return notes && notes.length ? notes.length : 0;        }    };

2.5 兩個事件

// 以下代碼未經調試    function setContent(target,notes){        var opts = $.data(target, 'hailongjsnote').options;        var preload = opts['preload'];        var loaded = opts['loaded'];        notes = preload && preload(notes);        var item , htm = '';        ...        $(target).find('ul').html(htm);        loaded && loaded(htm);    }

基本搞定，細節再慢慢推敲。

學無止境，繼續努力！