湯姆聽搖滾，喝咖啡，設計！

IE8 css hack

記錄一下ie8 css hack

順便記錄一下，ie8在stand mod下不支援wbr標籤了，用這個來解決斷行的問題已經沒辦法，但是可以用ie7相容模式還是可以支援啦，但不是很好的做法。

Javascript Design Pattern筆記(一)

Javascript是十分有彈性的語言，可以完成任何你所想完成的任務，譬如如果啟動或停止一個animation，可以有以下好幾種寫法：

// 1. function programing
function startAnimation() {
    ......
}
function stopAnimation() {
    ......
}

// 2. define Anim Class
var Anin = function() {
    ......
}
Anim.prototype.start = function() {
    ......
}
Anim.prototype.stop = function() {
    ......
}

var myAnim = new Anim();
myAnim.start();
.....
myAnim.stop();

// 3. Anim Class 但是用不一樣的方式定義method
var Anin = function() {
    ......
}
Anim.prototyp = { 
    start: function() {
        ......
    },  
    stop: function() {
    }   
};

var myAnim = new Anim();
myAnim.start();
.....
myAnim.stop();

// 4. 或是用比較相似一般語言的方法定義
Function.prototype.method = function(name, fn) {
    this.prototype[name] = fn;
}
var Anim = function() {                                                                                                                                              
    .......
}
Anim.method('start', function() {
    ......
});
Anim.method('stop', function() {
    ......
});

// 5. 或是可以用chain rule的方式去定義，只要method 回傳 this 就可以
Function.prototype.method = function(name, fn) {
    this.prototype[name] = fn;
    return this;
}
var Anim = function() {
    .......
}
Anim.method('start', function() {
    ......
})
.method('stop', function() {
    ......
});

有以上幾個範例就可以知道Javascript的多樣性。而繼承也可以透過原形式prototypal或是模仿class的classical繼承。以後會在多加描述。

在匿名函數中也有許多有趣的操作，如下：

Anonymous Javascript function 寫法

之前看到的文章裡才發現一般的js匿名函式的寫法其實有三種，如以下：

三個執行起來都一樣的功能，可能Douglas快上一點，不過hedger的寫法最好懂。

Detect Dom is Ready

在js library裡面都會提供Dom ready的function讓人使用，那為什麼常需要偵測dom ready在去執行寫好的function勒？如果dom還沒ready，而js在前面先執行了，會抓不到所需的dom物件，因為其dom並還沒有ready，所以jQuery提供$.ready的方法而YUI也有所謂的onDomReady Event，讓web developer可以在整個DOM都loaded之後才開始去執行所寫的function。

那其實我一直都很好奇dom ready的原理，說穿了就是偵測何時抓的到document, document.getElementByTagName及document.body，用setInterval一直去看何時抓到，就立刻去執行js function，以下為簡單的domReady function

這樣就可以很間單的去偵測dom ready在去執行寫好的js function了

Scalable JavaScript Application Architecture

主要的重點是說Javascript的結構可以分開成為幾個部分：

Module

Module has limited knowledge, module know about their sandbox. That's it.
Each module job is to create a meaningful user experience.
Module like tiitle kid, need a strict set of rules.
Module must stay within their own sandbox.

Sandbox

Sandbox ensure the consistent interface.
Sansbox also act like a security guard.
Take time to design the correct sandbox.

Application Core

Applicaitoin core manages modules.
Application core manages the communication between modules.
Application handle errors.

Base Library

Base Library provide the basic function.
Only base library know which browser is being used.

這四個部分，這四個部分可以獨立測試，各自抽換，不會影響整個架構，就可以達.到彈性擴充的結構。非常有趣。

display:inline-block

引用此篇文章

Javascript - call and apply 用途及差異

從學習js以來，一直其實對於這兩個method的用法，搞不太清楚，今天剛好研究清楚了一下，發現其實很簡單，只是之前看的書把我搞的迷迷糊糊的。

主要是f function裡的this 會變成o 物件。

這樣子來看的話，就簡單輕鬆多了，這兩個方法不太常用，但是再js library裡面會常常用到，讓使用library的人更方便。

overflow 神祕的用途

overflow有兩個神祕的用途：

Creates Block Formatting Context

float box

壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸

float box

壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參壹貳參肆伍陸柒捌玖拾陸柒捌玖拾壹貳參陸柒捌玖拾壹貳參壹貳參肆伍陸柒捌玖拾壹貳參

Clear float

壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆

陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹貳參肆伍陸柒捌玖拾壹

Switch cases的替代方案

一般在javascript裡的switch case寫法如下：

但是可能很多case的時候，會比較難閱讀就原作者說，他建議改寫成以下寫法：

這個寫法是參考python的語法，有趣的是裡面物件只有在他是數字時才可以用，如果是string的話就得變成cases.string。他建議說以後不要用switch cases了除非必要，改寫後非常容易閱讀，且可以重複被使用，因為是物件的關係，也很直覺。

不過我個人是覺得switch case比較直覺也很好閱讀啦，不過挺有趣的，詳情可看原文，如果有興趣的話

母親節快樂

