web前端中常用的封裝方法有哪些

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><h3>'+ data.books[i].title +'</h3> <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+='<h3>親~~ 沒有數據哦~~~</h3>';
            }
            
        } 
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;

}

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。