[ Content | Sidebar ]

Posts tagged javascript

javascript 1.7 的新特性

我愧对js工程师这个职位,竟然不知道firefox已经支持javascript 1.7了~

可能是受python的影响,偶然在firebug里输入类似下面代码

"abcdef"[1]

然后结果输出了”b”,当时没有在意,但是后来一想js好像没有这个特性,偶就觉得firefox的js引擎有点小牛了..

但是今天看的这个javascript 1.7新鲜事里好像没有提到这个特性,有点不解~

getAttribute(‘onclick’) in IE

第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>
Copy Code | Run Code

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>
Copy Code | Run Code

替换js中的字符串常量为变量

最近需要把整站js中的域名替成变量,awk查资料写了大半天也没整出个啥,话说我的正则还是太初级,话说我买的正则书也不知跑到哪去了,话说好书还是要放到家里…

于是还是用python,没有用正则,但是好像跑起来真的比awk快~

脚本下载:replace_keyword.zip

效果:

//替换之前
var s = '<a href="http://blog.abc.com/show">';
//替换之后
var s = '<a href="http://blog.' + siteDomain + '/show">';
Copy Code 

使用方法:
首要要修改脚本里要替换的关键词

config['keyword'] = 'abc.com'
config['vname'] = 'siteDomain'
Copy Code 

然后

python replace_keyword.py ./myscript.js > /tmp/ooxx
mv /tmp/ooxx ./myscript.js
Copy Code 

批量替换的话就需要写个简单的shell:replace_keyword.sh

#!/bin/sh
python replace_keyword.py $1 > /tmp/ooxx
mv /tmp/ooxx $1
Copy Code 

批量替换整个目录

find ./ -name "*.js" | xargs -i sh replace_keyword.sh {}
Copy Code 

最后任务远没有结束,这个脚本还不够强大,它只会替换字符串中的关键字,作为对象属性名称的字符串不会替换,正则中的关键字无法替换,像下面:

var config = {
    'blog.abc.com' : 1,
    'game.abc.com' : 2
}
//需要手工替换为
var config = {};
config['blog' + siteDomain] = 1;
config['game' + siteDomain] = 2;
 
if ( /abc\.com/.test(str) ){}
//需要手工替换为
if ( new RegExp( siteDomain.replace('.','\.') ).test(str) ){}
Copy Code 

所以运行完脚本之后还需要检查未替换的地方,手工完成

find ./ -name "*.js" | xargs grep 'abc\\\?\.com'
Copy Code 

@￥竟然能使ie6的文字链接神奇变形。。

更新:
sonic同学发现了bug的起因:
只要a标签的innerHTML是以http[s]://开头或者包含”@xx”类似email的字符串就会出现这种情况。。
———————————————-
今天qa发现的巨灵异的bug
———————————————-
由于网站域名切换，有些老的数据无法短时间切换，所以打算用js替换。具体实现:当鼠标移到link上时判断是否是老域名，如果是则替换~
代码类似下面

http://bluehua.org/demo/href+@.html

这段代码在除了ie6的浏览器都是正常的，鼠标移上时两个link的href都变成http://oo.test，但是ie6下第一个link出问题了：鼠标上去，链接文字没了。

“@￥”这两个字正好是qa组leader的id后缀，真牛x~

执行ajax返回代码中的脚本，支持document.write

恩，有个产品要速度改版，改用ajax实现分页，可是页面中有很多内联脚本，求技术改比较慢，于是采用了最速都的方法：返回内容之后，把html塞到对应的层里，然后手动eval一下脚本。

这里有点小困难的就是脚本里面有document.write…。不过李宁叔叔说过…

demo:
支持返回代码中的内联或者外联的脚本
http://bluehua.org/demo/eval_inner_html/

原理是这样滴：
执行这些代码之前先把document.write改成自己的函数，用来收集输出的字符串

var _write = document.write;
 
document.write = function( str )
{
    _inner_js.push( str );
}
Copy Code 

执行返回html中的脚本之后将document.write输出的代码添加到script标签的位置

var tmp = document.createDocumentFragment();
appendHTML( tmp,  _inner_js.join( '' ) );
s.parentNode.insertBefore( tmp, s );
Copy Code