YUI3的guid和stamp方法

作者：kun10 发布时间：April 24, 2011 分类：JavaScript

YUI3里面有一个stamp函数和guid方法
guid方法是用来给一个特定的dom元素来添加一个对于yui的特定的id
guid: function(pre) {
var id = this.Env._guidp + (++this.Env._uidx);
return (pre) ? (pre + id) : id;
},

_guidp是一个前缀，默认定义为‘Y’
_uidx是一个环境上面的变量，用来记录数字

guid很明显的，通过拼接生成一个唯一的id

stamp方法是用来读取一个对象的id的

stamp: function(o, readOnly) {
        var uid;
        if (!o) {
            return o;
        }

        // IE generates its own unique ID for dom nodes
        // The uniqueID property of a document node returns a new ID
        if (o.uniqueID && o.nodeType && o.nodeType !== 9) {
            uid = o.uniqueID;
        } else {
            uid = (typeof o === 'string') ? o : o._yuid;
        }

        if (!uid) {
            uid = this.guid();
            if (!readOnly) {
                try {
                    o._yuid = uid;
                } catch (e) {
                    uid = null;
                }
            }
        }
        return uid;
    },

里面做了一个对IE的处理。ie会对每一个dom元素加上一个uniqueID，默认读取ie的uniqueID或者yuid。

Mac下使用YUICompressor压缩js和css

作者：kun10 发布时间：April 19, 2011 分类：工具箱,MAC

最近入手了Mac，要用Mac来做前端开发一方面是一件装X的活，另外也是挑战自己动手能力的好机会。

入手mac后一直以来的困惑是，如何用它来进行前端代码的压缩，在此之前一直在windows平台使用集成好的yuicompressor来做压缩。
到了mac下面就得进行命令行操作了。

最初使用的方式是最笨拙的一种方式：
下载了yuicompressor的jar和依赖，配置好JAVA_HOME
使用java -jar /path/to/yuicompressor.jar path/to/file.js -o path/to/output --charset=gb18030(taobao的编码)

很明显，这种方式用多了肯定是想砸自己的电脑了:(

于是我巨想设计一种命令，
形如：cmd filename.js
运行后即可在同目录生成一个filename-min.js

由于不是很熟悉linux命令，请教了PE团队的飘零同学，于是乎产生了一个yui.php文件
它接受一个文件名参数，并调用yuicompressor.jar来做压缩

调用的时候使用php path/to/yui.php /path/to/filename.js即可

使用alias简化一下这个命令
alias yui ="php /path/to/yui.php"
调用就可以变成
yui path/to/filename.js

后来问了玉伯，才得知原来kissyteam在github的kissy-tools仓库里面已经有了mac版本的csh脚本用于调用yuicompressor.jar

yuicompressor.csh 调用了compressor.csh,后者内容如下:
原来还是明爷写的

#!/bin/tcsh
#
# TCSH Script for YUI Compressor
#
# @author mingcheng
# @date   2009-12-23
# @link   http://www.gracecode.com/

# Jar file path
set COMPRESSOR_JAR = "yuicompressor.jar"

# Command extra params
set EXTRA_PARAMS = ""

# Error single
set ERROR_NO_JAVA  = 5
set FILE_NOT_MATCH = 10
set JAR_NOT_EXIST  = 15
set COMPRESS_FAILD = 20

# Check Java wether installed
if (`printenv JAVA_HOME` == "") then 
    echo "JAVA_HOME is missing, maybe Java SDK not installed?"
    exit $ERROR_NO_JAVA
endif

# reset jar file with the same path by script 
set -r COMPRESSOR_JAR = "`dirname $0`/$COMPRESSOR_JAR"

# check $COMPRESSOR_JAR whether exit
if (-r $COMPRESSOR_JAR != 1) then
    echo "$COMPRESSOR_JAR not exist"; exit $JAR_NOT_EXIST
endif

# Check input file @todo check file type
if ($1 == "" || -r $1 != 1) then
    echo "file '$1' not exist, or '$1' is not javascript/css file"
    exit $FILE_NOT_MATCH
endif


# Generate compressed file
set compressed_file = `echo $1 | sed "s/\(\.*\)\(\.[css|js]\)/\1-min\2/"`

# Run YUI Compressor
java -jar $COMPRESSOR_JAR $EXTRA_PARAMS $1 -o $compressed_file

# Is success?
if (-r $compressed_file) then
    set from_size = `stat -f %z $1`
    set to_size   = `stat -f %z $compressed_file`
    echo "finished, compressed $1($from_size bytes) to $compressed_file($to_size bytes)."
    exit 0
else
    echo "compress faild"; exit COMPRESS_FAILD 
endif

# vim: set et sw=4 ts=4 sts=4 fdm=marker ff=unix fenc=utf8 nobomb:

于是下之。。。
然后
alias yui="csh yui-compressor.csh"
调用和前面的php版本的脚本一样的

yui filename.js

or

yui filename.css

这样基本上可以用了已经。

不过后来又发现alias在进程结束后，yui命令就失效了。

于是把alias这句命令写在自己的~/.profile文件里面，保证每次进入终端直接使用。
对alias不太明白的同学可以man一下alias+百度一下。

事情的始末大致就是这样。。。

再后来，我发现mac版本下面的csh脚本和windows下面的cmd还有一些差异，相比windows版本做了更多的容错处理。
windows版本的cmd脚本先调用了yuicompressor.jar,之后又调用了native2ascii来处理一些非gbk编码的特殊情况。。。
具体的可以参考kissy-tools里面的yuicompressor.cmd里面的注释。
可见，mac下面不管是php脚本还是csh脚本都还要在多做一些调整。（p.s.今天才发现飘零前两天已经完成了php版本的compressor脚本）
那我还是看看有时间试着看看能不能改一下csh好了。已经完成了bash版本的yuicompressor脚本,地址：https://gist.github.com/2428820
- EOF -

IE6 CSS :hover小tip

作者：kun10 发布时间：April 17, 2011 分类：CSS

好久不写css真的感觉手生了，这两天做项目真是发觉自己又遇到了好多的问题。
比如首次遇到了猪头bug：）

这里我主要还是想说一下用css来实现鼠标移上元素显示浮层的效果的注意点
为了要兼容ie6并尽量的使用纯css来制作。

说几点tip（话说今天调试ie6很费劲）
1、a标签要使用hover伪类就要加上href属性
2、hover伪类要在ie6下面生效，就要注意a:hover的样式和a的样式要有差异性（小马其实早有总结过）
3、a里面不能够再嵌套a标签（算是常识吧，所以在ie6下面要实现hover显示的元素上面再使用hover效果，估计没戏）

还有一些问题和具体的场景有关，由于项目还在demo阶段，设计稿就先不透露了，估计过段时间可以放个图出来解释一下。

  1. 1