記錄一下ie8 css hack

.selector {property:value \9;} works for ie6~8 .selector {property /*\**/:value \9;} works only for ie8

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

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繼承。以後會在多加描述。

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

// 1. 立即執行得到20的結果 (function(foo, bar) { alert(foo * bar); }(10, 2)); // 2. 給予等於一個變數，這樣tom = 20; var tom = (function(foo, bar) { return foo * bar; }(10, 2)); // 3.利用closure的特性，這樣foo跟bar就會被保護在匿名函數內，但是是可以透過baz從外部拿到 var baz; (function() { var foo = 10; var bar = 2; baz = function() { return foo * bar; }; }());

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

// 1. 一般看到的寫法 (function() { statements; })(); // 2. Douglas Crockford的寫法 (function() { statments; }()); // 3. hedgerwow喜歡的 void function() { statements; } ();

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

在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

function domReady(f) { if (domReady.done) // 如果dom loaded立刻執行f return f(); if (domReady.timer) { // 如果已經增加functions，把f放入清單中等候執行 domReady.ready.push(f); } else { addEvent( window, 'load', isDomReady); } domReady.ready = [f]; // 初始function array去分批執行 domReady.timer = setInterval(isDomReady, 13); // 每隔一短時間，一直去check dom ready } function isDomReady() { if (domReady.done) return false; if (document && document.getElementsByTagName && document.getElementById && document.body) { clearInterval(domReady,timer); domReady.timer = null; for(var i = 0; i < dom.ready.length; i++) { // 分批執行放進array中的function domReady.ready[i](); } domReady.ready = null; domReady.done = true; } }

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

主要的重點是說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.

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