原生js版块(方法封装)

2018-11-18 分类：JavaScript 作者：管理员阅读（1076）

如果项目中有些简单的页面需要某些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

设置DOM的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

绑定和移出事件

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

严格身份证号验证

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 < 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'&&a.length===0;
}
//是否是空字符串
function isEmptyString(s){
return Object.prototype.toString.call(s).slice(8, -1) === 'String'&&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;
}
}

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

赞(2) 打赏