穷夯JavaScript基础——分离JavaScript代码与HTML页面 -

kenny13

浏览: 44808 次
性别:
来自: 上海

最近访客更多访客>>

tank924

renhao2014

黄祚敏

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

穷夯JavaScript基础——分离JavaScript代码与HTML页面

博客分类：

JavaScript HTML CSS

现在的HTML页面的编写主要分为三部分：
1.(X)HTML作为结构，由资料方编写。
2.CSS作为样式，由美工方编写。
3.JavaScript作为动态处理，由程序方编写。
分离JavaScript代码与HTML页面是一件很重要的事情，尤其是对于大型网站。设计方和代码方通常是两个人或者两个小组分工合作的。作为一个网页设计者，懂JavaScript不应该是条件之一。所以，如果直接在HTML页面中写入JavaScript的话，势必会造成两方效率均下降。
从另一方面来说，结构与样式现在已经成功的分离开。只要网页设计者在块中加入一行<link href="style.css" type="text/css" rel="stylesheet" />之类的标签，然后就不必再理会样式的问题，样式的问题在css样式表中就全都定义了，只需要通过class属性或者独有的id属性为元素进行意义的标识，不需要任何的样式表知识。而JavaScript就没有这么方便。现在的分离方式通常都是在块中加入一行<script src="script.js" type="text/javascript"></script>然后在script.js文件中定义好预定义变量以及全局函数，然后再HTML页中还要添加事件驱动比如<body onload="'init()'">或者<a href="'javascript:alert('click">click me!</a>等等。但是一个网页设计者并不一定能理解onload的含义。如果记性差点，每隔俩小时敲你办公室门问你onload是干什么用的能把你烦死。所以说，这种简单的分离方法分离得不够彻底。分离JavaScript代码应该像分离CSS样式一样，用户只要对元素的意义进行简单的标识就可以自动做好JavaScript的事件驱动。具体的实现方法可以通过DOM来实现。
举一个简单的例子：鼠标指向小图看大图。
smallpic.js
function initSmallPicture()
{
    function arraySearch(ary,ele)
    {
        for(var i=0;i<ary.length;i++)
        {
            if(ary[i]==ele)
            {
                return true;
            }
        }
        return false;
    }

    if(!document.getElementsByTagName) return false;
    //遍历所有的<IMG>元素。
    var imgs=document.getElementsByTagName("IMG");
    for(var i=0;i<imgs.length;i++)
    {
        //确认该元素的所有class属性值中含有"makeitsmaller"。
        //注意，IE和FF对class属性的获取有差别。
        var imgClass;
        if(imgs[i].className)
            imgClass=imgs[i].className.split(' ');
        else
            imgclass=imgs[i].getAttribute('class').split(' ');

        if(!arraySearch(imgClass,"makeitsmaller")) continue;

        //更换图片为缩微版本。
        var imgurl=imgs[i].getAttribute("src");
        var imgurlseprate=imgurl.split('.');
        if(imgurlseprate.length<=1)return false;
        imgurlseprate[imgurlseprate.length-2]+="_s";
        var imgnewurl=imgurlseprate.join('.');
        imgs[i].setAttribute("src",imgnewurl);

        //存储图片两个版本的路径。
        imgs[i].setAttribute("bigsrc",imgurl);
        imgs[i].setAttribute("smallsrc",imgnewurl);

        //为图片写入事件处理程序。
        var overfunc=function()
        {
            this.setAttribute("src",this.getAttribute("bigsrc"));
            return true;
        }
        var outfunc=function()
        {
            this.setAttribute("src",this.getAttribute("smallsrc"));
            return true;
        }

        if(typeof(imgs[i].onmouseover)=="function")
        {
            var oldfunc=imgs[i].onmouseover;
            imgs[i].onmouseover=function()
            {
                oldfunc();
                overfunc();
            }
        }
        else
        {
            imgs[i].onmouseover=overfunc;
        }
        if(typeof(imgs[i].onmouseout)=="function")
        {
            var oldfunc=imgs[i].onmouseout;
            imgs[i].onmouseout=function()
            {
                oldfunc();
                outfunc();
            }
        }
        else
        {
            imgs[i].onmouseout=outfunc;
        }
    }
}

