最近总结的一段代码

该段代码集结了匿名函数(arguments.callee)的使用,灵巧的递归方法,以及闭包内函数的重载实现局部变量和局部方法可用。

整段代码是在实现输入为空时进行闪动警报而想到的。

// a elegant function demo include many fantasy features
var timeout = function(time){

var time = time || 3,
elem = document.getElementById(“demo”);

function funca(){ alert(“funca”)}
function funcb(){ alert(“funcb”)}

timeout = function(){ // 1.the funciton to be overwrite here, not overload

//alert(time)

//some handler && render here…
//e.g.
elem.style.background = time&1 ?”#eee” : “#fff”;

//some test case below:
//2.can call closure func even though next time
//funca();

//3.call func himself
//arguments.callee();

time–&&setTimeout(arguments.callee, 200);
}

return timeout();

//4.if you need return more api to be called, use the method below:
//return {a:funca,b:funcb}

}(4); //5.auto fire after func load

文章仅作一个人笔记,取消注释可以知道更多。。。

JSON跨域调用与动态脚本加载

下面是在anyjs中JSON跨域的实现(JSONP),原理很简单,动态生成script标签,没有使用到callback(可支持),需要与后台协调保持对象一致,anyjs默认采用JSONP。

01 anyjs.gjsonp=function(url,callbackfn){
02     var h=document.getElementsByTagName(‘head’)[0];
03     var s=anyjs.create(‘script’);
04     anyjs(s).set(‘type’, ‘text/javascript’).set(‘src’, url);
05     anyjs(h).apd(s);
06     if(anyjs.ie){ //IE6+
07             s.onreadystatechange = function () {
08             if (s.readyState == ‘loaded’ || s.readyState == ‘complete’) {
09                 (callbackfn)(JSONP);
10                 JSONP=null;
11                anyjs(s).rmv();
12             }
13         }
14     } else {//GECKOS、WEBKIT、ETC..
15             s.onload = function() {
16             (callbackfn)(JSONP);
17             JSONP=null;
18             anyjs(s).rmv();
19         }
20     }
21     return false;
22 };//end

使用anyjs跨域调用示例:

