原生JavaScript框架设计（一）：整合JS函数

本篇为回顾js时总结，诣在整理JS中常用知识点，剖析其规律。
模仿jQuery，简单一些，特定功能，像apply函数、getElementXXX函数等浏览器函数都没有实现，直接套用。

创建 common.js ：

//自定义实现push函数
var myPush=function(target,els){
	var j=target.length,
		i=0;
	while((target[j++]=els[i++])){}
	target.length=j-1;
};

var getTag=function(tag,context,results=[]){
	//处理“IE中push和apply连用会报错”的问题——用自定义push函数
	try{
		results.push.apply(results,context.getElementsByTagName(tag))
	}catch(e){
		myPush(results,context.getElementsByTagName(tag))
	}
	return results;
};

var getId=function(id,results=[]){
	results.push(document.getElementById(id));
	return results;
};

var getClass=function(className,context,results=[]){
	//关于class，有两种形式：1、attribute；2、直接属性
	if(document.getElementsByClassName){
		results.push.apply(results,context.getElementsByClassName(className))
	}else{
		each(getTag('*',context),function(i,v){
			if((' '+v.className+' ').indexOf(' '+className+' ')!==-1){
				results.push(v);
			}else{
				return false;
			}
		});
	}
	return results;
};

//自定义实现each函数
var each=function(arr,fn){
	for(var i=0;i<arr.length;i++){
		if(fn.call(arr[i],i,arr[i])===false){
			break;
		}
	}
};

//通用的方法——被调用的函数
var get=function(selector,context=document,results=[]){
	var requickExpr=/^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
		m=requickExpr.exec(selector);
	if(m){
		//将元素节点变为“数组形式”集合
		if(context.nodeType){context=[context]};
		//如果元素是字符串形式，那么就先将其相关的所有节点的“数组”取出来（递归）
		if(typeof context==='string'){
			context=get(context);
		}
		each(context,function(i,v){
			if(m[1]){
				results=getId(m[1],results);
			}else if(m[2]){
				results=getClass(m[2],context,results);
			}if(m[3]){
				results=getTag(m[3],context,results);
			}if(m[4]){
				results=getTag(m[4],context,results);
			}
		});
	}
	return results;
}

使用时，先将common.js导入：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>改变元素样式</title>
		<script src="./common.js"></script>
	</head>
	<body>
		<div class="c3">
			<div class="c rect"></div>
		</div>
		<div class="c3">
			<div class="c1 rect"></div>
			<div class="c rect"></div>
		</div>
		<script>
			each(get('.c','.c3'),function(){
				this.style.backgroundColor='pink';
			});
			
			//也可以这样：
			each(get('.c',get('.c3')),function(){
				this.style.backgroundColor='red';
			});
			
			//或者：
			get('.c',get('.c3')).style.backgroundColor='green';
		</script>
	</body>
</html>

云风清

发布了195 篇原创文章 · 获赞 391 · 访问量 5万+

私信关注

原生JavaScript框架设计（一）：整合JS函数

猜你喜欢