计划和完成这个例子中，音符的顺序如下：
- 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 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);
}
基本搞定，详细信息，然后慢慢推敲。
终身学习，保持。
版权声明：本文博客原创文章。博客，未经同意，不得转载。
时间： 2024-10-08 09:47:52