弱弱说下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鸟。

 

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

 

 

 

转载于:https://www.cnblogs.com/gdutlab624/archive/2010/09/14/by_xbin.html