Dron 博客

坚持创新，追求卓越

危险：IE 下使用 cloneNode 注意事项

2012-04-20 by Dron

在开发「百度地裂特效」时，发现了一些匪夷所思的 Bug，第一反应是特效本身的代码与页面上原有的脚本发生了冲突，经过调试发现，问题出现在 cloneNode。

cloneNode 是 HtmlElement 上的方法，用于创建指定 DOM 节点的拷贝，它接受一个布尔参数 include_all，如果 include_all 设置为 true，则副本会带有指定节点的所有子节点。

然而，<script> 标签也是 DOM 节点，cloneNode 对其有效，经实测各浏览器（尤其是 IE）对 cloneNode 执行结果表现不一致，主要现象为以下两种：

  • IE，至少是 IE8 及以下，对某节点 cloneNode 时，如果该节点包含 <script> 节点，那么 <script> 节点的脚本内容「有可能」会被再次执行一次。
  • 非 IE 浏览器，cloneNode 某节点，包含的 <script> 节点的脚本内容不会被再次执行。

IE 以外的浏览器表现令我满意，而针对于上面所述 IE 的「有可能」，还分以下两种情况：

阅读全文

JavaScript 模拟烟雾效果！

2012-01-03 by Dron

最近烟抽多了，或者因为太寂莫，也可能无聊吧，我不知不觉地就把烟雾效果写出来了。

预览地址请看这个：http://ucren.com/demos/smoke/

用了大量的节点，机器有点渲染不过来，建议使用 Chrome 查看，IE 下我做了各种抽稀，效果不是很理想，以后有时间并且再次闲得蛋疼时再改造成 canvas 版本。

阅读全文

博客也疯狂——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

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

滚屏的实现，普遍做法是改变网页根节点的 scrollTop 和 scrollLeft 属性，就像这样：

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

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

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

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

阅读全文

博客搬家

2011-06-22 by Dron

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

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

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

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

阅读全文