有计划做一个工作流编辑器用于协同工作的应用里面, 最近顺便用svg做了一个简单的测试下, 先收藏起来, 以后做的时候再来回顾

demo地址: http://www.hoverlees.com/U/flowDemo.html
另外有个相关的项目jqplumb以后也可以参考下

ios上html5要做滚动, 可以用css实现, 用如下两句
overflow:scroll;
-webkit-overflow-scrolling:touch;
即可实现滚动, 不过目前这种控件有个小问题, 当滚动条停在最上方或最下方停止时, 再上拉或下拉, 不会滚动,而是将事件传递给了父容器; 另外,上面的css在android上没有弹性效果.
对于第一个问题,在ios上也有解决办法,即当用户开始触摸控件时,判断如果滚动位置在顶部,设置滚动位置在1像素,如果滚动位置在底部,设置滚动位置在底部像素-1
不过,目前的方式,还是只能让滚动用起来方便了,要做下拉刷新的话就真的没办法了.
所以我自己实现了一个滚动控件,效果基本上按ios的scroll控件做的, 可以做下拉的效果,而且ios和android效果一样.
可以扫下面的二维码试试.

页面地址:

http://www.hoverlees.com/diy/scroll.html

例如执行 console.log(14583023831363353);
输出: 14583023831363352

大伙可要注意一下这种坑,嘿嘿.

<?php
if($argc!=2){
	echo "usage: php har_extractor.php <archive file name>";
	exit();
}

$urlBase="http://a.b.com/";
$archiveFileName=$argv[1];
$data=file_get_contents($archiveFileName);
$archive=json_decode($data);
$entries=$archive->log->entries;
for($i=0;$i<count($entries);$i++){
	$entry=$entries[$i];
	$filePath=str_replace($urlBase,'',$entry->request->url);
	if(strlen($filePath)==strpos($filePath,'/')+1) $filePath.="index.html";
	$fileDir=dirname($filePath);
	$fileName=basename($filePath);
	if(strpos($fileName,'?')!==false) $fileName=substr($fileName,0,strpos($fileName,'?'));
	if($fileName=='') $fileName='index.html';
	if(!file_exists($fileDir)) mkdir($fileDir,0777,true);
	$encoding=$entry->response->content->encoding;
	
	$data=$entry->response->content->text;
	if($encoding=='base64'){
		$data=base64_decode($data);
	}
	file_put_contents($fileDir.'/'.$fileName,$data);
}

最近用了一下uploadify,在上传文件上还是很简单方便的。但是发现在chrome上会经常崩溃。网上找了一下解决办法，大多都是在uploadify.js后面加上一个随机时间以防止使用chrome的缓存，其实这个办法并不能完全解决崩溃问题，比如在uplodify页面进入其他页页后，再点击后退返回到这个uploadify页面，同样会出现崩溃问题。

其实如果不用缓存每次去请求服务器其实是个很浪费的事，关键是这样做根本就没有解决这个问题。真正的解决的办法也很简单，就是用setTimeout,让uplodify的初始化和浏览器缓存模块的功能不要在同时进行，操作如下：

$(function(){
    setTimeout(function(){
        $('#file_upload').uploadify({
            'swf'      : 'tools/uploadify/uploadify.swf',
            'uploader' : 'upload.php',
            'onUploadSuccess' : function(file, data, response) {
                
            }
        });
    },10);
});

这样即可解决启动时/后退时崩溃问题。

朋友推荐的，发现功能非常强大，支持多种游戏引擎，强烈推荐啊！

网站地址： http://www.codeandweb.com/

Ajax有一个安全特性就是跨域访问的限制问题，虽然有很多解决的方法，但都没有使用代理的方式简单。

后来发现一个更简单的，就是给chrome浏览器添加 –allow-file-access-from-files –disable-web-security 启动参数，即可实现关闭安全检查的功能。

它的这个特性过份到访问同一个域下的不同端由都做了限制。有时候做测试开发很不方便。所以我就自己写了一个php的代理程序，由php接收ajax请求并转发到其他域的服务器，并将结果返回。

proxy.php代码如下：

<?php
error_reporting(0);

$destURL="http://otherdomain.com/to/path/script.jsp";

