Hedger Wang 在国内 blog 上得到的方法:使用 try … finally 结构来使对象最终为 null ,以阻止内存泄露。
其中举了个例子:
function createButton() {
var obj = document.createElement(”button”);
obj.innerHTML = “click me”;
obj.onclick = function() {
//handle onclick
}
obj.onmouseover = function() {
[...]
...
4 条评论 »
2008-7-3 下午 - JS/Ajax/AS/Flex - IE6 - javascript
@import ‘http://www.planabc.net/demo/slideshow/slideshow.css’;
下面是幻灯片效果的 样例 :
显然,效果很实用。对于这个效果,我们并不解释如何去使用效果库,而是讲解如何创建类似的效果,并保持他的可用性,分离式(unobtrusive),可维护性(让未来的维护者,在不需要修改你的脚本的情况下,修改图片,外观或文本标签)。
无 JavaScript 状态下,用户将看到下面的效果:
添加和移除图片、改变图片的顺序以及添加标题,这些在 HTML 中都很容易做到。并且最后的解决并不意味着维护者需要懂任何 JavaScript 或者在源码中搜索在哪里修改 CSS 的 class, id 或者文本标签。
你有没有准备好花费一些时间去一步一步的尝试创建这个效果?
第一步:分析问题(Analizing the problem)
创建一个好的脚本,第一步应该是去分析哪些是... 11 条评论 »
2008-6-18 下午 - JS/Ajax/AS/Flex - javascript - slideshow
innerHTML 属性的使用非常流行,因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API(removeChild, createElement, appendChild)。但很显然,使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。然而,你需要知道 innerHTML 有一些自身的问题:
当 HTML 字符串包含一个标记为 defer 的 script 标签(<script defer>…</script>)时,如 innerHTML 属性处理不当,在 Internet Explorer 上会引起脚本注入攻击。
设置 innerHTML 将会破坏现有的已注册了事件处理函数的 HTML 元素,会在某些浏览器上引起内存泄露的潜在危险。
还有几个其他次要的缺点,也值得一提的:
你不能得到刚刚创建的元素的引用,需要你手动添加代码才能取得那些引用(使用 DOM APIs)。
你不能在所有浏览器的所有 HTML 元素上设置 innerHTML 属... 3 条评论 »
2008-6-17 下午 - JS/Ajax/AS/Flex - innerHTML - 优化
一、密码长度:
5 分: 小于等于 4 个字符
10 分: 5 到 7 字符
25 分: 大于等于 8 个字符
二、字母:
0 分: 没有字母
10 分: 全都是小(大)写字母
20 分: 大小写混合字母
三、数字:
0 分: 没有数字
10 分: 1 个数字
20 分: 大于等于 3 个数字
四、符号:
0 分: 没有符号
10 分: 1 个符号
25 分: 大于 1 个符号
五、奖励:
2 分: 字母和数字
3 分: 字母、数字和符号
5 分: 大小写字母、数字和符号
最后的评分标准:
>= 90: 非常安全
>= 80: 安全(Secure)
>= 70: 非常强
>= 60: [...]
...
11 条评论 »
2008-5-11 下午 - JS/Ajax/AS/Flex - password
一个很棒的 blog 文章,是 PPK 两年前写的,文章中解释了 contains() 和 compareDocumentPosition() 方法运行在他们各自的浏览器上。从那起,我已经对这些方法做了大量的研究,并且已经在很多场合使用他们。在很多任务中,他们被证明是非常有用的(特别关于结构的抽象 DOM 选择器)。
1、DOMElement.contains(DOMNode)
这个方法起先用在 IE ,用来确定 DOM Node 是否包含在另一个 DOM Element 中。
当尝试优化 CSS 选择器遍历(像:“#id1 #id2”),这个方法很有用。你可以通过 getElementById 得到元素,然后使用 .contains() 确定 #id1 实际上是否包含 #id2。
注意点:如果 DOM Node 和 DOM Element 相一致,.contains() 将返回 true ,虽然,一个元素不能包含自己。
这里有一个简单的执行包装,可以运行在:Internet Explorer, Firefox, Opera, and Safari。
function contains(a, b) ... 4 条评论 »
2008-4-1 下午 - JS/Ajax/AS/Flex - javascript
YAHOO.widget.Effects 基于 YUI 实现的 Effects 库,记录一下。
http://blog.davglass.com/files/yui/effects/
用这个库可以很好的改善网站某些视觉效果,当然使用适当为上,画龙点睛即可。
...
4 条评论 »
2008-3-21 下午 - JS/Ajax/AS/Flex - YUI
对于背投广告的原理来说并没有什么难度,无非打开的窗口失去焦点(blur),而原来页面得到焦点(focus)。但对于流行的浏览器来说,如果非用户行为的弹出窗口(即 onload 时,直接window.open ),会被浏览器默认拦截。
背投广告,既然被称为广告,那如何才能让广告主的钱花得实在,花得乐意呢?
我们可以增加判断,如果该弹出窗口被浏览器拦截,则只要用户点击页面就触发 window.open 事件,这样一般不会拦截,浏览器会认为这是用户的默认行为。
代码可编写如下:
var $E = YAHOO.util.Event;
var adPopup;
var popAd = function(sURL,sName,sFeatures,bReplace) {
if (adPopup) return;
if(sName == undefined) {
sName = ‘_blank’;
};
if(sFeatures == undefined) {
sFeatures = ”;
};
if(bReplace == undefined) {
bReplace = fal... 3 条评论 »
2008-3-5 下午 - JS/Ajax/AS/Flex - window
function replaceHtml(el, html) {
var oldEl = typeof el === “string” ? document.getElementById(el) : el;
/*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点
oldEl.innerHTML = html;
return oldEl;
@*/
var newEl = oldEl.cloneNode(false);
newEl.innerHTML = html;
oldEl.parentNode.replaceChild(newEl, oldEl);
/* 一旦我们从 DOM 上移除老的元素,则返回新的元素引用。*/
return newEl;
};
此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 与 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上则是 [...]
...
5 条评论 »
2008-3-4 下午 - JS/Ajax/AS/Flex - DOM - innerHTML - 优化
Firefox 包含了一个非标准的 JavaScript 扩展,使正则像函数一样可调用。这为调用正则的 exec 方法提供了便捷。例如,在 Firefox中,regex(”string”) 等同于 regex.exec(”string”)。曾经 ECMAScript 4 建议指出这个功能将会增加到 ES4 规范中,但后来的在 ES4-discuss mailing list 的讨论中,这个建议可能被废除。
然而,你可以通过增加 call 和 apply 方法到 RegExp.prototype 中类似的现实这些方法。既有助于功能设计,又可实现对函数和正则表达式均有效的隐藏类型(duck-typed )代码。因此,让我们增加这些方法。
RegExp.prototype.call = function (context, str) {
return this.exec(str);
};
RegExp.prototype.apply = function (context, args) {
return this.exec(args[0]);
};
注意上面的两个方法完全忽略 context 参数,你可以提交 null 或者 任何其他作为 context 的对象... 4 条评论 »
2008-3-3 下午 - JS/Ajax/AS/Flex - javascript - 正则
情景一:
var yx01 = new function() {return “圆心”};
alert(yx01);
我们运行情景一代码,将返回显示“[object object] ”,此时该代码等价于:
function 匿名类(){
return “圆心”;
}
var yx01 = new 匿名类();
alert(yx01);
我们对情景一的代码进行下面改造:
var yx01 = new function() {return new String(”圆心”)};
alert(yx01);
我们运行,将会发现返回的是“圆心”,这是为什么呢?
只要 new 表达式之后的 constructor 返回(return)一个引用对象(数组,对象,函数等),都将覆盖new创建的匿名对象,如果返回(return)一个原始类型(无 return 时其实为 return 原始类型 undefined),那么就返回 new 创建的匿名对象。(谢谢 Lunatic_Sun ,描述更精准点)
由于 new String 会构造一个对象,而不是一个 string 直接量,... 3 条评论 »
2008-2-20 下午 - JS/Ajax/AS/Flex - function - javascript