Javascript编程原则和良好习惯

本章内容：1、预留退路：确保网页在没有JS的情况下也能正常工作。

2、分离JS:把网页的结构和内容与JS脚本的动作行为分开。

3、向后兼容性：确保老版本的浏览器不会因为你的JS脚本而司机。

事实上，JS与“网页无法访问”无任何的必然联系，网页能否访问完全取决于JS 脚本的编写质量，也就是取决于脚本的编写者。

弹出窗口是一个典型的滥用JS的例子。

一、预留退路

如果正确地使用了JS脚本，就可以让访问者在他们的浏览器不支持JS的情况下仍然能顺利的浏览你们的网站，这就是所谓的预留退路。

我们懒看一个再新窗口里打开一个连接的例子：

与其让用户在点击这些链接时被带离当前页面，让用户仍然停留在当前页面，并用一个弹出窗口来显示相关信息无疑是一种更好的解决方案。

JS中使用window对象的open（）方法来创建新的浏览器窗口。这种方法有三个参数：

window.open（url,name,features）//三个参数都是可选的。

url是想在新窗口打开的那份文档的url地址。如果省略这个参数，屏幕上将弹出一个空白的浏览器窗口。

name是新窗口的名字。可以在代码里通过这个名字与新窗口进行通信。

feature是一个一逗号分隔的字符串，其内容是新窗口的各种属性。对于这个参数要掌握以下原则：新浏览器的功能要少而精。

eg:

function popup(winURL){

window.open(winURL,"popup","width=300,height=400")

}//将该函数存入外部文件，要使用时在html文件中调用。

"JavaScript:"伪协议调用popup()函数的具体做法是：

<a href="javascript:popup('http://www.example.com/');">Example</a>

和内嵌的事件处理函数：

<a href="#" onclick="popup('http://www.example.com/');reture false;">Example</a>

这两种调用JavaScript代码的做法都是不好的，因为他们都没有预留退路,如果用户已经禁用了浏览器的JavaScript功能，这样的链接将毫无意义。

上面例子预留退路的方法：在有关的链接吧href属性设置为真实存在的URL地址，让他成为一个有效的链接。如下：

<a href="http://www.example.com/" onclick="popup('http://www.example.com/');reture false;">Example</a>

<a href="http://www.example.com/" onclick="popup(this.href);reture false;">Example</a>

类似CSS，JS和DOM提供的所有功能也应该构成一个额外的、不影响文档结构和内容的指令层。

二、分离JavaScript

类似于使用style属性，在html文档中使用诸如onclick之二类的属性也是一种既没有效率又容易引发问题的做法。如果我们用一个“挂钩”，就像CSS机制中的class和id属性那样,

吧JavaScript代码调用行为与html文档的结构和内容分离开，网页就会健壮得多。如下：

对这个链接被点击时，他将调用popup()函数：

<a href="http://www.example.com/ class="popup"">Example</a>

这样的话，JavaScript语言不要求事件必须在html文档中处理，可以在外部JavaScript文件里把一个事件添加到html文档中的某个元素上;

element.event=action...

这个事件的元素element可以通过class和id属性以及getElementById()和getElementsByTagName()方法来确定。

getElementById(id).event=action

如果事情涉及多个元素，我们可以用getElementsByTagName()和getAttribute()方法把事件添加到有着特地属性的一组元素上。

具体步骤如下：

①把文档里的所有链接全放在一个数组里。

②遍历数组。

③如果某个链接的class属性等于popup，就说明这个链接在被点击时将调用popup()函数。

于是：

把这个链接的href属性值传递给popup（）函数，取消这个链接的默认行为，不让这个链接把访问者带离这个窗口。

JavaScript的代码如下：

var links=document.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
   if(links[i].classname="popup"{
      links[i].onclick=function(){
      popup(this.getAtrribute("href"));
      return false;
        }
      }
}

必须JS中的代码在html文档全部加载到浏览器之后才开始执行。还好，html文档全部加载完毕时将触发一个事件，这个时间由他自己的事件处理函数。

html文档将被加载到一个浏览器窗口里，dicument对象有事window对象的一个属性。当window对象触发onload事件时，document对象已经存在了。

我们将JS代码打包在preparelLinks()函数里，并把这个函数添加到window对象的onload事件上去。如下：

window.onload=prepareLinks;
function prepareLinks(){
    var links=document.getElementsByTagName("a");
    for(var i=0;i<links.length;i++){
        if(links[i].classname="popup"{
         links[i].onclick=function(){
            popup(this.getAtrribute("href"));
            return false;
        }
      }
  }
}

三、向后兼容性

绝大多数浏览器都能或多或少的支持JavaScript，而绝大多是现代的浏览器对DOM的支持是非常不错的。但比较古老的浏览器却很可能无法理解DOM提供的方法和属性。

因此，即使某位用户在访问IDE网站的时候是用的是支持JS的浏览器，某些脚本也不能正常工作。

针对这一问题的解决方案是：在脚本里对浏览器的JS的支持程度进行查询。只要把某个方法（把括号去掉）打包在一个if语句中，就可以根据这条if语句的条件表达式的求值结果是true（这个方法存在）还是false（这个方法不存在）来决定应该采取这样的行动，这种检测被叫做“对象检测”。

eg:

function MyFunction(){
    if(document.getElementById){
         statements using getElementById
     }
}

将括号里的条件取“非”：（更好）

if(!getElementById){
   return false;
}

“浏览器嗅探”技术是一套通过提取由浏览器供应商提供的信息来解决向后兼容问题的方法。

四、DOM Core和HTML-DOM

HTML -DOM提供一个form对象，这个对象可以把下面这样的语句：

document.getElementsByTagName("form")

简化为：

document.form

posted @ 2016-12-10 09:53 乌勤阅读(316) 评论(0) 收藏举报

刷新页面返回顶部

乌勤

Javascript编程原则和良好习惯

公告