回外婆家過母親節，看著阿姨們，媽媽跟外婆坐在一起唱個母親我愛你的歌曲，不禁著感動了起來，在外面奔波了許久，回到家的感覺總是很放鬆的，母親節，我每年幾乎都沒缺席，一定回家陪外婆跟媽媽，今年倒是特別有感觸，可能年紀也到了，今年對我來說也是很特別的一年，anyway，母親節還是想大聲說：媽、阿嬤，我愛你們，祝你們永遠健康快樂！

Tom

聰明人？

我是個聰明人嗎？好像不是，但沒關係，就腳踏實地的去幹吧。

這幾個月，學習許多，就會快樂，希望自己能更好。

君子當藏氣於身，待機而動。

忙碌的意義

忙碌的一週，好不容易在這樣的寒夜裡，聽著紓緩爵士樂，思考著，跟自己對話，我為何而忙？是為了美好的將來，還是為了填滿自我的孤獨，有時候界線好像不是這麼的明顯了，但確切知道的是，我最珍惜的人，事物。

Tom

jQuery Basic - Get every thing

初次接觸jQuery是因為幫jon開發widget接觸到的，也十分訝異於他的直覺及方便性，這次剛好藉由案子的關係深入來學習jQuery這個著名的javscript library。

首先讓我使用jQuery的理由有：

案子的後端剛好是asp.net，而.net MVC架構用使用jQuery為預設的javascript library
jQuery直覺方便，只要會簡單的 css selector及Xpath就可以拿到你想要的物件
交接方便，因為門檻會比較低

而jQuery的特點如下：

以css selector及Xpath取得的不再是原生的DOM物件，而是封裝好的Javascript物件，以方便以jQuery定義好的method去做事情，在YUI 3也採用這樣的方式
只要一隻js就可以做到許多效果，如animation. ajax等等
快速，程式碼會減少許多
有許多plugin可用(當然有好有壞，外面寫的plugin不確定品質如何)

以下有幾個簡單的方式可以取得物件：

還有許多其他的方式，請參閱api doc of jQuery。

小技巧：

這些簡單的小tips可以幫助快速上手。

最喜愛的CSS圓角

基本上，身為前端工程師，三不五時就會碰到圓角的狀況，網頁設計越來越偏愛圓角，其實屬於css圓角的技法也上網找也千百種，但真的能做到跨瀏覽器及字級縮放都能維持的就不多了，以下是我最喜歡的方法之一：

以上是固定的html markup。

#foo {zoom:1;border:solid 1px #d5d5d5;position:relative;margin-bottom:10px;}                                                                                                                              
#foo .mod-content {position:relative;z-index:2;}                                                                                                                                                          
#foo .x1,                                                                                                                                                                                                 
#foo .x1a,                                                                                                                                                                                                
#foo .x2,                                                                                                                                                                                                 
#foo .x2a {display:block;clear:both;font-size:0;height:5px;position:absolute;background:url(rc_gray_sprite.gif) no-repeat;}                                             
#foo .x1,                                                                                                                                                                                                 
#foo .x2 {width:100%;right:-1px;_right:-2px;}                                                                                                                                                             
#foo .x1a,                                                                                                                                                                                                
#foo .x2a {width:5px;left:-2px;}                                                                                                                                                                          
#foo .x1 {top:-1px;background-position:100% -10px;}                                                                                                                                                       
#foo .x2 {position:absolute;background-position:100% -15px;bottom:-1px;_bottom:-2px;}                                                                                                                     
#foo .x2a {background-position:0 -5px;}

以上是CSS語法，這種方法的好處為：

固定的markup，但可以有各種不同的圓角表現
跨瀏覽器及字級縮放功能
方便做Object Oriented CSS的圓角模組

Demo

如果還有興趣知道更多變化的方式請參閱Example made by Nate who is first front-end engineer in Yahoo.

Form Validation Javascirpt Function

在javascript發展中最一開始的功能就是做表單檢驗，隨著javascript在現今的網站互動介面上越來越重要，那表單檢驗的功能也是日益複雜化，當然現在有一些jquery plugin或者是別人寫好的components可以應付許多複雜的檢驗，但我始終覺得整個js檔案太肥大，對於我所開發的專案來說，我只需要簡單的一些檢驗方法，但又不想要每個form模組都寫一次表單檢驗的function，於是就開始研究並寫出一個簡單、reuseble且輕量化的javascript function。

在回台中的兩天時間裡，參閱了jquery作者John Resig所寫的pro javscript techniques寫出以下的Example請看原始碼，主要的使用方式，是在輸入的input或是textarea中給特定的class去標明此內容需要怎麼的檢驗，在這個function我置入了幾個主要的檢驗pattern：

必要的 required：此欄位一定不能為空。
電子郵件 email：必須為正確的email格式。
網址 url：必須為正確的url格式。
電話phone：會轉為較好閱讀的phone number格式。
最多字數限制 max：此欄位最多能輸入多少字數。字數需由html裡的maxlength定義>。
最少字數限制 min：此欄位最少必須輸入多少字數。字數需由html裡的minlength定義>。

基本上如果還有什麼特殊檢驗的pattern都可以增加在oErrMsgs這個物件裡，對我來說是很方便的表單檢驗function，希望對跟我一樣需求的人有些幫助。