剖析Javascript Widget入门学习

Javascript Widget入门学习是本文要介绍的内容，主要是来了解并学习Javascript Widget应用，一起来看详细内容。复习一下天翼社区两个Javascript函数：

Javascript可以动态生成网页代码，比如：

    document.write(’<div id=”photo”>123div>’); 

这段代码可以让网页里显示出一个叫photo的层，里面还有数字123。

此外，Javascript可以动态改变网页内容，比如这段代码：

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

就可以让这个photo层里显示abc，而不是原来的123了

别看这么一段小代码，其实这就是整个widget的核心了http://bbs.189works.com/

技术原理：

widget有3个重要部分组成：数据、外壳、脚本。

数据：就是你希望显示出来的内容，比如你要显示flickr上最近的照片，那么照片就是数据；

外壳：就是容纳数据的容器，比如上述照片，你把他们包裹到一个叫photo的div里，那么这个div就是外壳。

脚本：脚本的作用是生成外壳，并把数据填充到外壳里，主要就是Javascript代码，当然也可以带一些css

所以，理论上，一个原始的widget代码应该是这样的：

    <script type=”text/javascript”>//调用Javascript脚本 
    document.write(’<div id=”photo”>div>’); //Javascript脚本生成外壳photo 
    document.getElementById(’photo’).innerHTML=’abc’; //Javascript脚本把数据abc填充到外壳photo 
    script>

是不是很简单？是很简单，可惜太长了，于是把上面四行代码的中间两行提取出来，复制放到一个wJavascript.Javascript文件里：

    document.write(’<div id=”photo”>div>’); //Javascript脚本生成外壳photo 
    document.getElementById(’photo’).innerHTML=’abc’; //Javascript脚本把数据abc填充到外壳photo

这样只需要调用一下就可以使用widget了：

    <script type=”text/javascript” src=”wJavascript.Javascript”>script> 

好了，到这里你已经学会了最简单的widget制作，快去实验一下吧。

基础进阶：

那么，如果数据不是abc怎么办呢？ 很简单，把数据独立出来就可以了。我们改造一下wJavascript.Javascript代码：

    document.write(’<div id=”photo”>div>’);   //利用Javascript建立photo层，生成外壳 
    document.write(’<script type=”text/javascript” src=”widget.Javascript”>script>’); //Javascript填充数据

数据就在widget.Javascript里，我们分析一下其代码，只有一句：

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

这样的话，要改变数据，只需要把widget.Javascript里的xxx换成任何内容即可，而无需改动wJavascript.Javascript

中级进阶：

如果要自动动态改变数据xxx，只需要把widget.Javascript也做成动态的，以php为例，首先把wJavascript.Javascript修改一下：

    document.write(’<div id=”photo”>div>’);   //利用Javascript建立photo层，生成外壳 
    document.write(’<script type=”text/javascript” src=”widget.php?user=howard>script>’); //Javascript填充数据

注意里面的widget.Javascript换成了widget.php，后面还跟了一串变量，这样就可以显示为howard量身定制的数据了，看看widget.php的代码：

    php
    Header( “Content-type: text/javascript”); //声明文件类型为Javascript 
    $user=$_GET['user']; //读取user变量 (howard) 
    echo “document.getElementById(’photo’).innerHTML=’hi, my name is $user’; “; 
    //输出动态内容(hi, my name is howard) 
    ?>

到这里，我们已经可以根据不同变量来自动显示不同的数据了。后面就很简单了，把widget.php任意改造，读取数据库，可以输出各种各样关于howard的数据。

实战应用：

事实上，实际应用中，wJavascript.Javascript也被改造成了动态文件，比如wsj.php，这样你的用户howard只需要在其blog里插入以下代码，就可以真正实现个性数据调用：

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

wJavascript.php的内部代码是这样的：

    php
    Header( “Content-type: text/javascript”); //声明文件类型为Javascript 
    $user=$_GET['user']; //读取user变量 (howard) 
    echo “document.write(’<div id=”photo”>div>’);”   //利用Javascript建立photo层，生成外壳 
    echo “document.write(’<script type=\”text/javascript\” src=\”widget.php?user=$user\”>script>); “; //动态调用widget.php 
    ?>

这样，widget.php收到了user变量之后，就能显示出howard的个性数据。

先写到这，大家可以先回去测试一下。真正能用的widget，代码和上面有很大区别，但是原理是相同的。

小结：剖析Javascript Widget入门学习的内容介绍完了，希望通过Javascript Widget应用内容的学习能对你有所帮助！