最近在搞flash的东西。遇到一个事件冒泡带来的问题。类似Javascript，flash里面的元素也有事件冒泡机制。经常会遇到给一个外层的元素绑定一个mouse_over事件，本意是想实现进入这个外层的元素的时候触发。但是实现的时候却有很奇怪的表现：鼠标在这个元素内部移动的时候，遇到这个元素北部的元素的时候，内部元素触发mouse_over，这个事件会冒泡到外层这个元素，同样触发外层元素的mouse_over事件！ 然后你就会发现，鼠标在这个外层元素内部移动的时候，绑定的事件会被触发很多次。
为了解决这个问题，JQuery自己实现了mouseenter和mouseleave事件，实现鼠标移入这个元素内部和离开这个元素的时候触发，鼠标在元素内部移动不会触发。原理我就不详细说了，大概是判断触发的对象与绑定事件的对象之间的关系吧。
在flash里面我自己实现了一个类似的东西，实现了mouseenter和mouseleave的响应。 大概原理是利用mouseover和mouseout的关系（在元素内部移动鼠标到内部的其他元素上的时候，会先触发mouseout，然后触发mouseover事件），把mouseout事件延后处理，然后看如果mouseover到了内部元素上，那就取消mouseout执行，否则触发mouseleave。呃。。。貌似很混乱。。。。核心思想就是利用setTimeout(function(){ },0); 把函数延后执行。
as代码：
function mouseEnterLeave(red,enterCall,leaveCall)
{
red.mouseOvering = false; //标记鼠标是否处在元素内部
red.addEventListener(MouseEvent.MOUSE_OVER,function(e:MouseEvent)
{
var ct = e.currentTarget;
try{ clearTimeout(ct.outTimer); }catch(e:Error){ }
if (!ct.mouseOvering) //如果从外面到里面，那么触发mouseEnter
{
enterCall.call(red);
}
ct.mouseOvering = true;
});
red.addEventListener(MouseEvent.MOUSE_OUT,function(e:MouseEvent)
{
var ct = e.currentTarget;
ct.outTimer = setTimeout(function()
{ //把mouseout响应延后执行，如果能执行，那么表示鼠标移出
ct.mouseOvering = false;
leaveCall.call(red);
},0);
});
}
当然，这个函数也可以在Javascript中实现。就像这样：(非IE)
function mouseEnterLeave(o,enterCallback,leaveCallback)
{
o.addEventListener('mouseover',function(e)
{
try{ clearTimeout(o.outTimer); } catch(e) { }
if (!o.overing)
{
if (typeof enterCallback == 'function') enterCallback.call(o);
}
o.overing = true;
},false);
o.addEventListener('mouseout',function(e)
{
o.outTimer = setTimeout(function()
{
o.overing = false;
if (typeof leaveCallback == 'function') leaveCallback.call(o);
},0);
},false);
}
Javascript的例子见这里(非IE浏览器)。
完。
![]()
阅读:6754
面试前端必须准备的一个问题：怎样去掉Javascript的Array的重复项。据我所知，百度、腾讯、盛大等都在面试里出过这个题目。 这个问题看起来简单，但是其实暗藏杀机。 考的不仅仅是实现这个功能，更能看出你对计算机程序执行的深入理解。
我总共想出了三种算法来实现这个目的：
-
Array.prototype.unique1 = function()
{
var n = []; //一个新的临时数组
for(var i = 0; i < this.length; i++) //遍历当前数组
{
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}
-
Array.prototype.unique2 = function()
{
var n = {},r=[]; //n为hash表，r为临时数组
for(var i = 0; i < this.length; i++) //遍历当前数组
{
if (!n[this[i]]) //如果hash表中没有当前项
{
n[this[i]] = true; //存入hash表
r.push(this[i]); //把当前数组的当前项push到临时数组里面
}
}
return r;
}
-
Array.prototype.unique3 = function()
{
var n = [this[0]]; //结果数组
for(var i = 1; i < this.length; i++) //从第二项开始遍历
{
//如果当前数组的第i项在当前数组中第一次出现的位置不是i，
//那么表示第i项是重复的，忽略掉。否则存入结果数组
if (this.indexOf(this[i]) == i) n.push(this[i]);
}
return n;
}
其中第1种和第3种方法都用到了数组的indexOf方法。此方法的目的是寻找存入参数在数组中第一次出现的位置。很显然，js引擎在实现这个方法的时候会遍历数组直到找到目标为止。所以此函数会浪费掉很多时间。 而第2中方法用的是hash表。把已经出现过的通过下标的形式存入一个object内。下标的引用要比用indexOf搜索数组快的多。
为了判断这三种方法的效率如何，我做了一个测试程序，生成一个10000长度的随机数组成的数组，然后分别用几个方法来测试执行时间。 结果表明第二种方法远远快于其他两种方法。 但是内存占用方面应该第二种方法比较多，因为多了一个hash表。这就是所谓的空间换时间。 就是这个测试页面，你也可以去看看。
2010年10月7日更新:
根据hpl大牛的思路，我写了第四种方法：
Array.prototype.unique4 = function()
{
this.sort();
var re=[this[0]];
for(var i = 1; i < this.length; i++)
{
if( this[i] !== re[re.length-1])
{
re.push(this[i]);
}
}
return re;
}
这个方法的思路是先把数组排序，然后比较相邻的两个值。 排序的时候用的JS原生的sort方法，JS引擎内部应该是用的快速排序吧。 最终测试的结果是此方法运行时间平均是第二种方法的三倍左右，不过比第一种和第三种方法快了不少。
完。
![]()
阅读:26883
今天遇到一个问题，就是不想让select的某些option可选。于是配置option的disabled="disabled"，发现在IE下面无效，但是其他浏览器正常。网上搜了一下，结果都是一个外国人写的一个很复杂的东西。。而且兼容性貌似不是很好。于是就自己搞了一个。
大概原理是把disabled的option替换成本来就不能被选中的optgroup (选项组)。 下面是实现的效果图：
样例和源代码在这里。
完。
![]()
阅读:8637
EndTalk 匿名聊天系统
作者: Longbill
网站: http://php.js.cn
在线演示: http://php.js.cn:8878 ( NodeJS版 )
免费开源，任意使用
简介: EndTalk 是一个类似omegle.com的在线匿名聊天系统。
功能:
1.匿名用户配对聊天
2.聊天记录可以下载
3.可以显示对方输入状态
4.采用轮询服务器方式传输数据，相比comet方式，服务器压力小许多，而且轮询间隔时间可以调节。
5.显示在线人数
6.敏感词屏蔽
7.基于ip地址的地理位置显示
安装方法：
1.编辑common.php文件，填写数据库连接信息
2.上传文件到您的服务器
3.浏览器打开 install.php 执行安装
4.成功～～
其他：
1. badwords.txt 里面是敏感词列表。一行一个。 用户发送的敏感词会被替换为***。 修改此文件不需要重新安装。
2. ip.txt 里面是ip地理位置列表。 按照格式添加就可以了。修改了ip.txt需要重新运行install.php，因为ip信息需要写到数据库。
3. 修改网站名等信息可以在index.html里面配置。
4. 安装过后最好删除或者改名 install.php
下载地址: http://php.js.cn/down/endtalk.zip
************
由于EndTalk设计方案采用PHP+MySQL+Apache/Nginx的方式对系统资源消耗很大，所以支持的同时在线人数很少。后来我使用NodeJS重写了EndTalk服务端部分，使得服务器压力大大减轻，支持的在线人数提高了几十倍。如果对NodeJS版本感兴趣，可以找我咨询价格。longbill.cn##gmail.com, QQ 5939793
完。
![]()
阅读:40572
ENDDMS = End Document Management System 即End文档管理器。是原来PHPCMS文件管理器的新版本。
由于PHPCMS文件管理器的稳定版本(v4.03)发布已经很久了，对目前流行的新浏览器兼容做的不够。而且鉴于本人当年技术水平有限，代码扩展性比较差。所以我决定使用新的技术来开发新的功能更完善的，也更加好用的文件管理器。
ENDDMS主要采用的技术有：ExtJS，JQuery，PHP，JSON等
预计ENDDMS将会有三个版本：
-
目前PHPCMS文件管理器的替代产品，免费开源。实现对服务器真实文件的管理需求。主要面向WEB开发者以及网站维护者。
-
使用了数据库的虚拟文档管理系统，个人使用，免费开源。实现个人、非赢利性组织的内部文档管理、共享等功能。有点类似目前的网络硬盘。
-
第二个版本的商业版本，授权使用。 实现中小型公司对内部文档的集中管理控制。主要功能包括文件共享、文件版本库、文档全文搜索、多用户、权限控制、文档安全控制、备份机制等
项目地址： http://enddms.googlecode.com
2010-08-05日更新：目前第一个版本完成了30%左右。
2011-1-19日更新：
完成了主要功能界面，左侧树状目录，右侧文件列表，类似windows 的资源管理器。
右侧窗口可以开多个tab页面。
实现了支持代码高亮的编辑器。使用的是开源的EditArea
实现了多语言方案。
总体进度大概50%
完。
![]()
阅读:32308
背景
在国内CMS系统纷纷向着大而全的方向大步前进的时候，大量追求简洁高效和良好用户体验的开发者却找不到一个合适的开发框架或者开发平台。
类似Zend Framework，PHPCake，CodeIgniter这类的开发框架都比较基础，不仅学习成本比较高，而且没有做实际的基础工作，仅仅是对原生PHP的封装，实现MVC等。 而类似PHPCMS，DedeCMS，帝国CMS等国内主流的CMS系统虽然功能丰富，但是可以用其来制作的网站类型有限，而且往往系统比较复杂，扩展性比较低。
EndCMS就在这种环境下诞生了!!!
EndCMS不是为了制作一个CMS而开发的，而是来自作者多年的网站制作积累。从最基本的MVC底层框架开始，作者用EndCMS制作了一个又一个网站，每制作一个网站，EndCMS就升级一次。大概过了3-4年的时间，作者用EndCMS开发了数十个网站。其中包括新闻类网站，图片展示网站，WAP手机网站，商城网站，公司展示网站，视频网站等。
在制作各种网站的过程中，作者逐渐体会总结了各种网站的后台的共同特性，从而让EndCMS的后台可以适应各种网站的需求。通过简单的配置，就可以满足各种网站的各种数据管理需求。
特点
-
EndCMS提供一个通用的、安全的、易用的网站内容管理后台。开发者不必再为网站单独开发后台，仅仅通过修改配置文件，就可以让EndCMS来管理现有的数据库。
-
EndCMS完全基于作者自己开发的EndCMS MVC框架，实现了模型、模板、控制器的分离开发，从而减轻了开发和维护成本。
-
EndCMS MVC并不像其他大部分MVC框架完全采用面向对象的模式。仅仅是Model(模型)是对数据库表的对象化，而Controller(控制器，实现数据的逻辑操作) 直接用原生PHP的过程开发模式。开发者不必花大量时间去学习EndCMS MVC 就可以很快上手。
项目地址： http://endcms.googlecode.com
案例
目前项目开发基本完成，代码经过少许配置即可运行。有兴趣的同学可以check out下来自己看看。不过文档方面做的还很欠缺，所以没有公开宣传。
完。
![]()
阅读:40888
开发各种项目中经常遇到截取html字符串问题。 比如博客文章列表页面截取一部分正文、文章正文翻页截取等。
一般情况下先用PHP的 strip_tags 函数去掉所有html标签，再去掉空格等，然后再用substr或者自己实现的cn_substr函数来实现截取。因为如果不先去掉html标签，直接截取出来的字符串就会有没有闭合的标签出现，有时甚至会截取在标签上面比如</di ...
查看全文...
阅读:9630
1.安装subversion
sudo apt-get install subversion
2.建立一个文件夹作为版本库的根目录
mkdir /var/svnroot/
这个目录本身不是版本库，只是拿来装版本库的目录
3.进入这个目录，创建版本库
cd /var/svnroot/
svnadmin create project1
以后如果有多个项目，可以继续在/var/svnroot/下面create新的版本库
查看全文...
阅读:9084
TextMate里面有很多实用的Bundle（扩展包）。其中对Javascript语言有一个美化（调整格式）JS代码的功能，是调用TextMate自带的一个php脚本来实现的。
这个扩展功能本身是很好用的，不但可以美化整个文档，还可以美化选中的js代码片段。 但是有个不大不小的也算不上上面bug的bug，就是美化过的代码缩进全部使用空格，而不是我们常用的tab。 这个问题有时候是很烦人的。。所以就自己动手改了一下。下面是修改过程：
-
首先找到TextMate程序文件，右键显示包内容。
-
搜索名叫 beautify.php 的文件。如下图：
-
打开文件。把第56行左右的
$tab_string = str_repeat(' ', $tab_size);
替换成：
$tab_string = "\t";
-
把第338行左右的
$output = rtrim($output, " ");
替换成:
$output = rtrim($output, " \t"); //双引号里面是一个空格和一个\t
-
保存，完成！
完。
![]()
阅读:5235