一、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;

         }

     }

}
function popUp(winUrl){

  window.open(winUrl, "popup", "width=320,height=360");

}
}
 

二、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事件依然可以执行对文档进行的操作。

五、脚本压缩

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

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

JavaScrtip之JS最佳实践的更多相关文章

  1. Vue.js最佳实践

    Vue.js最佳实践 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ t ...

  2. require.js 最佳实践【转】

    https://www.cnblogs.com/digdeep/p/4607131.html require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(re ...

  3. require.js 最佳实践

    require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(require.js), Javascript模块化工具require.js教程,RequireJ ...

  4. JavaScript best practices JS最佳实践

    JavaScript best practices JS最佳实践 0 简介 最佳实践起初比较棘手,但最终会让你发现这是非常明智之举. 1.合理命名方法及变量名,简洁且可读 var someItem = ...

  5. Vue.js最佳实践--给大量子孙组件传值(provide/inject)

    开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...

  6. js最佳实践

    JavaScript使用windows对象的open()方法来创建新的浏览器窗口,这个方法有三个参数:windows.open(url,name,features) 参数一:url:是想在新窗口里打开 ...

  7. Vue.js最佳实践（五招让你成为Vue.js大师）

    对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站.但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了. 第一招:化繁 ...

  8. Vue.js最佳实践(五招助你成为vuejs大师)

    转自https://www.jb51.net/article/139448.htm 本文面向对象是有一定Vue.js编程经验的开发者.如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给 ...

  9. Vue.js最佳实践--VueRouter的beforeEnter与beforeRouteLeave冲突解决

    用Vue做应用管理系统,通常会在离开某个页面的时候,需要检测用户是否有修改,询问用户需要不需要保存之类的需求 这时候,在读VueRouter文档:组件内的守卫 的时候,发现beforeRouteLea ...

随机推荐

  1. 把给定的字符串解析为Date对象

    把给定的字符串解析为Date对象: /** * <pre> * 把给定的字符串解析为Date对象 * </pre> * * @param str 要进行解析的字符串 * @pa ...

  2. Binary String Matching(kmp+str)

    Binary String Matching 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 Given two strings A and B, whose alp ...

  3. httpUrlConnection的參数具体解释

    post方式的的请求过程: // 设置是否向httpUrlConnection输出,由于这个是post请求,參数要放在 // http正文内,因此须要设为true, 默认情况下是false; http ...

  4. 正式生产环境下hadoop集群的DNS+NFS+ssh免password登陆配置

    博客地址:http://www.loveweir.com/ 环境虚拟机centos6.5 主机名h1  IP 192.168.137.11  作为DNS FNS的server 主机名h2  IP 19 ...

  5. asp.net 使用HttpModule记录全局错误

    以前使用Global.asax记录全局的错误日志觉得挺好用,但是如果一个解决方案下有N多个项目,每个下边都需要加一个并且代码都还是重复的,终于有一天无法再忍受这种模式,考虑到HttpModule,直接 ...

  6. 关于if (!cin)以及while (cin >> word)

    首先注意: 1.每一个输入(输出)对象就代表一个输入(输出)流: 2.输入(输出)对象中的流状态成员标记了输入(输出)流当前的状况,当eofbit.badbit.failbit三个标记位均为0时表示流 ...

  7. OCP-1Z0-053-V12.02-501题 【转】

    http://blog.csdn.net/rlhua/article/details/12225237 501.Note the output of the following query; SQL& ...

  8. OpenCV学习(1) OpenCV的安装

    前沿 准备了好几天,终于开始了,不管怎样,接下来的这个月一定把这本书很好的啃下来.当然OpenCV可以在很多的IDE下安装与配置,我这里就只在VS2010和VC6.0下安装配置了,当然这篇博文主要讲在 ...

  9. leetcode Jump Game II python

    @link http://www.cnblogs.com/zuoyuan/p/3781953.htmlGiven an array of non-negative integers, you are ...

  10. PHP中cURL错误号对照[转]

    PHP cURL curl_errno 在php程序编写中,使用curl函数库的几率还是挺高的,如curl_init().curl_setopt().curl_exec().curl_errno()等 ...