博客也疯狂——2012 小创意

2011-12-26 by Dron

2012 马上就要到了,你准备好船票了吗?写了一个小创意娱乐一下,体验方法:在本博客的任何一个页面,直接在键盘上依次敲入“2012”四个数字,看看发生了什么?

2012-11-24:由于更新了博客皮肤,本文所述效果已不复存在。

相册小样预览

2011-12-08 by Dron

最近在折腾一个相册,先附上一个小样:

点这里

测试图片是我从本地临时文件夹里随便拷贝的一部分图片,不解释,给点建议呗。

PS: 看来分两篇博客发不科学啊,求源码的同学移步这里

通过挟持 this 指针在 JavaScript 中模拟 private

2011-11-06 by Dron

JavaScript 是一种解释型的、基于对象的脚本语言,没有严格意义上的类,在这一点上不同于 C++、Smalltalk 或者 Java,不过作为替代,它支持构造函数(constructors),可通过执行代码创建对象:给对象分配存储,然后通过赋初始值来初始化对象属性的全部或部分。构造函数有个指向其原型对象的属性叫做 prototype,利用 prototype 可模拟出一个基本可用的“类”来。

类有封装、继承和多态等特征,其中继承和多态不是本文关注的,本文侧重于探讨类封装中关于私有成员(private)的实现。

一些原创对联、打油诗等

2011-09-09 by Dron

把以前原创的一些对子、诗句整理一下。以后有新的会直接更新到本文中:

2013-01-19 更新《如梦令 - 码农

如梦令 - 码农   

常现黎明三更,研码不知惜命,    
兴尽撸一发,误入递归深境,   
不幸,不幸,IE 停止响应。

嵌名联:

舒壮志龙吟虎啸,品青琼梅舞莺歌。横批:飞黄腾达(志龙、琼梅、腾达,“青琼”这里指茶叶)   
壮志凌云邀赤帝,青龙破浪借东风。(志龙,“赤帝”这里指太阳)   
盛世宏图志达千里,嘉年伟业龙腾九宵。(志龙、腾达,2012年春联、嵌名联)

2012 龙年的嵌名短信贺词:

志在必得,爱情事业双丰收;龙马精神,健康财富两相宜。

赠百度 10 年框计算:

十年框内藏睿智,百度前端显威风。

赠生日:

杨露点秋飘香远,晗曦织梦舞影长。

通用 HTML 标签区配正则

2011-07-29 by Dron

最近看网站日志,发现 有人在博客 上转了我不知道几年前写的一个匹配 HTML 标签的正则,刚好最近也在做一些相关的事情,就拿回来改改。

成了下面这样,可能会有一些 case 遗漏,欢迎修改,已知在内嵌 <script> 复杂内容的会有不详问题,不过对纯 HTML 来说已经够用,拿来做一些分析工具还是不错的。

JS 3D 模型

2011-07-16 by Dron

最近断断续续地写出了这么个东西:http://ucren.com/demos/d3d/index.html

这是一个简单的 JS 3D 模型,能跑在包括 IE6 的所有浏览器上,结合一下 tween 缓动算法,理论上已经可以完美模拟像 http://www.cu3ox.com/ 这个网站上方 banner 的各种变换效果了。

介绍一下实现细节,矢量绘图仍然用的是 Raphael 库,Raphael 我在《如何用 JS 实现 3D 赛车效果》这篇文章里有过介绍。此外,我参考了大量关于三维透视的文章,在下面的一些实现上用到了很多相关知识。

