Js编程原则和良好习惯

1、预留退路:在禁止Js或者Js不被支持的情况下,网页还能正常工作。也就是说,虽然某些功能无法使用,但最基本的操作仍能顺利完成。


案例:点击链接,打开一个新窗口。
就如本站的登录(弹出一个模拟窗口),与其让用户在点击链接的时候被带离当前页面,不如让用户仍停留在当前页面,并用一个弹出窗口来显示相关信息,这无疑是一种更好的解决方法。
一些错误的写法:
伪协议:<a href="javascript:showWindow('login', this.href);" >登录</a>
内嵌事件处理函数:<a href="#" οnclick="showWindow('login', this.href); return false;">登录</a>


javascript:伪协议是人们对非标准化通信机制的统称,伪协议让我们可以通过一个链接来调用Js函数。
这种做法的不好之处在于,如果伪协议不被支持或Js被禁止了,那么这段代码就不能执行,也就没意义了。


好的写法:
<a href="member.php?mod=logging&action=login" οnclick="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>
http://www.huiyi8.com/moban/   html模板

Js代码:
window.οnlοad=function(){
        var links=document.getElementsByTagName('a');
        for(var i=0,len=links.length;i<len;i++){
               if('login'===links[i].getAttribute('class')){
                     links[i].οnclick=function(){
                           showWindow('login', this.href);
                           return false;


3、向后兼容性:确保老版本的浏览器不会因为你的Js脚本而崩溃。
一些浏览器可能无法理解DOM提供的方法和属性,那么就需要在脚本里对浏览器的Js支持程度进行检测。
这有点儿像游乐园里的警告牌:"你必须达到这一身高才能参与这项游乐活动。"换句话说,需要在Js脚本里表达出这样的含义:"你必须理解这个方法或属性,才能执行这些语句"。
一个有效的检测方法就是对象检测(object detection):把某个方法打包在一个if语句里,然后根据条件表达式的结果是true(存在)还是false(不存在),决定应该采取怎样的行动。
window.οnlοad=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].οnclick=function(){
                   showWindow('login', this.href);
                   return false;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值