收集的几个不错的javascript类小例子

更新时间：2007年12月27日 21:51:31 作者：

自己比较喜欢javascript类，主要是方便扩展。

具体功能运行后看效果

<img id=img1 style="height:100;width:100;"></img> <button onclick="img1.onclick.AddFunction(f1)">添加f1</button><button onclick="img1.onclick.AddFunction(f2)">添加f2</button><button onclick="img1.onclick.AddFunction(f3)">添加f3</button> <button onclick="img1.onclick.RemoveFunction(f1)">移除f1</button><button onclick="img1.onclick.RemoveFunction(f2)">移除f2</button><button onclick="img1.onclick.RemoveFunction(f3)">移除f3</button> <div id=output></div> <SCRIPT LANGUAGE="JavaScript"> function FunctionArray() {     var functions=new Array();     var FA=function (){                 for(var i=0;i<functions.length;i++){             if(functions[i] instanceof Function)functions[i]();         }     }     FA.AddFunction=function(newFunction){         if(newFunction instanceof Function)         {             for(var i=0;i<functions.length;i++){                 if(functions[i]==newFunction)return;             }             functions.push(newFunction);         }     }     FA.RemoveFunction=function(theFunction){         for(var i=0;i<functions.length;i++){             if(functions[i]==theFunction)functions.splice(i,1);         }             }     return FA; } img1.onclick=FunctionArray(); function f1() {     output.innerHTML+="f1 runs!!"; } function f2() {     output.innerHTML+="f2 runs!!"; } function f3() {     output.innerHTML+="f3 runs!!"; } </SCRIPT>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

顺便贴上winter以前写的东西
winte有空的时候快来帮我加点注释
我加不动了……

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

一个功能更强大的

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>新建网页 1</title> <script language="javascript"> if(typeof asfman == "undefined") asfman = {}; //through below method dispath events should note:addEventListener's eventType should not conflict with method asfman.onMethodExecute = function(obj,method,eventType,beforeMethod,evt) {     var old = obj[method] || function(){};     evt = evt || {};     obj[method] = function()     {         evt.arguments = arguments;         beforeMethod && this.dispatchEvent(eventType,evt);         old.apply(this,arguments);         beforeMethod || this.dispatchEvent(eventType,evt);     } } asfman.EventManager = function() {     this.dispatchEvent = function(eventType, eventArgs)     {         eventArgs = eventArgs || {};         var events = this["on"+eventType];         var called = 0;         if(events && typeof(events) == "function") events = [events];         if(!eventArgs.type) eventArgs.type = eventType;                  if(events)         {             var len=events.length;             var capturer=events.capturer;             var capturerName=events.capturerName;             var evt;             for(var i=0;i<len;i++)             {                 evt = events[i];                 called++;                 evt.call(this,eventArgs);                 if(!eventArgs.cancelBubble && called == len && capturer && capturerName && capturer[capturerName])                 {                 //if eventArgs.cancelBubble is not set true and..,run the capturer function                     capturer[capturerName](eventArgs);                 }                 if(called == len && eventArgs.defaultOp)                  {                 //if exists the defaultOp function ,run it                     eventArgs.defaultOp.call(this, eventArgs);                 }                         }         }         else if(eventArgs.defaultOp)         {             eventArgs.defaultOp.call(this, eventArgs);         }     }          this.captureEvents = function(target, eventType, capturerName, closure)     {         if(typeof capturerName == "function")         {             closure = capturerName;             capturerName = null;         }         capturerName = capturerName || "on" + eventType;                  target["on"+eventType] = target["on"+eventType] || [function(){}];         var events = target["on"+eventType];         if(typeof(events) == "function")         {             target["on"+eventType] = [events];         }                  target["on"+eventType].capturer = this;         target["on"+eventType].capturerName = capturerName;         if(closure)    this[capturerName] = closure;     }     this.addEventListener = function(eventType, closure)     {         if(this["on"+eventType] == null)         {             this["on"+eventType] = [];         }         var events = this["on"+eventType];         if(events && typeof(events) == "function"){             this["on"+eventType] = [events];                     events = this["on"+eventType];         }         events.push(closure);         return closure;     }     this.removeEventListener = function(eventType, closure)     {         var events = this["on"+eventType];         if(events && typeof(events) == "function")             events = [events];                          for(var i = 0; i < events.length; i++)         {             if(events[i] == closure) events.splice(i, 1);         }         return closure;     } } </script> </head> <body> <div id="test" style="border:1px double red;width:100px;height:55px;" onclick="alert('first')">click on me</div> <div id="test2" onclick='alert("second")' style="border:1px double red;margin:10px;width:200px;height:100px;"></div> <script> var obj1 = document.getElementById("test"),obj2 = document.getElementById("test2"); asfman.EventManager.call(obj1); obj1.addEventListener("test",function(){obj2.innerText = " test ";}); obj1.addEventListener("test",function(){alert("test");}); asfman.onMethodExecute(obj1,"onclick","test"); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript类

JavaScript 面向对象之命名空间
如果写一堆function难免会出现变量或函数的命名冲突，应用了命名空间这种情况就从此杜绝了，而且代码易于管理。
2010-05-05
javascript 面向对象,实现namespace,class,继承，重载
这几天老大天天嚷嚷要重构我们写的javascript,抱怨代码太混乱，可读性差，维护困难，要求javascript也按面对象的模型来重构。
2009-10-10
一个简单的javascript类定义例子
涵盖了javascript公有成员定义、私有成员定义、特权方法定义的简单示例
2009-09-09
浅谈javascript 面向对象编程
这周心血来潮，翻看了现在比较流行的几个JS脚本框架的底层代码，虽然是走马观花，但也受益良多，感叹先人们的伟大……
2009-10-10
JavaScript面向对象之Prototypes和继承
本文翻译自微软的牛人Scott Allen Prototypes and Inheritance in JavaScript ,本文对到底什么是Prototype和为什么通过Prototype能实现继承做了详细的分析和阐述，是理解JS OO 的佳作之一
2012-07-07
javascript 写类方式之六
这篇开始会分析流行的js库之写类方式。各种库的写类方式虽然千奇百怪，但仍然逃离不了本质---用构造函数和原型来组装类。
2009-07-07
js面向对象设计用{}好还是function(){}好(构造函数)
js面向对象设计用{}好还是function(){}好,大家给予了回复，感觉不错，特分享给大家。
2011-10-10
javascript 单例模式演示代码 javascript面向对象编程
单例模式的好处就是:类只实例化一次,省资源,节省开销,提高速度，学习js面向对象编程的朋友可以参考下。
2010-04-04
javascript 面向对象的JavaScript类
这一节来说下紧接着的一个概念——类。虽然JavaScript中没有class关键字，但作为开发人员我们一定要有这个思想。在C#中类可以分为实例类和静态类，JavaScript亦然。
2010-05-05
javascript 写类方式之二
2009-07-07