1.获取浏览器滚动条距离

  1.       function getScrollOffset(){
  2.             // 当window.pageXOffset存在时
  3.             if(window.pageXOffset){
  4.                 return {
  5.                     x:window.pageXOffset,
  6.                     y:window.pageYOffset
  7.                 }
  8.             }else{
  9.                 // 当不存在时
  10.                 return{
  11.                     x:document.body.scrollLeft+document.documentElement.scrollLeft,
  12.                     y:document.body.scrollTop+document.documentElement.scrollTop
  13.                 }
  14.             }
  15.         }

2.封装方法求浏览器可视区域尺寸

  1.  function getViewportOffset(){
  2.             if(window.innerWidth){
  3.                 return{
  4.                     w:window.innerWidth,
  5.                     h:window.innerHeight
  6.                 }
  7.             }else{
  8.                 // 怪异/混杂模式，向后兼容浏览器版本
  9.                 if(document.compatMode=="BackCompat"){
  10.                     return{
  11.                         w:document.body.clientWidth,
  12.                         h:document.body.clientHeight
  13.                     }
  14.                 }else{
  15.                     return{
  16.                         w:document.documentElement.clientWidth,
  17.                         h:document.documentElement.clientHeight
  18.                     }
  19.                 }
  20.             }
  21.         }

3.封装获取元素的属性

  1.      // ele位元素，prop为属性
  2.         function getStyle(ele,prop){
  3.           //获取权重最高的属性值，且会换算。em=px,color=rgb(0,0,0)--->IE8及以下不兼容
  4.             if(window.getComputedStyle){
  5.                 return window.getComputedStyle[ele]
  6.             }else{
  7.               //IE特有的方法，获取权重最高的属性值，不会换算
  8.                 return ele.currentStyle[ele]
  9.             }
  10.         }

4.封装事件处理函数方法

  1.      // 封装事件处理函数的方法:ele(元素),type(事件类型),handle(处理函数)
  2.         function addEvent(ele,type,handle){
  3.             if(ele.addEventListener){
  4.                 ele.addEventListener(type,handle,false)
  5.             }else if(ele.attachEvent){
  6.                 ele.attachEvent('on'+type,function(){
  7.                     // 注意:attachEvet里面的this指向的为window,在外部定义的handle函数this指向当前对象,通过call改变this指向
  8.                      handle.call(ele)
  9.                 })
  10.             }else{
  11.                 ele['on'+type]=handle
  12.             }
  13.         }

6.封装异步加载script

  1.     // 异步加载script-->url:外部JS代码;  callback:存在外部JS代码中的函数
  2.         function loadScript(url,callback){
  3.             var script=document.createElement('script');
  4.             script.type="text/javascript";
  5.             if(script.readyState){
  6.                 script.onreadystatechange=function(){
  7.                     if(script.readyState=='complete'||script.readyState=="loaded"){
  8.                         // callback(); 单个函数
  9.                         tools[callback]();//多个函数
  10.                     }
  11.                 }
  12.             }else{
  13.                 script.onload=function(){
  14.                     // callback(); 单个函数
  15.                     tools[callback]();//多个函数
  16.                 }
  17.             }
  18.             script.src=url;//外部JS代码
  19.             document.head.appendChild(script)
  20.         }
  21.         // loadScript('demo.js',function(){test();}) 单个函数
  22.         loadScript('demo.js',"test1")//多个函数
  24. //demo.js
  25. function test(){
  26.     console.log("test");
  27. }
  29. // 有多个函数时
  30. var tools={
  31.     test1:function(){
  32.         console.log("test1");
  33.     },
  34.     test2:function(){
  35.         console.log("test2");
  36.     }
  37. }