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>
<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);
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鸟。
其他就不多说了，不然在说下去就只能说说邪恶哥的补刀技巧啦（哈哈）