专栏首页GreenLeavesJavaScrtip之JS最佳实践

JavaScrtip之JS最佳实践

一、JavaScript之平稳退化

这边使用一个当用户点击某个页面内某个链接弹出一个新窗口的案例:

JavaScript使用window对象的open()方法来创建新的浏览器窗口;

window.open(url,name,features);

这个方法有三个参数:

url:新窗口里打开的网页的url地址。如果省略这个参数(这个参数为空),屏幕上将弹出一个空白的浏览器窗口。

name:新窗口的名字。

featrues:这个参数是以逗号分隔的一个字符串,他的内容是新窗口的各种属性,如新窗口的宽,高,以及新窗口被启用或禁用的各种浏览器的各种浏览功能(工具条、菜单条、初始显示位置等等);

open()方法是使用BOM的一个好案例,BOM在前面的JavaScript之对象学习随笔中的宿主对象已有介绍http://www.cnblogs.com/GreenLeaves/p/5685524.html

他的功能对文档的内容没有任何的影响(那是DOM的地盘)这个方法只于浏览环境(window对象)有关。下面是一段关于window.open()的代码:

<body>
<script type="text/javascript">
    function popUp(){
        window.open("", "popup", "width=320,height=360");
    }
</script>
</body>

这个函数将打开一个320像素宽、360像素高的新窗口"popup",因为我在这个函数已为新窗口命名,所以把新的url地址传给此函数时,这个函数将把新窗口的现有文档替换成新url地址处的文档,而不是去新创建一个窗口!我们将这个函数存入一个外部文件,当需要在某个网页里使用这个函数时,只要导入这个外部文件即可.倒入外部文件后:

1.使用"javascript:"伪协议使用popUp()方法

"真"协议用来在因特网上计算机之间传输数据包.如http协议、ftp协议等、伪协议则是一种非标准化的协议。"javascript:"伪协议让我们通过一个链接来调用JavaScript函数

下面是通过"javascript:"伪协议调用popUp()函数的具体方法:

<body>
    <a href="javascript:popUp('http://www.baidu.com')">Example</a>
<script type="text/javascript">
    function popUp(winUrl){
        window.open(winUrl, "popup", "width=320,height=360");
    }
</script>
</body>

这条语句在支持"javascript:"伪协议的浏览器中正常运行,但在较老的浏览器则回去尝试打开那个链接但总是失败,支持这种伪协议但仅用了JavaScript功能的浏览器什么也不会做,总之,在html文档里通过"javascript:"伪协议来调用javascript代码的做法非常不好。

2.使用内嵌的事件处理函数

事件处理函数将通过onclick方法来调用popUp()具体实现方式和我之前在JS图片库的第一版一样http://www.cnblogs.com/GreenLeaves/p/5691797.html

代码如下:

<a href="#" onclick="popUp('http://www.baidu.com'); return false">Example</a>

上面这段代码使用了return false语句(在老版本的浏览器中有用),这个链接不会真的打开。"#"符号指向当前文档的开头,实际工作全部由onclick属性负责完成。

很遗憾,上面介绍的两种方法都不能平稳退化,因为如果用户禁用了浏览器的JavaScript功能,这样的超链接将毫无用处。

或许,大家都对反复强调"平稳退化"有些不解;让那些不支持或禁用了JavaScript功能的浏览器也能顺利访问你的浏览器真的这么重要吗?

但是假设用户是一个搜索机器人(只有极少数的搜索机器人能够理解JavaScript代码),他们浏览网页的目的是为了把各种网页添加到搜索引擎的数据库里,如果你的JavaScrip网页不能平稳退化,那么他们在搜索引擎上的排名就可能大受损害。

在具体到popUp()函数,给其中的JavaScript代码预留出退路很简单:在链接里把href属性设置为真实存在的URL地址,让他成为一个有效的链接。如下代码所示:

<a href="http://www.baidu.com"  onclick="popUp('http://www.baidu.com');return false;">Example</a>

说实话,上面的代码都是超链接,显得有有点冗长,我们可以利用this和getAttribute()方法来进行改进,代码如下所示:

<a href="http://www.baidu.com" onclick="popUp(this.getAttribute('href'));return false;"></a>

this.getAttribute('href')->this.href perfect;

到目前为止,这个例子实现了真正的平稳退化,即使浏览器禁用了JavaScript或者JS失效,这个链接都能正常打开;关于平稳退化这一点,CSS做的很好,即使css加载失败或者被禁用,网页的内容正常显示。二、JavaScript之JS与Html代码的分离第一点,已经解决在浏览器禁用JS的情况下,JS平稳退化的问题,但是代码任然存在一点瑕疵,上面的代码如果只是少数几个超链接,倒没什么问题,但是如果有很多超链接,我们不可能一个个的去加,而且将JS代码写在html标签里也十分的不合适,这点css已向我们证明,所以我们对上面的代码在做进一步的改进:

window.onload=prepareLinks;
 //window.onload="";这段代码的作用主要是为了让JS代码在htmk文档加载完毕后,在加载,这样var links=document.getElementsByTagName("a");
就能正常运行
function prepareLinks(){
var links=document.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
     if(links[i].getAttribute("class")=="popUp"){
         links[i].onclick=function(){
             popUp(this.getAttribute("href"));
             return false;
         }
     }
}

 二、JavaScript之浏览器向后兼容之对象检测

