）

Posted 2020-07-18 Candy1029

平稳退化

　　如果正确的使用了javascript脚本，就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览网站。这就是平稳退化，即虽然某些功能无法使用，但最基本的操作仍能顺利完成。

　　平稳退化的经典例子：（比较以下几条语句）

1 <a href="javascript:popUp(\'http://www.example.com/\');">Example</a>
2 <a href="#" onclick="popUp(\'http://www.example.com/\');return false;">Example1</a>
3 <a href="http://www.example.com/" onclick="popUp(\'http://www.example.com/\');return false;">Example2</a>
4 <a href="http://www.example.com/" onclick="popUp(this.getAttribute(\'href\'));return false;">Example3</a>
5 <a href="http://www.example.com/" onclick="popUp(this.href);return false;">Example4</a>

　　　　在把href属性设置为真是存在的URL地址后，即使javascript已被禁用，这个链接也是可用的。虽然这个链接没有打开一个新窗口，但它没有彻底失效。这就是一个经典的平稳退化的例子。

 

window.open（）创建新的浏览器窗口

　　语法：window.open（url，name，features）

　　　　第一个参数：想在新浏览器窗口里打开的网页地址。（如果省略这个参数，屏幕上将弹出一个空白的浏览器窗口）

　　　　第二个参数：新窗口的名字。（代码里可以通过这个名字与新窗口进行通信）

　　　　第三个参数：新窗口的各种属性，以逗号分隔的字符串。（属性包括新窗口的尺寸以及新窗口被启用或禁用的各种浏览器功能（工具条，菜单条，初始位置等））

 

"javascript:"伪协议

　　“真”协议用来在因特尔上的计算机之间传输数据包，如http协议，ftp协议等。

　　伪协议是一种非标准化的协议。

　　“javascript：”伪协议让我们通过一个链接来调用JavaScript函数。

　　例如：

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

　　这条语句在支持“javascript：”伪协议的浏览器中运行正常，较老的浏览器会尝试打开链接但失败，支持这种为协议但是禁用了javascript功能的浏览器什么也不做。

 

结构与样式的分离

　　文档结构与样式的分离可以确保网页都能平稳退化。

 

渐进增强

　　所谓渐进增强就是用一些额外的信息层去包裹原始数据。按照渐进增强原则创建出来的网页几乎都符合平稳退化原则。

　　类似于CSS，JavaScript和DOM提供的所有功也应该构成一个额外的指令层。CSS代码负责提供关于“表示”的信息，JavaScript负责提供关于“行为”的信息。行为层的应用方式与表示层一样。

 

分离JavaScript

　　在JS文件里把一个事件添加到某个元素上

　　　　语法：element.event = action 

　　　　例如：想把一个事件添加到某个带有特定id属性的元素上：getElementById（“idName”）.event = action

　　在JS文件里把一个事件添加到有特定属性的一组元素上（如所有的class=“popup”的a标签）

　　　　具体步骤：把文档里所有的链接全放入一个数组中——>遍历数组——>如果某个链接的class属性等于popup，就把这个链接的href属性值传给popUp函数——>并取消这个链接的默认行为，不让这个链接把访问者带离当前窗口。（return false即可）

　　　　例如：

 1 function prepareLinks(){
 2       var links = document.getElementsByTagName("a");
 3       for(var i =  0; i < links.length; i++){
 4           if(links[i].getAttribute("calss") === "popup"){
 5               //匿名函数
 6               links[i].onclick = function(){
 7                   popUp(this.getAttribute("href"));
 8                   return false;
 9               }  
10           }  
11       }  
12 }

　　

　　window.onload()事件——HTML文档全部加载完触发的事件

　　　　必须让上面的给a标签添加事件的代码在html文档全部加载到浏览器后马上开始执行。

　　　　HTML文档全部加载完毕时将触发一个事件，这个时间有自己的事件处理函数。

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

　　　　所以可以这样添加上面的函数到window对象的onload事件上去，如下所示：

window.onload = prepareLinks；

 

向后兼容

　　对象检测

　　　　只要把某个方法打包在一个if语句里，就可以根据这个语句的条件表达式的求求值结果是true（这个方法存在）还是false（这个方法不存在）来决定采取怎样的行动。这种检测叫做对象检测。

　　　　语法：if（method）{ statement }

　　　　注意：在对象检测时一定要删掉方法名后面的圆括号，不删掉的话，测试的将是方法的结果，无论方法是否存在。

　　　　使用对象检测是为了让脚本有良好的向后兼容性，确保“古老”的浏览器不会因为脚本代码而出现问题。

　　　　遵循渐进增强的原则，可以确切的知道添加的事件都能平稳退化，网页在老版本的浏览器中也能正常浏览，那些只支持一部分JavaScript功能但不支持DOM的浏览器仍然可以访问网页的内容。

　　浏览器嗅探技术

　　　　浏览器嗅探指的是通过提取浏览器供应商提供的信息来解决向后兼容问题。

　　　　理论上讲，可以通过JavaScript代码检索关于浏览器品牌和版本信息，这些信息可以用来改善JavaScript脚本代码的向后兼容性，但是这是一项风险较大的技术。

　　　　首先，有些浏览器会把自己报告为另一种浏览器，还有一些浏览器允许用户任意修改这些信息。

　　　　其次，为了适应多种不同的浏览器，要让浏览器嗅探脚本跨平台工作，就必须测试所有可能出现的供应商和版本号的组合。测试的组合情况非常多，脚本代码冗长复杂。

 

