2007年8月27日 星期一

AOP for jQuery

就在寫 jQuery 1.1.4 那篇介紹文的同時, 逛了一下 jQuery plugins , 看到了一個很有意思的專案.
jQuery AOP , 看起來是一個新的專案,作者於 2007/08/17 上傳第一個 release 檔案.

aspect-oriented programming (AOP) 在 Java 中有幾個流行的 AOP 實作, AspectJ , AspectWerkz JBossAOP, 所以有關 AOP 的介紹, 請看上面四個 Link, 不在此重覆說明.

而 jQuery AOP 則是實作了 before / after / around 三個 advice, 雖然名為 jQuery AOP, 其實並未使用到 jQuery 的任何特性及功能, 所以即使您沒有使用 jQuery , 依然可以小改一下 code 來使用哦, 所以一定要堆的啦.

##CONTINUE##
我們可以很容易的利用 javascript 的 Function.apply() 來 hook function 或 object(Blogger Hack Tip#1) , 所以實作起來相當的輕巧, 只有 943 bytes.

舉一個實例:
任何程式語言, 在程式寫作過程中, 我們少不了要 Log , 然而 Log 的動作和程式本身實際的業務邏輯無關, 若是為每一個業務操作的 function / method 前後都加上 Logger.log('message'), 對於程式本身而言.. 太過於難看(bad smell).
所以這時我們可以藉由 Dynamic proxy 或 AOP framework 來改善這個 bad smell.

使用 jQuery AOP 在 javascript 中使用 after / before / around advices 變的很簡單:

例1 對 native object 切入:

jQuery.aop.before( {target: String, method: 'replace'},
function(regex, newString) {
alert("About to replace string '" + this + "' with '" + newString + "' using regEx '" + regex + "'");
}
);
"Hello World".replace("Hello", "Hello jQuery");


例2 對 global function 切入:

function testEcho ( arg) {
alert('testEcho: ' + arg);
}
jQuery.aop.before( {target: window, method: 'testEcho'},
function(arg) {
alert("About to testEcho arguments is " + arg);
}
);


例3 對 instance object 切入:

var TestObj = function (name) {
this.name = name;
};
TestObj.prototype.hello = function (arg) {
alert(this.name + ':' + arg);
};
var rack = new TestObj('rack');
jQuery.aop.before( {target: rack, method: 'hello'},
function(arg) {
alert("before "+ this.name +" say " + arg);
}
);
rack.hello('hello');


其它各位依此類堆.... 有了 jQuery AOP , javascript 也能寫的很優雅嘍.
(都已經 Hook Blogger了, 之前怎麼沒想到順便弄一個 plugin , 唉~~ sense 不足.. 被搶頭香了 :D )

jQuery 1.1.4 Release

jQuery 1.1.4 出來了 , 這將會是 1.1 系列的最後一版, 下一版本會跳到 1.2 了.
雖然被 jaceju 的 [JavaScript] jQuery 推出 1.1.4 版 搶了頭香 :D ,
阿土伯還是介紹一下, 並以一些比較技術部份簡介一下.
##CONTINUE##

Speed Improvements


在三個基本常用的操作上, ID selectors, tag name selectors, 和 each() 迴圈處理上, 速度有大幅的提昇.

Any Name jQuery


jQuery 在前面的版本, 只使用了二個 global variables , 就是 $ 和 jQuery, 現在 1.1.4 後, 您可以將這二個變數也換掉, 並和其它 3rd party 的 Library 整合,果如他在 Google 的演說一樣, (阿土伯這篇有介紹), 這版就加入了, 它帶來了二個好處:

1. 你可以在同一網頁使用不同版本的 jQuery:
這個功能, 或許猛一看, 你會認為為什麼有這樣的需求??
然而, 如果您的 Library 是運用在其它大量 3rd party library 的場合, 這個功能將會是很大的相容性保證.
如:
1. 阿土伯的 Blogger-Ext 它會運用在 blogspot.com 上的, 然而很多網誌作者已自行擴充了很多功能, 也可能使用其它版本的 jQuery, 這時這個功能將能保證不會有相容性問題.

2. 使用 Firefox 的使用者一定知道 Firefox 有很多的 extensions 可以使用, 包含 Greasemonkey 等, extensions 作者可能用到了 jQuery 來設計 js , 如果這時網頁也使用 jQuery, 這時這個功能將保證不會和網頁有相容問題.
2. 您可以將 jQuery 整合進其它 Namespace 中:
同上, 你更能將 jQuery 整進你 Library 的一部份, 一同發表, 這時, 您可以維護一份您自己使用的版本, 即使網頁作者換了別的版本 jQuery, 你的程式也不會發生相容性的問題.

也就是未來版本的 BloggerExt , 阿土伯可以將它整進 BloggerExt.jQueryBloggerExt.$ , 這樣 BloggerExt 將對任何網誌有最大的相容性以及最低的侵入性.

jQuery 在設計之初, 就有良好的設計模式以及未擴充任何 Native Objects , 這時就派上很大的用途.

// With the Dojo Toolkit
dojo.jquery = jQuery.noConflict(true);
dojo.jquery("#elem div").slideDown("slow");
// or with Yahoo UI
YAHOO.query = jQuery.noConflict(true);
YAHOO.query("span.hidden").removeClass("hidden");


.slice()


對於 jQuery 的 objects , 我們可以使用如同標準 Javascript arrays slice() function.
這個 Function 太優了, 它讓 jQuery 操作和 Javascript Array 有一致的操作介面.
所以, 理所當然的 .eq() , .lt() , .gt() 就被捨棄掉了. 因為可以用 .slice() 取代它.

Bug Fixes


53 個 1.1.3.1 版本的問題修正, 詳見 the bug tracker , 相當多的修正, 希望不會太快出現 1.1.4.1 :q

Local Variables:

一樣同他在 Google Tech Talk 上建議的良好習慣, 這版 1.1.4 便是將自己放在

(function(){
// your code
})();

中.

Blogger-ext2 使用方式


所以有使用 Blogger-ext2 的朋友, 只要將

<script type="text/javascript" src="http://blogger-ext2.googlecode.com/files/jquery-1.1.4.pack.js"></script>

即可完成 jQuery 的昇級動作..

2007年8月24日 星期五

John Resig 談 Building a JavaScript Library

( 的發起人) 在 Google Tech Talk 談如何建立一個 JavaScript Library:Building a JavaScript Library,包含影片及投影片。

對於每一位有心學好 Javascript 的 Programmer 都該花點時間看一下, 除了介紹 jQuery 外,包含很多設計 Javascript Library 的實用技巧及觀念, 即使您不是使用 jQuery 也該看一看.
##CONTINUE##
阿土伯對於實作(Implementaion)上的實務技巧簡單筆記:

  • 使用 Local variables / 盡可能使用最少的 Global Variables
    這部份是所有語言都共通的良好習慣, 讓您的程式碼及變數, 作用在最小的 Scope 中.
    或盡可能宣告最少的 Global Variables.
    在 Javascipt 中這個 Wrapper 寫法, 應當成基本程式習慣, 尤其是如果您的 javascript 會和其它大量的 javascript 一起運作時, (如阿土伯寫在 iGoogle 的 html-inline gadget ):

    (function(){
    // your code
    })();



    (function(){
    // your code
    }).call(this);


    (參考: Blogger Hack Tip #2 - Javascript Code Style)
  • Namespacing
    如果一定要讓自己的 Library 使用到 Global Variables 時, 請使用 Namespace.
    如:(Dojo, Yahoo UI, jQuery, BloggerExt)
  • 利用 Namespace 和其它 Library 相容並存或合作.
    這是 Namespacing 的擴展應用, 當您的 Library 僅作用在單一 Namespace 時, 您可以將自己的 Library 掛在別的 Library 下. 如 BloggerExt.proccess(); YamUtils.BloggerExt.proccess();
  • Don't Extend Native Objects
    其中, 這點和阿土伯的理念一拍即合, 也是我在 2007/02 之後的所有專案換到 jQuery 的原因. ( 參考: jQuery: 又一個非常優秀的 JavaScript Framework. )
上述 John Resig 所說的技巧, 也都全部應用在新版本的 jQuery 1.1.4, 請參考這篇 中, 有興趣的朋友可以看看 jQuery source code.

2007年8月23日 星期四

ifunP 推推王點播台 / 推文貼紙 支援 funP.com alpha4 嘍

就在 funP 展開了 alpha4 改版的夏日傳說 , 在 2007.08.22 上線嘍!!
由於 Alpha4 的改版, 阿土伯愛放屁(ifunP)放不出來了..
以及推推王 堆文貼紙加強版 變的不好看(高度不夠, 原 55 現在 69)..
所以都一併更版, 讓阿土伯的小工具也有個美好的夏日傳說...

##CONTINUE##
ifunP 點播台更新版本:
您不需要重新安裝, 由於 iGoogle 會 cache , 應該在 1 - 2 天或更短的時間內即可使用到最新的版本.
當然, 若您等不及, 請先將小工具移除, reload Browser , 再加入一次小工具應該就能直接用到更新的版本.

ifunP 點播台 功能介紹及說明

funP 推文貼紙:
您不需要改版任何語法, 已利用原檔案覆蓋更新..
若您是自行下載至其它位置, 請您再下載回去.
推推王 推文按鈕貼紙 加強版介紹及說明

2007年8月21日 星期二

+1 for Closures

Java7 即將導入 closure 語法, 這個在 Ruby 中非常精巧方便的特性, 即將導入 Java 中, 在許多論壇上造成很大的激辯.

對於 Java 是一個成長中的語言. 它會一直的進步以及導入新的語法及特性. 然而, 其中平衡點的拿捏真的就很重要了.

Java6 中的 Scripting Language 介面, 以及 JRuby 的成熟, 已經可以讓您在 JVM 中使用 javascript / python / ruby , 其實我們有很多方式可以混合開發應用在我們的專案中.

Java7 中導入了 closure 雖可以讓程式語法精簡且較為優雅, 然而, 它變的太 Ruby.
阿土伯我不想喝著一杯 "走味的咖啡" 呀~ 即始它鑲上了紅寶石~
不過..............
##CONTINUE##
如果有辣妹站台, 那阿土伯也要加入支持 closure 進入 java7 嘍.







無關人身攻擊... 不過這位太重量級了, 會讓 java7 的包袱更沈重, 那就免了唄....


原文: Closures Are Hot
原文: +1 for Closures

2007年8月14日 星期二

blogger_ext2.js 0.6.3 / 0.7.2 修正版發表


0.6.3 / 0.7.2 修正版本發表:
主要是阿土伯將大家列給我的已知問題修正, 沒有新的功能加入:

changelog:
* 較新/舊的文章 換頁到第三次後, 表情符號及繼續閱讀功能失效. (fixed)
* 表情符號效能修正, 若該內容無符號則不處理. (fixed)
* registerHook API 修正 (fixed)
- 使用 Hook API 的 plugin 發生換頁問題, 將一併獲得解決.

##CONTINUE##
0.6.3 版 all-in-one script

<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-0.6.3.pack.js' type='text/javascript'></script>


0.6.3 版 核心 script

<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-core-0.6.3.pack.js' type='text/javascript'></script>


0.7.2 版 目前在 svn 中, 所以不用改變. 隨時會引用到最新版本.


表情符號修正版

<script src='http://blogger-ext2.googlecode.com/files/plugin_replace_smiley-0.2.pack.js' type='text/javascript'></script>


詳細使用說明:
0.6 版
0.7 版

讓大家久侯了, Sorry and Thanks.

Technorati Tags: , ,

2007年8月13日 星期一

黑米小按鈕 加強版

利用 HEMiDEMi 官方 javascript 改良了一下, 提供一個以 DOM 操作為主的版本.歡迎官方直接引用.

加強了以下三點:
1. 解決在各 Blog 平台上部份網誌會造成畫面一片白的問題.
2. 一顆/多顆 按鈕語法統一.
3. 支援 Blogger-ext2, 在 Blogger 系統中換頁, 小按鈕依然能生效.
##CONTINUE##
解決畫面一片白:
其實這個問題同 "推推王 推文按鈕貼紙" , 加了 黑米小按鈕 貼紙後, 有時畫面會一片白. [出現空白頁]
這在 Blogger 系統最為明顯, 因為 Blogger 系統的 Sidebar, 換頁都是使用 javascript 動態 產生, 所以只要在 onload 前, 黑米小按鈕的 javascript 執行到, 而黑米小按鈕的 javascript 僅利用 document.write 產生一個 iframe.這時的 document 就僅剩下一個 iframe , 所以您會得到一片白.
請大家忘了 document.write 這個 n 年前的遺產吧.. 以 DOM 來提供小工具.

按鈕語法統一:
使用此一加強版, 不再分一個按鈕或多個按鈕, 您只要使用單一的語法即可. 而語法中也看不到 javascript , 只是一個 div 的語法, 您可以輕輕鬆鬆放入 黑米小按鈕.

使用方式:
放在網頁 <head> 位置加入 或 加入 html/javascript 網頁元素:
程式碼:

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/hemidemi_bookmark_button2.js' ></script>


放在按鈕位置的
程式碼:

<div class="hemi_button" style="font-size:0px;">網址</div>

如果不打就直接用貼紙所在頁面的網址.

就是這麼容易, 不管幾顆都是一樣.


如何在 Blogger 系統中使用:
1.範本 => 版面配置 => 修改 HTML => 勾選「展開小裝置範本」 => 在 </head> 前加入

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/hemidemi_bookmark_button2.js' ></script>

2. 找到 <p><data:post.body/><p> 在 <p><data:post.body/><p> 前加入按鈕語法

<div style='float:right; margin-left:10px; font-size:0px;' class="hemi_button"><data:post.url/></div>


如何在天空(yam) 系統中使用:
1.管理者後台 => 功能設定 => 個人資料 => 部落格描述: 中填入

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/hemidemi_bookmark_button2.js' ></script>

2. 在發表網址時, 在 "追加內容" 加入按鈕語法

<div style='float:right; margin-left:10px; font-size:0px;' class="hemi_button"></div>

3. sample.

詳細參數及使用說明可參考 [功能] 黑米小按鈕

PS. 推推王推文按鈕也是存在相同的問題. 請看這裡.

ifunP 推推王點播台 可直接推文嘍

在修改 推推王 推文按鈕貼紙 加強版 之餘, 順便把阿土伯考慮很久的 ifunP 點播台 加上了直接推文功能. 現在大家可以直接在 iGoogle 中利用 ifunP 點播台小工具直接推文嘍.

ifunP 點播台 功能介紹及說明.

希望大家會喜歡.
##CONTINUE##
有圖有真相:



PS. 考慮原因我在 這裡 有 唸到, 我是覺得大家還是要連回 funP 原始網站, 支持原網站才對.
怕加了直接推文會影響 funP 的流量.. 那就不是阿土伯的本意了..
後來想想, 應該影響不大, 大部份的人不會看到 "標題" 就 "推" 下去的, 還是會連回去看才對.

推推王 推文按鈕貼紙 加強版

利用推推王官方 javascript 改良了一下, 提供一個以 DOM 操作為主的版本.歡迎官方直接引用.

加強了以下二點:
1. 解決在各 Blog 平台上部份網誌會造成畫面一片白的問題.
2. 一顆/多顆 按鈕語法統一.
3. 支援 Blogger-ext2, 在 Blogger 系統中換頁, 小按鈕依然能生效.

##CONTINUE##
解決畫面一片白:
由於已有許多網友反應, 加了 推推王 推文按鈕貼紙 後, 有時畫面會一片白.
在Blogger加入推推王按鈕導致不明反白的解法 , 問題2, 問題3
這在 Blogger 系統最為明顯, 因為 Blogger 系統的 Sidebar, 換頁都是使用 javascript 動態 產生, 所以只要在 onload 前, 推推王的 javascript 執行到, 而推推王的 javascript 僅有三行, 也就是利用 document.write 產生一個 iframe.這時的 document 就僅剩下一個 iframe , 所以您會得到一片白.
請大家忘了 document.write 這個 n 年前的遺產吧.. 以 DOM 來提供小工具.

按鈕語法統一:
使用此一加強版, 不再分一個按鈕或多個按鈕, 您只要使用單一的語法即可. 而語法中也看不到 javascript , 只是一個 div 的語法, 您可以輕輕鬆鬆放入 推推王推文按鈕.

使用方式:
放在網頁 <head> 位置加入 或 加入 html/javascript 網頁元素:
程式碼:

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js' ></script>


放在按鈕位置的
程式碼:

<div class="funp_button" style="font-size:0px;">網址</div>

如果不打就直接用貼紙所在頁面的網址.

就是這麼容易, 不管幾顆都是一樣.


如何在 Blogger 系統中使用:
1.範本 => 版面配置 => 修改 HTML => 勾選「展開小裝置範本」 => 在 </head> 前加入

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js' ></script>

2. 找到 <p><data:post.body/><p> 在 <p><data:post.body/><p> 前加入按鈕語法

<div style='float:right; margin-left:10px; font-size:0px;' class="funp_button"><data:post.url/></div>

style 說明可參考 funP Button On Blogger

如何在天空(yam) 系統中使用:
1.管理者後台 => 功能設定 => 個人資料 => 部落格描述: 中填入

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js' ></script>

2. 在發表網址時, 在 "追加內容" 加入按鈕語法

<div style='float:right; margin-left:10px; font-size:0px;' class="funp_button"></div>

3. sample.


PS. 黑米小按鈕也是存在相同的問題. 請看這篇留.

2007年8月10日 星期五

iGoogle 自動翻譯小工具真有趣

剛才在使用 iGoogle 自動翻譯 小工具, 試著想把一篇英文技術文件轉成中文, 看看會不會看的快一點, 發現翻出來好有趣.. 真是讓阿土伯充滿驚奇呀~~

惡搞玩玩看, 輸入 Rack Lin, Rack = 機架(電腦述語), Lin = 林
##CONTINUE##
所以 Rack Lin = 機架林 嘍.. 嘿嘿.... 這麼容易讓你猜中, 就不是 Google 了.

答案是: 林齒條 , 齒條咧... 讓阿土伯好想哭....

輸入: I am Rack Lin 應該是我是林齒條嘍, 嘿嘿.... 就說這麼容易讓你猜中, 就不是 Google 了嘛.

答案是: 我機架林.... 又正常了?聽起來舒服點...

來惡搞一下小土仔的名子吧: Shine Lin 是 發光林, 陽光林, 或閃耀林 嗎???

答案是: 林光輝 ... 好個菜市場名呀~~~

輸入: I am Shine Lin 應該是我是林光輝嘍...

答案是: 我照林... 哇咧... 這是啥....

Google 自動翻譯小工具, 我真是猜不透您呀~~~ :)

2007年8月8日 星期三

iGoogle Easy Layout 更新~

由於 iGoogle Render Html 於 2007/08/08 做小改版, 導致原 EasyLayout 無法作用, 阿土伯已於第一時間配合改版, 已能相容目前的 iGoogle 了.

阿土伯已上傳更新版本, 所以您無需重裝小工具, 然而由於 iGoogle 會 Cache 小工具, 所以請您耐心等侯, 小工具會於 Cache 失效時, 自動套用新版本.

使用說明, 請見 EasyLayout 簡介.

PS. iGoogle 會對此一部份改版, 是否意味著, 未來 iGoogle 將內建調整欄位的功能.. 樂見其成 :D
PS2. 出現了 c_4 又意味著有四欄的配置?
##CONTINUE##
技術部份:
原 iGoogle Render Html Layout: 所以 EasyLayout 僅需覆寫 CSS Style 重定義 c_1, c_2, c_3 即可.

<div id="c_1" class="yui-u" style="display: block;">
<div id="c_2" class="yui-u" style="display: block;">
<div id="c_3" class="yui-u" style="display: block;">

新 iGoogle Render Html Layout: c_1,c_2,c_3 width 強制出現在 HTML 中, 又取代了 EasyLayout CSS Style , 所以輔以 DOM 方式設定屬性.

<div id="c_1" class="yui-u" style="width: 32%; display: block;">
<div id="c_2" class="yui-u" style="width: 32%; display: block;">
<div id="c_3" class="yui-u" style="width: 32%; display: block;">