JavaScript学习笔记解析.doc

JavaScript的三大组成部分： 、ECMAScript，它提供了JavaScript核心语言功能的标准 、文档对象模型(DOM)，它提供了访问和操作网页内容的方法和接口 、浏览器对象模型(BOM)，它提供了与浏览器交互的方法和接口 1.2、javascript的解析顺序： JavaScript是边解析边执行的脚步语言，从JavaScript代码由上到下边解析边执行 1.3、延迟执行 比如在一个网页中引入了两个JavaScript文件，一个是a.js，一个是b.js，但是不想让a.js中的内容马上执行，必须等整个页面加载完毕后才执行，那么就可以使用延迟执行。如 !--给a.js加上defer=”defer”后，那么a.js中的内容就必须等页面加载完毕后才能执行了-- script type=”text/javascript” charset=”utf-8” defer=”defer” src=”a.js”script/ script type=”text/javascript” charset=”utf-8” src=”b.js”script/ 1.4、window.onload与DOMContentLoaded事件 我们在写js代码的时候，一般都会添加window.onload事件，主要是为了在DOM加载完后可以使用 getElementById，getElementsByTagName等方法选取DOM元素进行操作，但是window.load会等到加载完 DOM、脚本、CSS，最后加载完图片甚至是iframe中的所有资源才会触发，很多时候网页的图片较多较大，要等最后图片这个耗时大户加载完才执行js 明显有些太迟了，很多时候都会影响用户体验。 很多js框架都有个document.ready的功能，像JQuery的$(document).ready()方法，可以在DOM加载完就立即执行js代码，让图片自个慢慢加载吧。 document.ready的核心是DOMContentLoaded事件，firefox、chrome、opera、safari、ie9+ 都可以使用addEventListener(‘DOMContentLoaded’,fn,false)进行事件绑定，而ie6~8不支持 DOMContentLoaded事件，所以要针对ie6~8做兼容性处理。 资料上说ie6~8可以使用document.onreadystatechange事件监听document.readyState状态是否等于 complete来判断DOM是否加载完毕，如果页面中嵌有iframe的话，ie6~8的document.readyState会等到iframe中 的所有资源加载完才会变成complete，此时iframe变成了耗时大户。但是经过测试，即使页面中没有iframe，当readyState等于complete时，实际触发的是onload事件而不是DOMContentLoaded事件，对这点表示惊奇。 还好ie有个特有的doScroll方法，当页面DOM未加载完成时，调用doScroll方法时，就会报错，反过来，只要一直间隔调用doScroll直到不报错，那就表示页面DOM加载完毕了，不管图片和iframe中的内容是否加载完毕，此法都有效。 如果有多个js文件绑定了document.ready事件，为了防止浏览器重复绑定，同时有序执行，可以引入一个事件队列机制来解决。 以上就是document.ready事件的原理和兼容性问题，下面贴段实例代码，为了方便理解执行过程，使用函数封装的模式，执行过程都写在注释里了，如果有不妥之处欢迎指教。 ”defer”后，那么a.js中的内容就必须等页面加载完毕后才能执行了-- eventQueue = [];//保存domReady的事件队列 isReady = false;//判断DOM是否加载完毕 isBind = false;//判断DOMReady是否绑定 ? /*执行domReady() ?*@param??? {function} ?*@execute? 将事件处理程序压入事件队列,并绑定DOMContentLoaded ?*? 如果DOM加载已经完成，则立即执行 ?*/ function domReady(fn){ ????if (isReady) {//如果dom已经加载完毕，则直接执行事件处理程序 ????????fn.call(window); ????}else{//如果dom没有加载完毕，则将事件处理程序放入事件队列中 ????????eventQueue.push(fn); ????}; ????bindReady();//绑定DOMContentLoaded事件 }; ? /