筆記-Greasemonkey Script載入jQuery的簡便方法
0 | 15,297 |
寫Blog文章分享技術心得的好處之一,便是能結識來自四方的達人高手。前幾天貼了一篇用Greasemonkey Script寫RunKeeper記錄匯入外掛的Coding4Fun文章,JavaScript達人Ammon留言,照慣例又補上了寶貴資訊,其中一項是關於Greasemonkey 0.8版後的新功能--@require宣告。
在學習程式的過程中,會陸續接觸到各種情境,如果熱情足運氣好,歷經大小挑戰還沒有被搞到心灰意冷改行賣雞排,你多半能逐漸蒐集齊全解決大小問題的程式範本,成為別人口中很會寫程式的老骨頭。即使遇到很奇怪的需求,也有辦法從口袋掏出個小錦囊來,咔答咔答寫一段Code把問題解決掉。但有趣的是,技術會演進、平台會改版、軟體會升級,五年前寫下的小錦囊,記載要準備汽化燈/瓦斯燈才夠一夜露營照明之需,若沒有人告訴你這年頭LED燈泡配上鋰電池,輕巧無易燃風險就能提供相近的照明,你應該會繼續帶著去漬油跟汽化燈開開心心去露營,雖然還是達成相同目的,卻錯過了應用新技術、新科技省時省力的機會。所以囉,身為開發人員,不斷地補充新資訊是很重要滴,但像Greasemonkey久久才用一次,自然就較少持續關注它的演進發展,我想如果不是Ammon提醒,多年前學會Greasemonkey Script動態載入jQuery的做法,我應該會一直沿用到六十歲吧! 哈~ 因此,分享程式碼或參與Open Source專案,等同邀請所有網友一起來Code Review,常有意外收獲,以此彌補盲點,避開了古人說的"獨學而無友,則孤陋而寡聞"陷阱,各位愛寫程式的阿宅們,分享好處多多,真的~
學會個小技巧也能離題扯上大半天,肯定是"初老",不,是"中老"症狀的"易感嘆愛嘮叼"徵兆。回到主題,以我的實例看一下改用@require的效果。
原本我是這麼寫的:
// ==UserScript==
// @name Marathon's World-RunKeeper Plugin
// @namespace darkthread.net
// @include http://www.marathonsworld.com/app/training.php?*
// ==/UserScript==
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined')
window.setTimeout(GM_wait,100);
else { $ = unsafeWindow.jQuery; addRunKeeperPlugin(); }
}
GM_wait();
function addRunKeeperPlugin() {
blah blah...
改用@require寫法後:
// ==UserScript==
// @name Marathon's World-RunKeeper Plugin
// @namespace darkthread.net
// @include http://www.marathonsworld.com/app/training.php?*
// @require http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.js
// ==/UserScript==
blah blah...
很省事吧?! 僅以這則筆記分享向Ammon大致敬。
另外,這回還多學到@resource可以預先載入CSS之類的內容,在Greasemonkey Script中可用GM_getResourceText("resource_name”)取出內容,再用GM_addStyle()設定頁面的Style。最後,再補充一個GM_log(),可以在執行期間將偵錯用資訊輸出到主控台,讓Greasemonkey Script的偵測工作簡單一些。以上這些Greasemonkey專屬指令都可以在Greasemonkey Manual-API - GreaseSpot找到詳細說明,開始寫作前不妨看一下。
Comments
Be the first to post a comment