javascript Dom编程艺术读书笔记之最佳实践
来源:互联网 发布:linux如何切换账户 编辑:程序博客网 时间:2024/06/07 10:28
- 平稳退化
- javascript伪协议
- 内嵌事件处理函数
- 平稳退化的重要性
- 渐进增强
- 分离javascript
- 对象检测
- 浏览器嗅探技术
- 性能考虑
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)
- javascript Dom编程艺术读书笔记之最佳实践
- web前端之JavaScript DOM编程艺术之最佳实践
- JavaScript Dom编程艺术-C5 最佳实践
- 【JavaScript DOM编程艺术】- 最佳实践
- JavaScript DOM编程艺术 学习笔记(五)最佳实践
- 【第五章-最佳实践】javascript DOM 编程艺术-学习笔记
- 《JavaScript DOM编程艺术》读书笔记
- 读书笔记--javascript DOM 编程艺术
- 《JavaScript DOM 编程艺术》 读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- JavaScript Dom编程艺术 读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 《JavaScript DOM 编程艺术》读书笔记
- 关于查询两种张表两列和并求两列和的和
- centOS7.2快速安装mysql
- Spark Streaming 学习笔记
- 关于HOSTS设置不生效的解决小方法
- 设计模式系列(二)工厂模式
- javascript Dom编程艺术读书笔记之最佳实践
- Maven创建SpringMVC项目Demo
- React Native 常用命令 <转>
- 小白科普:分布式和集群
- 首次使用博客写东西 nice!
- Linux内核动态调试信息的打开,如pr_debug
- phpcms跳转手机版
- 欢迎使用CSDN-markdown编辑器
- 【Python-2.7】换行符和制表符