每个人工作中都会封装一些自己工作中常用的函数，鹏哥我也有一些，做了两年程序员，玩了两年前端开发，就这一点收藏，我也挺不好意思的（平时懒得整理，而且有的临时封装就用，不会放起来），不过就是少了点，平时用的不多，经常用到的就给封装了，至于效果组件就没封装。凑合拿去能用就用！别嫌弃。。。
【获取元素样式】
在工作中，我们经常会获取某一个DOM元素的样式信息，而且这个因为不兼容，所有就封装了一版。
//获取计算过后的样式***************************
/*function getStyle(obj,sName){
if(obj.currentStyle){
return obj.currentStyle[sName];
}else{
return getComputedStyle(obj,false)[sName];
}
}*/
//获取计算过后的样式***************************
function getStyle(obj,sName){
return (obj.currentStyle || getComputedStyle(obj,false))[sName]
}
【随机数】
平时工作中，我们经常会用到随机数啊，比如写随机展示的效果灯
//随机数*****************************************
function ran(n,m){
return parseInt(Math.random()*(m-n)+n)
}
【数组找重复】
经常遇到操作数据，找重复，继续往下看，我也会说去重。
//找重复********************************************
function findInArr(n,arr){
for(var i=0; i<arr.length; i++){
if(arr[i]==n){
//return arr[i]=n;
return true;
}
}
//return arr.push(n);
return false;
}
//var arr=[1,2,3];
//alert(findInArr(5,arr));
//alert(arr);
【时间补零】
这个就经常经常遇到了，页面中我们经常会写时间，但是获取的js时间如果小于10，显示一位，为了美观所有需要补0.
//补零********************************************
function toDub(n){
if(n<10){
return '0'+n;
}else{
return ''+n;
}
}
【通过class获取元素】
原生有这个方法，但是有兼容性问题，所有就给封装了一版，虽然不经常用，但是也会用到。
//getElementsByClassName**********************************
function getByClass(oParent,sClass){
if(oParent.getElementsByClassName){
return oParent.getElementsByClassName(sClass);
}else{
var aElement=oParent.getElementsByTagName('*');
var arr=[];
for(var i=0; i<aElement.length; i++){
var aClass=aElement[i].className.split(' ');
for(var j=0; j<aClass.length; j++){
if(aClass[j]==sClass){
arr.push(aElement[i]);
}
}
}
return arr
}
}
【获取物体绝对的位置】
这个就经常用了，比如图片延迟加载，比如获取一个DOM元素的位置，等等。
//绝对宽高*****************************************
function getPos(obj){
var l=0;
var t=0;
while(obj){
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;
}
return {left:l,top:t}
}
【事件绑定】
这个就不用说了，工作中我们的事件都是要绑定的。
//添加事件***************************************
function addEvent(obj,sEv,fn){
if(obj.addEventlistener){
obj.addEventlistener(sEv,fn,false);
}else{
obj.attachEvent('on'+sEv,fn);
}
}
【事件解绑】
这个也不用说，和上面那个一样。
//解除事件*****************************************
function removeEvent(obj,sEv,fn){
if(obj.removeEventlistener){
obj.removeEventlistener(sEv,fn,false);
}else{
obj.detachEvent('on'+sEv,fn);
}
}
【添加滚轮事件】
这个偶尔会遇到，比如你写一个需要自己自定义一个滚动条的页面，就会用到。不过有插件，用这个也少。
//添加滚轮事件***************************************
function addWheel(obj,fn){
if(navigator.userAgent.toLowerCase().indexOf('firefox')!=-1){
obj.addEventListener('DOMMouseScroll',wheel,false); //火狐
}else{
obj.onmousewheel=wheel; //非火狐
}
function wheel(ev){
var bDown=true;
var oEvent=ev || event;
if(oEvent.wheelDelta){
if(oEvent.wheelDelta>0){
bDown=false;
}else{
bDown=true;
}
}else{
//火狐
if(oEvent.detail>0){
bDown=true;
}else{
bDown=false;
}
}
fn&&fn(bDown);
oEvent.preventDefault&&oEvent.preventDefault(); //阻止默认事件(事件绑定中的默认事件) 只能用在高级浏览器中
return false; //阻止默认事件
}
}
【个人js运动框架引擎】
这个之前用到的非常非常多，之前没有用css3的时候就靠这个写效果，虽然有人说，鹏哥，不是有jq吗，那我会告诉你，一个小页面你会引库嘛。。不过目前有了css3运动，就不需要这个了。
//运动框架***************************************
function move(obj,json,option){
var option=option || {};
var duration=option.duration || 1000;
var easing=option.easing || 'linear';
var start={}; //寸初始值
var dis={};//存总路程
//json->{'width':300,'height':300,'opacity':0}
//start->{width:100,height:100,opacity:1}
//dis ->{width:200,height:200,opacity:1}
for(var name in json){
start[name]=parseFloat(getStyle(obj,name));
//start['width']=100;
dis[name]=json[name]-start[name];
//dis['width']=200;
}
var count= Math.ceil(duration/30); //总次数
var n=0; //循环需要统计的次数
clearInterval(obj.timer);
obj.timer=setInterval(function(){
n++;
for(var name in json){
switch (easing){
case 'linear': //匀速
var a=n/count;
var cur=start[name]+dis[name]*a;
break;
case 'ease-in': // 加速
var a=n/count;
var cur=start[name]+dis[name]*a*a*a;
break;
case 'ease-out': //减速
var a=1-n/count;
var cur=start[name]+dis[name]*(1-a*a*a);
break
}
if(name=='opacity'){
obj.style.opacity=cur;
}else{
obj.style[name]=cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
option.complete && option.complete();
}
},30);
}
【DOM加载事件】
这个也用到的非常多，和window.onload有区别，这个加载仅仅是代码加载了就会执行。
//DOM事件**********************************************
function ready(fn){
if(document.addEventListener){
document.addEventListener('DOMContentLoaded',fn,false)
}else{
document.onreadystatechange=function(){
if(document.readyState=='complete'){
fn();
}
};
}
}
【cookie使用】
这个就不用说了，之前用的非常多，每个页面基本都会有cookie的存在。不过目h5出现的两个离线存储基本把这个代替了。。。
//设置cookie*********************************************
function setCookie(sName,sValue,iDay){
if(iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=sName+'='+sValue+'; expires='+oDate+'; path=/';
}else{
document.cookie=sName+'='+sValue+'; path=/';
}
}
//获取cookie**********************************************
function getCookie(sName){
var str=document.cookie;
var arr1=str.split('; ');
for(var i=0; i<arr1.length; i++){
var arr2=arr1[i].split('=');
if(arr2[0]==sName){
return arr2[1]
}
}
return ''
}
//删除Cookie**********************************************
function removeCookie(sName){
setCookie(sName,' ',-1);
}
【解析后台获取的数据json】
平时我们从后台获取的数据都是字符串，而且经常是字符串的json，解析有两种方法，性能不同，所以就给封装起来了。
//解析json*************************************************
function parseJson(str){
try{
return JSON.parse(str);
}catch(e){
return eval('('+str+')');
}
}
【个人ajax交互封装】
重中之重。平时写页面交互效果的时候，经常用，虽然每一个库框架都会有这个，但是一些页面就是需要原生来写，所有用的非常多，给封装了起来。
//ajax*******************************************************
function ajax(json){ //url, data, type, timeout, success, error
json=json || {};
json.data=json.data || {};
json.type=json.type || 'get';
json.timeout=json.timeout || 0;
var arr=[];
for(var name in json.data){
arr.push(name+'='+encodeURIComponent(json.data[name]))
}
var sData=arr.join('&');
try{
var oAjax=new XMLHttpRequest;
}catch(e){
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
if(json.type=='post'){
oAjax.open('POST',json.url,true);
oAjax.setRequestHeader('content-type','application/x-www-form-urlencoded');
oAjax.send(sData);
}else{
oAjax.open('GET',json.url+'?'+sData,true);
oAjax.send();
}
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
clearTimeout(timer);
if((oAjax.status>=200 && oAjax.status<300) || oAjax.status==304){
json.success && json.success(oAjax.responseText);
}else{
json.error && json.error(oAjax.status);
}
}
};
if(json.timeout){
var timer=setTimeout(function(){
oAjax.abort();
},json.timeout);
}
}
【后台的时间戳转时间】
平时交互，从后台获取的时间是时间戳，而且是秒为单位。所有就写了一个转化的函数。
//时间戳转JS时间********************************************
function setTime(t){
function toDou(n){
return n<10?'0'+n:''+n;
}
var oDate=new Date();
oDate.setTime(t*1000);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+toDou(oDate.getHours())+':'+toDou(oDate.getMinutes())+':'+toDou(oDate.getSeconds());
}
【角度弧度转化】
这个也用的挺多的，比如css3，或者是canvas中都会用。
//角度转弧度********************************************
function d2a(n){
//弧度 = π/180×角度
return n*Math.PI/180;
}
//弧度转角度********************************************
function a2d(n){
//角度 = 180/π×弧度
return n*180/Math.PI;
}
【数组求最大最小数】
经常用，经常会从后台获取一组数据，但是我们要从中找出最大或者是最小的展示，所以鹏哥就给封装起来了。
//查找数组中的最大值********************************************
function findMax(arr){
var iMax=arr[0];
for(var i=0; i<arr.length; i++){
if(arr[i]>iMax){
iMax=arr[i];
}
}
return iMax;
}
//查找数组中的最小值********************************************
function findMin(arr){
var iMin=arr[0];
for(var i=0; i<arr.length; i++){
if(arr[i]<iMin){
iMin=arr[i];
}
}
return iMin;
}
【数组去重】
这个就不用说了，用处非常多，虽然数组去重有无数种方法，但是我还是喜欢这一种。
//数组去重*********************************************************
function remArr(arr){
arr.sort();
for(var i=0; i<arr.length; i++){
if(arr[i]==arr[i+1]){
arr.splice(i,1);
i--;
}
}
return arr;
}
附加小方法：数字取几位小数（这个是Number的方法，以防从数据库取到的是字符串型数字，所有转化一下数据类型）
Number(*).toFixed(取几位就放几 如 2)
日期整理：利用字符串的replace替换功能+正则匹配 如 str ='20160920145530';
str.replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/,'$1-$2-$3 $4:$5:$6') => 2016-09-20 14:55:30 格式自己随便写，看情况
以上，结束，后期工作中封装的会继续上传，以后鹏哥也会把一些js效果的，以及组件给封装收藏好。陆续更新。
网友评论