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

Java程式員的JavaScript學習筆記（14——擴充jQuery UI），學習筆記jquery
計劃按如下順序完成這篇筆記：
這是筆記的第14篇，今天我們在上一篇的基礎上，擴充Easyui。
這是筆記的最後一篇，接下來的計劃是：學習下移動端html+css+javascript。
學習方法是：做例子，這樣更有動力也更有成效。
現在的想法是逐個實現的介面，頁面效果和風格盡量貼近。
頁面效能積累不多，以後專題學習，這次先不考慮。

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

回正題。

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

控制項使用方法：

<p id='p'></p>$('#p').hailongjsnote();

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

<p id='p' sort='asc'></p>$('#p').hailongjsnote('option','sort','desc');var cnt = $('#p').hailongjsnote('getCount');<p id='p' preload='func();'></p>$('#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('<ul class="jsnote-list"></ul>');        return $(target);    }        function setContent(target,notes){        var item , htm = '';        for(var idx = 0; idx < notes.length; ++idx){                item = notes[idx];                htm += '<li><a href="'+item.href+'">'+item.title+'</a></li>';        }        $(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 標籤屬性 <p id='p' sort='asc'></p>
實現：
修改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 += '<li><a href="'+item.href+'">'+item.title+'</a></li>';                }        }else{                for(var idx = 0; idx < notes.length; ++idx){                        item = notes[idx];                        htm += '<li><a href="'+item.href+'">'+item.title+'</a></li>';                }        }        $(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);    }

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

學無止境，繼續努力！
java程式員用學JavaScript

1 如果你做GUI的圖形開發，那麼不需要！
2 如果你只做後台開發，那麼不需要
3 如果你做前台的頁面開發，那麼非常需要

OVER
 
現在作為一個java程式員，在項目開發中對於jQuery這個javascript架構會用到什方面的知識

jquery的話主要是操作前台的，如果你只是做背景話 通道的可能不會太多：
我只是說我所用到的啊
1：前台與後台進行無重新整理的操作從而達到資料的互動，當然也包過無重新整理上傳
2：如果你用jquert easyUI的話 可能用到json的就比較多了，無重新整理表格，無重新整理書，無重新整理下拉框，前台的所有空間都可以easyUI很簡單的就實現無重新整理，
3：提交表動的時候一些空間值的驗證了，諸如這些之類的，

如果說這些你們分工很明確的話 你這估計都不用謝，你只用後台返回json就行了，前台肯本就不用管

如果還有什麼不明白的話 請追問