蓝色的华 » javascript http://bluehua.org 分享所学,backup一切~ Fri, 27 Aug 2010 08:41:16 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 相对完美的设计思路~ http://bluehua.org/2010/07/22/1394.html http://bluehua.org/2010/07/22/1394.html#comments Wed, 21 Jul 2010 16:27:31 +0000 小鹿 http://bluehua.org/2010/07/22/1394.html 有没有可能写一套代码适应以下三种情况:
1. 客户端没有开启javascript，或者使用ucweb一类的弱智浏览器访问时，功能没有影响
2. 客户端开启了javascript，每个页面都有单独加载的js,但是禁用ajax,只帮助用户交互
3. 客户端开启了javascript，为了提高载入速度，尽量使所有操作用ajax完成

略有所得: http://www.blogo2.com
源代码: http://code-of-emptyhua.googlecode.com/svn/trunk/blogo2

没有禁用js的时候，页面切换，表单提交（注册和登录没有用）尽量的使用ajax，而且部分操作会使用弹层(登录后的管理),禁用js之后，则所有操作换成普通表单提交在页面之间跳来跳去。。

还有一个功能没有开启，就是可以选择不用ajax，但是独立开的页面js依然有效。

有兴趣的同学可以check源代码，这种模式的实现:
1. 开发的时候禁用ajax，单个页面开发，而且要求禁用js时业务可以走通，页面内的js和css统一由模板引入。
2. 对需要开启ajax的链接增加hook，例如data-ajax=”dialog:{}”,则表明在开启ajax模式后，点击这个链接需要弹窗
3. ajax模式下只需要对单个页面更换特有的模板，动态加载需要的js和css即可。

这种设计的特点:
1. 尽量一个人包前后端。。
2. json不潮了，ajax返回html代码，优点是js不用套页面了，缺点是流量大

over，虽然没有完美的代码，但是我尽量~

———–
post by gmail~

]]> http://bluehua.org/2010/07/22/1394.html/feed 0 js中简单实现数据和ui绑定 http://bluehua.org/2010/05/18/1286.html http://bluehua.org/2010/05/18/1286.html#comments Tue, 18 May 2010 09:27:44 +0000 小鹿 http://bluehua.org/?p=1286 很简单的例子

//计数加一
count ++
//更新ui
jQuery('#count').text(count);

相信几乎所有前端工程师都会写过上面这样的代码，更新数据，然后更新ui，行云流水般的。 然而也是相当一部分内测bug的起源，数据删除了，ui里的计数没有变，或者ui变了，数据里确没有删除。而在逻辑复杂的应用里，更是很难保证不出这种低级错误。

其实我们可以通过自定义事件，这样重写

this.data_bind('count', 'change', function(count)
{
    //更新计数
    jQuery('#count').text(count);
});
....
 
this.data_bind('count', 'change', function(count)
{
    //刷新分页
    refresh_pager(count);
});
 
this.set_data('count', this.get_data('count') + 1);

上次D2上听金大为讲模板技术，当时感觉耳目一新，最近边写边考虑这些新思想，其实使用现有的自定义事件要简单的多，而且灵活性，适用性更好。

用过flex的同学看完这篇文章肯定会说：靠，你们写js的还真是原始社会。。

]]> http://bluehua.org/2010/05/18/1286.html/feed 1 js业务框架中对ajax的再次包装 http://bluehua.org/2010/05/10/1216.html http://bluehua.org/2010/05/10/1216.html#comments Mon, 10 May 2010 08:30:20 +0000 小鹿 http://bluehua.org/?p=1216 一个简单的load动作，如果简单用任何一个js框架实现

startloding();
new ajax({
    url : 'test.php',
    compete : function()
    {
         stoploading()
    },
    success : function(data)
    {
        try
        {
            var obj = json_decode(data);
        }
        catch(e)
        {
            //服务异常，未返回json造成异常
            error('服务器异常');
            return;
        }
 
        //正常的业务逻辑错误
        if ( json['code'] !== 0 )
        {
            error(json['desc']);
            return;
        }
 
        ...
    },
    error : function()
    {
        //网络请求失败造成异常
        error('网络异常');
    }
});

