弱弱说下html，JavaScript分离

 

 

 

by  xbin

上周六老师，老师在重新介绍实验室所用结构中提出，要把HTML页面和JAVASCRIPT的内容分离开来。

 

之前，我们做的都是在head和body之间插入JavaScript脚本，这使得一个本该是简单的HTML页面中包含很多脚本代码，看着感觉就不舒服。

之前的PDM也是这种方式，而新版本的PDM就采用了HTML、JavaScript、css分离的模式，一同名js文件直接在头文件中引用进js文件。

 

下图是PDM的一个主菜单页面。而其HTML页面的代码只是短短几行。

主菜单HTML代码 
<!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=gb2312" />
    <title>产品管理</title>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta name="keywords" content="产品管理" />
    <meta name="description" content="产品管理" />
    <script src="js/Ajax.js" type="text/javascript"></script>
    <script src="js/funclib.js" type="text/javascript"></script>
    <script src="js/ShowDiv.js" type="text/javascript"></script>
    <script src="js/TreeView.js" type="text/javascript"></script>
    <script src="scripts/index.js" type="text/javascript"></script>
    <link href="styles/TreeStyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="TreeDiv"></div>
    <iframe id="ifrDesk" src="html/Welcome.html" frameborder="0" scrolling="no" ></iframe>
</body>
</html>

 

 

这样做的好处显而易见，简洁的页面代码谁看了都舒服。

 

再说说JavaScript代码分离的一些做法。

其实这很大部分都是用到DOM来实现的。

这里想提供一个很有用的函数给大家

 

代码 
//这是一个加载触发事件函数
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
//这个是调用方法，其中getPartsList是一个函数名，作为参数是不带括号的，下面是调用3个函数，它会等一个执行玩后才继续执行下一个，这里不会出现请求队列冲突问题
addLoadEvent(getPartsList);
addLoadEvent(getFarcilityList);
addLoadEvent(getMaterialList);

 

 

 

再说说分离后的触发事件

对于DOM呢，相信大家都很熟悉了，利用DOM来绑定HTML页面上的对象，然后再用一个.onclick = function() {dosomethings;}

这样就OK鸟。

 

其他就不多说了，不然在说下去就只能说说邪恶哥的补刀技巧啦（哈哈）

 

 

 

posted on 2010-09-14 14:01  gdutlab624  阅读(743)  评论(1)  编辑  收藏  举报

导航