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

来源：互联网发布：iptv网络电视怎么更新编辑：程序博客网时间：2024/05/21 14:40

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>

0 0