性能考虑

　　尽量减少访问DOM和尽量减少标记

　　　　不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM书，从中查找可能匹配的元素。更好的办法是把第一次搜索到的结果保存在一个变量中，然后在循环里重用这个结果。

　　　　尽量减少文档中的标记数量，过多不必要的元素只会增加DOM树的规模，进而增加遍历DOM树以查找特定元素的时间。

　　合并并放置脚本

　　　　合并脚本可以减少加载页面时发送请求的数量，而减少发送请求的数量通常是性能优化时首先要考虑的。

　　　　脚本在标记中的位置对页面初次加载时间也有很大的影响。位于head块中的脚本会导致浏览器无法并行加载其他文件（如图像或其他脚本）。

　　　　根据http规范，浏览器每次从同一域名中最多只能同时下载两个文件。而在下载脚本呢期间，浏览器不会下载其它文件，即使是来自同一域名的文件。所有其他资源必须等脚本加载完毕后才能加载。

　　　　把所有script脚本放在文档的末尾，</body>标签的前面，就可以让页面变得更快。

　　　　这样，在加载脚本时，window对象的load事件依然可以执行对文档进行的各种操作。

　　压缩脚本

　　　　压缩脚本指的是把脚本中不必要的字节，如空格和注释统统删除。使用代码压缩工具可以达到这个目的，有的甚至会重写你得部分代码，使用更短的变量名，从而减少整体文件的大小。

　　　　代码压缩工具有：JSMin（Douglas Crockford）、YUI Compressor（雅虎）、Closure Compiler（谷歌）

 

JS添加行为的一个重要准则

　　不应该让JavaScript代码对这个网页的结构有任何的依赖。

　　　　

结构化程序设计

　　结构化程序设计中有一条原则是：函数应该只有一个入口和一个出口。

　　如果一个函数有多个出口，只要这个出口集中出现在函数的开头部分，也是可以接受的。

 

匿名函数

　　定义匿名函数是一种可以在代码执行时创建函数的办法。

 

共享onload事件

　　每个事件处理函数只能绑定一条指令。当有不止一个函数主要在网页加载完毕后立刻执行时，需要共享onload事件。此时有两种方法可以共享onload事件。

　　1.先创建一个匿名函数来容纳这几个要执行的函数，然后把该匿名函数绑定在onload事件上。如：

 window.onload = function(){ firstFunction(); secondFunction(); } 

　　

　　2.弹性最佳解决方案：把那些在页面加载完成后要立刻执行的函数创建为一个队列。addLoadEvent函数就是一种选择，它只有一个参数：打算在页面加载完毕时执行的函数名。

　　　　这个函数完成的操作是：首先，把现有的window.onload事件处理函数的值存入变量oldonload；然后判断，如果在这个处理函数上还没有绑定任何函数，则把新函数添加给它；如果在这个处理函数上已经绑定了一些函数，那么就把新函数追加到现有指令的末尾。代码清单如下：

 1 function addLoadEvent(func){
 2     var oldonload = window.onload;
 3     if(typeof window.onload != \'function\'){
 4         window.onload = func;  
 5     }  else {
 6         window.onload = function(){
 7             oldonload();
 8             func();
 9         }
10     }
11 }　

　　　　在使用时只要写出以下代码即可：addLoadEvent（firstFunction）；addLoadEvent（secondFunction）

 

三元操作符

　　if/else语句的一种变体形式。

　　语法：variable = condition ? if true : if false;

　　表示在条件成立时，变量被赋值为第一个表达式，如果条件不成立，变量就赋值为第二个表达式。

 

nodeName属性

　　返回节点的名字，而且返回的值总是显示为大写字母，即使在html文档里是小写字母。

　　例如：if （placeholder.nodeName != "IMG"） return false;  表示如果placeholder不是img标签的话返回false。

　　

onkeypress事件

　　onkeypress事件处理函数是专门来处理键盘事件的。按下键盘上的任何一个按键都会触发这个onkeypress事件。

　　想让onkeypress事件与onclick事件触发同样的行为，可以把有关的指令复制一遍，也可以用node.onclick = node.onkeypress代码实现。

　　注意：onkeypress事件处理函数很容易出现的问题是用户每按下一个键都会触发它，在某些浏览器中甚至包括Tab键，这意味着如果绑定在onkeypress时间上的处理函数上返回的是false，那些只使用键盘访问的用户将永远无法离开当前连接。

　　不过，在几乎所有的浏览器中，用Tab键移动到某个链接然后按下回车键的动作也会触发onclick事件。

　　onclick事件处理函数已经能满足需要的情况下，最好不使用onkeypress事件处理函数。

 

DOM Core 和 HTML-DOM

　　getElementById、getElementsByTagName、getAttribute、setAttribute等方法都是DOM Core的组成部分。它们并不专属于JavaScript，支持DOM的任何一种程序设计语言都可以使用。它们的用途也并非仅限于处理网页，可以用来处理任何一种标记语言（如XML）编写出来的文档。

　　相应的也有HTML_DOM可以使用。

　　例如：

　　　　document.getElementsByTagName("form")等价于document.form

　　　　element.getAttribute("src")等价于element.src

　　这样，在代码编写过程中，有些地方就可以使用HTML-DOM来简化代码。

 

然后……继续准备明后天的考试去了……

fighting！O(∩_∩)O~