而一个业务框架对ajax再次包装，成为一个action

new action({
    action : 'load',
    action_name : '加载',
    url : 'test.php'
});
 
api.add_action('load_start', startloading);
api.add_action('load_complete', stoploading);
//这里的成功不是ajax成功，而是判定json['code']之后action真正的成功，这就要求所有action需要有统一的成功判定标准，和json包装格式
api.add_action('load_success', function(msg, data){  .... });
//这里没有添加异常处理，因为没有特殊需要，所以action会执行默认的错误处理，可能是一个弹窗

不仅仅是节省了代码，后者有更好的可读性，load动作本身也具有了更好的重用性

具体的框架代码已经在用，还不是很完美，待贴～

]]> http://bluehua.org/2010/05/10/1216.html/feed 0 wordpress api的js实现版本 http://bluehua.org/2010/04/10/1084.html http://bluehua.org/2010/04/10/1084.html#comments Fri, 09 Apr 2010 16:43:32 +0000 小鹿 http://bluehua.org/?p=1084 上次提到的一个想法的实现版本,正在应用到偶开发的项目当中~
比wordpress的action和filter增加两个特性

  • 能够添加一个只运行一次的action或者filter
  • 可以通过返回{end:true}这种特殊对象来结束一个action或者filter

这两个特性在web开发里灰常有用

<html>
<script>
//2010.4.10 第一版
(function(ns)
{
    var filters = {};
    var max_priority = 10;
    var default_priority = 10;
 
    var array_include = function(a, v)
    {
        for ( var i = 0, j = a.length; i < j; i ++ )
        {
            if ( a[i] == v ) return true;
        }
        return false;
    };
 
    var to_array = function(a)
    {
        var rt = [];
        for ( var i = 0, j = a.length; i < j; i ++ )
        {
           rt.push(a[i]); 
        }
        return rt;
    };
 
    function _set(func, tag, priority, key, value)
    {
        func['__filter_' + tag + '_' + priority + '_' + key] = value; 
    }
 
    function _get(func, tag, priority, key)
    {
        return func['__filter_' + tag + '_' + priority + '_' + key]; 
    }
 
    ns.add_filter = ns.add_action = function(tag, func, priority, run_once) 
    {
        run_once = run_once === undefined ? false : run_once;
        priority = priority || default_priority; 
        if ( !filters[tag] ) filters[tag] = {};   
        if ( !filters[tag][priority] ) filters[tag][priority] = [];
        if ( !array_include(filters[tag][priority], func) )
        {
            filters[tag][priority].push(func);
        }
 
        _set(func, tag, priority, 'run_once', run_once);
    };
 
    ns.add_once_filter = ns.add_once_action = function(tag, func, priority)
    {
        ns.add_filter(tag, func, priority, true);
    };
 
    function filter_or_action(ac, tag, value)
    {
        if (!filters[tag]) return value;
        if ( ac == 'action' )
        {
            var args = to_array(arguments);
            args.shift();
            args.shift();
        }
        var _cfs = filters[tag];
        var i = 1, func; 
        var rt = value;
        while ( i <= max_priority )
        {
            if ( !_cfs[i] || _cfs[i].length === 0 ) 
            {
                i ++;
                continue;
            }
 
            for ( var j = 0, length = _cfs[i].length; j < length; j ++ )
            {
                func = _cfs[i][j];
 
                if ( ac == 'action' )
                {
                    rt = func.apply(null, args);
                }
                else
                {
                    rt = func.call(null, rt);
                }
 
                if ( _get(func, tag, i, 'run_once') ) 
                {
                    _cfs[i].splice(j, 1);
                    j --;
                    length --;
                }
                if ( rt && rt['end'] ) return rt['value'] || null;
            }
 
            i ++;
        }
        return rt;
    };
 
    ns.apply_filters = function(tag, value)
    {
        return filter_or_action('fitler', tag, value)
    };
 
    ns.do_action = function(tag)
    {
        var args = to_array(arguments);
        filter_or_action.apply(null, ['action'].concat(args));
    };
})(window)
 
