Hello World 他山石

[转]php Output Buffer(输出缓冲)函数的妙用

在PHP编程中, 我们经常会遇到一些直接产生输出的函数, 如passthru(),readfile(), var_dump() 等. 但有时我们想把这些函数的输出导入到文件中,或者先经过处理再输出, 或者把这些函数的输出作为字符串来处理.

这时我们就要用到 Output Buffer(输出缓冲) 函数了.

处理输出缓冲的函数主要有这么几个:

ob_start();  //开始输出缓冲, 这时PHP停止输出, 在这以后的输出都被转到一个内部的缓冲里. 
 
ob_get_contents();  //这个函数返回内部缓冲的内容. 这就等于把这些输出都变成了字符串. 
 
ob_get_ length();  //返回内部缓冲的长度. 
 
ob_end_flush();  //结束输出缓冲, 并输出缓冲里的内容. 在这以后的输出都是正常输出. 
 
ob_end_clean();  //结束输出缓冲, 并扔掉缓冲里的内容.

举个例子, var_dump()函数输出一个变量的结构和内容, 这在调试的时候很有用.

但如果变量的内容里有 $#@60; , $#@62; 等HTML的特殊字符, 输出到网页里就看不见了. 怎么办呢?

用输出缓冲函数能很容易的解决这个问题.

ob_start();
 
var_dump($var); 
 
$out = ob_get_contents(); 
 
ob_end_clean();

这时var_dump()的输出已经存在 $out 里了. 你可以现在就输出:

echo "$#@60;pre$#@62;" . htmlspecialchars($out) . "$#@60;/pre$#@62;" ;

或者等到将来, 再或者把这个字符串送到模板(Template)里再输出.
———
转自:http://www.2008php.com/news_tx.php?ID=5146&News_topy=3

Hello World

stop!

jquery的animate方法可以创建各种炫酷的动画效果,但是,有些时候,我们却需要停止正在运行的动画,此时,就需要用到stop方法,使用方法非常简单,以下是jquery官方文档中的内容:

/* Start animation */
$("#go").click(function(){
  $(".block").animate({left: '+=100px'}, 2000);
});
/* Stop animation when button is clicked */
$("#stop").click(function(){
  $(".block").stop();
});

即要停止谁的动画就让谁“stop”,而不用取区分具体正在运行的是什么动画

Hello World 他山石

[转] div模拟textarea

使用很简单,一个普通的block元素上加个contenteditable=”true”就ok了,如下:

<div contenteditable="true"></div>

true外面的引号甚至去掉都没关系。

contenteditable属性虽是HTML5里面的内容,但是IE似乎老早就支持此标签属性了。所以,兼容性方面还是不用太担心的。

ok,最麻烦的模拟textarea的可编辑效果已经解决了,现在想要使用div实现高度自适应那就像是给花花草草松松土一样容易的。使用min- height属性基本上就一步到位了,考虑到IE6浏览器对min/max家族不屑一顾,结合其内部元素溢出会撑开父标签高宽的特性,IE6浏览器直接定 高就可以了。

CSS代码:

.test_box {
    width: 400px; 
    min-height: 120px; 
    max-height: 300px;
    _height: 120px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 3px; 
    outline: 0; 
    border: 1px solid #a0b3d6; 
    font-size: 12px; 
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
}

HTML代码:

<div class="test_box" contenteditable="true"><br /></div>

——-
转自:http://blog.163.com/xiangfei209@126/blog/static/9869567420113154453944/

爱好收藏

wordpress表情集

:mrgreen:(:mrgreen :) :neutral:(:neutral :) :twisted:(:twisted : )
:arrow:(:arrow :) :shock:(:shock :) :smile:(:smile :)
:???:(:??? :) :cool:(:cool :) :evil:(:evil :)
:grin:(:grin :) :idea:(:idea :) :oops:(:oops :)
:razz:(:razz :) :roll:(:roll :) :wink:(:wink :)
:cry:(:cry :) :eek:(:eek :) :lol:(:lol :)
:mad:(:mad :) :sad:(:sad :) 😎 (8- ))
😯 (8-O) 🙁 (:- () 🙂 (:- ))
:-?(:- ?) :-D(:- D) :-P(:- P)
:-o(:- o) :-x(:- x) :-|(:- |)
;-)(;- )) 8) (8 )) 😯 (8O)
:((: () :)(: )) :?(: ?)
:D(: D) 😛 (: P) 😮 (:o)
:x(: x) :|(: |) ;)(; ))
:!:(:! :) :?:(:? :)
括号内的字符,去掉中间的空格,就是WP的表情。如果预览时出来的不是表情,可能是因为字符的左边或者右边需要加个空格,比如 😯 就是这样

Hello World 他山石

log4php配置文件实例

文件名:log4php-1.properties

log4php.appender.default = LoggerAppenderDailyFile
log4php.appender.default.layout = LoggerLayoutPattern
log4php.appender.default.layout.ConversionPattern =%d{ISO8601} | [%p] | %m%n 
log4php.appender.default.datePattern = Ymd
log4php.appender.default.file = /Users/logs/php/%s.log
log4php.rootLogger = DEBUG,default

