php的前端代码打包,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、JSONPfunction fn1(data){

var html = '';

var oUl = document.getElementsByTagName('ul')[0];

console.log(data);

if(data.total != -1){

for(var i=0; i

html += '

'+ data.books[i].title +'

'+ data.books[i].author_intro +'

'+ data.books[i].summary +'

' + data.books[i].publisher + '

';}

oUl.innerHTML = html;

}else{

document.body.innerHTML+='

亲~~ 没有数据哦~~~

';

}

}

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和upperValuefunction 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

if(arr[i]

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

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;

}