[轉自http://meditic.com/how-to-make-a-javascript-widget/]
收到Erica的來信,希望知道採麥的Widget是怎麼做出來的,突然想起當年我第一次寫widget代碼的時候,也是滿世界找不到一個簡明實用的教程。於是做個總結,也許更多人可以用得到。
複習一下兩個js函數:
js可以動態生成網頁代碼,比如:
document.write('<div id="photo">123</div>');
這段代碼可以讓網頁裏顯示出一個叫photo的層,裏面還有數字123。
此外,js可以動態改變網頁內容,比如這段代碼:
document.getElementById('photo').innerHTML='abc';
就可以讓這個photo層裏顯示abc,而不是原來的123了
別看這麼一段小代碼,其實這就是整個widget的核心了
技術原理:
widget有3個重要部分組成:數據、外殼、腳本。
- 數據:就是你希望顯示出來的內容,比如你要顯示flickr上最近的照片,那麼照片就是數據;
- 外殼:就是容納數據的容器,比如上述照片,你把他們包裹到一個叫photo的div裏,那麼這個div就是外殼。
- 腳本:腳本的作用是生成外殼,並把數據填充到外殼裏,主要就是js代碼,當然也可以帶一些css
所以,理論上,一個原始的widget代碼應該是這樣的:
<script type="text/javascript">//調用js腳本
document.write('<div id="photo"></div>'); //js腳本生成外殼photo
document.getElementById('photo').innerHTML='abc'; //js腳本把數據abc填充到外殼photo
</script>
是不是很簡單?是很簡單,可惜太長了,於是把上面四行代碼的中間兩行提取出來,複製放到一個wjs.js文件裏:
document.write('<div id="photo"></div>'); //js腳本生成外殼photo
document.getElementById('photo').innerHTML='abc'; //js腳本把數據abc填充到外殼photo
這樣只需要調用一下就可以使用widget了:
<script type="text/javascript" src="wjs.js"></script>
好了,到這裏你已經學會了最簡單的widget製作,快去實驗一下吧。
基礎進階:
那麼,如果數據不是abc怎麼辦呢? 很簡單,把數據獨立出來就可以了。我們改造一下wjs.js代碼:
document.write('<div id="photo"></div>'); //利用js建立photo層,生成外殼
document.write('<script type="text/javascript" src="widget.js"></script>'); //js填充數據
數據就在widget.js裏,我們分析一下其代碼,只有一句:
document.getElementById('photo').innerHTML='xxx';
這樣的話,要改變數據,只需要把widget.js裏的xxx換成任何內容即可,而無需改動wjs.js
中級進階:
如果要自動動態改變數據xxx,只需要把widget.js也做成動態的,以php爲例,首先把wjs.js修改一下:
document.write('<div id="photo"></div>'); //利用js建立photo層,生成外殼
document.write('<script type="text/javascript" src="widget.php?user=howard></script>'); //js填充數據
注意裏面的widget.js換成了widget.php,後面還跟了一串變量,這樣就可以顯示爲howard量身定製的數據了,看看widget.php的代碼:
<?php
Header( "Content-type: text/javascript"); //聲明文件類型爲js
$user=$_GET['user']; //讀取user變量 (howard)
echo "document.getElementById('photo').innerHTML='hi, my name is $user'; ";
//輸出動態內容(hi, my name is howard)
?>
到這裏,我們已經可以根據不同變量來自動顯示不同的數據了。後面就很簡單了,把widget.php任意改造,讀取數據庫,可以輸出各種各樣關於howard的數據。
實戰應用:
事實上,實際應用中,wjs.js也被改造成了動態文件,比如wsj.php,這樣你的用戶howard只需要在其blog裏插入以下代碼,就可以真正實現個性數據調用:
<script type="text/javascript" src="http://domain.com/wjs.php?user=howard"> </script>
wjs.php的內部代碼是這樣的:
<?php
Header( "Content-type: text/javascript"); //聲明文件類型爲js
$user=$_GET['user']; //讀取user變量 (howard)
echo "document.write('<div id="photo"></div>');" //利用js建立photo層,生成外殼
echo "document.write('<script type=/"text/javascript/" src=/"widget.php?user=$user/”></script>); "; //動態調用widget.php
?>
這樣,widget.php收到了user變量之後,就能顯示出howard的個性數據。
先寫到這,大家可以先回去測試一下。真正能用的widget,代碼和上面有很大區別,但是原理是相同的。