这样就可以通过建立多个配置文件,方便为每一个产品或者模块采用不同的配置,当然生成的日志目录也可以灵活管理。
调用如下:

include_once('log4php/Logger.php');  
Logger::configure("log4php-1.properties");  
$logger = Logger::getLogger('cam'); 
//debug
$logger->debug('---debug---');

————
参考:http://hmw.iteye.com/blog/1147299
下载log4php:http://logging.apache.org/log4php/download.html

Hello World

ajax如何跨域

首先明确一点,ajax本身是不能跨域的(没有兼容所有主流浏览器的跨域方案),所谓的ajax跨域,不过是使用script标签去请求其他域下的一段js代码,比如下面的这个问题:
baidu地图和google地图使用的不是同一套定位数据,如果你拿google的gps数据,不做任何处理,就放到baidu地图里用,会出现比较大的偏差,为此,api.map.baidu.com提供了提供了一个转变接口,但用普通的ajax的话,就会存在跨域的问题,还好,baidu已经想到了这个问题,这个接口本身就是供跨域用的,比如,我们可以写一个这样的方法:

function g2b(x, y, callback){
	window.g2bCallback = callback;//将回调函数放到window下
	var u = 'http://api.map.baidu.com/ag/coord/convert?from=2&to=4&mode=1&x='
		+ x + '&y=' 
		+ y + '&callback=g2bCallback';//最后一个参数是回调函数的名字
	$.getScript(u);//调用接口
}

上面$.getScript(u)实际上返回这样一段js代码来以转换结果为参数调用给定的callback方法:

g2bCallback&&g2bCallback(
	[{"error":0,"x":"MTEuMDA2NTQwNzQ1OTc5","y":"MjIuMDA1OTk4OTkxODk3"}]
)

Hello World 他山石

3D立方体

只支持safari和chrome 😉

1
2
3
4
5
6
7
8
9
10
11
12


转自:http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html

Hello World 业界杂谈

整站ajax中url的处理

早在两年前,互联网中的网页数量就已超过了1万亿,并且,每天还会增加数十亿。虽然是如此浩瀚的世界,我们却可以通过url轻而易举的找到每一个页面,可见url对于网络世界时多么的重要。

随着浏览器的进步和对用户体验要求的提升,整站ajax之类的一站式前端应用正在逐步取代传统的一个url对一个页面的展示方式。在整站ajax中,数个模块在一个url下,采用无刷新的方式切换,通过减少页面刷新有效的提升了用户体验,但也带来了一些问题:

1. 某些用户习惯根据url判断自己所在的位置,如果明明点击了链接,页面变化了,url却没有变化,用户会比较晕

2. 用户保存书签后,在打开这个书签,得到的可能并不是自己想要的内容

3. 模块间切换后,不能使用浏览器的回退键退回去

针对上述问题,比较简单的方式是使用锚点做标记:每个模块切换时,锚点都会有所变化,比如:/index#list,/index#edit,这样,可以有效的解决上面提到的第1个问题;对第2个问题,前端代码初始化时根据当前页面的hash做些处理也就行了;第3个问题稍微麻烦一些,需要监控页面url的变化。

浏览器不可以给地址栏添加监听时间,只能通过定时读取location.hash/href来判断锚点是否发生了变化。定时长度不能太长,否则影响用户体验,也不能太频,会耗太多资源。这种定时的方式虽然很土,但出了“坚挺”浏览器是否回退、前进以外,却还可以减少很多绑定链接click的操作:只需要给按钮链接的href加上锚点,将参数写在锚点里,用户点击这个url时,锚点变化被定时程序“监听”到,就可以执行相应的逻辑(还顺道解决了按钮重复点击的问题,一举多得呀 :-))。关于如何把button按钮转变为锚点链接的点击可以参考本人以前的博文:js触发链接

不过使用定时方式“监听”浏览器回退,还有一个无法解决的缺陷(只是本人还未发现解决方法),IE6/7的锚点跳转记录不会进入history对象,也就是在IE6/7里,有A页面进入B页面后,B页面内由/B跳到/B#1,再跳到/B#2,再“回退”,也还是会回到A页面,无法回到中间的/B跳和/B#1…….IE而已,可以暂时不去理它。

前面说,使用方式监听地址栏变化有些土,那么,有跟好的办法吗?

之前转发的一篇博文(使用ajax和history.pushState无刷新改变页面URL)里提到了html5的一个新特性:可以注册“popstate”事件监听url的变化,我们可把前面的定时“监听”稍作改进,如果浏览器支持popstate,就使用popstate,如果不支持,在使用定时。本人测试表明,firefox、chrome、safari支持popstate事件,IE系、以及opera不支持。

———-End

Hello World

面向对象的javascript(三)


前两篇介绍了javascript面向对象的基本知识继承的实现,本篇主要介绍this关键字的使用
———–
5. 关于this
this在javascript里是一个比较神奇的东西,新手通常会被它搞到头大

