一、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. egret随笔-egret浅入浅出

    •不知道有多人跟笔者一样,喜欢学各种技术,但是都不精,但也有一两项算是精的. 自从踏上了egret游戏开发的道路,就不得不学习各种技术了,因为,要精通egret,首先必须要会TypeScript,其次 ...

  2. 小窍门：变更Windows Azure Websites自带的node.exe版本

    这几天在玩node.js.Azure Websites天然支持node.js(还支持.net, php和python).   它对nodejs支持的原理是: IIS充当Web服务器,接收所有的请求,而 ...

  3. 解密yii中CModule::_components和CModule::_componentConfig

    array CModule::_components 所有组件对象(CComponent的子类)将作为键值存在该数组中, 键名是定义该组件时使用的键名.例如: protected function r ...

  4. 关于写的Java书籍进展

    大家好,去年说要写本Java书,近期就快出版了.眼下已经開始打印样书了,最快于本月中旬左右就能够在互动网www.china-pub.com上看到消息,其它各个站点何时会发售要看详细进货情况. 去年我预 ...

  5. iOS获取本地ip(基本通用)

    今天有个朋友问我怎样訪问手机ip,上网找了几个,用了近200多行代码,最后发现头文件用的居然还是Linux中的,OC没有这个头文件.感觉socket本身应该能够后去自己的ip就试了一下,果然7.8行代 ...

  6. Protobuf-net基础

    本文在于巩固基础 先了解什么是protobuf Protobuf是google开源的一个项目,用户数据序列化反序列化,google声称google的数据通信都是用该序列化方法.它比xml格式要少的多, ...

  7. Apache Tomcat Not Showing in Eclipse Server Runtime Environments

    In my case I needed to install "JST Server Adapters". I am running Eclipse 3.6 Helios RCP ...

  8. 基于php常用正则表达整理（上）

    电子邮件:/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/变量:/[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/ 基于p ...

  9. C++ Primer 读书笔记： 第8章 标准IO库

    第8章 标准IO库 8.1 面向对象的标准库 1. IO类型在三个独立的头文件中定义:iostream定义读写控制窗口的类型,fstream定义读写已命名文件的类型,而sstream所定义的类型则用于 ...

  10. JavaWeb核心编程之(三.6)HttpServlet

    之前都是集成的Servlet真的太过于繁琐了, Servlet接口提供了一个实现类 为HttpServlet  只要实现doGet 和doPost方法就可以了 仍然以一个表单为例 新建一个web工程 ...