Category Archives: Hello World

Hello World

javascript的location对象

属性
hash 锚点,即#及其后面的锚点
host 主机名称+端口号
hostname 主机名称
href url完整地址
pathname 路径
port 端口
protocol 协议
search 搜索条件,即?及其后的参数字串

方法
replace() 更改当前页面url
reload() 从缓存中重新加载页面内容

扩展阅读:
javascript 的history对象
history.back() 等同于按浏览器的后退按钮
history.forward() 等同于按浏览器的前进按钮
history.current 指当前的url(等同于location.href),在历史中的索引位置总为 0
history.go(-2)或 history.go(“任意.html”) 向前或向后移动,或查找字符串标明的最新url
——–
参考:http://blog.sina.com.cn/s/blog_41630ab301008rxg.html

Hello World

if语句的简写方式

今天看YUI压缩的js代码,其中有类似下面的一句看的云里雾里:

s>0&&(b=s,alert(1));

取查看对应的压缩前的代码才明白是什么已是:

if(s > 0){
	b = s;
	alert(1);
}

…一if语句能给搞成这样,YUI果然NB

Hello World

Linux 设定 系统时间

查看:
[root@localhost ~]# date
六 11月 29 21:34:40 CST 2008

设定:
[root@localhost ~]# date 112921242008.29
六 11月 29 21:24:29 CST 2008
格式:date 月日时分年.秒
date -s 11/29/08
date -s 11:29:29

把系统时间强制写入CMOS
[root@localhost ~]# hwclock -w

查看:
[root@localhost ~]# hwclock –show
2008年11月29日 星期六 01时34分43秒 -0.406003 seconds
设定:
[root@localhost ~]# hwclock –set –date=”11/29/2008 22:29:00″
[root@localhost ~]# hwclock
2008年11月29日 星期六 22时29分11秒 -0.321602 seconds
系统时间和硬件时间的同步:
[root@localhost ~]# hwclock –hctosys
[root@localhost ~]# hwclock –systohc
–hctosys set the system time from the hardware clock
–systohc set the hardware clock to the current system time
——–
参考:http://apps.hi.baidu.com/share/detail/31218645

Hello World

面向对象的javascript(一)

1. 为什么要面向对象

如果你只是要用javascript做个用户名校验,那么基于事件驱动的面向过程的编程方法已经足够了,再复杂一点,如果是一个有十几个字段的表单校验,或者你个滑动banner,用上面的方法也还可以;但是如果你要搞一个类似Gmail的东西,哪怕只有其功能的十分之一的的复杂前端应用,面向对象也是必须的了。否则,代码的复杂度将是难以想象的,即使勉强开发完成了,以后的维护也将是个噩梦。


本文将主要介绍javascript对象、类和继承的基础知识,最后讲述了使用“this”的一些经验。

2. 关于javascript对象

1). js对象,即为一组属性和方法的集合,可以动态的添加或删除属性/方法

ex:
	//通过对象直接量创建对象
	var o = {a:123, b:'abc', f:function(){...}};
	//添加属性
	o.c = [1,2,3];
	//添加方法
	o.g = function(){...};
	//删除属性/方法
	delete o.a;
	oc = undefinde;

