技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> Javascript Widget入门解析

Javascript Widget入门解析

浏览:1477次  出处信息

    收到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,代码和上面有很大区别,但是原理是相同的。

QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1