1). 顶层javaScript代码中的this
在顶层javaScript代码中,this指代window对象
在嵌入浏览器中的javascript中,window即全局对象。全局对象只是一个对象,而不是类。既没有构造函数,也无法实例化一个新的全局对象。在顶层javaScript代码中,可以用关键字this引用全局对象。但通常不必用这种方式引用全局对象,因为全局对象是作用域链的头,这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。
下面几段代码中的this指代的均是window

ex1.
	var abc = 'sss';
	alert(abc);//"sss"
	alert(this.abc);//"sss"
	function fun1(){
		alert(this.abc);
	}
	fun1();//"sss"
	this.alert(123);
	alert(this.parseInt('234s4'));

2). 构造方法/类方法里的this
大部分时候,构造方法/类方法里直接使用this,指代的都是被实例化后的类对象,但是,如果其中有function/setTimeout,或者其他回调函数时,情况就有些不同了,如果想让this仍然指代你你所需要指代的对象,可以使用call/apply方法:

ex2.
	var O1 = function(){
		function O(){
			this.abc = 123;
			function f2(){
				alert(this.abc);
			}
			f2();//直接调用f2方法,this指代window
			f2.call(this);//通过call调用f2方法,this指代O1
		}
		function pf(){
			alert(this.abc);
		}
		O.prototype = {
			f1 : function(){
				pf();//直接调用pf方法,this指代window
				pf.call(this);//通过call调用pf方法,this指代O1
			}
		};
		return O;
	}();
	var o = new O1();
	o.f1();

3). Events的this
这个相对比较简单,在给一个DOM节点注册一个事件处理函数时,函数内的this指代的这个DOM节点:

ex3.
	document.getElementById('xxxx').onclick = function(){
		alert(this.id);
	};
	//使用jquery注册事件时,结果是一样的
	$('#xxxx').click(function(){
		alert(this.id);
		$(this).xxx()...//以this创建jquery对象
	});

4). 回调函数里的this

ex4:
	var abc = 'window';
	//O1
	var O1 = function(){
		function O(){
			this.abc = 'O1';
		}
		O.prototype = {
			f1 : function(){
				alert(this.abc);
			}
		};
		return O;
	}();
	//O2
	var O2 = function(){
		function O(){
			this.abc = 'O2';
		}
		O.prototype.callbackFun = function(fun){
			fun();
		}
		return O;
	}();
	//实例化O1和O2
	var o1 = new O1();
	var o2 = new O2();
	//猜猜看这里会alert什么.....window
	o2.callbackFun(o1.f1);//“window”
	//所以,在使用需要类环境的回调方法时,需要套一层function
	o2.callbackFun(function(){
		o1.f1();//“O1”
	});
	//当然,也可以通过call让this指向O2
	o2.callbackFun(function(){
		o1.f1.call(o2);//“O2”
		o1.f1.call(this);//“window”
	});
Hello World 他山石

[转]使用ajax和history.pushState无刷新改变页面URL

在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变。并且能够很好的支持浏览器的前进和后退。不禁让人想问,是什么有这么强大的功能呢?

HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。

与传统的AJAX的区别

传统的ajax有如下的问题:

虽然ajax可以无刷新改变页面内容,但无法改变页面URL

其次为了更好的可访问性,内容发生改变后,改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题

有的浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变

再有,ajax的使用对搜索引擎很不友好,往往蜘蛛爬到的区域是空的

为了解决传统ajax带来的问题,HTML5里引入了新的API,即:history.pushState, history.replaceState

可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。

pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。

如何调用

var state = {
	title: title,
	url: options.url,
	otherkey: othervalue
};
window.history.pushState(state, document.title, url);

state对象除了要title和url之外,也可以添加其他的数据,比如:还想将一些发送ajax的配置给保存起来。

replaceState和pushState是相似的,不需要多做解释。

如何响应浏览器的前进、后退操作

window对象上提供了onpopstate事件,上面传递的state对象会成为event的子对象,这样就可以拿到存储的title和URL了。

window.addEventListener('popstate', function(e){
  if (history.state){
	var state = e.state;
    //do something(state.url, state.title);
  }
}, false);

这样就可以结合ajax和pushState完美的进行无刷新浏览了。

一些限制

1、无法跨域,这个是必然的。引用曾经在网上看到的一句经典的话:“如果javascript可以跨域的话,那他就可以逆天了!”

2、state对象虽然可以存储很多自定义的属性,但值不能是个对象。

对应后端的一些处理

这种模式下除了当前使用ajax可以无刷新浏览外,还要保证直接请求改变的URL后也可以正常浏览,所以后端要对这些处理下。

1、对结合pushState的ajax可以发送一个特殊的头,如: setRequestHeader(‘PJAX’, ‘true’)。

2、后端获取到有PJAX=true的header时,将页面中通用的部分都不输出。比如:PHP可以通过下面的判断

function is_pjax(){
	return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}

虽然接口上只有pushState、replaceState、onpopstate,但在使用的时候还是要做很多处理的。
————–
转自:http://www.52ladybug.com/?p=202