收集的几个不错的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面向对象编程（二）构造函数的继承
这个系列的第一部分，主要介绍了如何"封装"数据和方法，以及如何从原型对象生成实例。
2011-08-08
学习面向对象之面向对象的基本概念:对象和其他基本要素
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010-11-11
JavaScript类和继承 this属性使用说明
本文介绍了JavaScript里面的this属性。这个属性是理解JavaScript类和继承的重要基础。
2010-09-09
js 面向对象的技术创建高级 Web 应用程序
在 C++ 或 C# 中，在谈论对象时，是指类或结构的实例。对象有不同的属性和方法，具体取决于将它们实例化的模板（即类）。
2010-02-02
JavaScript 使用简略语法创建对象的代码
JavaScript 使用简略语法创建对象的代码，需要的朋友可以参考下。
2010-01-01
javascript 写类方式之二
2009-07-07
Javascript面向对象之四继承
继承是面向对象中比不可少的特性，但javascript中并没有继承的概念机制，但我们可以自己来实现这种功能。
2011-02-02
JavaScript 设计模式安全沙箱模式
沙箱模式常见于YUI3 core,它是一种采用同一构造器（Constructor）生成彼此独立且互不干扰（self-contained）的实例对象，而从避免污染全局对象的方法
2010-09-09
javascript 写类方式之五
用构造函数+原型定义一个类；同一构造函数可以定义出多个类型
2009-07-07
javascript面向对象之一定义类
javascript中的类多数是用函数function表示的，当然后来大多采用了json格式的定义。
2011-02-02

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具