| Subcribe via RSS

测试JS引擎性能

8月 24th, 2008 | 3 Comments | Posted in FireFox, JavaScript < by Johnny Woo >

http://wd-testnet.world-direct.at/mozilla/dhtml/funo/jsTimeTest.htm
FireFox 3.1pre里面如果打开了jit
确实运行js如飞
新的trace monkey引擎对于spider monkey来说
在大多数项目上都有100~300%的增幅
除了parseint以外
希望FireFox 3.1可以快些到来
因为pre版不支持任何FF插件
还不能当作正式生产环境的工具来用.

阅读内文

JS,CSS压缩工具-jsMinifier

7月 30th, 2008 | 3 Comments | Posted in JavaScript < by Johnny Woo >

最近在优化网站内容
其中一个部分就是压缩JS以及CSS程序
比较常见的就是DOJO的ShrinkSafe
以及jsmin,ESC
不过taobao团队使用yuicompressor作为底层开发了windows下的jsMinifier
jsminifier.rar下载
目前版本2.0
使用yuicompressor+native2ascii
对于YAHOO的工具
我还是比较信任的
毕竟他们的performance团队的工作成果
是世人皆知的

阅读内文 Tags: , ,

发现一个不错的JS框架-jQuery

5月 25th, 2008 | No Comments | Posted in JavaScript < by Johnny Woo >

其实不是很喜欢框架性的东西
恰巧这个框架
其实算是个封装的SDK吧
jQuery其实是很早就出来的东西
但是最近稍微看了一下
它能满足可用性的要求
EXT JS的东西数据都从json来
所以不能满足可用性的要求
万一JS不能执行
就完全挂了
而jQuery的官方首页的一个例子
渐变显示文字
即便是JS不能运行.也可以访问到隐藏的文字

而在slickspeed的测试中
ext js在IE下进行的测试
有些项目是返回error的
而jQuery在FF和IE下均没有ERROR出现
说明浏览器兼容性比较好

再有一点
jQuery非常的小
压缩以后的大小在20k以内
这和EXT JS压缩后也有近500k简直天壤之别
轻型小型的js框架是我一直想要找到的

当然没有一个框架是十全十美的
即便是现在比较热的jQuery也有其不足的方面
不过就大方向来说
他比较适合我当前的选择条件
类似的轻小型JS框架
应该也是今后前端JS的发展方向(ppk也认为胖客户端的JS没有发展前途)

阅读内文

AJAX由于PHP.INI配置问题导致XMLHTTP对象出错

5月 19th, 2008 | No Comments | Posted in JavaScript, PHP < by Johnny Woo >

在IE下报错
系统错误:-1072896658
跟踪到JS下面应该是创建XMLHttpResponse之后调用出错
原因是在PHP.INI下
default_charset=”utf8″
使用了这个配置后便会出错.
改为正确的utf-8后
问题解决.

阅读内文

swfobject在NGINX以及IE6下的创建问题

5月 15th, 2008 | No Comments | Posted in JavaScript < by Johnny Woo >

环境
Nginx 5.1.3
PHP 5.2.5
WINDOWS XP
IE 6

这个问题出现在创建swfobject的时候
当object.write的时候
IE6下没有反应
代码如下

<body onLoad="resize();" scroll="no" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<div id="test">
</div>
<script type="text/javascript">
    var s2 = new SWFObject("flvplayer.swf", "playlist", "228", "240", "7");
    s2.addVariable("file","playlist.xml");
    s2.addVariable("backcolor","0x00000");
    s2.addVariable("frontcolor","0xEECCDD");
    s2.addVariable("lightcolor","0xCC0066");
    s2.addVariable("displayheight","150");
    s2.addVariable("autostart","true");
    s2.addVariable("showdownload","false");
    s2.addVariable("shownavigation","true");
    s2.addVariable("thumbsinplaylist","true");
    s2.addVariable("overstretch","true");
    s2.addVariable("shuffle","true");
    s2.addVariable("repeat","true");
    s2.write("test");

APACHE+IE6=正常
APACHE+FF=正常
NGINX+IE6=无显示
NGINX+FF=正常

经过以上测试后,我将HTML文件内增加了一个DIV.命名为abc
然后再最后将s2 write一遍到abc内
发现两个div中出现了一个.但是另一个仍旧不显示
我将div删除只剩一个
然后将s2.write执行两边
发现问题解决了

感觉是创建对象并且写入的时候
IE6没有准备好

然后我将注意力放在了onload上
原来onload事件的处理被注释掉变成一个空函数

function resize() {
//parent.document.all.frameid.height=document.body.scrollHeight;
     }

将注释去掉之后
然后使得s2.write只执行一次
发现问题也解决

至此怀疑是delay的关系
将resize的document注释掉
换成变量定义
故障依旧

最后很有可能此BUG是由于write之后没有切换焦点
如果焦点切换之后.IE的渲染引擎可能就会去绘制write出来的flash内容了

