JavascriptDOM编程艺术学习笔记2
来源:互联网 发布:万科弗农小镇 知乎 编辑:程序博客网 时间:2024/05/19 09:04
平稳退化:正确的使用JS脚本,可以让访问者在他们的浏览器不支持JS的 轻快下仍然顺利的浏览网站。 <a href ="http://www.example.com/" onclick="popUp(this.href;return false;)">example</a>
href属性设置成了真实存在的URL地址后。既是JS被禁用,这个链接也是可以用的,它并没有彻底失效。这是一个经典的“平稳退化“的例子。
结构与样式分离:作为CSS技术的突出优点,文档结构与文档样式的分离可以确保网页都能平稳退化。可以按照这种原则使用JS。
1,把文档里所有链接全放到一个数组里,
2,遍历数组
3,如果某个链接的class属性等于popUp,就表示这个链接在被点击时应调用popUp()函数。
于是,A.把这个恶恶链接的href属性值传递个popUp函数;B.取消这个链接的默认行为,不让这个链接把访问者带离当前窗口。
var links=document.getElementsByTagName("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()函数的onclick事件添加到有关的链接上。只要把他们存入一个外部JS文件,就等于把这些操作从HTML文档里分离出来了。这就是分离JS的含义。
必须让这些代码在HTML文档全部加载到浏览器之后马上开始执行。
把JS代码打包在prepareLinks函数里,并把这个函数添加到window对象的onload 事件上去:
window.onload=prepareLinks;function prepareLinks(){for (var i=0;i<links.length;i++){ if(links[i].getAttribute("class")=="popUp"){ links[i].onclick=function(){ popUp(this.getAttribute("href")); return false; } } }}
避免使用document.write方法
性能考虑
1.尽量少访问DOM和尽量减少标记
不管什么时候,只要查询DOM中的某些元素,浏览器就会搜索整颗树。
2.合并脚本,放置脚本
把所有的<script>
都放到文档的末尾,</body>
标记之前,就可以让页面变得更快。
3.压缩脚本
几个代表性的压缩代码工具:
DouglasCrockford的JSMin
雅虎的YUICompressor
谷歌的ClosureComplier
- JavascriptDOM编程艺术学习笔记2
- JavascriptDOM编程艺术学习笔记3
- JavascriptDOM编程艺术学习笔记4
- JavascriptDom编程艺术学习笔记一
- JavascriptDom编程艺术学习笔记二
- JavascriptDom编程艺术学习笔记三
- JavaScriptDom编程艺术 笔记整理(一) 图片库
- JavaScriptDom编程艺术 笔记整理(二)
- JavaScriptDOM编程艺术笔记整理(四) 动画
- 共享onload事件的使用(javascriptDOM编程艺术学习笔记)
- JavaScriptDOM编程艺术笔记整理(三) 对于CSS的操作
- JavaScriptDOM编程艺术读书笔记(3)
- UNIX编程艺术学习笔记-2
- javascript DOM编程艺术学习笔记(2)图片库例子:
- javascript DOM 编程艺术 学习笔记
- 《Oracle编程艺术》学习笔记(23)-段
- 《Oracle编程艺术》学习笔记(27)-散列聚簇表
- javascript DOM 编程艺术 学习笔记
- iOS9与XCode7中不能使用http连接的解决办法
- iOS9 UICollectionView新推出的Item排序方法
- Linux 2.6内核启动传递命令行的过程分析
- Yii2 菜单menu管理
- 计算机视觉基础1——视差与深度信息
- JavascriptDOM编程艺术学习笔记2
- iOS开发——通过代码方式使用AutoLayout
- EditText属性总结
- nyoj 免费馅饼 613 (DP状态转移方程)
- CF--B - Queries on a String
- Android Handler 消息机制
- IOS 给UIView 设置背景图片
- CoreData简单介绍
- c++之引用