JavaScript的幾個常用的封裝模塊

JavaScript

0.前言

其實對于每一個程序員來說，都會有很多的代碼是你在工作中需要重復的使用的。所以代碼的封裝，就成了我們工作中學會自己“偷懶”的一種非常棒的方式。通過封裝，我們可以節省出來很多時間，來做更多有意思的事情。今天就簡單的分享一下我自己封裝的模塊。

1. 移動orPC端設備判定

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;
})()

首先，宏定義 SCREENWIDTH 和 SCREENHEIGHT 作為寬和高的值。創建一個自運行函數，里面則使用了瀏覽器嗅探太識別是PC端還是移動端，如果瀏覽器嗅探中有移動端關鍵字，則判定為移動端，否則判定為PC端。然后就可以根據自己的需求設置對應的值了。

這里，我設置的是移動端 SCREENWIDTH 和 SCREENHEIGHT 分別為移動端設備的寬和高。PC端按照蘋果5S給定 SCREENWIDTH 和 SCREENHEIGHT 分別320和568。

2. 移動端rem布局適配

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();
 }

在移動端使用rem布局是非常棒的一種布局方式，通過設置html的font-size可以等比例適配所有屏幕。目前淘寶騰訊等網站使用的就是rem布局。

上邊的模塊中，我設置html的font-size為100，這個因人而異，感覺怎么計算著簡單怎么來。如果屏幕寬度超過640，走else if。如果屏幕寬度不超過640，走else。

3.綁定事件兼容處理

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;
   }
  }
 };

這個是參考了一個叫Resig的老外的代碼。咳，是參考哈...，還是改了一部分的。通過這種方法，綁定事件在兼容方面是應該是沒有問題的。反正我還是沒有碰到出問題的情況，所以放心用吧。

4.圖片預加載

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];
  }
 }

預加載用到的地方也是很多的。以前我都是把存儲圖片路徑和存儲預加載圖片的數組也放到模塊里面，時候后來發現，那樣寫的話，每次都要在模塊里改路徑，所以就把這兩個寫在了外面。這樣在外面定義數組，然后傳進來就可以了，而且將 imgs 定義成全局的，這樣預加載的圖片就能直接拿來用，也能省不少事。

雛菊

今天就分享這么多吧，這些模塊還是會經常用的到。如果這篇分享對你們有幫助，那么我的目的就達到了，也算是給自己累積一點正能量哈。

來自：http://www.jianshu.com/p/685999ad5203