$queryString=$_SERVER['QUERY_STRING'];
if($_SERVER['REQUEST_METHOD']=='GET'){
    $url=$destURL.$queryString;
    echo file_get_contents($url);
}
else{
    $url=$destURL.$queryString;
    $context = array();
    $context['http'] = array(
        'method' => 'POST',
        'header'  => 'Content-type: application/x-www-form-urlencoded',
        'content' => http_build_query($_POST)
    );
    echo file_get_contents($url, false, stream_context_create($context));
}
?>

查看详细内容 »

nodejs使得做客户端的人也可以做服务器开发，比较可惜的是目前HTML5客户端支持的WebSocket协议nodejs自身不支持。不过也有很多完善的模块提供使用。

我写这个模块的目的只是为了体验下nodejs的服务器开发而已，打算自己以后写得玩的就用这个算了。其中websocket.js是Websocket服务器模块，server.js是测试代码，跟以前写的一样，模块不支持大于65535的数据包发送和接收。

首先是server.js，用法跟客户端类似：

//引入模块
var server=require("./websocket.js");
//监听"/"请求，可以加入多个监听。
server.addListener("/",function(ws){
	ws.onmessage=function(packet){
		ws.send(new Buffer("Hello World!"));
	}
	ws.onclose=function(){
		console.log("session disconnect");
	}
});
server.keepAlive=3000000;
server.timeout=0;
//开启服务器
server.start("127.0.0.1",8766);

查看详细内容 »

为了尽量实现浏览器兼容，同时又能方便进行节点定位，我就写了这两个函数，对于支持querySelector的浏览器会调用自带的querySelector,如果浏览器不支持，就调用自己实现的函数。

此函数可能有些bug，不过现在我还没遇到，有人要是遇到了给个留言我有空就去修掉。

//支持 #id|.classname|tagname|tagname.classname|tagname#id四种，如果要多层筛选，请重复调用
function querySelectorAll(node,selector){
    if(typeof(document.querySelectorAll)!='undefined'){
        return node.querySelectorAll(selector);
    }
    var tname;
    var citems;
    function findElementsByClassNameInner(n,className){
        var items= n.children;
        for(var i=0;i<items.length;i++){
            if(items[i].className==className){
                citems.push(items[i]);
            }
            findElementsByClassNameInner(items[i],className);
        }
        return citems;
    }
    function findElementsByIDInner(n,id){
        var items= n.children;
        for(var i=0;i<items.length;i++){
            if(items[i].id==id){
                citems.push(items[i]);
            }
            findElementsByIDInner(items[i],id);
        }
        return citems;
    }
    if(selector.charAt(0)=='.'){
        tname=selector.substring(1);
        citems=new Array();
        var items=findElementsByClassNameInner(node,tname);
        return items;
    }
    else if(selector.charAt(0)=='#'){
        var id=selector.substring(1);
        citems=new Array();
        var items=findElementsByIDInner(node,id);
        return items;
    }
    else if((r=selector.match(/(\w+)\.(\w+)/))!=null){
        tagName=r[1].toLowerCase();
        className=r[2];
        citems=new Array();
        var titems=findElementsByClassNameInner(node,className);
        var items=new Array();
        for(i=0;i<titems.length;i++){
            if(titems[i].tagName && titems[i].tagName.toLowerCase()==tagName){
                items.push(titems[i]);
            }
        }
        return items;
    }
    else if((r=selector.match(/(\w+)#(\w+)/))!=null){
        tagName=r[1].toLowerCase();
        id=r[2];
        citems=new Array();
        var titems=findElementsByIDInner(node,id);
        var items=new Array();
        for(i=0;i<titems.length;i++){
            if(titems[i].tagName && titems[i].tagName.toLowerCase()==tagName){
                items.push(titems[i]);
            }
        }
        return items;
    }
    else{
        var items= node.getElementsByTagName(selector);
        return items;
    }
}
//支持 #id|.classname|tagname|tagname.classname|tagname#id四种，如果要多层筛选，请重复调用
function querySelector(node,selector){
    if(node==null) return null;
    if(typeof(document.querySelector)!='undefined'){
        return node.querySelector(selector);
    }
    var items=querySelectorAll(node,selector);
    return items.length==0 ? null:items[0]
}

//调用示例
window.onload=function(){
    //var li=document.querySelectorAll("#Test li.a1");
    var test=querySelector(document.body,"#Test");
    var li=querySelectorAll(test,"li.a1");
    alert(li.length);
}

查看详细内容 »

最近加入uc做前端工作，参与做了这个HTML5的二人麻将，有兴趣的朋友可以去玩玩。