KISSY1.2.0学习笔记-2

version {String} 属性

作用:属性,返回KISSY的版本号

参数:无

举例:

Code:

KISSY.version;//1.1.6

buildTime {String} 属性

作用:属性,返回KISSY的打包时间

参数:无

举例:

KISSY.buildTime;// 20110825162101

merge {Object} function(a1,a2,a3……)

作用:将所传的对象一次合并,并返回一个新的对象

说明:这个函数是调用mix方法来多次合并对象,不会覆盖前面对象的属性,主要用于简单的对象合并

参数:{Object} a1 对象

举例:

var a1 = {a:1,b:2},a2 = {a:2,c:3};
KISSY.merge(a1,a2);//{a:1,b:2,c:3}
KISSY.merge(a2,a1);//{a:2,b:2,c:3}

augment {Object} function(/*r, s1, s2, …, ov, wl*/)

作用:将s1,s2……的原型(prototype,如果没有就复制成员)复制到r上面

说明:这个函数也是由mix方法派生出来的,但是和merge相比会复制原型链,主要用于方法类的复制。

参数:

{Function} r 目标对象

{Function|Object} s1(s2……) 源对象

{Boolean} ov 是否是覆盖模式(override),如果r存在A属性,那么是否要用s的A属性覆盖之,默认为false

{Array} wl 白名单(write List),如果非空就只拷贝wl数组里面的属性

举例:

function animal(){
this.name= ‘animal’;
this.eat = function(){};
this.say=function(){alert(‘miaomiao’);}
}
KISSY.augment(animal,{color:’white’});
new animal();//此时已经有color属性了

extend {Object} function(r, s, px, sx)

作用:将s1,s2……的原型(prototype,如果没有就复制成员)复制到r上面

说明:这个函数也是由mix方法派生出来的,但是和merge相比会复制原型链,主要用于方法类的复制。

参数:

{Function} r 目标对象

{Function } s 需要继承的对象

{Object} px 需要添加(或者覆盖)到原型链(prototype)的参数列表

{Object} sx 需要直接添加(或者覆盖)的方法列表

举例:

function Animal(){}
Animal.prototype.name= ‘animal’;
Animal.prototype.eat = function(){};
Animal.prototype.say=function(){alert(‘miaomiao’);}
function Cat(){}
Cat.name=‘mimi’;
KISSY.extend(Cat,Animal);
new Cat();//此时已经有color属性了
 

主要是三个重要的方法:merge、augment、extend这是面向对象编程的重要方法,这三个方法在不同的场合使用,有些时候可以通用。细节还是要多多体会。

KISSY1.2.0学习笔记-1

KISSY的组件是很丰富的,功能也和jQuery接近,但是KISSY的互联网文档除了官方文档就没有其他地方可以找到了。

KISSY的seed文件夹是基础函数,是KISSY的基本方法,所有的东西都是基于这些搭建。

/seed/kissy.js

作用:

1. 在页面中产生KISSY对象,闭包(mix函数的实现见下文)

