【笔记】学习DOM艺术最佳实践总结
本帖最后由 wushaominkk 于 2018-6-23 16:37 编辑一、平稳退化：就算不适用JS，网页也能正常访问
==============HTML
<!--做到平稳退化，虽然没有打开新的窗口，但没有彻底失效-->
<a
>Example3</a><!--href设置为真实存在的-->
===========js
/*
弹出新窗口
*/
function popUp(winURL){
/*
open()有三个参数
第一个参数：想在新窗口打开的网页的URL地址
第二个参数：新窗口的名字
第三个参数：以逗号分隔的字符，新窗口的各种属性。包括尺寸，工具条，菜单条，初始位置等
*/
window.open(winURL,"popup","witdh=320,height=480")
}
二、页面结构和行文分离：引用外部文件
=======html
<!--结构与行为分离-->
<aclass="popup">Example4</a>
<script src="000_JS_prac2.js"></script>
三、向后兼容：渐进增强：排除一些老旧的浏览器执行JS不兼容的问题
window.onload = prepareLinks; //加载完dom就执行
function prepareLinks() { //封装成一个函数来执行
if(!docunment.getElementsByTagName) return false; //对象检查，浏览器是否认识这个用法.渐进增强原则，排除那些老的浏览器
var links = document.getElementsByTagName("a"); //将所有连接放入一个数组
for (var i = 0; i < links.length; i++) {//遍历元素
if (links.getAttribute("class") == "popup") {//判断class为popup的元素
links.onclick = function(){//绑定事件
popUp(this.getAttribute("href")); //调用popUp函数
return false; //取消链接默认行为
}
}
}
}
四、性能考虑
少访问DOM：试试能否用变量保存第一次访问DOM的结果，之后用变量来处理
减少标记：标记的增加必然增加BOM树的规模
合并脚本：多个脚本文件，最好组合在一起
脚本放置：放在</body>之前
压缩脚本文件：把脚本中不必要的字节，如空格、注释都删除。所以会有工作副本和精简副本两个版本文件。精简副本放在站点上,且在文件名上加上min
[*]XXXXX.min.js
五、结构化程序设计
理论上函数只有一个入口和出口，但是实际开发中，把多个出口（return）放在函数的开头部分，是可以接受的
沙发，第一次。 fudaoyuan 发表于 2018-6-23 16:25
沙发，第一次。
加油加油{:1_918:}
页:
[1]