把 YUI Compressor 加入你的右键菜单

工作中经常要对写好的JS文件进行压缩,每次都调用命令行总会有些不方便。
因此俺今天就把这个功能整合到右键菜单中。

准备

压缩 JS 使用的是 YUI Compressor,需要 Java 运行环境支持,因此需要先安装 Java 运行环境。
下载 YUI Compressor:
http://yuilibrary.com/downloads/download.php?file=2a526a9aedfe2affceed1e1c3f9c0579
下载后解压,把 yuicompressor-2.4.2.jar 移动到某个目录,如:E:\soft\yuicompressor-2.4.2.jar。

运行以下命令测试 YUI Compressor 是否正常,正常应输出如下:

C:\> java -jar E:\soft\yuicompressor-2.4.2.jar

Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

Global Options
-h, –help Displays this information
–type Specifies the type of the input file
–charset Read the input file using
–line-break
Insert a line break after the specified column number
-v, –verbose Display informational messages and warnings
-o Place the output into . Defaults to stdout.

JavaScript Options
–nomunge Minify only, do not obfuscate
–preserve-semi Preserve all semicolons
–disable-optimizations Disable all micro optimizations

If no input file is specified, it defaults to stdin. In this case, the ‘type’ option is required. Otherwise, the ‘type’ option is required only if the input file extension is neither ‘js’ nor ‘css’.

添加到右键菜单

通过修改注册表,在右键菜单上添加 “Compress JS using YUI Compressor” 菜单项,如。

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\AllFilesystemObjects\shell]

[HKEY_CLASSES_ROOT\AllFilesystemObjects\shell\Compress JS using YUI Compressor]

[HKEY_CLASSES_ROOT\AllFilesystemObjects\shell\Compress JS using YUI Compressor\command]
@=”java -jar E:\\soft\\yuicompressor-2.4.2.jar –charset UTF-8 \”%1\” -o \”%1\””

把以上内容复制下来,将 yuicompress-2.4.2.jar 的路径改为你的存放路径,保存为 .reg 文件后双击该文件,即可将这些项目导入注册表。

导入完成后,在任意一个文件或文件夹上点击右键,就可以看到我们添加的 “Compress JS using YUI Compressor” 菜单项了。

— EOF —

IFRAME 间操作外部对象导致 Opera 崩溃

以下崩溃现象在 Opera 9.6 和 Opera 10.0 beta 版本中均有出现,而在 IE6/7、Firefox2/3、Chrome 中均测试正常。

下面来看这个案例:

在一个页面中嵌入了两个 IFRAME,一个 IFRAME 中显示 FLASH,另一个 IFRAME 中放置监控 FLASH 的代码:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title> Demo </title>
<script type=”text/javascript” src=”swfobject.js”></script>
</head>

<body>
<iframe id=”flashw” name=”flashw” src=”flash.html” style=”width:200px;height:200px;”></iframe>
<iframe src=”monitor.html” style=”width:200px;height:200px;”></iframe>
</body>
</html>

