雨夜带刀's Blog

getStyle的优化

<p>之前我写过一篇关于<a href="http://stylechen.com/getstyle.html">获取元素计算的样式</a>的文章,后来在使用发现中还有一些没想到的兼容问题,今天我对原来的代码进行了优化,并对一些常见的兼容问题进行了处理。</p>
<p>在javascript中“-”(中划线或连字符)代表的是减号,而在CSS中,许多样式属性都有这个符号,如:padding-left、font-size等,所以在javascript中如果出现如下的代码就一个错误:</p>
<pre class="brush: c-sharp">
elem.style.margin-left = '20px';
</pre>
<p>正确的写法应该是:</p>
<pre class="brush: c-sharp">
elem.style.marginLeft = '20px';
</pre>
<p>这里需要把CSS的中划线去掉并把原来紧跟在中划线后的字母大写,俗称“驼峰式”写法,不管是使用javascript设置或是获取元素的CSS样式都应该是驼峰式的写法。但是不少对CSS熟悉而又对javascript不太熟悉的新手朋友总是会犯这种低级错误,使用replace的高级用法可以很简单的将CSS属性中的中划线替换成驼峰式的写法。</p>
<pre class="brush: c-sharp">
var newProp = prop.replace( /\-(\w)/g, function( $, $1 ){
return $1.toUpperCase();
});
</pre>

replace的妙用

最近在看司徒正美的ajax框架代码的时候发现一段有意思的代码:

"get post".replace( dom.rword, function(method){
	dom[ method ] = function( url, data, callback, type ) {
		if ( dom.isFunction(data) ) {
			type = type || callback;
			callback = data;
			data = undefined;
		}
		return dom.ajax({
			type: method,
			url: url,
			data: data,
			success: callback,
			dataType: type
		});
	};
});
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。