《JS&DOM编程艺术》笔记 |
您所在的位置：网站首页 › js编程艺术 › 《JS&DOM编程艺术》笔记 |
《JS&DOM编程艺术》笔记
|
持续更新，gitHub地址 ： https://github.com/ghCarol/demo/tree/master/Notes 目录 目录正文 《JS&DOM编程艺术》 第四章——“JS图片库” 1. 取消链接跳转2. getElementsByName()和getElementsByTagName()3. window.onload = functionName;4. 得到’p’元素包含的文本值5. firstChild , lastChild属性。6. ‘script’引入文件标签为什么失效 第五章——“最佳实践” 1. window.open(url,name,features);函数2. javascript伪协议，不利于平稳退化3. href=”#” 的平稳退化替代方案4. JS平稳退化可从CSS得到借鉴，结构和样式分离5. 渐进增强6. 分离JavaScript举例7. 向后兼容8. 性能优化：尽量少访问DOM次数和尽量减少标记9. 性能优化：合并和放置JS脚本10. 性能优化：压缩脚本 正文 《JS&DOM编程艺术》 第四章——“JS图片库” 1. 取消链接跳转取消链接的跳转onclick="return false;" 2. getElementsByName()和getElementsByTagName() getElementsByName();返回带有指定名称的对象的集合，查询元素的 name 属性。getElementsByTagName();返回带有指定标签名的对象的集合，比如document.getElementsByTagName("input"); 3. window.onload = functionName;window.onload = countBodyChildren; 而不是 window.onload(count...); PS: countBodyChildren()是一个function 4. 得到’p’元素包含的文本值元素本身的nodeValue属性是空值，想要得到 元素所包含的文本值应这样写： alert(description.childNodes[0].nodeValue); //var description = document.getElementById("description"); 5. firstChild , lastChild属性。 6. ‘script’引入文件标签为什么失效==千万不能写成== ，后者没用，因为script标签不能直接闭合，必须要有成对的结尾标签。 第五章——“最佳实践” 1. window.open(url,name,features);函数window.open(url,name,features);方法创建新的浏览器窗口 第二个参数name是新窗口的名字，可以在代码里通过这个名字与新窗口进行通信。 举例应用：window.open("https://www.baidu.com","popup","width=320,height=480");
“#”只是为了创建一个空链接，实际工作全由onclick属性负责完成。 这个技巧与用”javascript:”伪协议调用JavaScript代码的做法==同样糟糕，因为他们都不能平稳退化==，如果用户禁止浏览器的JavaScript功能，这样的代码毫无用处。 Example 4. JS平稳退化可从CSS得到借鉴，结构和样式分离 5. 渐进增强原则：不将CSS代码混在HTML文档里(避免使用内嵌产生式css)，将表示层(CSS)和行为层(JavaScript)与结构分开。 按照渐进增强原则创建出来的网页几乎都符合平稳退化原则。 6. 分离JavaScript举例在JS中利用element.event = action … window.onload = prepareLinks; //这句话保证了脚本在HTML文档加载完整(DOM完整)后执行 function prepareLinks() { var links = document.getElementsByTagName("a"); //这条语句在JS文件被加载时立即执行 for (var i = 0; i < links.length; i++) { if (links[i].getAttribute("class") == "popup") { links[i].onclick = function() { popUp(this.getAttribute("href")); return false; } } } }Q：必须让代码在HTML文档全部加载到浏览器后马上开始执行，但是 如果JS文件是从部分标签调用的，它将在HTML文档之前加载到浏览器里。如果标签位于之前，就不能保证哪个文件最先结束加载(浏览器可能一次加载多个)。A：HTML文档全部加载完毕时将触发一个事件，这个事件有他自己的事件处理函数。文档将被加载到一个浏览器窗口里，document对象又是window对象的一个属性。当window对象触发onload事件时，document对象已经存在。 7. 向后兼容有些浏览器只支持部分javascript功能，但不支持DOM。因此给网页添加行为时遵循“渐进增强”原则，可以使这些行为都能够平稳退化。举例： if(document.getElementById){ statements using getElementById //不足：如果需要检测多个DOM方法或属性是否存在， } //这个函数最重要的语句会被层层花括号包裹，使代码难以阅读和理解。 //Better: 测试条件改为：如果你不理解这个方法，请离开。 if(!document.getElementsByTagName || !getElementById) return false; 8. 性能优化：尽量少访问DOM次数和尽量减少标记减少DOM访问次数：使用变量预存DOM查询的值，之后操作该变量即可 9. 性能优化：合并和放置JS脚本合并JS脚本为一个外部文件，将其放置在前。 10. 性能优化：压缩脚本多数情况下，应该存两个代码版本： 工作副本：可以修改代码并添加注释精简副本：用于放在站点上，为了区分，最好在精简副本的文件名中加上min字样，如scriptName.min.js推荐压缩工具： Douglas Crockford的JSMin 雅虎的YUI Compressor 谷歌的Closure Compiler |
【本文地址】