我们通常用一根带原点和正方向箭头的直线来表示数轴,数轴就是一个一维坐标系,两条在原点处相交并互相垂直的数轴就形成了二维坐标系,也叫平面直角坐标系,它用两个参数 x,y 来表示平面上一个点的位置,在平面直角坐标系上,加入一条经过原点且垂直于该平面的数轴就形成了三维坐标系,它用三个参数 x,y,z 来表示空间中一个点的位置。三维坐标系分为 左手坐标系 和 [右手坐标系] (http://baike.baidu.com/view/2939423.htm)两种,为了实现的方便,本例采用左手坐标系做为场景。

如何用 JS 实现 3D 赛车效果

2011-07-12 by Dron

本文将分享如何用 JS 写出一个 3D 赛车,我之前曾在技术交流会上也讲过一次(这里是当时用的 PPT),后来有同学反馈说讲得太深奥没听懂。其实 PPT 里说的更多的是三维图形的基础知识,实现原理体现的稍微少一些,那么本文将着重从实现原理这块做一些补充。

先看赛车的示例:http://ucren.com/racing/,还是半成品状态,很多功能没有实现,不过目前也没有后续的开发计划。

用 JavaScript 演算圆周率 pi(二)

2011-07-03 by Dron

之前我在百度空间上发表过一篇文章《用 JavaScript 演算圆周率 pi》,用的是面积的办法,涉及到随机点。而计算机中的随机数是通过随机种子产生的,并不是真正意义上的随机数,我们称它为 伪随机数。伪随机数的缺限是在足够大的样本当中,无法满足均匀分布。因此通过随机点的办法来演算圆周率并不能获得足够准确的结果。

我后来查找圆周率的相关资料发现,圆周率可以由很多个公式计算出来,下面列举两个:

pi * pi = 6 * (1 + 1/4 + 1/9 + 1/16 + 1/25 + ...)
pi * pi = 8 * (1 + 1/9 + 1/25 + 1/49 + 1/81 + ...)

以后者为例,于是我们又可以用如下方法来演算 pi,当然仅研究用,并无实际用途:

var n = -1;
var p = 0;
var pi;
setInterval(function(e){
    n += 2;
    p += 1 / n / n;
    pi = Math.sqrt(8 * p);
    document.body.innerHTML = pi;
}, 1);

异步的 js 接口实现思路——导火线模型

2011-07-01 by Dron

在一些组件里,某些接口的内部实现需要做成异步的,通常是等待数据或者是其他资源加载,一个简单的例子:flash 方案本地存贮模块的封装,js 接口要考虑 flash 资源加载的情况。

以本地存贮为例,我们通常会有 get,set,remove 三个接口,就像这样:

变态的网页加载进度条实现思路

2011-06-27 by Dron

以下这两种情况:

  • 网页不间断地下载并逐步把已下载完成的部分呈现出来;
  • 网页先显示出一个框架后,等待一切资源准备完成再一起呈现出来。

假设这两种情况所使用的时间一样,用户仍然会觉得后者比较慢或者卡,因为后者在准备资源的过程中,网页是静止不动的,给用户有了一段明显等待时间的感觉,而前者虽然也会有等待时间,但相对比较短。

很多中大规模的网页难以采取第一种方式,特别是现在富交互的网页,都需要准备很多资源和数据,为了缓和用户焦躁的心理,于是我们在等待过程中加入了 loading,显式的告知用户网页需要等待。最常见的 loading 形式是一张转圈圈的 gif 图。

但是转圈圈是不断反复的,用户并不能直观地知道他还需要等多久,对于资源或数据比较大的网页来说,转不了几圈,用户也仍然会有慢的感觉,容易被放弃,于是我们采用了加载百分比,显式地告诉他现在的进度,使用户更加有耐心。

网页自动滚屏实现技巧

2011-06-26 by Dron

网页上,为了方便用户及时看到有价值的信息,通常会采用自动滚屏的交互效果,使变化的信息在第一时间呈现。

滚屏的实现,普遍做法是改变网页根节点的 scrollTopscrollLeft 属性,就像这样:

document.documentElement.scrollTop = 500; // 滚动到 500px 的位置

scrollTopscrollLeft 属性接受一个数值,需要涉及到元素位置的计算(记得那个复杂的位置计算的算法么?),对于需要滚动至某个元素可见,scrollTop 和 scrollLeft 不见得是最优的方案,其实,除了这种办法,我们还可以有以下两种办法来达到滚动的目的。

地址栏中 # 号后面的字符串叫做 hash,浏览器在网页打开完成后或者在 hash 值改变时,会自动滚屏至名称与 hash 值相等的锚点元素位置上,利用这个特性,我们可以在需要的位置插入锚名,然后通过改变 location.hash 的值来达到滚屏效果,具体写法这里就不细说了。

这种方案有一定缺陷,在某些浏览器下,hash 值的改变会产生浏览历史记录,导致对历史记录的破坏,影响用户使用前进后退功能;而且,在一些网页里,hash 值可能会有其它的用途,这样做将影响到这些功能。

博客搬家

2011-06-22 by Dron

几次辗转,终于又用回 wordpress,多年不见,WP 都已经 3.x!

快速安装了下,体验果然比印象中的版本爽得多,后台不再那么慢了,懒得找主题,就默认主题改了改,成了现在这个样子,从下载安装到修改完成,用时约 20 分钟,还算满意。

我其实也就是为了随意放点文字,前一个博客在 http://hi.baidu.com/ucren,必竟不是独立博客,自由度比较低,终于还是放弃了。

后面我应该会逐步把原先各博客上有价值的文字弄过来,战线会拉得很长,是因为搬家总是很累的:我从上地搬到西二旗,东西也就一车;从西二旗到回龙观,东西翻了一番;回龙观到沙河又翻了一番。