读Ext消息机制有感之简单仿写（一）-CSDN博客

本文链接：https://blog.csdn.net/stray_ll/article/details/45271957

Ext实现太过复杂，有太多自己的封装，个人感觉给组件绑定事件监听，就是window.addEventListener 或者是window.attachListener。这这两个方法。现阶段自身采用通过读Ext源码来学习js的应用，下面的一些封装是对之前学习到的内容进行一次实战

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
<script type="text/javascript">
Ext = {version: '1.1'};
Ext.cacheEl = {};
/**
	@param element: 原生element元素 或者是String类型的id
	如果是new function创建的对象或者{}类型的，都是返回ture
*/
Ext.isObject = function(obj) {
	return Object.prototype.toString.call(obj) == '[object Object]'? true : false;
}
/**
	@param source 源
	@param target 目标，这里的数据拷贝到source的prototype上
	target可以是fucntion 创建的对象，也可以是{}类型
*/
Ext.apply = function(source,target) {
	var _proto = source.prototype;
	if(Ext.isObject(target)) {
		for(var el in target) {
			_proto[el] = target[el]; 
		}
	}
	return source;
}
Ext.Element = function(element) {   
	element = typeof element == 'string'? document.getElementById(element) : element;
	if(!element) {
		return null;
	}
	var idEl = element.id;
	if(idEl && !Ext.cacheEl[idEl]) {
		Ext.Element.toAddCache(element);
	}
	this.dom = element;
	this.id = idEl;
}
Ext.Manager = function() {
	//定义其他方法供返回对象里面的方法调用
	return {
		addLister: function(event,actor,scope) {
			var dom = Ext.cacheEl[scope.id].el; //这里其实可以直接用scope.dom或者由上边个参数进来，为了使用Ext.cacheEl,所以这么写
			if(window.addEventListener) {
				dom.addEventListener(event, actor);
			}else{
				if(window.attachEvent) {
					dom.attachEvent('on' + event, actor);
				}
			}
		}
	};
}();
Ext.apply(Ext.Element,{
	addListener: function(event,fn) {  //addListener('click',function(){})
		var scope = this;
		var idEl = scope.id;
		var eventEl = Ext.cacheEl[idEl].events;
		eventEl[event] = [fn];
		function actor(event) {
			//这里Ext可以将event封装成自身的消息对象
			fn.apply(this);        //执行相应函数，在这里可以定义一些参数，供使用者在编写相应方法时候调用
		}
		Ext.Manager.addLister(event,actor,scope);
	}
});

/**
	@param element: 原生element元素
*/
Ext.Element.toAddCache = function(element) {
	var obj = {
		el: element,
		data: [],
		events: []
	}
	Ext.cacheEl[element.id] = obj;
}
/**
	定义几个将原生dom封装成Ext自定义的Element元素
*/
Ext.get = Ext.find = function(element) {
	element = new Ext.Element(element);
	return element;
}
window.onload = function() {
	Ext.get('logonbox').addListener('click', function(){
		alert('响应点击事件');
	
	});
}
</script>
</head>
<body>
<div id='logonbox' >点击按钮</div>
</body>
</html>