Introduction aux méthodes d'encapsulation couramment utilisées dans les frontaux Web (exemples de code)

Ce que cet article vous apporte est une introduction aux méthodes d'encapsulation (exemples de code) couramment utilisées dans les frontaux Web. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Loupe

//页面加载完毕后执行
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. Obtenez le intervalle spécifié Plage de nombres aléatoires, y compris lowerValue et upperValue

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 += &#39;<li><h2>'+ data.books[i].title +'</h2> <span>'+ data.books[i].author_intro +'</span><img src="&#39;+ data.books[i].image +&#39;" /><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;       
}           
}

Tri du tableau

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

5. >

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]

6. Copie profonde

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]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!