Javascript 预留退路 Javascript分离

来源：互联网发布：软件实施编辑：程序博客网时间：2024/06/05 03:16

1.Javascript 预留退路

先来看这样的一段Html代码

<head runat="server">    <title></title>    <script type="text/javascript">        function showPic(url) {            var img = document.getElementById("img");            img.setAttribute("src", url);        }    </script></head><body>    <form id="form1" runat="server">    <div>        <ul>            <li><a href="javascript:showPic('images/akali.jpg');" title="akali">akali</a></li>            <li><a href="javascript:showPic('images/alist.jpg');" title="alist">alist</a></li>            <li><a href="javascript:showPic('images/amumu.jpg');" title="amumu">amumu</a></li>            <li><a href="javascript:showPic('images/anni.jpg');" title="anni">anni</a></li>            <li><a href="javascript:showPic('images/xiaopao.jpg');" title="xiaopao">xiaopao</a></li>        </ul>        <img id="img" alt="img" src="" style=" width:600px;" />    </div>    </form></body>

提问：如果Javascript功能被禁用了怎么办？

在上面的例子中，如果我们把链接都写成了以上这样，那么它们在不支持或禁用了Javascript功能的浏览器里将毫无用处，当然，如果把以上的链接写成下面这样也是比较多见的，同样在不支持或禁用了Javascript功能的浏览器里将毫无用处。

<li><a href="#" onclick="showPic('images/xiaopao.jpg')" title="xiaopao">xiaopao</a></li>

为了能让我们所写的Javascript能在不支持或禁用了Javascript功能的浏览器里发挥作用，我们就应该考虑Javascript预留退路的问题了。

其实很简单，将以上代码改写成这样就可以了，虽然没有达到我们预想的效果，但是不至于我们会看不到图片的存在。

<head runat="server">    <title></title>    <script type="text/javascript">        function showPic(url) {            var img = document.getElementById("img");            img.setAttribute("src", url);        }    </script></head><body>    <form id="form1" runat="server">    <div>        <ul>            <li><a href="images/akali.jpg" title="akali" onclick="showPic('images/akali.jpg');return false;">akali</a></li>            <li><a href="images/alist.jpg" title="alist" onclick="showPic('images/alist.jpg');return false;">alist</a></li>            <li><a href="images/amumu.jpg" title="amumu" onclick="showPic('images/amumu.jpg');return false;">amumu</a></li>            <li><a href="images/anni.jpg" title="anni" onclick="showPic('images/anni.jpg');return false;">anni</a></li>            <li><a href="images/xiaopao.jpg" title="xiaopao" onclick="showPic('images/xiaopao.jpg');return false;">xiaopao</a></li>        </ul>        <img id="img" alt="img" src="" style="width: 600px;" />    </div>    </form></body>

2.Javascript分离

<li><a href="images/xiaopao.jpg" title="xiaopao" onclick="showPic('images/xiaopao.jpg');return false;">xiaopao</a></li>

结合前面所提到的，把链接对应的事件插入到Html文档里面，这显然不符合JavaScript分享的原则，我们应该将对应的事件添加的工作放到外部文件中去，那样才能让Html看起来没有那么多的“杂质”，如：

<li><a href="images/xiaopao.jpg" title="xiaopao">xiaopao</a></li>

那么，就是想办法把对应的事件放到外部文件当中去，即把对应的onclick事件关联到链接上面。

如下是修改过后的文档：其中在ul上添加了一个唯一Id：ullist

<head runat="server">    <title></title>    <script src="javascript/myjs.js" type="text/javascript">    </script>    <script type="text/javascript">        addLoadEvent(prepare);    </script></head><body>    <form id="form1" runat="server">    <div>        <ul id="ullist">            <li><a href="images/akali.jpg" title="akali">akali</a></li>            <li><a href="images/alist.jpg" title="alist">alist</a></li>            <li><a href="images/amumu.jpg" title="amumu">amumu</a></li>            <li><a href="images/anni.jpg" title="anni">anni</a></li>            <li><a href="images/xiaopao.jpg" title="xiaopao">xiaopao</a></li>        </ul>        <img id="img" alt="img" src="" style="width: 600px;" />    </div>    </form></body>

下面是myjs.js

function showPic(pic) {    if (!document.getElementById("img")) return true;    var url = pic.getAttribute("href");    var img = document.getElementById("img");    if (img.nodeName != "IMG") return true;    img.setAttribute("src", url);    return false;}function prepare() {    if (!document.getElementById) return false;    if (!document.getElementsByTagName) return false;    if (!document.getElementById("ullist")) return false;    var ullist = document.getElementById("ullist");    var links = ullist.getElementsByTagName("a");    for (var i = 0; i < links.length; i++) {        links[i].onclick = function () {            return showPic(this);        }    }}function addLoadEvent(func) {    var oldload = window.onload;    if (typeof window.onload != 'function') {        window.onload = func;    } else {        window.onload = function () {            oldload();            func();        }    }}

在上面的JavaScript中，添加了一些必要的检查，心确保一些不理解这些函数的浏览器不去执行这些方法，即我们在日常编写Javascript的过程当中，不要做太多的假设，比如：假设页面上存在id为img的对象，假设页面上存在id为ullist的对象等....