第五章 最佳实践
平稳退化（graceful degradation)：如果正确使用了JavaScript脚本，可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站。虽然某些功能无法使用，但是最基本的操作仍能顺利完成
window.open(url,name,features); 打开一个新的窗口 这个函数是使用BOM的好案例 url 新窗口的链接
name 新窗口的名字 代码里边可以通过这个name和新窗口通信
features 新窗口的各种属性 比如尺寸 或者被启用或者禁用的各种浏览功能(工具条,菜单条,初始位置等) function popUp(winURL) {
window.open(winURL,"popup","width=320,height=480");
}
"javascript:"伪协议调用函数，支持伪协议的浏览器有效，老的浏览器可能失败，比如：
<a href = "javascript:popUp("http://www.example.com");">Example</a> 但是最好不要这么做，无法做到平稳退化！！！
<a href = "#" onclick = popUp("http://www.example.com"); return false;>Example</a> 同样无法做到平稳退化，如果用户禁用了javascript功能，这个链接将毫无用处。
我们可以修改下 <a href = "http://www.example.com" onclick = popUp("http://www.example.com"); return false;>Example</a>
精简下变成<a href = "http://www.example.com" onclick = popUp(this.getAttribute("href")); return false;>Example</a>
当前链接的href还可以进一步简写为this.href
渐进加强：用额外的信息层去包裹原始数据；使CSS代码负责提供关于“表示”的信息，JavaScript代码负责提供关于“行为”的信息。按这种原则出来的网页，都符合"平稳退化"原则
性能考虑 尽量少访问DOM和尽量减少标记, 不管什么时候只要是查询DOM中的某些元素，浏览器就会搜索整个DOM树，从中查找可能匹配的元素,比如:
if(document.getElementsByTagName("a").length > 0)
{
var links = document.getElementsByTagName("a");
for(var i= 0; i < links.length; i++ )
{
}
}
搜索DOM了两次 可以改为以下写法
var links = document.getElementsByTagName("a");
if(links.length > 0)
{
for(var i= 0; i < links.length; i++ ) { }
}
功能一样 但是搜索次数由两次变为了一次
压缩脚本：指的是把脚本文件中的不必要的字节，比如空格和注释，统统删除，从而达到“压缩”文件的目的；多数情况下应该有两个版本，一个是工作副本，可以修改代码并添加注释，另一个是精简副本，用于放在站点上，通常在精简副本的文件名上加上min字样。 这样做可以加快加载速度。合并和放置脚本也可以加快加载速度
代表性的代码压缩工具：JSMin；YUI Compressor；Closure Compiler；
本章JS代码:
window.onload = function () { //确保HTML文档全部加载完全后执行
if(!document.getElementsByTagName) return false; //注意，getElementsByTagName没有圆括号!!!
var links = document.getElementsByTagName("a");
if(links.length > 0)
{
for(var i = 0; i < links.length; i++)
{
if(links[i].getAttribute("class") == "popUp")
{
links[i].onclick = function () { //将一个事件(onclick)绑定到特定的元素上
popUp("http://www.example.com/");
return false;
}
}
}
}
}
function popUp(winUrl) {
window.open(winUrl,"popUp","width = 320,height = 480");
}
第六章 图片库改进
网页的行为层(javascript)和结构层(HTML)理论上最好分开。
共享onload事件：
加入有两个函数 firstFunction和secondFunction需要在页面加载时执行， window.onload = firstFunction;
window.onload = secondFunction;
这样做的话实际上只有后一个可以执行. window.onload = function()
{
firstFunction();
secondFunction();
}
这样做创建了一个匿名函数,在需要绑定的函数不是很多的场合 的确很实用. 弹性最佳解决方案,使用addLoadEvent函数,这个方案需要额外添加一些代码,但一旦有了这些代码,绑定函数到onload就很方便 function addLoadEvent(func)
{
var oldonload = window.onload; //将现有的window.onload处理函数保存到oldonload if(typeof oldonload != 'function') //如果现有的window.onload上没有处理函数，将func添加给他
{
window.onload = func;
}
else{
window.onload function()
{
oldload();
func();
}
}
}
nodeName属性返回的总是大写字母，即使元素在HTML文档里是小写。
键盘访问onkeypress事件，若果想让这个达到和onclick同样的效果，可以这么写 links[i].onkeypress = links[i].onclick，但是不建议使用，因为一旦绑定了onkeypress的处理函数返回的是false，使用键盘的用户永远无法离开当前链接。事实上使用键盘TAB键移动按下链接，也会触发onclick事件，所以用onclick已经可以满足需要了。
本章JS代码 注意点就是"平稳退化" 以及js和html分离
function showPic(whichPic) {
if(!document.getElementById("placeholder")) return true;
var source = whichPic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichPic.getAttribute("title")) {
var text = whichPic.getAttribute("title"); //whcihPic一开始写成了whichpic!!!
} else {
var text = "";
}
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3)
description.firstChild.nodeValue = text;
return false;
}
/*将相关操作关联到onclick事件上*/
function prepareGallery() {
if(!document.getElementById || !document.getElementsByTagName) return false;
if(!document.getElementById("imagegallery")) return false;
var links = document.getElementById("imagegallery").getElementsByTagName("a");
for(var i = 0; i < links.length; i++)
{
links[i].onclick = function() {
return showPic(this);
}
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
}
else
{
window.onload = function () {
oldonload();
func();
}
}
}
/*在网页加载时执行*/
addLoadEvent(prepareGallery);