前段时间看了玉伯的《一道大题目》，今晚又看到译飞的《类型转换的乐趣》。
记得当时看了玉伯的文章后就知道他在考《命名函数表达式探秘》的内容，并没有太在意，只是觉得对于浏览器或者Javascript的某些怪异现象，有一定的了解就OK，在实际的运用中，肯定是会避免出现这样的问题。
但看到译飞的文章里提到的 [] == ![] //为true 时，的确愣了一下。
最后，译飞还留下了一道思考题：
{} == !{}; //返回什么值？
[] == [] //返回什么值？
把我的兴趣给提了起来，追根究底一翻再睡觉。
[] == [] 不用讲，肯定是false，两个不同的对象。
通过译飞的分析
Step01: [] == ![] // 由于[]是对象，则 ![] 返回fasle，演变为 Step02。
Step02: [] == fasle // 由于 fasle 是 Boolean 值，则转换成数字 0，演变为 Step03。
Step03: [] == 0 // 由于 0是数字，[]是对象，[] 转换成数字 Number([]) -> 0，演变为 Step04。
Step04: 0 == 0 // 返回最终结果：true
[] == ![] //为true，同理，{}也是对象，{} == !{};应该也是true。
通过运行得到结果false。很明显，中间还有道道。
通过翻看ECMAScript得知，在译飞的Step03：
Step03: [] == 0 // 由于 0是数字，[]是对象，[] 转换成数字 Number([]) -> 0，演变为 Step04。
针对{}和[]处理的结果是不一样的。
Number([]) ：
Step01: [] 转换成 空字符串
Step02: Number(”) -> 0;
Number({})：
Step01: {} 转换成 ‘[object Object]‘
Step01: Number(‘[object Object]‘) -> NaN
结果：
NaN == 0 //false
具体见ECMAScript 8.6.2.6
还有其它各种类型的转换，可以仔细再看看。
最后，了解浏览器和Javascript的某些怪异现象和特性，可以在项目中避免遇到一些诡异的问题。
—————–我只是条无辜的分割线—————————-
最后的最后，很晚了，睡觉。
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会阻塞其它页面资源的下载，通过对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
阅读全文 »
通过 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可以看到效果
遇到一道题目：
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中，给常量赋值是否会抛出错误呢？
阅读全文 »
