关注前端 | 前端博客
当前位置: JavaScript > 原生js版块(方法封装)

原生js版块(方法封装)

2018-11-18 分类:JavaScript 作者:管理员 阅读(57)

如果项目中有些简单的页面需要某些JS库里的方法,但是又不想依赖其他库,于是就只能自己封装点常用的方法,不能什么都靠百度和插件。

给DOM添加或删除class类

1
2
3
4
5
6
7
/* 添加 class 类 和 移出 class 类 方法*/
function addClass(element, className) {
  if(!new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className)) element.className += ' ' + className;
}
function removeClass(element, className) {
  element.className = element.className.replace(new RegExp("(^|\\s)" + className + "(?=(\\s|$))", "g"), '');
}

添加class原理:正则去匹配DOM身上的class字符串,如果没有匹配到就增加这个class类。
删除class原理:用replace方法从获取的class字符串里用空字符串替换掉这个需要移出的class类,再赋值给这个DOM的className属性

获取DOM的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getStyle(obj,attr){

    if (attr =='left')
    {
        return obj.offsetLeft;
    }
    else if (attr =='top')
    {
        return obj.offsetTop;
    }
    else if (attr =='width')
    {
        return obj.offsetWidth;
    }
    else if (attr =='height')
    {
        return obj.offsetHeight;
    }
    else
    {
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    }
}

设置DOM的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function setStyle(obj, json){
    if(obj.length)
        for(var i=0;i<obj.length;i++) setStyle(obj[i], json);
    else{
        if(arguments.length==2)    //json
            for(var i in json) setStyle(obj, i, json[i]);
        else{    //name, value
            switch(arguments[1].toLowerCase()){
                case 'opacity':
                     obj.style.filter='alpha(opacity:'+arguments[2]+')';
                     obj.style.opacity=arguments[2]/100;
                     break;
                default:
                    if(typeof arguments[2]=='number'){
                         obj.style[arguments[1]]=arguments[2]+'px';
                    }else{
                         obj.style[arguments[1]]=arguments[2];
                    }
                break;
            }
        }
    }
}

获取DOM四边距离左右上下的距离

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getClientRectAttr(el,direction){
    if(direction==='top')
    {
        return el.getBoundingClientRect().top;
    }
    else if(direction==='bottom')
    {
        return el.getBoundingClientRect().bottom;
    }
    else if(direction==='left')
    {
        return el.getBoundingClientRect().left;
    }
    else if(direction==='right')
    {
        return el.getBoundingClientRect().right;
    }
}

绑定和移出事件

1
2
3
4
5
6
7
function bindEvent(obj, ev, fn){
    obj.addEventListener?obj.addEventListener(ev, fn, false):obj.attachEvent('on'+ev, fn);
}
function unbindEvent(obj, ev, fn){
    obj.removeEventListener?obj.removeEventListener(ev, fn, false):obj.detachEvent('on'+ev, fn);
}
//ps:绑定和解绑的回调必须是同一个函数

获取一个数组的极值(最大或是最小值)

1
2
3
4
5
6
function getExtremeValue(size,arr){
    return size==='min'?Math.min.apply(null,arr):Math.max.apply(null,arr);
}
function getExtremeValue(size,arr){
    return size==='min'?Math.min(...arr):Math.max(...arr);
}

获取移动设备类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getEquipmentType () {
    var u = navigator.userAgent;
    if (u.indexOf('Android') &gt; -1 || u.indexOf('Linux') &gt; -1) {//安卓手机
        return "Android";
    } else if (u.indexOf('iPhone') &gt; -1) {//苹果手机
        return "iPhone";
    } else if (u.indexOf('iPad') &gt; -1) {//iPad
        return "iPad";
    } else if (u.indexOf('Windows Phone') &gt; -1) {//winphone手机
        return "Windows Phone";
    }else{
        return 'other'
    }
}

