最奇特的编程语言特征

December 26, 2011 | 作者：白菜 | 分类：随便侃侃 | No Comments

       目前为止，据我个人观察，从语法角度上讲，最让人困惑和难以理解的一种语言应该是LISP语言了。打开这种语言的代码，一眼望去，满目全是括弧，一层套一层。 这种语言特征最大的问题是，它不符合人们通常的思维习惯。LISP语言的这个特点是个整体的语言现象，而任何一种语言其实也都有一些个别的很奇特的东西， 其中有些会奇怪的让你摸不着头脑。有一个好事者在一个帖子上征集各种语言里不合常理的地方，结果收集到了320多条，问题最大最多的语言算是Javascript了，另外还有C，Java，Python，PHP等等。下面列出的是其中最有趣的几条。
1. 在C语言里，数组可以这样索引取值：

a[10]
这种写法相当常见。
然而，还有一种很少见的写法(绝对可用！)是这样的：
 10[a]
解释：that's because a[10] means *(a+10) ... and 10[a] means *(10+a)
2.这两种写法的效果是一样的。
在JavaScript里：
 '5' + 3 结果是 '53'

而
 '5' - 3 结果是 2
解释：在ECMASCRIPT规范里定义了字符串的加法，但没有字符串减法。11.6.1里有7. If Type(lprim) is String or Type(rprim) is String, then a. Return the String that is the result of concatenating ToString(lprim) followed by ToString(rprim)

阅读剩余部分...

转：JavaScript 的死与生

December 16, 2011 | 作者：白菜 | 分类：网页前端 | No Comments

很好的一篇文章：JavaScript is Dead. Long Live JavaScript! 下面是概要翻译与我的阅读笔记：

JavaScript 的成功得益于在正确的时间出现在正确的地点。JavaScript 的兴起与浏览器的支持息息相关。你瞧，VBScript 就没这么好运气。

JavaScript 很流行，但它有先天缺陷。Brendan Eich 当初只花了 10 天时间就把 JavaScript 设计出来了，作为 JavaScript 之父，BE 如是说：


与其说我爱 JavaScript，不如说我恨它。它是 C 语言和 Self 语言一夜情的产物。十八世纪英国文学家约翰逊博士说得好：“它的优秀之处并非原创，它的原创之处并不优秀。”


（摘选自阮一峰的翻译：JavaScript 诞生记）

JavaScript 的不足，最明显之处是语法。


糟糕冗长的语法


可选参数和默认值