以上,通过“.”访问的属性/方法,均可以通过‘[]’访问
比如我们可以这么调用jquery对象的hide()方法:
$(‘#xxx’)[‘hide’]();
我们甚至可以这么使用:
var xh = $(‘#xxx’)[‘hide’];
然后将xh作为参数传给其他方法,然后再需要的时候使用 xh() 来执行这个方法

2). 获取对象的类型
typeof
任何对象使用typeof操作符返回均是“object”(Date和数组的typeof也是“object”)
那么我们如何知道对象的类型哪?
constructor属性
每一个对象都有一个constructor属性用类记录当前对象的构造函数

ex:
	var a = [];
	var b = typeof a; //b = "object"
	var c = a.constructor === Array; //true  注意,这里的Array不是字符串

instanceof操作符
每个对象都会有一个内部的属性_proto_,这个属性对js开发人员不可见,只在虚拟机内部使用。每当创建一个对象的时候,这个对象的_proto_就会被赋值为这个对象的构造函数的prototype,这样对象的_proto_属性和构造函数的prototype引用相同的对象,并且一旦对象创建完成,_proto_属性就不会改变。 这样通过对象的_proto_属性,以及_proto_所引用的对象的_proto_属性,就构成了一个_proto_链,及鼎鼎大名的“原型链”。
如:o instanceof c;
在上面的语句执行过程中,虚拟机会把c.prototype和o的_proto_链上的节点逐个进行比较,如果找到相等的节点,则返回true,否则返回false。

ex:
     	var o = new C();//假设C继承自A
	o instanceof C;//true
	a instanceof A;//true
	a instanceof Object;//true

3). 对象的属性
每当javascript读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向类原型的prototype属性,在prototype中查找具有给定名字的属性。如果在prototype中找到了这个属性,则返回该属性的值。虽然可以通过对象实例读取保存在原型中的值,但却不能通过对象实例重写prototype中的值。如果在实例中添加一个与prototype中属性同名的属性,则该属性会屏蔽原型中的那个属性。添加的同名属性只会阻止我们访问原型中的那个属性,但不会修改那个属性。即使将这个属性设置为null,也只会在实例中设置这个属性,而不会恢复其指向prototype的链接。不过,使用delete操作符则可以完全删除实例属性,从而让我们可以重新重新访问prototype中的属性。

3. 类
JavaScritpt没有专门的Class机制,但是我们可以function传创建构造函数,继而通过构造函数创建对象

ex1:
	function O1(){
		//添加属性
		this.a = 123;
		//添加方法
		this.f1 = function(){
			...
		};
	}
	var ot = new O1();
	alert(ot.a);//123

这里,我们就得到了O1的构造函数,另外,我们也可以利用prototype扩展类属性和方法

ex2:
	function O2(){
 
	}
	O2.prototype.a = 1234;
	O2.prototype.f1 = function(){
		alert(this.a);
	};
	var ot = new O2();
	ot.f1();//1234

前面已经提到,prototype是类原型的属性对象,O2的实例化对象ot,在访问ot.f1是,会首先从ot的属性查找f1的定义,如果找不到,就会到O2的prototype内查找。
在实际使用效果上,ex1和ex2基本是相同的,它们的区别是:每new一个O1,就同时创建一份属性和方法,内存中就会多一份O1的属性和方法;而通过prototype扩展的O2的属性和方法,无论O2被实例化几次,在内存中只会有一份,所以,我们推荐使用ex2.的方法来创建类。
但是,通过ex2.的方法创建类,代码有些散,另外,通常,我们希望某些类属性是在各个实现里是不同的

ex3:
	function O3(){
		this.a = 234;
	}
	O3.prototype = {
		f1 : function(){
			alert(this.a);
		},
		//使用这种方式完全覆盖了prototype,对象的constructor属性会变成Object,这一步,是将其修改为O3
		constructor : O3
	};
	var ot = new O3();
	ot.f1();//234

通过ex3.定义的类,在类方法里面通过this参数访问类属性/方法,但这些属性在类方法的外面,通过ot.xx都可以访问,那么,如何来定义私有变量和方法哪?
另外,这种ex3.的定义方式,构造函数和prototype仍然被分成了两部分,还可以进一步优化吗?

ex4:
	var O4 = function(){
		//构造函数
		funciton O(){
			//public
			this.a = 567;
		}
		//private
		var b = 234;
		function pf(){
			return b;
		}
		//public
		O.prototype = {
			f1 : function(){
				alert(b);
			},
			f2 : function(){
				return b;
			},
			constructor : O4
		};
		//返回类O给变量O4
		return O;
	}();//定义一个立即执行的方法
	var ot = new O4();
	ot.f1();//234

