一、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. Android的多媒体框架OpenCore介绍

    网上资料很少, 不过还是找到一个比较详细的说明: 特地在此整理了下: 地址:http://blog.csdn.net/djy1992/article/details/9339787 分为几个阶段: 1 ...

  2. NSInteger到底是什么数据类型

    看iOS SDK 方法返回的类型都是NSInteger,但是官方给出的示例代码一般for循环的计数器就都是int了. - (NSInteger)tableView:(UITableView *)tab ...

  3. aix运维

    AIX操作系统中有很多程序,为了进行程序版本控制,每一个程序集都有自己的版本号.版本号是由小数点分隔的四位数字,例如5.3.0.9其含义是:操作系统版本号(version).发行版本号(release ...

  4. ubuntu下tcpdump使用

    Ubuntu默认是安装好了tcpdump工具的,如果没有安装的话使用sudo apt-get install tcpdump即可安装.   (如果遇到tcpdump: no suitable devi ...

  5. HDU Today（dijskra）

    HDU Today Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  6. 自动添加注释—VS2010宏的使用

    在敲代码的过程中类和函数都需要进行注释,但总是一遍一遍的复制粘贴觉得很是麻烦,终于找到了一个不错的解决方法:使用宏. 所谓宏,就是一些命令组织在一起,作为一个单独命令完成一个特定任务.在日常的办公环境 ...

  7. hadoop中汉字与英文字符混合的keyword做为combine的key的问题

    近期,须要将汉字与字符的非常合串作为combine的输出的key, 这样做是希望,利用hadoop的归并来依照key进行分组,然后,在reduce阶段,拿到的都是一个一个组. 可是,发现,这样的,汉字 ...

  8. JavaScript 的DOM操作

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. Windows 对象操作 ...

  9. AngularJS 实战讲义笔记

    第一部分 快速上手 1.1 感受AngularJs四大核心特性(MVC, 模块化,指令系统,双向数据绑定)1.2 搭建自动化的前端开发,调试,测试环境 代码编辑工具 (sublime) 断点调试工具 ...

  10. PHP性能如何实现全面优化？

    性能是网站运行是否良好的关键因素, 网站的性能与效率影响着公司的运营成本及长远发展,编写出高质高效的代码是我们每个开发人员必备的素质,也是我们良好的职业素养. 如何优化PHP性能呢? 一.变量(重要) ...