严格身份证号验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 严格的身份证校验
function isCardID(sId) {
    if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(sId)) {
        alert('你输入的身份证长度或格式错误')
        return false
    }
    //身份证城市
    var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
    if(!aCity[parseInt(sId.substr(0,2))]) {
        alert('你的身份证地区非法')
        return false
    }
    // 出生日期验证
    var sBirthday=(sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2))).replace(/-/g,"/"),
        d = new Date(sBirthday)
    if(sBirthday != (d.getFullYear()+"/"+ (d.getMonth()+1) + "/" + d.getDate())) {
        alert('身份证上的出生日期非法')
        return false
    }
    // 身份证号码校验
    var sum = 0,
        weights =  [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
        codes = "10X98765432"
    for (var i = 0; i &lt; sId.length - 1; i++) {
        sum += sId[i] * weights[i];
    }
    var last = codes[sum % 11]; //计算出来的最后一位身份证号码
    if (sId[sId.length-1] != last) {
        alert('你输入的身份证号非法')
        return false
    }
    return true
}

数据或类型判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//是否字符串
function isString (o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'String'
}
//是否数字
function isNumber (o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
}
//是否对象
function isObj (o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Object'
}
//是否数组
function isArray (o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Array'
}
//是否时间
function isDate (o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Date'
}
//是否boolean
function isBoolean (o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'
}
//是否函数
function isFunction (o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Function'
}
//是否为null
function isNull (o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
}
//是否undefined
function isUndefined (o) {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'
}
 //是否空数组
function isEmptyArray(a){
    return Object.prototype.toString.call(a).slice(8, -1) === 'Array'&amp;&amp;a.length===0;
}
//是否是空字符串
function isEmptyString(s){
    return Object.prototype.toString.call(s).slice(8, -1) === 'String'&amp;&amp;s.length===0;
}

guid生成

1
2
3
4
5
6
function guid() {
    function S4() {
       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    }
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

两种获取节点里的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>;
<html lang="en">;
<head>;
  <meta charset="UTF-8">;
  <title>;获取DOM节点里面的纯内容</title>;
</head>;
<body>;
  <div id="box">;我是DOM节点的文本内容<p>;我是前端<span>;你呢?</span>;一起努力!</p>;好吗?</div>;
</body>;
<script>;
  function $(el){
    return document.querySelector(el);
  }
  function text(e){
    var t="";
    //如果传入的是元素,则继续遍历其子元素
    //否则假定它是一个数组
    e=e.childNodes||e;
    //遍历所有子节点
    for(var j=0;j<e.length;j++){
      //如果不是元素,追加其文本值
      //否则,递归遍历所有元素的子节点
      t+=e[j].nodeType!=1?
      e[j].nodeValue:text(e[j].childNodes);
    }
    //返回区配的文本
    return t;
  }
  function getTetx(str){
    var aText=[];
    str.replace(/\>;(.+?)\</g,function(r1,r2){aText.push(r2)})
    return aText.join('');
  }
  var str='<div id="box">;我是DOM节点的文本内容<p>;我是前端<span>;你呢?</span>;一起努力!</p>;好吗?</div>;';
 
  console.log(getTetx(str));
  console.log(text($('#box')))
</script>;
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
let a='';
let b=undefined;
let c=null;
let d=false;
let e=0;
let f=[];
let j={};

console.log(judge(a))
console.log(judge(b))
console.log(judge(c))
console.log(judge(d))
console.log(judge(e))
console.log(judge(f))
console.log(judge(j))

function judge(o){
    var type=Object.prototype.toString.call(o).slice(8, -1);
    switch(type){
        case 'Undefined':
        return true;
        break;
        case 'Null':
        return true;
        break;
        case 'String':
        return o.length==0?true:false;
        break;
        case 'Array':
        return o.length==0?true:false;
        break;
        case 'Object':
        return Object.getOwnPropertyNames(o).length==0?true:false;
        break;
        case 'Boolean':
        return o===false?true:false;
        break;
        case 'Number':
        return o===0?true:false;
        break;
        default:
        return false;
    }                                                          
}

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
1

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - 原生js版块(方法封装)

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

最近更新

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线