function log(str)
{
    document.write('<p>' + str + '</p>');
}
 
//普通的filter
add_filter('status', function(text)
{
    return text.replace(/orz/g, '超人');
});
log(apply_filters('status', 'orzorz'));
//再添加一个filter
add_filter('status', function(text)
{
    return text.replace('超人', '动感');
});
log(apply_filters('status', 'orzorz'));
 
//添加一个优先级较高的filter,并通过返回包含end字段的对象结束过滤器
add_filter('status', function(text)
{
    return {end:true, value:text};
}, 5);
log(apply_filters('status', 'orzorz'));
 
//但是下面这个优先级较高的会执行
add_filter('status', function(text)
{
    return text + '管不着我';
}, 1);
log(apply_filters('status', 'orzorz'));
 
log('-----------------------------');
log('action测试');
log('-----------------------------');
 
//下面是action
add_action('ac_success', function(a, b, c)
{
    log('返回数据:' +  a + b + c); 
});
 
//添加一个只会执行一次的action回调
add_once_action('ac_success', function(a, b, c)
{
    log('我只会执行一次的');
});
 
add_action('ac_success', function(a, b, c)
{
    log('俺的优先级比较高');
}, 5);
 
log('----------第一次执行----------------');
do_action('ac_success', '1', '2', '3');
 
log('----------第二次执行----------------');
do_action('ac_success', '4', '5', '6');
 
add_action('ac_success', function(a, b, c)
{
    log('全部屏蔽');
    return {end:true}; 
}, 1);
 
log('----------第三次执行----------------');
do_action('ac_success', '1', '2', '3');
</script>
</html>
]]> http://bluehua.org/2010/04/10/1084.html/feed 3 例举js中组装类的好处 http://bluehua.org/2010/04/01/1065.html http://bluehua.org/2010/04/01/1065.html#comments Thu, 01 Apr 2010 14:42:22 +0000 小鹿 http://bluehua.org/?p=1065 先举个简单的组装的例子

//纸
var paper = new Paper();
//处理下
enable_fire_destory(paper);
//ok,可以燃烧了..
paper.fire();
//猪
var pig = new Pig();
enable_fire_destory(pig);
//不管怎么着,也能着了
pig.fire();

这种组装方式用于给毫不相关的对象快速添加一些通用的方法, 用法得当将节省大量代码~

这里举个实际开发中的例子,下面的代码肯定是我们平时经常写的,用于防止一次ajax请求没有完毕就请求第二次

obj = {
....
is_loading : false,
load_sth : function(callback)
{
    if ( this.is_loading ) return;
    this.is_loading = true;
    new Ajax({
        url : 'xxx.php',
        onComplete : function()
            This.is_loading = false;
        }});
    });
},
....
};

使用组装的方法改写

//组装函数
function enable_single_thread_ajax(obj)
{
    extend(obj, {
        _is_ajax_ing : false,
        is_ajax_ing : function()
        {
            return this._is_ajax_ing;
        },
        ajax : function(params)
        {
            if (this.is_ajax_ing()) return;
            var This = this;
            this._is_ajax_ing = true;
 
            var _tmp_func = function(){};
 
            //为了保持ajax的参数不变,要做点小牺牲
            if (params['onComplete'])
            {
                _tmp_func = params['onComplete'];
            }
 
            params['onComplete'] = function()
            {
                This._is_ajax_ing = false; 
                _tmp_func.apply(this, arguments);
            };
 
            return Ajax(params);
        }
    });
}
 
//还是那个对象 
obj = { 
load_sth : function()
{
    //打完收工了~
    this.ajax({
        url : 'xxx.php'
    });
}   
};
//给对象扩充方法
enable_single_thread_ajax(obj);

