JS库封装改进的简化

原创于 2020-06-16 16:52:41 发布 · 198 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<p>3</p>
		<span id="spa">4</span>
	</body>
	<script type="text/javascript">
		(function(global){
			function jquery(selectors){
				return new jquery.fn.init(selectors);
			}
			//简化优化：给jquery添加一个属性fn
			jquery.fn=jquery.prototype={
				constructor:jquery,
				init:function(selectors){
					var elements=document.querySelectorAll(selectors);
					for(var i=0;i<elements.length;i++){
							this[i]=elements[i];//给this创建属性从0开始的i
						}	
					this.length=elements.length;
				},
				css:function(name,value){
					for(var i=0;i<this.length;i++){
					this[i].style[name]=value;
					}
				}
			}
			//重点：为了让init实例对象访问到css方法
			jquery.fn.init.prototype=jquery.fn;
			//给window对象添加属性$和jquery,并设置值为jquery
			window.$=window.jquery=jquery;
		})(window)
		
		$('div').css('color','red');
		$('#spa').css('color','yellow')
	</script>
</html>