1、预留退路:在禁止Js或者Js不被支持的情况下,网页还能正常工作。也就是说,虽然某些功能无法使用,但最基本的操作仍能顺利完成。
案例:点击链接,打开一个新窗口。
就如本站的登录(弹出一个模拟窗口),与其让用户在点击链接的时候被带离当前页面,不如让用户仍停留在当前页面,并用一个弹出窗口来显示相关信息,这无疑是一种更好的解决方法。
一些错误的写法:
伪协议:<a href="javascript:showWindow(‘login‘, this.href);" >登录</a>
内嵌事件处理函数:<a href="#" onclick="showWindow(‘login‘, this.href); return false;">登录</a>
javascript:伪协议是人们对非标准化通信机制的统称,伪协议让我们可以通过一个链接来调用Js函数。
这种做法的不好之处在于,如果伪协议不被支持或Js被禁止了,那么这段代码就不能执行,也就没意义了。
好的写法:
<a href="member.php?mod=logging&action=login" onclick="showWindow(‘login‘, this.href); return false;">登录</a>
更好的做法是将Js代码与HTML文档分离开来。
把href属性设置为真实存在的URL地址后,即使Js被禁止或遇到爬虫,这个链接仍是可用的。
2、结构与行为分离:把网页的结构和内容与Js脚本的动作行为分开。
所谓的"循序渐进"就是用一些额外的信息层去包裹原始数据的做法。对于一个网站来说,内容就是一切,但是也不能直接将原始内容发布到网络上,而不加任何描述和修饰。
给内容加上正确的HTML标记是很重要的,也就是语义化,所以说,标记良好的内容就是一切。
还是上个案例:
html代码:
<a href="member.php?mod=logging&action=login" class="login">登录</a>
Js代码:
window.onload=function(){
var links=document.getElementsByTagName(‘a‘);
for(var i=0,len=links.length;i<len;i++){
if(‘login‘===links[i].getAttribute(‘class‘)){
links[i].onclick=function(){
showWindow(‘login‘, this.href);
return false;http://www.huiyi8.com/moban/ html模板
3、向后兼容性:确保老版本的浏览器不会因为你的Js脚本而崩溃。
一些浏览器可能无法理解DOM提供的方法和属性,那么就需要在脚本里对浏览器的Js支持程度进行检测。
这有点儿像游乐园里的警告牌:"你必须达到这一身高才能参与这项游乐活动。"换句话说,需要在Js脚本里表达出这样的含义:"你必须理解这个方法或属性,才能执行这些语句"。
一个有效的检测方法就是对象检测(object detection):把某个方法打包在一个if语句里,然后根据条件表达式的结果是true(存在)还是false(不存在),决定应该采取怎样的行动。
window.onload=function(){
if(!document.getElementsByTagName) return false;
var links=document.getElementsByTagName(‘a‘);
for(var i=0,len=links.length;i<len;i++){
if(‘login‘===links[i].getAttribute(‘class‘)){
links[i].onclick=function(){
showWindow(‘login‘, this.href);
return false;
Js编程原则和良好习惯