《ppk 谈 javascript》读书笔记 byWasabi

《ppk 谈 javascript》读书笔记 byWasabi 三个分离
1. 表现与结构分离 (CSS 与其HTML);
2. 行为与结构分离 (JavaScript 与 HTML);
3. 行为与表现分离 (JavaScript 与 CSS);

行为与结构分离
1) 独立文件中的函数
2) 从HTML中先移除事件处理程序
Html代码

1. //错误示范：  
2. <a href="javascript:showPopup('niceimage.jpg');">Do Nifty!</a>  
3. //正确示范：  
4. <a href="niceimage.jpg" id="nice">Do Nifty!</a>  
5.   
6. document.getElementById('nice').onclick = function (){ showPopup(this.href);}  

//错误示范： <a href="javascript:showPopup('niceimage.jpg');">Do Nifty!</a> //正确示范： <a href="niceimage.jpg" id="nice">Do Nifty!</a> document.getElementById('nice').onclick = function (){ showPopup(this.href);}

可访问性规则
1. 条理分明的HTML
2. 硬编码的连接必须有href
3. 产生对本用户有意思的内容
4. 用JavaScript隐藏内容

重定向用户
Js代码 <embed width="14" height="15" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" quality="high" flashvars="clipboard=%2F%2F%E5%AE%83%E4%BC%9A%E8%A6%86%E7%9B%96%E6%97%A7%E9%A1%B5%E9%9D%A2%E5%9C%A8%E6%B8%B8%E8%A7%88%E5%99%A8%E4%B8%AD%E7%9A%84%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E3%80%82%E5%BD%93%E7%94%A8%E6%88%B7%E7%82%B9%E5%87%BB%E5%90%8E%E9%80%80%EF%BC%8C%E5%A5%B9%E4%BC%9A%E8%A2%AB%E9%80%81%E5%88%B0%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E4%B8%AD%E7%9A%84%E5%89%8D%E4%B8%80%E4%B8%AA%E9%A1%B5%E9%9D%A2%E3%80%82%0Alocation.replace('scriptpage.html')%3B%0A%0A%2F%2F%E5%AE%83%E4%BC%9A%E5%88%9B%E5%BB%BA%E4%B8%80%E6%9D%A1%E6%96%B0%E7%9A%84%E6%B8%B8%E8%A7%88%E5%99%A8%E4%B8%AD%E7%9A%84%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E3%80%82%E5%BD%93%E7%94%A8%E6%88%B7%E7%82%B9%E5%87%BB%E5%90%8E%E9%80%80%EF%BC%8C%E4%BC%9A%E8%A2%AB%E9%80%81%E5%88%B0href%E5%89%8D%E7%9A%84%E9%82%A3%E4%B8%AApage%2C%E8%B7%9F%E7%9D%80%E5%8F%88%E6%89%A7%E8%A1%8Clocation.href.%E5%90%8E%E9%80%80%E6%8C%89%E9%92%AE%E7%9A%84%E5%8A%9F%E8%83%BD%E4%BA%8B%E5%AE%9E%E4%B8%8A%E8%A2%AB%E7%A0%B4%E5%9D%8F%E4%BA%86%EF%BC%8C%E8%BF%99%E4%B9%9F%E6%98%AF%E7%8E%B0%E6%9C%89%E7%9A%84%E6%9C%80%E7%B3%9F%E7%B3%95%E7%9A%84%E5%8F%AF%E7%94%A8%E6%80%A7%E9%97%AE%E9%A2%98%E4%B9%8B%E4%B8%80%E3%80%82%0Alocation.href%20%3D%20'scriptpage.html'%3B%0A" src="http://wasabi.javaeye.com/javascripts/syntaxhighlighter/clipboard_new.swf">

1. //它会覆盖旧页面在游览器中的历史记录。当用户点击后退，她会被送到历史记录中的前一个页面。  
2. location.replace('scriptpage.html');  
3.   
4. //它会创建一条新的游览器中的历史记录。当用户点击后退，会被送到href前的那个page,跟着又执行location.href.后退按钮的功能事实上被破坏了，这也是现有的最糟糕的可用性问题之一。  
5. location.href = 'scriptpage.html';  

//它会覆盖旧页面在游览器中的历史记录。当用户点击后退，她会被送到历史记录中的前一个页面。 location.replace('scriptpage.html'); //它会创建一条新的游览器中的历史记录。当用户点击后退，会被送到href前的那个page,跟着又执行location.href.后退按钮的功能事实上被破坏了，这也是现有的最糟糕的可用性问题之一。 location.href = 'scriptpage.html';