还可以直接扩展原型,达到扩充类的目的~,以前写过一篇自定义事件的文章,也是用的这种方法 : 简单实现js里的自定义事件

今天特地翻开没怎么看的<javascript设计模式>,里面定义这种扩展方式为”掺元类”,感觉这么翻译不是特好理解…

]]> http://bluehua.org/2010/04/01/1065.html/feed 3 一种字符串代替数组的场合 http://bluehua.org/2010/02/25/982.html http://bluehua.org/2010/02/25/982.html#comments Thu, 25 Feb 2010 09:22:57 +0000 小鹿 http://bluehua.org/?p=982 曾经耍过一些小聪明,而且是相当然的,有人问我你做过验证吗,….木有,然后也觉得自己很不靠普

下面是验证以前做一个选择器的时候用到的方法,主要是为了加速判断是否已选的操作

<html>
<script>
function ctime(func)
{
    var s = new Date().getTime();
    func();
    return new Date().getTime() - s;
}
var time;
time = ctime(function()
{
    var i = 0;
    astr = [];
    while (i < 10000)
    {
        astr.push('fasdfasdf');         
        i ++;
    }
});
document.write(time + '</br>');
 
time = ctime(function()
{
    var i = 0;
    sstr = '';
    while (i < 10000)
    {
        sstr = sstr + 'fasdfasdf';         
        i ++;
    }
});
document.write(time + '</br>');
 
function is_include(arr, v)
{
    for ( var i = 0, j = arr.length; i < j; i ++ )
    {
        if (arr[i] == v) return true;
    }
    return false;
}
time = ctime(function()
{
    var i = 0;
    while (i < 1000)
    {
        if (is_include(astr, '12321423')) break;         
        i ++;
    }
});
document.write(time + '</br>');
 
time = ctime(function()
{
    var i = 0;
    while (i < 1000)
    {
        if (sstr.indexOf('12321423') !== -1) break;         
        i ++;
    }
});
document.write(time + '</br>');
</script>
</html>

运行结果
ie6:

20
1342
5699
280

ie8:

30
30
9163
441

ff3.6:

1
2
111
97
]]> http://bluehua.org/2010/02/25/982.html/feed 1 ie下暴力debug js http://bluehua.org/2010/02/25/976.html http://bluehua.org/2010/02/25/976.html#comments Thu, 25 Feb 2010 09:03:43 +0000 小鹿 http://bluehua.org/?p=976 ie下的脚本错误总是很神秘的样子,告诉你哪个行,确不告诉你哪个文件,Visual Studio带了一个调试工具倒是可以,long long ago之前用过一次,老崩溃的样子~
如果你又遇到了猜不透的bug,可以尝试下面的shell~

//现去firefox里收集一份js列表
var alljs = [];
XN.array.each(document.getElementsByTagName('script'),function(i,v)
{
    if (v.src)
    {
        alljs.push(v.src);
    }
});
console.log(alljs.join('\n'));

把列表保存到一个文件,下面跑段shell,把所有js的报错位置的代码打印出来

// 10 100是ie里提示的错误位置
sh ~/bin/get_line.sh /tmp/jslist 10 100

附:

#!/bin/sh
LIST="$1"
ROW="$2"
COL="$3"
 
if [ ! -n "$ROW" ];then
    exit
fi
 
echo "行:${ROW}"
echo "列:${COL}"
 
get_row()
{
    cat /tmp/js_debug_tmp | sed -n "${ROW}p"
}
 
cat "$LIST" | while read line
do
    wget -q "$line" -O /tmp/js_debug_tmp 
    echo "文件:${line}"
    row="`get_row`"
 
    if [ -n "${COL}" ]; then
        row="`echo \"${row}\" | cut -c ${COL}- `"
    fi
 
    echo "$row"