function(a, b, option) {  option = option || {};  // ...}

上面的代码中，option 是可选参数，当没有传递时，默认值是 {}. 然而，传递的 option 值有可能是假值(falsy 值)。严格来写，得如下判断：


function(a, b, option) {  option = arguments.length > 2 ? option : {};  // ...}

注意：option = typeof option !== 'undefined' ? option : {} 也有可能是错误的，因为传递过来的可能就是 undefined

当不需要 b 参数，删除后，基于 arguments.length 的判断很容易导致忘记修改而出错：
function(a, option) {
  option = arguments.length > 2 ? option : {};
  // ...
}

如果能增加以下语法该多好呀：
function(a, b, option = {}) {
  // ...
}


Let


闭包很强大，也很恼火：
for (var i=0, ilen=elements.length; i<ilen; i++) {
  var element = elements[i];
  LIB_addEventListener(element, 'click', function(event) {
    alert('I was originally number ' + i);
  });
}

上面的代码经常在面试题中出现，解决办法是再包裹一层：
for (var i=0, ilen=elements.length; i<ilen; i++) {
  var element = elements[i];
  (function(num) {
    LIB_addEventListener(element, 'click', function(event) {
      alert('I was originally number ' + num);
    });
  }(i));
}

阅读剩余部分...

转：Simple JavaScript Template : substitute

December 16, 2011 | 作者：白菜 | 分类：网页前端 | No Comments

我们在平常使用字符串拼接的时候（如下例），会发现代码的可维护性和易读性将变得更加糟糕（代码中一堆的变量、双引号、单引号, 加号等，相信当情况更为复杂时，头一定发晕）：


var url= 'http://www.plannabc.net/',

    title= '落草为根——专注前端技术&关注用户体验',

    text = '怿飞's Blog';



var link = '<a href="' + url + '" title="' + title+ '">' + text+ '</a>';

如果上述代码变为：


var obj = {

    url: "http://www.plannabc.net/",

    title: "落草为根——专注前端技术&关注用户体验",

    text: "怿飞's Blog"

};

var link = '<a href="{url}" title="{title}">{text}</a>';

substitute(link, obj)

一切变得怡然自得。

阅读剩余部分...

JS实现图片上传时的本地预览，兼容IE和firefox

July 27, 2011 | 作者：白菜 | 分类：网页前端 | 2 Comments
   一般如果要实现在上传前预览图片的话，用纯服务器端的语言必定是办不到的，需要先传到服务器上，哪怕是只是服务器上的临时文件，这也是个很麻烦的事情，不过可以用javascript来做这件事。下面的javascript就可以是现在服务器上预览本地图片。不过代码还有一些问题，仅支持IE和firefox。不过我想也不会有多少人愿意去支持chrome，“吃肉么”浏览器一向我行我素，非要自己再弄套标准，谁吃饱了去支持吃肉么啊。明明IE和火狐都正常的代码，这个小不点的chrome浏览器非要跳出来不兼容你的代码。请无视google吧。
     firefox使用了getAsDataURL方法，而IE是用了滤镜。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p>
<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>
</p>
<script>
function setImagePreview() {
    var docObj=document.getElementById("doc");
    var fileName = docObj.value;
    var imgObjPreview=document.getElementById("preview");
        if(docObj.files &&  docObj.files[0]){
            //火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '150px';
            imgObjPreview.style.height = '120px';          
            imgObjPreview.src = docObj.files[0].getAsDataURL();
        }else{
            //IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag");
            //必须设置初始大小
            localImagId.style.width = "150px";
            localImagId.style.height = "120px";
            //图片异常的捕捉，防止用户修改后缀来伪造图片
            try{
                localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            }catch(e){
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }
</script>
</body>
</html>
预览地址：http://aiyooyoo.com/t/imgprew.htm
有需要的可以自行改一下代码。

javascript contains方法

July 6, 2011 | 作者：白菜 | 分类：网页前端 | No Comments

IE有许多好用的方法，后来都被其他浏览器抄袭了，比如这个contains方法。如果A元素包含B元素，则返回true，否则false。唯一不支持这个方法的是IE的死对头firefox。
<script type="text/javascript">
  window.onload = function(){
    var A = document.getElementById('parent'),
    B = document.getElementById('child');
    alert(A.contains(B));
    alert(B.contains(A));
  }
</script>
<h2 style="text-align:center">contains方法</h2>

<div id="parent">
  <p>
    <strong id="child" >本例子会在火狐中会报错。</strong>
  </p>
</div>
不过火狐支持compareDocumentPosition() 方法，这是W3C制定的方法，标准浏览器都支持，不过实用性性很差，因此没有什么人用，推广不开来。它的使用形式与contains差不多，但返回的不是一个布尔值，而是一个很奇怪的数值，它是通过如下方式累加计算出来的：

000000 0 元素一致
000001 1 节点在不同的文档（或者一个在文档之外）
000010 2 节点 B 在节点 A 之前
000100 4 节点 A 在节点 B 之前
001000 8 节点 B 包含节点 A
010000 16 节点 A 包含节点 B
100000 32 浏览器的私有使用

-

阅读剩余部分...

JS动态控制并修改flash的地址，兼容firefox和ie

November 15, 2010 | 作者：白菜 | 分类：网页前端 | No Comments

    前几天在项目中遇到一个问题，就是需要动态修改flash的地址，类似QQ秀和大头贴的效果。点击图片后，在头像上动态加上一个 Flash。想起来呢，也很简单。
  代码如下：
<tr>
<td align="center"><img src="ava_bor_1.gif" /><br />
<input type="radio" name="flashradio" id="radio1" value="avator_01.swf" /></td>
 <td align="center"><img src="ava_bor_2.gif"/><br />
<input type="radio" name="flashradio" id="radio2" value="avator_02.swf" /></td>
<td align="center"><img src="ava_bor_3.gif" /><br />
<input type="radio" name="flashradio" id="radio3" value="avator_03.swf" /></td>
<td align="center"><img src="ava_bor_4.gif" /><br />
<input type="radio" name="flashradio" id="radio4" value="avator_04.swf" /><br /></td>
</tr>
我的浏览器是IE8和Firefox3.6.12，使用了jQuery来实现
<script>
 $(function(){
$(":radio").click(function(){
alert($(this).val());
$("object[type='application/x-shockwave-flash']").attr("data",$(this).val());//火狐下修改Flash地址
alert($("embed").attr("src")); //获取当前flash地址
$("embed").attr("src",$(this).val());//ie下修改
})
});
</script>
然而诡异的是这个代码在火狐下工作正常，在IE下却是无论如何都无效，可以获取地址，但无法修改地址。换了几种写法仍然如此。马上到其他网站参考了别人的写法。我看了下UC的写法，很晕。

阅读剩余部分...

JavaScript调试：throw与console

October 12, 2010 | 作者：白菜 | 分类：网页前端 | No Comments

我想没多少人敢保证写JavaScript能不用调试，那选择用什么方式调试会比较好呢？

  • 告别了我最爱的alert("MM")
  • 告别了我最爱的document.title="MM"
  • 告别了我最爱的window.status="MM"

大家开始用各种新的方式来看调试信息。。。比如最近sitepoint就发了一篇Debugging JavaScript: Throw Away Your Alerts!，大家先去看，看完再回来接着看。
var err = new Error();
err.name = 'My API Input Error';
err.message = 'Input must be a number';throw(err);
throw虽然不错，但是我们调试时可能不只能抛错，还可能抛很多奇怪的信息，比如把执行时间、返回结果打出来看，当然，你也可以写不同的err.name来区分。但是，有事没事看到报错也是很不爽的一件事。

写JavaScript的同学应该都有装Firebug，如果没装赶快装去，装完了再回来看，要是连Firefox都没有就玩Firebug Lite。

Firebug提供有了个console，你可以用：console.log(object[, object, ...])和若干console.xxx来玩，这样就可以把错误跟警告区分开了，挖哈哈。

同时，console并不是Firebug独有的，你也可以用console.log('嗷嗷又出来忽悠人了！');把信息打到Safari的错误控制台，还可以这样玩：

console.warn('这个图标很黄');
console.error('×的图标不好看');
Opera也有个错误控制台，可惜不能用console.log来显示东东，不过也有打印的接口： opera.postError，但它打出的的图标却不是错误的图标，它的真名应该叫postWarn，throw打出来的图标才是错误的图标，它才是真正的postError，算了，凑和着用吧。如果在Opera下做开发推荐使用Opera Dragonfly。

还有IE呢？嗯，IE要用Companion.JShttp://www.my-debugbar.com/wiki/CompanionJS/HomePage
http://log4js.sourceforge.net/ 这个东东也可以用来调试JS，很不错。

其实大家可以自己写个Console，除了可以把东东打印到浏览器的错误控制台上，还可以把信息打印到服务器上，在自己调试环境下没问题不代表在任何情况下都会没问题。

parseInt 小陷阱

August 10, 2010 | 作者：白菜 | 分类：网页前端 | No Comments

看代码：


alert(parseInt(0.000001));alert(parseInt(0.0000001));

第一条语句输出 0, 第二条语句输出 1, 囧。

继续看代码：


alert(parseInt('0.000001'));alert(parseInt('0.0000001'));

都输出 0, 这才符合预期。

查看 ECMA-262 规范，parseInt 会先调用 toString 方法。问题已逐渐清晰：

alert(0.000001);alert(0.0000001);

阅读剩余部分...

    Page :
  1. 1
  2. 2