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> <div><em>' + data.books[i].publisher + '</em></div></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;}

原文地址：https://segmentfault.com/a/1190000016677097

web前端常用的封装方法

原文地址：https://www.cnblogs.com/lalalagq/p/9902241.html