done
rm /tmp/js_debug_tmp
]]> http://bluehua.org/2010/02/25/976.html/feed 0 javascript做html字符串的截断 http://bluehua.org/2010/02/01/927.html http://bluehua.org/2010/02/01/927.html#comments Mon, 01 Feb 2010 12:46:46 +0000 小鹿 http://bluehua.org/?p=927 2010.2.6 日修正
————————————
2010.2.3 日修正

<html>
<!-- html字符截断第二版 bug修正 + 2.6日修正-->
<script>
function sub_html_str(str, num)
{
    var reg = new RegExp( '<[^>]+>' , 'g' );
    var rt, rts = [], indexs = [], tstr, endstr, rstr, sstr, endtag, rtstr;
 
    //提取所有的html标签和标签在字符串中的位置 
    while ( ( rt = reg.exec(str) ) != null )
    {
        rts.push(rt[0]);
        indexs.push(rt['index']);
    }
 
    //删除字符串中所有的html标签
    tstr = str.replace(reg, '');
    //对剩余的纯字符串进行substr
 
    sstr = tstr.substr(num, tstr.length);
    tstr = tstr.substr(0, num);
 
 
 
    //判断有没有把实体腰斩，如果有腰斩的就再接上 
    endstr = (/&[^&]*$/.exec(tstr) || '');
    if ( endstr !== '' ) endstr += '' + (/^[^;]*;/.exec(sstr) || '');
    if (/^(&\w{1,10};|&#\d+;)$/.test(endstr))
    {
        rtstr = tstr.replace(/&[^&]*$/, endstr);
    }
    else
    {
        rtstr = tstr;
    }
 
    //把html标签放回到截断完毕的字符串中，当然有的html标签这时候已经无家可归了
 
    var index = 0;
 
    for (var i = 0; i < rts.length; i ++)
    {
        index = indexs[i];
        if (rtstr.length >= index)
        {
            rtstr = rtstr.substr(0, index) + rts[i] + rtstr.substr(index, rtstr.length);
        } 
        else
        {
            break;
        }
    }
    var lastindex = i ;
    //下面的代码用来闭合没有闭合的标签
    tstr = rtstr;
    rstr = '';
 
    //把闭合的标签全部删除，sstr包含了没有闭合的标签
    while ( rstr != tstr )
    {
        rstr = tstr;
        tstr = tstr.replace(/<[^\/][^>]*>[^<]*<\/[^>]+>/g, '').replace(/<[^>]+ \/>/g, '');
    }
    sstr = tstr;
    //在剩余的部分查找没有闭合的标签
    tstr = str.replace(rtstr, '');
    rstr = '';
    while ( rstr != tstr )
    {
        rstr = tstr;
        tstr = tstr.replace(/<[^\/][^>]*>[^<]*<\/[^>]+>/g, '').replace(/<[^>]+ \/>/g, '');
    }
 
    reg.lastIndex = 0;
    var endreg = new RegExp('<\/[^>]+>', 'g');
    //如果存在没有闭合的标签，从无家可归的标签里找下半身
    while ( reg.exec(sstr) != null ) 
    {
        if ( (rt = endreg.exec(tstr)) != null)
        {
             rtstr += rt[0];
        }
        else
        {
             break;
        }
    }
 
    return rtstr;
}
</script>
<script>
document.writeln('<textarea cols="100" rows="10">');
document.writeln(sub_html_str('<xx><oo>嵌套标签截断测试</oo><fk><test>lala</test></fk></xx>', 5));
document.writeln(sub_html_str('正常字符串测试', 5));
document.writeln(sub_html_str('<xx>带标签的字符串截断</xx>', 5));
document.writeln(sub_html_str('<xx><oo>嵌套标签截断测试</oo><fk>lala</fk></xx>', 5));
document.writeln(sub_html_str('<xx><oo>嵌套标签<img src="http://www.google.com/logo.gif" />截断测试</oo></xx>', 5));
document.writeln(sub_html_str('<xx><oo>实体截断&nbsp;测试测试</oo></xx>', 5));
document.writeln('</textarea>');
</script>
 
</html>

——————————————————–
最近各位弟兄都很忙的样子，俺则已经沦为做活动页面的了。。html字符的截断一般都会放到后台技术们做，但是春节的这个东西比较紧，偶就前端代劳一下。
运气不错，这么长的函数没调几次就过了。也是按照自己的思路来。。。
这个函数仅能做到

  • 截取除了html标签之外的前n个字符，一般的需求都是这样的。。
  • 不会截断html实体
  • 查找并闭合被截断的html标签,但是如果给的html就存在没有闭合的就不管了
<html>
<!-- html字符截断第一版 -->
<script>
function sub_html_str(str, num)
{
    var reg = new RegExp( '<[^>]+>' , 'g' );
    var rt, rts = [], indexs = [], tstr, endstr, rstr, endtag;
 
    //提取所有的html标签和标签在字符串中的位置 
    while ( ( rt = reg.exec(str) ) != null )
    {
        rts.push(rt[0]);
        indexs.push(rt['index']);
    }
 
    //删除字符串中所有的html标签
    str = str.replace(reg, '');
    //对剩余的纯字符串进行substr
    tstr = str.substr(0, num);
 
    //判断有没有把实体腰斩，如果有腰斩的就再接上 
    endstr = (/&[^&]*$/.exec(tstr) || '');
    if ( endstr !== '' ) endstr += '' + (/^[^;]*;/.exec(str.substr(num, str.length)) || '');
    if (/^(&\w{1,10};|&#\d+;)$/.test(endstr))
    {
        str = tstr.replace(/&[^&]*$/, endstr);
    }
    else
    {
        str = tstr;
    }
 
    //把html标签放回到截断完毕的字符串中，当然有的html标签这时候已经无家可归了
 
    var index = 0;
 
    for (var i = 0; i < rts.length; i ++)
    {
        index = indexs[i];
        if (str.length >= index)
        {
            str = str.substr(0, index) + rts[i] + str.substr(index, str.length);
        } 
        else
        {
            break;
        }
    }
    var lastindex = i ;
    //下面的代码用来闭合没有闭合的标签
    tstr = str;
    rstr = '';
 
    //把闭合的标签全部删除，tstr包含了没有闭合的标签
    while ( rstr != tstr )
    {
        rstr = tstr;
        tstr = tstr.replace(/<[^>]+>[^<]*<\/[^>]+>/g, '').replace(/<[^>]+ \/>/g, '');
    }
 
    reg.lastIndex = 0;
    //如果存在没有闭合的标签，从无家可归的标签里找下半身
    while ( reg.exec(rstr) != null ) 
    {
        while ( lastindex < rts.length )
        {
            endtag = rts[lastindex];
            //如果它是一个用来闭合的标签,就把它追加到字符串
            if ( /^<[ ]*\//.test(endtag) ) 
            {
                str = str + endtag;
                lastindex ++;
                break;
            }
            //如果它是自闭合的标签
            else if ( /<[^>]+ \/>/.test(endtag) )
            {
                lastindex ++;
            }
            //如果它是一个起始标签
            else
            {
                lastindex += 2;
            }
 
        }
    }
 
    return str;
}
</script>
<script>
document.writeln('<textarea cols="100" rows="10">');
document.writeln(sub_html_str('正常字符串测试', 5));
document.writeln(sub_html_str('<xx>带标签的字符串截断</xx>', 5));
document.writeln(sub_html_str('<xx><oo>嵌套标签截断测试</oo><fk>lala</fk></xx>', 5));
document.writeln(sub_html_str('<xx><oo>嵌套标签<img src="http://www.google.com/logo.gif" />截断测试</oo></xx>', 5));
document.writeln(sub_html_str('<xx><oo>实体截断&nbsp;测试测试</oo></xx>', 5));
document.writeln('</textarea>');
</script>
 
</html>
]]> http://bluehua.org/2010/02/01/927.html/feed 1 wordpress的插件机制用于产品js代码的解耦 http://bluehua.org/2009/12/22/751.html http://bluehua.org/2009/12/22/751.html#comments Tue, 22 Dec 2009 13:43:26 +0000 小鹿 http://bluehua.org/?p=751 由于半路出家，设计模式几乎没有接触，一直为产品代码的耦合头疼，前两天忽然想到，wordpress区区数行代码便实现了强大的插件接口，何不借鉴一下呢，于是便有了下面的假想代码(不了解wordpress插件机制的同学可以先了解一下)：

/*
* 以一个相册浏览的产品为例
* 该应用可以实现无刷新的图片浏览，附加功能:新用户引导，图片评论，对图片处理的第三方应用，圈人
*/
//产品引导开始
addAction('photo_browser_init',function()
{
     guideManager.init();
});
addAction('photo_load_sucess',function(photo)
{
    guideManager.step(3, photo);
});
addAction('photo_change',function(photo)
{
    guideManager.step(4);
});
//产品引导结束
 
//管理员ui开始
addAction('photo_browser_init',function()
{
    if ( !currentUser.isAdmin ) return;
    ......
});
//管理员ui结束
 
//相册圈人开始
addAction('photo_browser_init', function()
{
    photo_tag.init();
});
addAction('photo_load|photo_change', function(photo)
{
    photo_tag.update(photo);
});
//相册圈人结束
 
//相片app
addAction('photo_browser_init',function(photo)
{
    photo_apps.init(photo);
});
addAction('photo_load|photo_change',function(photo)
{
    photo_apps.update(photo);
});
//相片app结束
 
//相片评论开始
addAction('photo_browser_init',function(photo)
{
    photo_comment.init(photo);
});
addAction('photo_load|photo_change',function(photo)
{
    photo_comment.update(photo);
});
//相片评论结束
 
//相片浏览核心功能开始
var photo_browser = {...};
photo_browser.init();
//相片浏览核心功能结束

其实跟自定义事件有点类似，但是比自定义事件更强大：

  • 自定义依赖于对象，对脚本的加载顺序会有要求，而wordpress里的addFilter和addAction可以完美解决这个缺点。
  • filter可以实现数据过滤，而自定义事件不能

经过解耦之后的产品更方便多人协作开发，代码块清晰，有效避免svn冲突，还有种种其他好处。。

仅仅是个想法，未经实践，实践ing~

]]> http://bluehua.org/2009/12/22/751.html/feed 0 getAttribute(‘onclick’) in IE http://bluehua.org/2009/09/11/550.html http://bluehua.org/2009/09/11/550.html#comments Fri, 11 Sep 2009 09:05:31 +0000 小鹿 http://bluehua.org/?p=550 第n次火星了,可是依然没去过火星.
这个是最近用到才知道,需求是替换onclick属性中的关键字,但是俺单纯的以为geAttribute都会返回一个字符串给我,没想到ie又一次显示了它独到的见解~

<html>
<p id="test" onclick="alert('click');">click me~</p>
<script>
document.write('<pre' + '>');
var el = document.getElementById('test');
var at = el.getAttribute('onclick');
document.writeln(at);
document.writeln(typeof at);
document.write('</' + 'pre>');
</script>
</html>

ff下输出

alert('click');
string

ie6和ie7下输出:

function anonymous()
{
alert('click');
}
function

ie8下输出:

function onclick()
{
alert('click');
}
function

其他事件属性肯定也会有同样表现,ie8十分搞笑,换了一个函数名…

最后对于ie我只有这样了:

<html>
<p id="test" onclick="alert('click');">click me~</p>
<script>
var el = document.getElementById('test');
var at = el.getAttribute('onclick');
//函数换成字符串
at = at.toString().replace(/^function (anonymous|onclick)\(\)\n\{\n(.*)\n\}$/m, '$2');
//替换关键词
at = at.replace('click', 'wahaha');
//再变成函数放回去
el.setAttribute('onclick', new Function(at));
</script>
</html>
]]> http://bluehua.org/2009/09/11/550.html/feed 0