//在网页读取完毕后初始化。
if(typeof(window.onload)=="function")
{
    var oldfunc=window.onload;
    window.onload=function()
    {
        oldfunc();
        initSmallPicture();
    }
}
else
{
    window.onload=initSmallPicture;
}
//以上代码不知道应该怎样写成函数，貌似window.onload这类Handle是传值不是传址。
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="smallpic.js"></script>
    </head>
    <body>
        <img src="6.jpg" class="makeitsmaller" />
    </body>
</html>
这样一来，在HTML业中不需要任何Script代码，不需要改变成缩略图路径，只要在需要做缩略图的图片的class属性中增加一条"makeitsmaller"就可以做到缩略图效果了。
但是这个办法并不是最完美的，比如使用Javascript改变img元素的class属性就不会有效果，除非重新运行一次 initSmallPicture而且只能添加不能去除。而且使用CSS的:hover行为定义比这个简单的多。只不过是用这个作为例子说明分离 JavaScript的方法。
使用JavaScript完全分离还可以做到另外一种效果——定义新属性。
一般来说，网页设计人员中懂(X)HTML的人比懂JavaScript的人要多得多。所以说，如果把JavaScript行为转为HTML行为，势必会受到网页设计人员的欢迎。下面举一个例子，表格<td>元素两种背景颜色交替显示。可以在<table>中定义 ColorTable属性，包含3个部分：行交替还是列交替、颜色1、颜色2，用逗号隔开。具体代码如下。
clrtable.js
// clrtable.js
function colorTable()
{
    if(!document.getElementsByTagName) return false;
    var tables=document.getElementsByTagName("TABLE");
    for(var tb=0;tb<tables.length;tb++)
    {
        if(!tables[tb].getAttribute("ColorTable"))continue;
        var tableMessage=tables[tb].getAttribute("ColorTable");
        var tableAttributes=tables[tb].getAttribute("ColorTable").split(",");
        if(tableAttributes.length!=3)continue;
        if(tableAttributes[0]!='row'&&tableAttributes[0]!='col')continue;
        var iscol=(tableAttributes[0]=='col');
        var rows=tables[tb].getElementsByTagName("TR");
        for(var tr=0;tr<rows.length;tr++)
        {
            if(iscol)
                rows[tr].style.backgroundColor=tableAttributes[1+tr%2];
            else
            {
                cells=rows[tr].getElementsByTagName("TD");
                for(var td=0;td<cells.length;td++)
                    cells[td].style.backgroundColor=tableAttributes[1+td%2];
            }
        }
    }
    return true;
}

if(typeof(window.onload)=="function")
{
    oldfunc=window.onload;
    window.onload=function()
    {
        oldfunc();
        colorTable();
    }
}
else
{
    window.onload=colorTable;
}
test.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clrTable.js test</title>
<script type="text/javascript" src="clrtable.js"></script>
</head>
<body>
<table ColorTable="col,white,grey">
<tr><td>0,0</td><td>1,0</td><td>2,0</td><td>3,0</td></tr>
<tr><td>0,1</td><td>1,1</td><td>2,1</td><td>3,1</td></tr>
<tr><td>0,2</td><td>1,2</td><td>2,2</td><td>3,2</td></tr>
<tr><td>0,3</td><td>1,3</td><td>2,3</td><td>3,3</td></tr>
</table>
</body>
</html>
从以上代码可以看出增加的属性和标准HTML属性看起来并无任何区别。同时，对于网页设计人员来说有一个这样的HTML属性会在网页设计中带来很多便利。
以上代码在IE6\FF2\Opera9中测试通过。

分享到：