Javascript Widget入門學(xué)習(xí)解析是本文丫介紹的內(nèi)容，主要是來(lái)了解并學(xué)習(xí)Widget應(yīng)用，具體內(nèi)容的實(shí)現(xiàn)來(lái)看本文詳解。

收到Erica的來(lái)信，希望知道采麥的Widget是怎么做出來(lái)的，突然想起當(dāng)年我第一次寫widget代碼的時(shí)候，也是滿世界找不到一個(gè)簡(jiǎn)明實(shí)用的教程。于是做個(gè)總結(jié)，也許更多人可以用得到。

復(fù)習(xí)一下兩個(gè)js函數(shù)：

js可以動(dòng)態(tài)生成網(wǎng)頁(yè)代碼，比如：

document.write('<div id="photo">123</div>'); 

這段代碼可以讓網(wǎng)頁(yè)里顯示出一個(gè)叫photo的層，里面還有數(shù)字123。

此外，js可以動(dòng)態(tài)改變網(wǎng)頁(yè)內(nèi)容，比如這段代碼：

document.getElementById('photo').innerHTML='abc'; 

就可以讓這個(gè)photo層里顯示abc，而不是原來(lái)的123了

別看這么一段小代碼，其實(shí)這就是整個(gè)widget的核心了

技術(shù)原理：

widget有3個(gè)重要部分組成：數(shù)據(jù)、外殼、腳本。

數(shù)據(jù)：就是你希望顯示出來(lái)的內(nèi)容，比如你要顯示flickr上最近的照片，那么照片就是數(shù)據(jù)；

外殼：就是容納數(shù)據(jù)的容器，比如上述照片，你把他們包裹到一個(gè)叫photo的div里，那么這個(gè)div就是外殼。

腳本：腳本的作用是生成外殼，并把數(shù)據(jù)填充到外殼里，主要就是js代碼，當(dāng)然也可以帶一些css

所以，理論上，一個(gè)原始的widget代碼應(yīng)該是這樣的：

<script type="text/javascript">//調(diào)用js腳本  
document.write('<div id="photo"></div>'); //js腳本生成外殼photo  
document.getElementById('photo').innerHTML='abc'; //js腳本把數(shù)據(jù)abc填充到外殼photo  
</script> 

是不是很簡(jiǎn)單？是很簡(jiǎn)單，可惜太長(zhǎng)了，于是把上面四行代碼的中間兩行提取出來(lái)，復(fù)制放到一個(gè)wjs.js文件里：

document.write('<div id="photo"></div>'); //js腳本生成外殼photo  
document.getElementById('photo').innerHTML='abc'; //js腳本把數(shù)據(jù)abc填充到外殼photo 

這樣只需要調(diào)用一下就可以使用widget了：

<script type="text/javascript" src="wjs.js"></script> 

好了，到這里你已經(jīng)學(xué)會(huì)了最簡(jiǎn)單的widget制作，快去實(shí)驗(yàn)一下吧。

基礎(chǔ)進(jìn)階：

那么，如果數(shù)據(jù)不是abc怎么辦呢？ 很簡(jiǎn)單，把數(shù)據(jù)獨(dú)立出來(lái)就可以了。我們改造一下wjs.js代碼：

document.write('<div id="photo"></div>');   //利用js建立photo層，生成外殼  
document.write('<script type="text/javascript" src="widget.js"></script>'); //js填充數(shù)據(jù) 

數(shù)據(jù)就在widget.js里，我們分析一下其代碼，只有一句：

document.getElementById('photo').innerHTML='xxx'; 

這樣的話，要改變數(shù)據(jù)，只需要把widget.js里的xxx換成任何內(nèi)容即可，而無(wú)需改動(dòng)wjs.js

中級(jí)進(jìn)階：

如果要自動(dòng)動(dòng)態(tài)改變數(shù)據(jù)xxx，只需要把widget.js也做成動(dòng)態(tài)的，以php為例，首先把wjs.js修改一下：

document.write('<div id="photo"></div>');   //利用js建立photo層，生成外殼  
document.write('<script type="text/javascript" src="widget.php?user=howard></script>'); //js填充數(shù)據(jù) 

注意里面的widget.js換成了widget.php，后面還跟了一串變量，這樣就可以顯示為howard量身定制的數(shù)據(jù)了，看看widget.php的代碼：

<?php 
Header( "Content-type: text/javascript"); //聲明文件類型為js  
$user=$_GET['user']; //讀取user變量 (howard)  
echo "document.getElementById('photo').innerHTML='hi, my name is $user'; ";  
//輸出動(dòng)態(tài)內(nèi)容(hi, my name is howard)  
?> 

到這里，我們已經(jīng)可以根據(jù)不同變量來(lái)自動(dòng)顯示不同的數(shù)據(jù)了。后面就很簡(jiǎn)單了，把widget.php任意改造，讀取數(shù)據(jù)庫(kù)，可以輸出各種各樣關(guān)于howard的數(shù)據(jù)。

實(shí)戰(zhàn)應(yīng)用：

事實(shí)上，實(shí)際應(yīng)用中，wjs.js也被改造成了動(dòng)態(tài)文件，比如wsj.php，這樣你的用戶howard只需要在其blog里插入以下代碼，就可以真正實(shí)現(xiàn)個(gè)性數(shù)據(jù)調(diào)用：

<script type="text/javascript" src="http://domain.com/wjs.php?user=howard"> </script> 

wjs.php的內(nèi)部代碼是這樣的：

<?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>); "; //動(dòng)態(tài)調(diào)用widget.php  
?> 

這樣，widget.php收到了user變量之后，就能顯示出howard的個(gè)性數(shù)據(jù)。

先寫到這，大家可以先回去測(cè)試一下。真正能用的widget，代碼和上面有很大區(qū)別，但是原理是相同的。

小結(jié)：Javascript Widget入門學(xué)習(xí)解析的內(nèi)容介紹完了，希望通過Widget應(yīng)用內(nèi)容的學(xué)習(xí)能對(duì)你有所幫助！