web前端中常用的封装方法介绍（代码示例）

1、放大镜

//页面加载完毕后执行 window.onload = function () { var oDemo = document.getElementById('demo'); var oMark = document.getElementById('mark'); var FloatBox = document.getElementById('float-box'); var SmallBox = document.getElementById("small-box"); var bigBox = document.getElementById('big-box'); var bigImg = bigBox.getElementsByTagName('img')[0]; oMark.onmouseover = function (){ FloatBox.style.display = "block"; bigBox.style.display = "block"; } oMark.onmouseout = function (){ FloatBox.style.display = "none"; bigBox.style.display = "none"; } oMark.onmousemove = function (ev){ var ev = ev || window.event; var left = ev.clientX - oDemo.offsetLeft - SmallBox.offsetLeft - FloatBox.offsetWidth / 2; var top = ev.clientY - oDemo.offsetTop - SmallBox.offsetTop - FloatBox.offsetHeight / 2; if(left < 10){ left = 0;  }else if(left >= oMark.offsetWidth - FloatBox.offsetWidth - 10){ left = oMark.offsetWidth - FloatBox.offsetWidth; } if(top < 10){ top = 0; }else if(top >= oMark.offsetHeight - FloatBox.offsetHeight - 10){ top = oMark.offsetHeight - FloatBox.offsetHeight; } FloatBox.style.left = left + "px"; FloatBox.style.top = top + "px"; var scaleX = left / (oMark.offsetWidth - FloatBox.offsetWidth); var scaleY = top / (oMark.offsetHeight - FloatBox.offsetHeight); bigImg.style.left = -scaleX * (bigImg.offsetWidth - bigBox.offsetWidth) + "px"; bigImg.style.top = -scaleY * (bigImg.offsetHeight - bigBox.offsetHeight) + "px";  } }

2、JSONP

function fn1(data){ var html = ''; var oUl = document.getElementsByTagName('ul')[0]; console.log(data); if(data.total != -1){ for(var i=0; i<data.books.length; i++){ html += '<li><h2>'+ data.books[i].title +'</h2> <span>'+ data.books[i].author_intro +'</span><img src="'+ data.books[i].image +'" /><p>'+ data.books[i].summary +'</p> <p><em>' + data.books[i].publisher + '</em></p></li>';} oUl.innerHTML = html;             }else{                 document.body.innerHTML+='<h2>亲~~ 没有数据哦~~~</h2>';             }                      }  window.onload = function (){ var oBtn = document.getElementById('btn'); var iNow = 0; oBtn.onclick = function (){ //动态添加 script 标签   加载URL地址 后传入 callback=fn1 输出一个函数, 在上面则定义好这个函数, 接受一个data 就是资源  json类型,循环输出, 可先console.log(dara) 查看数据 var oScript = document.createElement('script');          oScript.src="https://api.douban.com/v2/book/search?q=%E6%A0%A1%E5%9B%AD&count=10&start="+ iNow +"&callback=fn1"; document.head.appendChild(oScript); // 点击一次+10，从多少开始获取 iNow += 10;        }            }

3、获取指定区间范围随机数，包括lowerValue和upperValue

function randomFrom(lowerValue,upperValue) {     return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue); } //如获取1-100之间的随机数 console.log(randomFrom(1,100));

4、数组排序

1、快速排序          /**       *   得到中间那位那位数,然后循环判断, arr[i] < 中间数 则push leftArr, 否则push rightArr, 最后返回 left数组 '拼接' 中间数 + right数组       */     function sort(arr){              if(arr.length <= 1){             return arr;         }              var numIndex = Math.floor(arr.length/2);         var numVal = arr.splice(numIndex,1);         var leftArr = [];         var rightArr = [];              for(var i=0; i<arr.length; i++){                  if(arr[i]<numVal){                   leftArr.push(arr[i]);             }else{                 rightArr.push(arr[i])             }              }              return sort(leftArr).concat(numVal,sort(rightArr));      }  2、sort排序     var num=[7,45,100,4,2,564];     num.sort(function (a, b){         return a - b;     });     console.log(num)  //[2, 4, 7, 45, 100, 564]

5、数组去重

1、indexOf 去重  /**  *   当arr的第一次出现的位置 == i  则是第一次出现就push到tempArr  */ function unique(arr){      if (arr.length <= 1){         return arr;     }      var tempArr = [];      for(var i=0; i<arr.length; i++){          if(tempArr.indexOf(parseInt(arr[i])) == -1){        //-1 证明没有出现过              tempArr.push(arr[i]);          }      }      return tempArr;  }  2、Set去重 function SetUnique(array) {   return [...new Set(array)]; } dedupe([1, 1, 2, 3]) // [1, 2, 3]

6、深度拷贝

/**   *     深度拷贝  *     使用for in 在循环赋值，避免对象引用  */ function copy(obj){      if(typeof obj != 'object'){         return obj;     }      var newObj = {};      for(var attr in obj){          newObj[attr] = copy(obj[attr]);      }      return newObj;  }

以上就是web前端中常用的封装方法介绍（代码示例）的详细内容，更多内容请关注技术你好其它相关文章！