阅读内文

Ajax是一种过度设计

5月 11th, 2008 | No Comments | Posted in JavaScript < by Johnny Woo >

标题很夸张
不过开发界永远处于探索阶段
没有任何一种开发方法或者工程方法可以说是完全正确的
当初推崇的自顶向下设计
也由于无法适应软件开发的变化性
而被供奉到教科书的角落中
从80年代的不要设计
到90年代的设计一切
最后回归到目前的不要设计
其实软件开发一直在这种螺旋震荡中前行
目前JavaScript也是一样
AJAX的提出,又吸引了很多从软件开发过来的开发人员
这些人员拥有面向对象以及设计模式等背景
而且把这些思想带入了前端设计中
但是这股热潮,和PPK说的一样,并不会持续太久
我看到了perl可悲的被强制加入对OO的支持而臃肿不堪,甚至市场份额不断的被Python蚕食.
而perl没有意识到这并不是由于自己对OO支持不利的关系
反而是perl硬性的去加入OO的关系.
perl本来就是作为shell脚本语言的补充和增强出现的
方面的文字处理和小型的程序编写是它的强项
一般人们根本不需要为了去写一个本文格式化脚本而去使用什么OO的概念
这种脚本都是即用即丢弃的.即便会被后来的人员使用和维护
也只需要阅读不多于1,2k的代码
这种规模的代码.根本无需面向对象.只要写的漂亮一点即可
这种悲剧
很可能由于AJAX的热潮
而被强加于JavaScript这种本身就是轻量级脚本语言的身上.

Ajax的出现,是可以解决可用性的问题
但是过度的使用,将会影响HTML的本质
前端处理层只是为了辅助表现
如果影响了业务逻辑.甚至本身就做成了业务逻辑
那么整个程序的框架将出现混乱

不多作,不少做
这个应该是软件开发的唯一正确之道
任何一种形式的过度
都会影响它的正确性.
JavaScript只是前端的辅助性层次
使用它的最小条件就是
没有了这一层,只是影响了可用性,而不会影响可访问性.

阅读内文

JS操作DOM学习笔记1

5月 8th, 2008 | No Comments | Posted in JavaScript < by Johnny Woo >
下载: test.html
测试页面
<p id="testid1">test1</p>
<p id="testid2">test2</p>
<p id="testid3">test3</p>
<script src="http://www.hiadmin.com/wp-admin/test.js" type="text/javascript"></script>

第一种删除test1段的方法

下载: test.js
var text=document.getElementsByTagName('p')[0];
text.parentNode.removeChild(text);

第二种删除test1段的方法

下载: test.js
var text=document.getElementsByTagName('p');
text[0].parentNode.removeChild(text[0]);

差别在于第一种方法获取到的text变量
是直接第一段p
是一个变量
而第二种方法
text变量获取到的是整个p的对象组
是一个对象组(不是数组)

好,接下来我们来用表格做实验
我们删除表格中的第二行第二列的单元

下载: test.html
<table id="table1">
    <tr>
        <td>
            <p id="testid1">test1</p>
        </td>
        <td>
            <p id="testid2">test2</p>
        </td>
        <td>
            <p id="testid3">test3</p>
        </td>
    </tr>
    <tr>
        <td>
            <p id="testid4">test4</p>
        </td>
        <td>
            <p id="testid5">test5</p>
        </td>
        <td>
            <p id="testid6">test6</p>
        </td>
    </tr>
</table>
<script type="text/javascript" src="test.js"></script>

相对的JS代码如下

下载: test.js
var tr=document.getElementById("table1").getElementsByTagName("tr");
//先获取到id为table1的元素中的所有tr对象
var td= tr[1].getElementsByTagName("td");
//然后获取第二个tr元素中的所有td元素
td[1].parentNode.removeChild(td[1]);
//删除第二个td元素,就相当于删除第二个tr中的第二个td
阅读内文

鼠标滚轮缩放图片脚本

4月 11th, 2008 | No Comments | Posted in JavaScript < by Johnny Woo >

可以限制缩放的大小，可以双击图片回复到原始大小。

在HEAD添加

<script>   
var count = 10;   
function resizeimg(oImage)   
{   
count = Counting(count);   
Resize(oImage,count);   
return false;   
}   
function Counting(newzoom){   
if (event.wheelDelta >= 120)   
newzoom++;   
else if (event.wheelDelta <= -120)   
newzoom--;   
if (newzoom<2) newzoom=2; ////只允许缩小到20%   
if (newzoom>50) newzoom=50; ////只允许放大到500%   
return newzoom;   
}   
function Resize(oImage,newzoom){   
oImage.style.zoom = newzoom + '0%';   
count=newzoom;   
}   
</script>

然后在

<img src="">
中加入
onDblClick="return Resize(this,10);return false;"
onmousewheel="return resizeimg(this)"
阅读内文