flash.html:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title> Demo </title>
<script type=”text/javascript” src=”swfobject.js”></script>
</head>
<body>
<div id=”flashzone”></div>
<script type=”text/javascript”>
window.onload=function(){
    var so = new SWFObject(‘flash.swf’, “flash”, “100”, “100”, “9”, “#FF6600”);
    so.addParam(“allowscriptaccess”, “always”);
    so.write(‘flashzone’);
};
</script>
</body>
</html>

monitor.html:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title> Demo </title>
</head>
<body>
Status:<input id=”status” type=”text” value=”” />

<script type=”text/javascript”>
var f, t;

window.onload=function(){
        t=setInterval(function(){
            try{
                f=parent.flashw.document.getElementById(‘flash’);
                if(!f)return;
                if(!f.getStatus)return;
                clearInterval(t);
                setInterval(function(){
                    try{
                        document.getElementById(‘status’).value=f.getStatus();
                    }catch(e){}
                }, 10);
            }catch(e){}
        }, 100);

};
</script>
</body>
</html>

在监控器 IFRAME 中,不断检测并显示 Flash 的状态,其中 f.getStatus() 是调用 flash 对象的一个方法。

接着在 Opera 中不断刷新页面,就会发生类似“应用程序故障”的问题,Opera 崩溃退出。

通过和网友的讨论,发现问题可能是由于 Opera 对资源释放判断不够完善,导致在页面 unload 时 setInterval 线程还在引用已释放的对象,也就是引用了一个空指针造成的。

解决这个问题,只需要把 setInterval 交给资源所在的窗体来管理即可。将以上 monitor.html 改成以下代码就可以了:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title> Demo </title>
</head>
<body>
Status:<input id=”status” type=”text” value=”” />

<script type=”text/javascript”>
var f, t;

window.onload=function(){
        t=parent.flashw.setInterval(function(){
            try{
                f=parent.flashw.document.getElementById(‘flash’);
                if(!f)return;
                if(!f.getStatus)return;
                clearInterval(t);
                parent.flashw.setInterval(function(){
                    try{
                        document.getElementById(‘status’).value=f.getStatus();
                    }catch(e){}
                }, 10);
            }catch(e){}
        }, 100);

};
</script>
</body>
</html>

注意,这里指的资源是指类似 Flash 之类的外联的资源,对其它 IFRAME 的 DOM 的操作不会发生崩溃。

— EOF —

加亮搜索的关键字

记得 N 个月前在 blueidea 上发了一段这样的程序,今天看到转载来源,想想还是放到 Blog 上来 🙂

代码略作了修改,使用方法:yit(document.body, ”关键字’, ‘颜色’);

示例:

<html>
<head>
<title> key </title>
<script type=”text/javascript”>
<!–
window.onload = function(){
 yit(document.body, ‘动力火车’, ‘#eee’);
 yit(document.body, ‘风动人’, ‘yellow’);
}

/*
 function authored by Hily Jiang
 http://hily.me/blog/
 2007-06-24
*/
function yit(n,k,cl){
 var cs = n.childNodes;
 var i = 0, l = cs.length;
 var t, c, pos, rest;
 t = document.createElement(‘span’);
 t.style.backgroundColor = cl;
 t.innerHTML = k;

 for (; i < l; i++){
  c = cs[i];
  if (c.nodeType == 3){
   t = t.cloneNode(true);
   pos = c.nodeValue.indexOf(k);
   if (pos != -1) {
    rest = c.splitText(pos);
    rest.replaceData(0, k.length, ”);
    n.insertBefore(t,rest);
   }
  }
  else yit(cs[i],k,cl);
 }
}
//–>
</script>
</head>

<body>
<ul>
<li>1. 黄阅</li>
<li>2. 黄征</li>
<li>3. 后弦</li >
<li>4. 风动人</li>
<li>5. 齐秦</li>
<li>6. 范范</li>
<li>7. 阿牛</li>
<li>8. 动力火车</li>
<li>9. 还是动力火车</li>
</ul></body>
</html>

 — EOF —

困&无聊,写个javascript

我也不知道这是虾米碗糕,反正就是困得无聊,随便写写。

效果看这里:随便玩玩

代码如下:

<html>
<head>
<title> 随便玩玩 </title>
<script type=”text/javascript”>
<!–
function gogogo(){
 var w=window;
 function g(i){return w.document.getElementById(i);}

 var f=g(‘playframe256xszfsa’);

 function mkTrack(n,d,s){
  var i, j, node;
  var x, y;
  with (d.style){
   width=height=(n+1)*(s+1)+1;
  }
  for (i=0; i<4; i++){
   for (j=0; j<n; j++){
    node=w.document.createElement(‘div’);
    node.id=’o’+(n*i+((i<2)?j:n-1-j));
    x=((i%2==0)?(j+(2-i)/2)*(s+1):(3-i)*n*(s+1)/2)+d.offsetLeft;
    y=((i%2==1)?(j+(3-i)/2)*(s+1):i*n*(s+1)/2)+d.offsetTop;
    setStyle(node,x,y,s);
    d.appendChild(node);
   }
  }
 }

 function setStyle(n,x,y,s){
  with (n.style){
   width=s+’px’;
   height=s+’px’;
   border=’1px solid #abc’;
   backgroundColor=’#def’;
   margin=1;
   position=’absolute’;
   left=x;
   top=y;
   overflow=’hidden’;
  }
 }

 function hitIt(i,s,t,c){
  g(‘o’+i).style.backgroundColor=c;
  s*=4;i+=s;i–;i%=s;
  g(‘o’+i).style.backgroundColor=’#def’;
  i+=2;i%=s;
  setTimeout(function(){hitIt(i,s/4,t,c);}, t);
 }

 function flash(o,t){
  var i=0;
  var timer=setInterval(function(){
   if(i%2==0)o.style.backgroundColor=’#325′;
   else o.style.backgroundColor=’#fff’;
   i++;
   if(i>7)clearInterval(timer);
  },80)
  setTimeout(function(){flash(o,t);}, t);
 }

 function showHelp(c1,c2){
  if(g(‘help’).innerHTML==c1)
   g(‘help’).innerHTML=c2;
  else
   g(‘help’).innerHTML=c1;
  setTimeout(function(){showHelp(c1,c2);},3000);
 }

 w=window.open(”, ‘playframe256xszfsa’);
 w.document.body.innerHTML='<div id=”playzone” style=”border: 1px solid yellow”><div id=”help” style=”color:  #aaa; font-size: 14px; text-align: center; margin: 20px”></div></div>’;
 var s=20, n=10;
 with(w.document.body.style){
  margin=0;
  overflow=’hidden’;
  border=0;
 }
 with(f.style){
  display=’block’;
  border=0;
  width=height=(n+1)*(s+1)+3;
 }
 mkTrack(s,g(‘playzone’),n);
 hitIt(5,s,10,’blue’);
 hitIt(0,s,10,’red’);
 flash(g(‘playzone’),2000);
 showHelp(‘救命啊!!!’, ‘你是跑不掉滴,hiahia~~’);
}
//–>
</script>
</head>

<body>
<iframe id=”playframe256xszfsa” name=”playframe256xszfsa” onload=”gogogo()” style=”display: none” src=”about:blank”></iframe>
</body>
</html>

— EOF —

用javascript实现文本的淡入淡出效果

主要是对RGB三色进行均匀地递增和递减,写起来比较简单:)

<html>
<head>
<title> Fade In and Fade Out </title>
<script type=”text/javascript”>
<!–

 var colorIn=’#0f0′;  // 淡入颜色
 var colorOut=’#0080c0′; // 淡出颜色
 var dur=5;    // 淡入淡出步数

 // 淡入淡出函数
 function fade(id,c1,c2){
  var txt=document.getElementById(id);
  var ri=sprRGB(c1,0),bi=sprRGB(c1,1),gi=sprRGB(c1,2);
  var ro=sprRGB(c2,0),bo=sprRGB(c2,1),go=sprRGB(c2,2);
  var st=0,sTimer = setInterval(function(){
   if(st!=dur){
    with(Math)var rs=floor((ri-ro)/(dur-st)),bs=floor((bi-bo)/(dur-st)),gs=floor((gi-go)/(dur-st));
    ro+=rs;bo+=bs;go+=gs;
    txt.style.color=’rgb(‘+ro+’,’+bo+’,’+go+’)’;
   }
   else clearInterval(sTimer);
   st++;
  },50);
 }

 // 分离RGB颜色 0:R | 1:G | 2:B
 function sprRGB(c,x){
  var p,l;
  c.length==4?l=1:l=2;
  p=x*l+1;
  c=c.substr(p,l)
  if(c.length==1)c+=c;
  return parseInt(c,16);
 }
//–>
</script>
</head>

<body>
<div id=”body” style=”background:#000;color:#0f0;width:500px;height:30px;font-size:18px;line-height:30px;text-align:center;font-weight:bold”>用javascript实现文本的淡入淡出效果</div>
<div>
<input type=”button” value=”Fade In” onclick=”fade(‘body’,colorOut,colorIn)” />
<input type=”button” value=”Fade Out” onclick=”fade(‘body’,colorIn,colorOut)” />
</div>
</body>
</html>

— EOF —