(function(S, undefined) {
	var host = this;//此时的this为window对象
	host[S] = {};
)('KISSY', undefined);

2. 定义基本的方法(mix,merge,augment,extend,namespace,app,config,log,error,guid,__init)和属性(version,buildTime)

说明:

通过首先定义mix方法产生一个KISSY对象,然后再通过mix方法添加其余的属性和方法。在后面会有很多使用mix的地方。

方法:

  • · mix {Object} function(r, s, ov, wl, deep)

作用:将s的所有属性拷贝到r上,并返回增加属性后的r

参数:

    {Object} r 目标对象

  •     {Object} s 源对象
  •     {Boolean} ov 是否是覆盖模式(override),如果r存在A属性,那么是否要用s的A属性覆盖之,默认为false
  •     {Array} wl 白名单(writeList),如果非空就只拷贝数组里面的属性
  •     {Boolean} deep 深拷贝(区别于引用拷贝),设置这个为true且s为数组或者是PlainObject(对象是{}产生成为PlainObject)则进行深拷贝。默认false

举例:

var src = {a:1,b:2},dest = {a:2,c:3};
KISSY.mix(dest,src); //dest == {a:1,b:2,c:3}
KISSY.mix(dest,src,true);//dest == {a:1,b:2,c:3}
KISSY.mix(dest,src,true,[‘a’]);//dest == {a:1,b:2,c:3}

一个价格效验引出的血案

测试是很牛逼的,某天写了一个判断

function testPrice(val){
	return Math.floor(val/0.01) == val/0.01;
}

就是这么一个小东西,目的是限制价格位数只能为2位

如果

val = 2.123;

那么testPrice就返回false了

看起来逻辑完全没有问题,

但是测试的一个数字:2.22

testPrice(2.22) == false!!

一阵迷茫这后很快发现问题了~

可能是计算机储存数据丢失精度了~

firebug 检查一下

image

果然是,换成乘法也应该是会错误的

image

至于为什么会出现精度丢失这个就属于计算机基础知识了,就不多说了

果断把算法换了

正在表达式还是最靠谱的,附上一个更强的正则(包括效验长度,大小,限制数字)

/^[1-9]d{0,7}$|^0.d{1,2}$|^[1-9]d{0,7}.d{1,2}$/

自定义样式的radio控件

先看效果

image

 

在有些地方默认的radio效果已经不能满足很多交互需求

 

image

 

如果抛弃默认的radio控件又会丢失很多重要的属性,比如后退或者F5之后表单信息的存储.

 

利用label与input的对应关系,把radio隐藏,显示label标签

 

然后根据name属性利用js对表单分组处理

 

原理就是这样的

 

html代码:

CSS部分:

.form .tb-radio {
	display: none;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
}
.form .tb-radio-label {
	line-height: 26px;
	height: 26px;
	border: 1px solid #ddd;
	display: inline-block;
	padding: 1px 17px;
	outline: none;
	cursor: pointer;
	margin-top: 15px;
}
.form .tb-radio-label.crt,
.form .tb-radio-label:hover,
.form .tb-radio-label.hover,
.form .tb-radio-label:focus {
	border: 2px solid #ff6600;
	line-height: 26px;
	*line-height: 27px;
	_line-height: 26px;
	height: 26px;
	padding: 0 16px;
	background-color: #eaeaea;
	outline: none;
}
.form .tb-radio-label.crt {
	background: url(images/sprites.png) no-repeat 100% -702px;
	background-color: #eaeaea;
}

JS部分:

			KISSY.ready(function(S){
				//代码开始
				var DOM = S.DOM,
					Event = S.Event;
				var TBRadioLabels = S.query('.J_Radio');
				//从checked状态中读取选择情况
				S.each(TBRadioLabels,function(i){
					var t_radio = getInputByLabel(i);
					if(t_radio.checked){
						DOM.addClass(i,'crt');
					}
				});

				//点击或者回车触发选择
				Event.on(TBRadioLabels,'click keydown',function(ev){
					if(!S.isUndefined(ev.keyCode) && ev.keyCode != 13 && ev.keyCode != 0) return ;
					var radioGroup = DOM.attr(getInputByLabel(ev.currentTarget),'name');
					S.each(TBRadioLabels,function(i){
						if(DOM.attr(getInputByLabel(i),'name') === radioGroup){
							DOM.removeClass(i,'crt');
						}
					});
					getInputByLabel(ev.currentTarget).checked = true;
					DOM.addClass(ev.currentTarget,'crt');
				});
			//通过label获取对应的input
			function getInputByLabel(label){
				var inputId = '#'+DOM.attr(label,'for');
				return S.get(inputId);
			}

		});

附上demo:http://lansepink.appspot.com/media/aglsYW5zZXBpbmtyDQsSBU1lZGlhGJqJJAw/radio.htm

一种基于P2P的web服务器模型

云是有一个个的细微颗粒组成的,每个颗粒虽然是微小的,但是它们组合起来却可以遮天蔽日,具有强大的能力。

最近bitcoin的出现让我觉得基于p2p的web服务器应该也是可以实现的吧。以下是我个人的一些想法。

实现的效果

· 用户在安装客户端程序之后会自动与其他网络节点之间取得联系,获取一些必要的信息(这些信息待定)

· 用户在浏览器中输入127.0.0.1或者localhost即可访问这个基于p2p的网络服务器。(当然可以不使用80端口)

· 这个web服务器是一个平台,用户可以在上面创建自己的网站,比如搭建wordpress等等,使用的人越多该用户的网站获取的资源就越多。极端情况是如果这个人的服务只有他一个人使用那么他的数据不会扩散到P2P网络。

首先一个应用需要两个基本的东西

A、 存储空间

B、 运算资源(CPU资源)

clip_image001
每个用户就是一个网络节点,这点与P2P网络没有区别。(为了鼓励节点用户分享足够的资源,可以采用积分制度,甚至与bitcoin绑定。)

其次解决与传统服务器不同的结构

A、 传统服务器控制权在网站站长手里,可以防止数据被恶意篡改,但是现在所有的数据要分布存储在不同的计算机物理存储设备中,怎样防止错误的信息扩散到P2P网络中。
我想到的是基本原则是让信息PK,假设正确的信息序列是ABCDEFG,而有人攻击网络将一部分节点的信息改为ABBDEFG了。

clip_image002
PK之后

clip_image003
只要错误的信息少于正确的冗余数量就可以消灭错误的信息。

B、 数据存储的连续性,在传统硬盘上面文件存储的结构改变了,需要定义一种新的文件系统File System。用于解决数据查询。
(在这里可以解决文件缓存问题,比如web上面一些常用的静态文件可以直接存在用户节点,且竟可能少的存放用户不需要的资源。

C、 CPU资源的分散,需要网络自动将一些运算分解开,发布给节点CPU运算。

最后

还有很多一些细节的想法,但是自己对计算机底层不是很了解,比较喜欢生物的存在方式,相信世界的本源都是简单到极致的,不喜欢直接就创造一个庞然大物,喜欢用微小的元素组成一个有机体。

另外对现在的云计算走的道路不是很赞同,觉得不应该把所有的计算、存储集中在服务器,而是储存与计算都分散到每个用户。用户有需求自然产生云。

欢迎大家拍砖~

这个想法很早就有了,但是一直没有敢写出来,最近又看到一些BT的资料,觉得还是很可行的。

附上一些资料:

http://www.udpwork.com/item/5164.html

http://wenku.baidu.com/view/ee91580216fc700abb68fcae.html