JavaScript的几个常用的封装模块

   <p style="text-align:center"><img src="https://simg.open-open.com/show/eeb40f5523777ef8403f491e96b75cfe.jpg"></p>    <p style="text-align:center">JavaScript</p>    <h3><strong>0.前言</strong></h3>    <p>其实对于每一个程序员来说，都会有很多的代码是你在工作中需要重复的使用的。所以代码的封装，就成了我们工作中学会自己“偷懒”的一种非常棒的方式。通过封装，我们可以节省出来很多时间，来做更多有意思的事情。今天就简单的分享一下我自己封装的模块。</p>    <p><strong>1. 移动orPC端设备判定</strong></p>    <pre>  <code class="language-javascript">var SCREENWIDTH = 0;   var SCREENHEIGHT = 0;  //宏定义  全局可用  (function(){   var str=navigator.userAgent;   var arr =["Android","iPhone","iPad","iPod","Windows Phone","Windows Mobile","SymbianOS","BlackBerry"];   for(var i=0;i<arr.length;i++){    if(str.indexOf(arr[i])!=-1){     //移动端     SCREENWIDTH = window.innerWidth;     SCREENHEIGHT=window.innerHeight        return;     }   }   //PC端   SCREENWIDTH = 320;   SCREENHEIGHT = 568;  })()</code></pre>    <p>首先，宏定义 SCREENWIDTH 和 SCREENHEIGHT 作为宽和高的值。创建一个自运行函数，里面则使用了浏览器嗅探太识别是PC端还是移动端，如果浏览器嗅探中有移动端关键字，则判定为移动端，否则判定为PC端。然后就可以根据自己的需求设置对应的值了。</p>    <p>这里，我设置的是移动端 SCREENWIDTH 和 SCREENHEIGHT 分别为移动端设备的宽和高。PC端按照苹果5S给定 SCREENWIDTH 和 SCREENHEIGHT 分别320和568。</p>    <p><strong>2. 移动端rem布局适配</strong></p>    <pre>  <code class="language-javascript">function resizeFunction(){    if(!clientWidth){     return;    }else if(clientWidth>=640){     document.documentElement.style.fontSize=100+"px";    }else{     var clientWidth=document.documentElement.clientWidth;     document.documentElement.style.fontSize=100*(clientWidth/640)+"px";    }   }     window.onresize=function(){    resizeFunction();   }</code></pre>    <p>在移动端使用rem布局是非常棒的一种布局方式，通过设置html的font-size可以等比例适配所有屏幕。目前淘宝腾讯等网站使用的就是rem布局。</p>    <p>上边的模块中，我设置html的font-size为100，这个因人而异，感觉怎么计算着简单怎么来。如果屏幕宽度超过640，走else if。如果屏幕宽度不超过640，走else。</p>    <p><strong>3.绑定事件兼容处理</strong></p>    <pre>  <code class="language-javascript">var UnitEvent = {    addEvent:function(ele,type,handle){     if(ele.addEventListener){      ele.addEventListener(type,handle,false);     }else if(ele.attachEvent){      ele.attachEvent("on"+type,handle);     }else{      ele["on"+type]=handle;       }    },    //移除事件    deleteEvent:function(ele,type,handle){     if(ele.removeEventListener){      ele.removeEventListener(type,handle,false);     }else if(ele.detachEvent){      ele.detachEvent("on"+type,handle);     }else{      ele["on"+type]=null;     }    }   };</code></pre>    <p>这个是参考了一个叫Resig的老外的代码。咳，是参考哈...，还是改了一部分的。通过这种方法，绑定事件在兼容方面是应该是没有问题的。反正我还是没有碰到出问题的情况，所以放心用吧。</p>    <p><strong>4.图片预加载</strong></p>    <pre>  <code class="language-javascript">var imgs =[]  function preLoad(arr,back) {    var nums = 0;    for (var i =0;i<arr.length;i++) {     imgs[i]=new Image();     imgs[i].onload=function(){      nums++      if(nums==arr.length){       back();      }     }     imgs[i].src=arr[i];    }   }</code></pre>    <p>预加载用到的地方也是很多的。以前我都是把存储图片路径和存储预加载图片的数组也放到模块里面，时候后来发现，那样写的话，每次都要在模块里改路径，所以就把这两个写在了外面。这样在外面定义数组，然后传进来就可以了，而且将 imgs 定义成全局的，这样预加载的图片就能直接拿来用，也能省不少事。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8ef8c72a736b4169e359ce328ff64027.png"></p>    <p style="text-align:center">雏菊</p>    <p>今天就分享这么多吧，这些模块还是会经常用的到。如果这篇分享对你们有帮助，那么我的目的就达到了，也算是给自己累积一点正能量哈。</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/685999ad5203</p>    <p> </p>