不同浏览器对JavaScript的支持程度也不一样。绝大多数浏览器都能或多或少地支持JavaScript,绝大多数现代浏览器对DOM的支持都非常不错,但是还是有极少数古老的浏览器可能无法理解,所以这种情况下,即使这类用户使用的是支持JavaScript的浏览器某些脚本也不一定能正常工作。

所以针对上述浏览器,为了确保JS代码能够正常运行,我们必须检测浏览器对JavaScript的支持程度,代码如下:

    window.onload = alert1;
    function checkCompatibility() {
        if (document.getElementById || document.getElementsByTagName) return false;
    }

    function alert1() {
        return checkCompatibility(); //检测浏览器是否支持DOM方法
        alert("测试浏览器的兼容性!是否向后兼容!");
    }

三、JavaScript之JS代码的运行性能

访问DOM的方式对脚本性能会产生非常大的影响。看如下代码:

if(document.getElementsByTagName("a").length>0){
  var links=document.getElementsByTagName("a");
  for(var i=0;i<links.length;i++){
      处理单个超链接
  }
}

上面这段代码可以运行,但他不能保持最优的性能,因为不管什么时候,只要查询DOM中的某些元素,都会搜索整个DOM树,从中查找可能匹配的元素,这段代码使用了getElementsByTagName()

去执行了相同的操作,浪费了一次搜索,更好的办法是把第一次搜索的结果保存到一个变量里面。

四、JavaScript之合理的合并和放置脚本

1.使用JavaScript脚本的最佳方式是使用外部文件,因为外部文件能与html标签清晰的分离开来,最重要的是浏览器也能对站点中的多个页面重用缓存过的相同脚本。但是一下这种情况最好也不好出现:

<script src="script/a.js"></script>
<script src="script/b.js"></script>
<script src="script/c.js"></script>
<script src="script/d.js"></script>

推荐的做法是把这四个文件合并到一个脚本中。这样可以减少加载页面时发送的请求数量。而减少请求数量通常都是在性能优化时首先要考虑的!

2.合理的合并脚本固然重要,脚本在html文档中的放置位置同样重要,因为每款浏览器都有他的"并发请求数",意思是同一时间针对同一域名的请求有数量限制,超过限制数目后,其余的请求会被阻止,如果我们将脚本文件放到<head></head>标签内,那么在脚本的下载期间内,浏览器不会下载其他任何文件,所有的其他资源都会等到脚本下载完毕之后才会下载。网页设计需要遵循"内容就是一切"的准则,所以我们应该将JS脚本放到</body>之前这样页面(内容)就会变得更快!window对象的load事件依然可以执行对文档进行的操作。

五、脚本压缩

在写完了脚本,做了优化,而且将他放到文档中的合适位置后,还有一件事可以加快下载速度:压缩脚本文件;

所以我们开发应该至少有两个版本,一个是开发中用的包含注释的,另一个是运行用的压缩版。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • C# 委托基础

    不知不觉,又开始委托的学习了,感觉这个东西我能学一辈子,哈哈哈!这次看的是官方的参考书(C#高编9),每次看不同的资料,总能学到不同的知识!言归正传 1、为什么...

    郑小超.
  • C# 对象相等性判断和同一性判断

    在日常开发中经常需要编写代码比较不同的对象。例如,有时需要将对象都放到一个集合中,并编写代码对集合中的对象进行排序、搜索或者比较。 System.Object类...

    郑小超.
  • Git for Windows之日志查看与版本切换

    (1)、切换到本地版本库最新的版本,通过reset --hard 版本号的前几位(不需要全部的版本号,只要版本号能找到唯一的版本就行)

    郑小超.
  • javascript简介,什么是 JavaScript?,JS的特征,开发环境

    当 Netscape Navigator 崭露头角时,Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Pa...

    小小鱼儿小小林
  • 业务巡检系统的整体设计和数据流程

    近期也总结了几篇关于巡检的内容,很多同学也很期待,说业务巡检是一个新概念,想做成什么样子,或者说怎么样做起来更好一些。

    jeanron100
  • 资源文件的动态加载

    页面加载 首先,浏览器发起直接对目标html的请求,然后分析其中用到的资源并下载,浏览器有自己的规则来判断什么样的资源可以被并行下载,什么样的不可以,浏览器对加...

    小端
  • 简单易学的机器学习算法——受限玻尔兹曼机RBM

    受限玻尔兹曼机(Restricted Boltzmann Machine, RBM)是一种基于能量模型的神经网络模型,在Hinton提出针对其的训练算法(对比分...

    zhaozhiyong
  • JavaWeb第四讲 会话跟踪技术HttpSession、Cookie、url、隐藏表单域

    使用url实现会话跟踪技术 : 在URL中添加用户会话的信息作为请求的参数,或者将唯一的会话ID添加到URL结尾以标识一个会话。

    易兮科技
  • js跨站脚本

    跨站脚本,称为xss这个术语用来表示一类的安全问题,指攻击者向目标web站点注入html标签或者脚本。

    mySoul
  • 从零开始的Spring Session(一)

    新媒体管家 Session和Cookie这两个概念,在学习java web开发之初,大多数人就已经接触过了。最近在研究跨域单点登录的实现时,发现对于Sessio...

    程序猿DD

扫码关注云+社区

领取腾讯云代金券