javascript Dom编程艺术读书笔记之最佳实践
1.平稳退化
正确使用javascript脚本，让访问者在不支持javascript情况下，仍然可以顺利浏览你的网站
2."javascript:"伪协议
通过一个链接调用伪协议
<a href="javascript:popUp('http://www.example.com/');">Example</a>
3.内嵌事件处理函数
<a href="#" onclick="popUp('http://example.com/'); return false;">Example</a>
、#是仅供内部文档使用的链接记号，创建空链接
4.平稳退化的重要性
搜索机器人浏览网页，一般会禁用图片和javascript，如果你的网站不支持平稳退化，会在搜索引擎的排名上大打折扣
如何做到平稳退化，在链接里把href的值设置为真实的链接
<a href="http://example.com/" onclick="popUp(this.href); return false;">Example</a>
5.渐进增强
用一些额外的信息去包裹原始数据。按照此原则设计的网页基本都符合“平稳退化”原则
css把代码从文本文档中分离出来，这个结论同样适用于javascript
6.分离javascript
把javascript调用代码行文与HTML文档分开,把事件添加在特定的ID，class中
当这个链接被点击时，将调用popUp()函数
<a href="http://www.example.com" class="popUp">Example</a>
具体步骤
- 把文档链接放在一个数组里
- 遍历数组
- 如果某个链接class属性值等于popUp，则点击链接时调用该函数
A.把链接的href属性值传入函数
B.取消点击的默认行为
var links = document.getElementByTagName("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;
}
}
}
javascript加载时间不能确定，必须使代码在文档加载时立即执行。文档加载完成时将触发一个事件，这个事件有自己的事件处理函数。
document对象是window对象的一个属性，当window对象触发onload事件，document对象已经存在。
将自己的javascript打包在prepareLinks函数，将函数添加在onload事件中，DOM可以正常工作了
window。onload = prepareLinks；
function prepareLinks{
var links = document.getElementByTagName("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;
}
}
}
}
把popUp函数保存到javascript文件中
function popUp(winURL){
window.open(winURL, "popUp", "width=320, height=480");
}
7.对象检测
检测对浏览器的支持程度
把方法打包在if里，通过条件表达式的求值结果，true or false来决定采取怎样的行动
用if会多花括号，可以使用逻辑非操作符。
if (!document.getElementById){
ruturn false;
}
可以简写成if (!document.getElementById) ruturn false;
在上面例子中插入一条if语句，检测是否支持该方法
window.onload = prepareLinks；
function prepareLinks{
if (!document.getElementBuTagName) return false;
var links = document.getElementByTagName("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;
}
}
}
}
8.浏览器嗅探技术
保证向后兼容性的另一种方法。
”浏览器嗅探”指通过提取浏览器供应商提供的信息来解决向后兼容性问题
有很大的技术风险
- 浏览器会撒谎
- 为适应不同浏览器，脚本会变得复杂
此技术正在被对象检测替代
9.性能考虑
- 尽量少访问DOM，尽量减少标记
if (document.getElementByTagName("a").lenth > 0){
var links = document.getElementByTagName("a");
for(var i=0; i<links.length; i++){
//对每个链接处理
}
}
上述代码性能不高，浪费了一次搜索
var links = document.getElementByTagName("a");
if (links.length > 0){
for(var i=0; i<links.length; i++){
//对每个链接处理
}
这样搜索DOM的次数降低为1次
2. 合并和放置脚本
推荐把多个javascript文件放到一个中
脚本在标记中的位置也对初次加载时间有很大的影响。
按照渐进增强和分离javascript的观点，把所有script标签放在文档末尾，/body之前，页面更快。
- 压缩脚本
指把脚本中的不必要的字节，如空格和注释，统统删除。与很多工具可以替代你做这种事
你应该有两个版本，一个工作副本，一个精简副本，精简版本应有min字样以便区分
推荐有代表性的代码压缩工具
- Douglas Crockford的JSMin (http://www.crockford.com/javascript/jsmin.js)
- 雅虎的YUI Compressor (http://developer.yahoo.com/yui/compressor)
- 谷歌的Closure Compiler (http://closure-compiler.appspot.com/home)
