分类: JS/AJAX/DOM

在Eclipse里使用ANT合并压缩JS&CSS

Aptana 是一款基于Eclipse的免费开源的软件,非常方便地编写 html, css, js, 有丰富完善的代码提示,包括大部分的 JS 框架的提示,比如 prototype/dojo/jquery/yui 等,相当方便。
由于工作开发环境是 JAVA,于是我用 Eclipse 安装了Aptana 的插件。

ANT,是 Apache 的一个开源项目,用于自动化调用程序完成项目的编译,打包,测试等。
Eclipse 内置了Ant,可以很方便地对JS, CSS进行压缩合并处理。

比如 js, css 文件都放在 web_assets 目录下,那么目录结构如下:

web_assets
    +-- ant-build  //存放ant build xml 配置文件
        +-- js.build.xml //处理 js 的配置文件
    +-- js  //最终的js文件
    +-- lib  //其它依赖的程序
    +-- src  //源文件

阅读全文 »

异步脚本加载 JS Loader

JS会阻塞其它页面资源的下载,通过对JS的异步加载可以解决这个问题,加快页面内容的呈现速度。获得更好的体验。

使用script标签加载

通过firebug查看各种资源加载状态,当test.js下载完毕后,图片才开始下载。

猛击测试页面block.html

使用JSLoader异步加载JS

当使用异步加载方式加载JS时,test.js与图片同时加载,加快了页面的呈现:

猛击测试页面js-loader

JSLoader

JSLoader.load(url, [fun1], [funN]);
参数:
url 要加载的JS的地址
fun 依赖该JS执行的函数

使用示例:

JSLoader.load('test.js', function(){
    document.getElementById('test').innerHTML = test;
});

猛击这里下载JSLoader.js

阅读全文 »

js在IE下获取background-position的问题

通过 jQuery 获取 background-position 的值时,在 IE 中返回 undefined
通过测试,发现无论是写在样式表中,还是写在元素style属性里,在 IE ( 6, 7, 8 ) 里获取background-position的值时,均返回undefined。

针对IE的这个bug,写了如下方法获取background-position的值:
请忽略getCSS方法,这是一个简易的获取css的方法,并不完善,了解不同浏览器获取CSS的方法

var getCSS = function(){
	var rdashAlpha = /-([a-z])/ig,
		fcamelCase = function( all, letter ) {
			return letter.toUpperCase();
		};
	return function(el, name){
		if (typeof el === 'string') el = document.getElementById(el);

		var cssValue,
			camelCase = name.replace(rdashAlpha, fcamelCase);

		if (el.currentStyle){
			cssValue = el.currentStyle[camelCase];
		}else if(window.getComputedStyle){
			cssValue = window.getComputedStyle(el,null)[camelCase];
		}
		return cssValue;
	};
}();

var getBackgroundPosition = function (){
	var s = getCSS(document.body, 'background-position') === undefined;
	return function(el){
		if (s){
			return getCSS(el, 'background-positionX') + ' ' + getCSS(el, 'background-positionY');
		}else{
			return getCSS(el, 'background-position');
		}
	};
}();

猛击DEMO可以看到效果

Math.PI与++运算符

遇到一道题目:

var a = Math.PI++, b = ++Math.PI;
alert(a);
alert(b);
alert(Math.PI);

不加思索的写下:
3.14
4.14
3.14

后来经常提醒才想到Math.PI是常量,修改一个常量的值,会抛出错误。
而上面的操作中,b = ++Math.PI 可以理解为将Math.PI递增加1,并且赋值给变量 b;
这时候开始迟疑了:
在javascript中,给常量赋值是否会抛出错误呢?
阅读全文 »

浏览器本地存储(1)

浏览器存储方式主要下面几种:

  • Cookie
    4096字节;缺点:存储量小,请求头附带cookie带来性能问题。
  • Flash Share Object
    默认支持100k,跨浏览器存储最好的方式,毕竟现在没有安装flash插件的用户是很少的;缺点:需要加载一个swf文件,个别用户不支持flash。
    有一个基于jQuery的插件叫 jStore ,就是通过Flash Share Object实现的。
  • IE的 UserData
    最少也能支持640k,IE8后已经支持DOM Storage;缺点:IE only。
  • DOM Storage
    默认支持5M存储量;缺点:IE7,IE6不支持。
  • Google Gears
    功能最强;缺点:但需要安装软件,而且,安装的用户是较少的。

这里主要学习 IE 的 UserData 和 DOM Storage
阅读全文 »