Script.aculo.us开发系列(五):Prototype封装的艺术

将自己写的一些东西分装起来是一件很有学问的事情,特别是用javascript这门并不是很支持面向对象的语言,这篇文章将介绍封装上篇文章中提到的那个动画.文章之叫做"Prototype封装的艺术",是因为是利用Prototype这个框架封装自己的类.

可能用到的

首先是原型的概念,原型prototype是区别于Prototype这个框架的,可以利用原型动态的给予类新的方法和属性.

Prototype框架中Function扩展的bind()方法和bindAsEventListener() 方法,他们的使用方法是:functionName.bindAsEventListener(obj) ,其中obj是指向调用该函数的对象,通俗的说,要在函数中使用this.来访问类中的成员就可以使用该方法,同时functionName(oEvent)接受当前的事件对象

<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lib/Effect.MoveAndResizeTo.js"></script>
<script type="text/javascript">
function init()

(希望我写的代码不让大家觉得很难阅读.)

把代码贴出来的原因更多的是我的一些体会,有些开发者可能认为,对与一种效果,在页面中应用就行,没有必要封装成类.其实封装成类的目的一是提高其复用性,还由一个最重要的问题,那就是封装能够存储类中所需要的变量

假如在上述情况中,要在handleTargetMove()中查看isRunning值,除非所有的属性都定义成全局变量,否则在这种处理事件的代码中无法访问到isRunning属性,这也是我先前一直都想开发这个效果的时候一直没有突破的问题.

关于Effect的介绍到这里告一段落,最后送各位一个小礼物,用 Script.aculo.us开发的Accordion