到这里,就和java书写class的方式差不多了吧,让我们来总结一下:
a. 在构造函数中添加类属性,在prototype添加类方法
b. 将类代码放在一个立即执行的function中,形成一个单独的命名空间,只对完暴露构造函数,可以在里面模拟private的属性和方法
c. 记得重新定义prototype.constructor,否则用到的时候可能会出错(其实大部分时候用不着它)
此外,我们还可以通过下面这种方式书写prototype来封装私有属性和方法

ex5:
	var O5 = function(){
		//构造函数
		funciton O(){
			//public
			this.a = 567;
		}
 
		//通过立即执行的function返回prototype对象	
		O.prototype = function(){
			//属性和方法
			var b = 234;
			var c = 2345;
			function f1(){
				//...
			}
			function f2(){
				//...
			}
			//通过return返回给prototype便是public,其他的private
			return {
				c : c,
				f1 : f1
			}
		}();
		return O;
	}();

如本节刚开时所述,“ JavaScritpt没有专门的Class机制”,我们只能使用构造函数和原型链来模拟类的实现,有众多的方法可以写出一个类,我们需要根据实际的需要来确定类的写法。


~~~未完待续

Hello World

一个巨简单的js keys函数

今天看到了一个很简单的object提取key的函数,又对它做了进一步的简化:

	//提取object所有可以被for-in出来的key
	function keys(o){
		var a = [];
		for(a[a.length] in o);
		return a;
	}

通过这个函数我们看出了javascript for(i in object){…}循环的执行方式:每次循环,i是首先被赋值为object的key,然后再执行{…},而上面的keys函数整是巧妙的利用这一特性简化了代码

Hello World

jquery1.6以后attr()方法的变化

下午做了一个控制textarea的功能,在测试页面里表现很好,挪到使用环境里就不行了,“attr(‘scrollHeight’)”总是返回undefined~~~~开始以为是两边css不一样的问题,某个css样式影响了scrollHeight属性,删掉多余的css,不行;后来以为是使用环境里的其他js的影响,于是去掉其他所有的js,还是不行~~~折腾了一个多小时,百思不得其解之时,去了趟wc,突然就开窍了~~~之前看过jquery版本变化时,貌似提到一些方法发生了变化:测试页面用的是1.4,而使用环境用的时1.6~~~于是将使用环境的暂时变成1.4,成功!!
查了一下,是jquery1.6以后的attr方法有了变化,我这里用到了“attr(‘scrollHeight’)”,到了1.6,需要使用“prop(‘scrollHeight’)”才能取到。于是把jquery换回1.6,把attr换成prop,功能正常了。

Hello World

初识node.js—-异步分段读取文件

以前只是在ajax的时候使用异步编程,这次通过node.js异步读文件,和以往的同步编程确实很不一样啊!

//File System
var fs = require('fs');
//fd is the file descriptor used by the WriteStream.
var logFd;
//日志文件
var log = 'i_access.log';
//读取过程需要的
var buf,
	logSize,
	start = 0,
	length,
	offse = 0,
	logArr = '',
	LENGHT = 1024 * 1024;//每次读取的长度,1M
 
//读取文件信息,获取文件长度
fs.stat(log, function(err, stats){
	if(err) throw err;
//	console.log(JSON.stringify(stats));
	logSize = stats.size;
	//打开文件
	fs.open(log, 'r', 0666, function(err, fd){
		if(err) throw err;
		logFd = fd;
		length = LENGHT < (logSize - offse) ? LENGHT : (logSize - offse);
		buf = new Buffer(length);
		//日志读取
		readLog();
	});
});
//日志读取
function readLog(){
	//读取
	fs.read(logFd, buf, start, length, offse, function(err){
		if(err) throw err;
		//按行切分
		logArr = buf.toString('utf8').split('\n');
		var last = false;
		//判断是否是最后一次调用
		if(offse + length < logSize){
			//最后一行不完整,抛掉,下次在取
			last = logArr.pop();
		}
		//调用日志分析模块,对logArr做处理
		logAnalysis();
		//处理参数,准备下次调用
		if(last !== false){
			offse += length - last.length;
			length = LENGHT < (logSize - offse) ? LENGHT : (logSize - offse);
			buf = new Buffer(length);
			//递归读取
			if(!lastRead){
				readLog();
			}
		}
	});
}
//日志分析模块
function logAnalysis(){
	//TODO:日志分析与读取......
	console.log(logArr.length);
	console.log(logArr[0]);
	console.log(logArr[logArr.length - 1]);
	console.log('------');
}