01 //JSONP跨域测试开始
02 $(“#jsonp”).click(function(){
03 y=$.create(“div”);
04 $(y).set(“id”,“bglay”).set(“class”,“bglay”);
05 $(“body”).ist(y);
06 x=$.create(“div”);
07 $(x).set(“id”,“ajax”);
08 $(x).set(“class”,“ajax”);
09 $(“body”).ist(x);
10 $(“#ajax”).show();
11 $.gjsonp(“http://www.focusstudio.org/data.php?type=jsonp”,function(data){
12 var arr=[],str=“”;
13 for(var i=0;i<data.length;i++){
14
15 arr.push(data[i].a);
16 str+=data[i].b+“|”;
17 }
18 $(“#ajax”).h(arr.join(“‘”)+str);
19 });
20
21 $(“#ajax”).click(function(){$(“div.bglay”,“#ajax”).fout();$(“div.bglay”,“#ajax”).rmv();});
22 });
23 //跨域jsonp测试结束

后台相关代码:

1 <?php
2 header(“Content-Type:application/x-javascript; charset=utf-8”);
3 $callback = isset($_GET[‘callback’]) ? $_GET[‘callback’] : ‘JSONP’;
4 $json=array(array(‘a’=>‘enimo1jsonp’,‘b’=>‘test1jsonp’),array(‘a’=>‘enimo2’,‘b’=>‘test2jsonp’));
5 echo ‘var ‘.$callback.‘=’.json_encode($json);
6 ?>

到这里,要实现动态加载js脚本,我想大家应该不言自明了吧。

用anyjs实现简单的LightBox效果

anyjs是自己正在筹备的一个轻量级js库,主要为了提高平时开发效率,目前只封装了一些开发过程中常用到的事件方法以及DOM操作,当然bug还很多,希望高手指教,不胜感激,SVN地址:http://anyjs.googlecode.com/svn/trunk/
下面是在校毕业生专题中实现lightbox效果的代码,兼容目前主流的FF/Chrome/IE6+,效果简单基础,如果看起来比较乱,希望见谅。
01 <script>
02 window.onload=function(){
03 $(“img”).each(function(i){
04 $(i).click(function(){
05
06 /* y=$.create(“div”);
07 $(y).set(“id”,”bglay”).set(“class”,”bglay”);
08 $(“body”).ist(y);
09 x=$.create(“div”);
10 $(x).set(“id”,”ajax”);
11 $(x).set(“class”,”ajax”); */
12
13 $(“#bglay”).show();
14 $(“#ajax”).show().h(“<img src=’images/load.gif’ /> 正在加载….”);
15 var anyimg=new Image();
16 anyimg.src=$(i).get(“src”);
17 anyimg.onload=function(){$(“#ajax”).h(“<img src='”+anyimg.src+“‘ alt=’点击关闭’ width=’500′  border=’0’/>”);}
18
19 return false;
20 });
21 });
22
23 $(“#ajax”).click(function(){$(“#bglay”,“#ajax”).hide();});
24 }
25 </script>
26 <style>
27 *{margin:0;padding:0;}
28 #ajax{
29 position:fixed;
30 _position:absolute;
31 left:50%;
32 top:100px;
33 _top:expression(document.documentElement.scrollTop+100+“px”);
34 width:500px;
35 margin-left:-250px;
36 border:2px solid #ccc;
37 color:#696969;
38 z-index:99;
39 background-color:#fff;
40 display:none;
41 }
42 #bglay{
43 position:fixed;
44 _position:absolute;/*ie6*/
45 z-index:2;
46 overflow:hidden;
47 top:0px;
48 left:0px;
49 width:100%;
50 height:100%;
51 background:#000;
52 opacity:0.7;
53 filter: Alpha(opacity=70);
54 display:none;
55 }
56 </style>
 
有时间再陆续将几个常用web2.0效果实现,放在这当做学习笔记吧。

javascript多线程?

写不出什么有深度的文章,仅当笔记吧。

几行代码:
<script type=”text/javascript”>
 <!–
  while(!window.loaded){
  //alert(‘loading’);
  }
  //alert(‘loaded’);
 –>
</script>

上述代码与常用的window.onload=function(){}理论上会实现一样效果,等待页面加载完成后执行后续操作。然而实际的运行过程中,这种方法会导致浏览器暂停响应或假死,不知你是否有遇到过在gmail加载数据过程中,偶尔也会有短暂的假死(使用buzz时尤为明显),无法对用户行为作出响应,也说明了js语言并不具备多线程的处理机制。

也许为了弥补单线程环境中的不足,javascript引入了诸如onclick()、onmouseover()、setTimeOut(),setInterval(),ajax异步请求处理函数等回调机制,回调机制类同操作系统中的中断响应,在发生异步事件时,CPU暂停执行当前程序转向其它的相应事件处理程序,待处理完毕后又返回到原来被中断处继续执行或调度新的执行过程。回调机制则利用了“延时中断”,js引擎在“预处理”回调函数时,加入一个延时中断信号,待触发回调函数时回到中断处执行。

模拟出来的多线程:
<script type=”text/javascript”>
<!–
function threadA(){
//do something
}
function threadA(){
//do something
}
setInterval(threadA,100);
setInterval(threadB,100);
–>
</script>

上述代码使用setInterval()函数,设置一个足够短的时间片间隔,模拟出轮换执行的两个”线程”threadA,threadB,虽然并不是真正意义上的多线程,却可以达到两个“线程”交替执行的效果。(如jsthread,一个允许JavaScript进行多线程编程的库)

以上大概就是自己一直把js多线程搞混的原因吧,虽然还是懵懂状态,但多少对其机制有了进一步了解,js很强大但也比较难掌握,有误解的地方还希望高手指正。

IxEdit-简化Web交互开发的JavaScript库

IxEdit是一个为简化Web交互开发而设计的一个js库,基于jQuery&UI库,用它可以快速敏捷的实现很多时下比较主流的交互效果,操作简便。

在使用它之前确认你的浏览器已经安装Google Gear,或者使用了Google Chrome作为默认浏览器。IxEdit目前放出的是beta版,使用上基本问题不大,生成的代码足够简洁,同时你还可以自行对代码进行优化。

想了解更多详细信息:

1.官方的用户手册 UserGuide(英文):

2.阿一前辈的视频教程(推荐)。

纯静态与伪静态的实现

    一,先看一下伪静态实现方法:
    有两种,第一种也是推荐的一种,就是在服务器端配置URL Rewrite,如果你用的apache请确认你的已经加载了rewrite模块,在http.conf中将#LoadModule rewrite_module modules/mod_rewrite前面的#去掉即可(国内部分空间商已提供支持,国外基本上都支持),之后你只需在站点根目录加入自定义好的.htaccess即可,要想拥有个性化的URL,你还需要掌握正则表达式的运用。还有,提醒一下用张宴学长APMServ的用户,之前在本地调试一直不成功,原因是在http.conf文件中,当前的虚拟主机的AllowOverride默认为none导致的,将其修改为all即可,同时allow from也最好设为all.
形如:

<Directory “X:/www/htdocs”>     
 Options FollowSymLinks IncludesNOEXEC Indexes
 DirectoryIndex index.html index.htm default.htm index.php default.php index.cgi default.cgi index.shtml
 AllowOverride None
 Order Deny,Allow
 Allow from all
</Directory>

     第二种实现伪静态的方法就是在PHP文件内部用$_SERVER函数获取处理QUERY_STRING,关于$_SERVER函数的应用,这里有比较详细的介绍。获得QUERY_STRING后,应用PHP自带的串操作函数解析即可,过程比较简单不再赘述,有兴趣的朋友可以查阅一下相关资料

     二,生成纯静态HTML文件:
     纯静态的HTML有效的提高的站点的安全性,同时也大大减轻了服务器的负荷,速度上也有一定的飞跃,唯一的缺陷是就是占用服务器的硬盘空间,就目前来说,时间比空间更宝贵,国内大型站点基本上都采用的这种方法。
   实现原理:提取缓冲区的数据写入指定文件中,当然这是个HTML的文件。主要利用ob函数,过程比较简单。ob_start()函数,打开输出缓冲区,利用ob_get_contents 获取内部缓冲区内容,将内容写入文件,关闭缓冲区。

以下是一段简单示例(只做示例,不适合实际应用):

<?php
   /**
     * 生成HTML静态页面
     * @param    $pram:传入id;$type:读取的php页面类型
     * @return     结果
   */
ob_start();
include “File.class.php”;   //自定义文件类
$pram=intval($_GET[‘id’]);
if(!isset($pram))
$pram=1;
include(‘read.php’);//假设读取数据流来自read.php
$content=ob_get_contents();
ob_end_clean();
$filename=”YOURPATH/NAME.htm”;
if($name=toHtml($filename,$content)){
    echo ‘The HTML file <b>’.$name.'</b> create success!<br />’;
    echo ‘Take a look! <a href=’.$name.’ target=”_blank”> Click Here</a><br />’;
}
else {
    echo ‘HTML file create failed!’;
}
/**
 * 生成静态HTML的函数
 * @param    $filename:路径+文件名,$content:写入内容
 * @since     2009.08.03
 * @access   public
 */
function toHtml($filename,$content)
{
   $f=new fileClass();
   if (!file_exists($filename)) {
        $f->createFile($filename);
     }
 if($f->writeinFile($filename,$content)) { 
     return $filename;
 }
     return false;
} // end func

?>

基本原理就是这样了,大家可以根据需求自行修改。
两种方法有个共同点,都是为了讨好搜索引擎,毋庸置疑良好的搜索引擎优化会给你的站点带来意想不到的收获。
方法介绍到此,希望它们能对你有所帮助。

双击实现文本元素修改

此效果多应用于后台栏目名称修改上,双击以创建input元素,onblur事件实现异步调用无刷新提交。

JS部分:

<code><script type=”text/javascript”>
function showInput(element)
{
var defaultValue = element.innerHTML;   //取得默认内容
var inputEle= document.createElement(‘input’);   //创建input元素
inputEle.type = ‘text’;   //添加类型
inputEle.value=defaultValue;
inputEle.className=”tip”;
element.innerHTML = ”;
element.appendChild(inputEle);   //添加子元素
inputEle.focus();   //获得焦点
inputEle.onfocus = function()
{
element.ondblclick=”;//取消元素的双击事件
}
inputEle.onblur = function()
{
element.innerHTML = this.value ? this.value : defaultValue;   //触发时判断值是否为空
var any= $(this).attr(‘value’);
$.ajax({
type: “POST”,
url: “insert.php”,
data: “name=”+ any,
success: function(){
$(“#show”).prepend(“<li>提交成功:”+any+”</li>”);
$(“#show li:first”).fadeIn(“slow”);
}
});
element.ondblclick = function()//还原
{
showInput(this);
}
}
}
</script></code>

样式:

<style type=”text/css” media=”all”>
#show{
margin-top:100px;
width:300px;
height:200px;
border:1px solid #F5F5F5;
overflow:hidden;
}
#show li{
background:#FDF5E6;
list-style:none;
}
.tip{
border:2px solid #FDF5E6;
}
</style>

HTML部分:

<span>双击下面文字:</span>  <br /><br />
<span ondblclick=”showInput(this)” >天道酬勤</span> <br />
<div id=”show”></div>

注意,该效果的实现用到了jQuery,请在HTML头部包含之。

点击预览效果.

WP页面加入自定义侧边栏

        在前面一篇文章中简要介绍了如何创建wordpress自定义页面,在此,介绍一下在自定义页面中加入个性化的侧边栏(sidebar.php),顶部(header.php)及底部(footer.php)。关于如何创建自定义页面,可参考此文:自定义WordPress的页面模板
下面以侧边栏为例:

我们知道在page.php(页面模板),single.php(文章模板),调用头部侧边底部的方法分别是:get_header(),get_sidebar(),get_footer(),在get_sidebar()方法中,有一段代码:

function get_sidebar( $name = null ) {
do_action( ‘get_sidebar’, $name );
$templates = array();
if ( isset($name) )
$templates[] = “sidebar-{$name}.php”;
$templates[] = “sidebar.php”;

……

所以,我们只需要建一个以sidebar.php为母版的个性化sidebar-{YourName}.php文件,在页面模板的调用中将默认get_sidebar()修改为get_sidebar(“YourName”)即可。

同理你也可以按此方法,自定义自己的header.php,footer.php 。
本站的一个搜索页面示例:点击浏览.

通过JS在IE中使用HTML5元素

通过JS 创建此对于IE未知的HTML5元素,再在CSS定义样式属性:

document.createElement(newElementName)

具体实现:

<html>
<head>
<style>blah { color: red; }</style>

<script>document.createElement("blah")</script>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>

更多详细请参考:《HTML5 Shiv》

批量引入新元素[怿飞]

(function(){
    // from: http://dean.edwards.name/weblog/2007/03/sniff/
    if(!/*@cc_on!@*/0) return;

    var html5= “abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,

figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’);
    for(var i = 0, len = html5.length; i < len; i++ )
        document.createElement(html5[i]);
    }
})();

很简单,很省事~