NHibernate+spring.net+jquery打造UI控件库系列(两部分)------UI库的核心,命名空间与模块化管理(不知这样说对不对?)
很多朋友问我这个系列为什么没有进展？
其实我想说，这个系列迟迟没有动手是有原因的：最近忙于自定义表单的开发，并且只有一个人在做，单是单元格的拖拉选择合并与拆分，类似EXCEL的功能，已经搞得我头都大啦，可能是水平的问题，不知园里的朋友可否指点一下，很真心地请教。再加上项目本身很紧，所以根本没有时间去写这个系列，今天是星期天，悄悄地写了这些，希望对大家有点帮助。我知道时间是挤出来的，我会努力....只希望大家谅解。
本身之前的所有的控件库都是JQUERY语法的，那天晚上和xuld聊了一下，同时也认真看了他发给我他的类库(这里谢谢啦)，感觉还是用对象的方法调用比较好一点，起码有些人不一定喜欢JQuery.但以后的Dom操作还是基于JQ，今天再一次认真地看了EXT源码，参照了其的实现形式和其中的继承(extend)方法写了我们的UI库第一个版本.有兴趣的朋友可以看看
这里直接上代码啦
Sw = {
version: '1.0',
apply: function(destination, source, defaults) {
if (defaults) {Sw.apply(destination, defaults);}
if (destination && source && typeof source == 'object') {
for (var p in source) {
destination[p] = source[p];
}
}
return destination;
}
};
Sw.apply(Sw, {
applyIf: function(destination, source) {
for (var b in source)
if (destination[b] === undefined)
destination[b] = source[b];
return destination;
},
extend: function() {
var io = function(o) {
for (var m in o) {
this[m] = o[m];
}
};
var oc = Object.prototype.constructor;
return function(sb, sp, overrides) {
if (typeof sp == 'object') {
overrides = sp;
sp = sb;
sb = overrides.constructor != oc ? overrides.constructor : function { sp.apply (this,arguments); };
}
var F = function() { },
sbp,
spp = sp.prototype;
F.prototype = spp;
sbp = sb.prototype = new F();
sbp.constructor = sb;
sb.superclass = spp;
if (spp.constructor == oc) {
spp.constructor = sp;
}
sb.override = function(o) {
Sw.override(sb, o);
};
sbp.superclass = sbp.supr = (function() {
return spp;
});
sbp.override = io;
Sw.override(sb, overrides);
sb.extend = function(o) { return Sw.extend(sb, o); };
return sb;
};
} (),
override: function(origclass, overrides) {
if (overrides) {
var p = origclass.prototype;
Sw.apply(p, overrides);
if ($.browser.msie && overrides.hasOwnProperty('toString')) {
p.toString = overrides.toString;
}
}
},
Namespace: function() {
var o, d;
$(arguments).each(function(index, v) {
d = v.toString().split(".");
o = window[d[0]] = window[d[0]] || {};
$(d.slice(1)).each(function(index, v2) {
o = o[v2] = o[v2] || {};
});
});
return o;
}
});
Sw.applyIf(String, {
format: function(format) {
if (arguments.length == 0) return "";
if (arguments.length == 1) return arguments[0];
var args = arguments;
return arguments[0].replace(/{(\d+)?}/g, function(m, i) {
return args[parseInt(i) + 1];
})
}
});
下面我简单地示例下这个库的运用,至于其他，大家可以下载代码回去看看
<script type="text/javascript">
/**
* @使用命名空间
* @Namespace example
*/
Sw.Namespace("Darren.Controls.DatePicker")
Darren.Controls.render = function() { alert("controlsWidth:200px"); }
Darren.Controls.DatePicker.render = function() { alert("DatePickerWidth:200px"); }
/**
* @构造函数
* @Construct example
* @params:object------>注意such as {width:"200"}or {width:"200",height:"100"}
*/
//添加构造函数
Darren.Controls.DatePicker = function(objParams) {
Sw.apply(this, objParams);
}
//添加实例方法-----------------参照(1)
Sw.apply(Darren.Controls.DatePicker.prototype, {
print: function() {
alert(String.format("width:{0},height:{1}", this.width, this.height));
}
})
/**
* @类属性,类实例方法,类静态方法
* @property method example
*/
//添加一个颜色属性和一个静态方法show()
Sw.apply(Darren.Controls.DatePicker.prototype, {
color:"#FF0000",
show: function() { alert(String.format("this.datePicker.color:{0},但我是调用一个实例方法呵",this.color)); }
})
//添加类静态方法
Darren.Controls.DatePicker.show = function() {
alert(String.format("this.datePicker.color:{0},我是调用一个静态方法哈", this.color));
}
/**
* @方法重写
* @override method example
*/
Sw.apply(Darren.Controls.DatePicker.prototype, {
dispose: function() { alert(String.format("this.datePicker.color:{0}", this.color)); }
})
//重写dispose方法-*** //方法二可参考类继承部分
Sw.apply(Darren.Controls.DatePicker.prototype, {
dispose: function() { alert(String.format("this.datePicker.color:{0},但我已经重写了此方法", this.color)); }
})
/**
* @类继承,以及别名的应用
* @class extend example
*/
DC = Darren.Controls; //命名空间的别名
//*******************父类*********************
//构造方法
DC.Panel = function(param){
Sw.apply(this,param);
}
DCP =DC.Panel; //类别名
//演示类实例方法
Sw.apply(DCP.prototype, {
name: "my name is panel",
color: "my color is #FFFFFF",
initialize:function(){
alert(String.format("{0},{1}", this.name, this.color));
}
})
//*******************子类1*********************
DC.Window = function(param) {
Sw.apply(this,param);
}
DCW = DC.Window;
//让window 继承panel并重写initialize()方法
Sw.extend(DCW, DCP, {
name: "my name is window",
//大家可以试着注释下面方法重写，就是调用父类的initialize()方法
initialize: function() {
alert(String.format("{0},{1}我的颜色是我父亲的,但是我的名字改了哦，呵呵", this.name, this.color));
}
})
$(function() {
//************** 演示(大家可以去掉注释个个测试)***********************
//**命名空间,别名
//new Darren.Controls.render();
//new Darren.Controls.DatePicker.render();
//**构造函数
//var datepicker = new Darren.Controls.DatePicker({ width: "200", height: "100" });
// datepicker.print();
//**类属性,类实例方法,类静态方法
//var datepicker = new Darren.Controls.DatePicker();
//调用实例方法
//datepicker.show();
//调用静态方法
//Darren.Controls.DatePicker.show();
//**方法重写
// var datepicker = new Darren.Controls.DatePicker();
//调用实例方法
//datepicker.dispose();
//**类继承,以及别名的应用
// var dialog = new DCW();
//dialog.initialize();
});
</script>
为什么要写这个示例呢？很简单，以后的日子还长着呢...呵呵只是给个大家以后沟通的方式罢啦.之后的控件系列都会基于这样的语法来实现的.不知道大家有什么好的建议？示例代码