Hello World

js触发链接

如果只是触发一个链接之前绑定的click事件,使用jquery,只要掉“$(a).click()”就可以了,但是,这种做法并不能触发链接的点击效果。
如果用js做页面的跳转,可以使用“window.location”,但如果只是想触发一个锚点,使用“window.location”在一些浏览器里仍然会带来页面刷新,这时,可以使用下面的方法:

function doClick(aId/* 链接的id */){
	if(document.all){ 
		document.getElementById(aId).click(); 
	}else{ 
		var evt = document.createEvent("MouseEvents"); 
		evt.initEvent("click", true, true); 
		document.getElementById(aId).dispatchEvent(evt); 
	}
}

Hello World

json_encode 处理特殊字符

php 内置的 json_encode 做完可选参数是可以处理特殊字符(引号,双引号,&,<>等):

<?php
$a = array('<foo>',"'b'ar'",'"ba"z"','&blong&');
 
echo "Normal: ", json_encode($a), "\n";
echo "Tags: ", json_encode($a, JSON_HEX_TAG), "\n";
echo "Apos: ", json_encode($a, JSON_HEX_APOS), "\n";
echo "Quot: ", json_encode($a, JSON_HEX_QUOT), "\n";
echo "Amp: ", json_encode($a, JSON_HEX_AMP), "\n";
echo "All: ", json_encode($a, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP), "\n\n";
 
$b = array();
 
echo "Empty array output as array: ", json_encode($b), "\n";
echo "Empty array output as object: ", json_encode($b, JSON_FORCE_OBJECT), "\n\n";
 
$c = array(array(1,2,3));
 
echo "Non-associative array output as array: ", json_encode($c), "\n";
echo "Non-associative array output as object: ", json_encode($c, JSON_FORCE_OBJECT), "\n\n";
 
$d = array('foo' => 'bar', 'baz' => 'long');
 
echo "Associative array always output as object: ", json_encode($d), "\n";
echo "Associative array always output as object: ", json_encode($d, JSON_FORCE_OBJECT), "\n\n";
?>

————-
参考:http://www.360pm.net/p/511

Hello World

用php实现BigPipe

bigpipe的简单php实现:

<!doctype>
<html>
<head>
	<meta charset="utf-8" />
	<title>php实现BigPipe</title>
</head>
<style>
</style>
<body>
	<div class="wrapper">
		<hr>
		<div class="section" id="con1">内容1,正在加载……</div>
		<hr>
		<div class="section" id="con2">内容2,正在加载……</div>
		<hr>
		<div class="section" id="con3">内容3,正在加载……</div>
		<hr>
	</div>
	<?php
		/*
		 * 输出缓存区
		 */
		function flush_now(){
			ob_flush();
			flush();
		}
		flush_now();
	?>
	<?php sleep(2);?>
		<script>
			document.getElementById("con1").innerHTML="====内容1====";
		</script>
	<?php flush_now()?>
 
	<?php sleep(2);?>
		<script>
			document.getElementById("con2").innerHTML="====内容2====";
		</script>
	<?php flush_now()?>
 
	<?php sleep(2);?>
		<script>
			document.getElementById("con3").innerHTML="====内容3====";
		</script>
	<?php flush_now()?>
</body>
</html>

最后,别忘了修改php.ini的:
output_buffering=4096