位置：首页>> 网络编程>> JavaScript>> Ext2.0.2经典的一个JS组件（带EXT中文手册）（3）

Ext2.0.2经典的一个JS组件（带EXT中文手册）（3）

作者：姚海啸　来源：Yaohaixiao’s Blog　发布时间：2009-04-13 12:24:00　

标签：手册,ext2.0,组件,JavaScript

MessageBox

比起略为沉闷的“HelloWolrd”消息窗口，我们做少许变化，前面我们写的代码是，单击某个段落便会高亮显示，现在是单击段落，在消息窗口中显示段落内容出来。

在上面的paragraphClicked的function中，将这行代码：

Ext.get(e.target).highlight();

替换为：

var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: ‘Paragraph Clicked’,
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});

这里有些新的概念需要讨论一下。在第一行中我们创建了一个局部变量（Local Variable）来保存某个元素的引用，即被单击的那个DOM节点（本例中，DOM节点指的是段落paragrah,事因我们已经定义该事件与< p>标签发生关联的了）。为什么要这样做呢？嗯…观察上面的代码，我们需要引用同一元素来高亮显示，在MessageBox中也是引用同一元素作为参数使用。

一般来说，多次重复使用同一值（Value）或对象，是一个不好的方式，所以，作为一个具备良好OO思维的开发者，应该是将其分配到一个局部变量中，反复使用这变量！

现在，为了我们接下来阐述新概念的演示，请观察MessageBox的调用。乍一看，这像一连串的参数传入到方法中，但仔细看，这是一个非常特别的语法。实际上，传入到MessageBox.show的只有一个参数：一个Object literal,包含一组属性和属性值。在Javascript中，Object Literal是动态的，你可在任何时候用{和}创建一个典型的对象(object)。其中的字符由一系列的name/value组成的属性，属性的格式是[property name]:[property value]。在整个Ext中，你将会经常遇到这种语法，因此你应该马上消化并吸收这个知识点！

使用Object Literal的原因是什么呢？主要的原因是“可伸缩性（flexibility）”的考虑”，随时可新增、删除属性，亦可不管顺序地插入。而方法不需要改变。这也是多个参数的情况下，为最终开发者带来不少的方便（本例中的MessageBox.show())。例如，我们说这儿的foo.action方法，有四个参数，而只有一个是你必须传入的。本例中，你想像中的代码可能会是这样的foo.action(null, null, null, ‘hello’).,若果那方法用Object Literal来写，却是这样， foo.action({ param4: ‘hello’ })，这更易用和易读。

第一页上一页 1 2

4 5 下一页

投稿

Ext2.0.2经典的一个JS组件（带EXT中文手册）（3）

猜你喜欢