`

Prototype中使用Event和Template

阅读更多

Prototype中使用Event的一个简单的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>使用Event</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<table border="1">
			<tr>
				<td>
					<div>
						<input id="ok" type="button" value="click me!" />
					</div>
				</td>
			</tr>
		</table>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			Event.observe("ok", "click", function(event) {
				alert("是否为左键事件:" + event.isLeftClick());
				alert("事件源:" + event.element().value);
				alert("最近的td元素:" + event.findElement("td").innerHTML);
		
			});
		</script>
	</body>
</html>
 Prototype中使用Template的一个简单例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>使用Template</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			objArr = [ {
				book : 'Struts2',
				author : "sss"
			}, {
				book : 'Java',
				author : "jjj"
			}, {
				book : 'Java EE',
				author : "eee"
			} ]
			var template = new Template("书名是#{book} , 作者是#{author}.");
			for ( var i = 0; i < objArr.length; i++) {
				document.writeln(template.evaluate(objArr[i]) + "<br />");
			}
		</script>
	</body>
</html>
 

分享到:
评论

相关推荐

    prototype.js 1.4版开发者手册

    - `String.prototype.substitute(template, values)` 使用模板字符串替换变量。 - **对象操作**: - `Object.extend(object, properties)` 合并对象属性。 - `Object.toJSON(value)` 将对象转换为 JSON 字符串。 ...

    浅谈vue中$bus的使用和涉及到的问题

    注册了$bus之后,我们就可以在组件中使用`this.$bus`来实现事件的监听和触发。比如,在组件A中触发一个事件,并在组件B中监听这个事件: ```javascript // 组件A this.$bus.$emit('some-event', 'some data'); // ...

    Prototype API Documentation

    以上总结了Prototype 1.6版本中的主要特性和API使用方法。这些功能和方法极大地提高了开发者构建动态Web应用的效率,同时也使得开发过程更加简洁明了。希望本篇介绍能够帮助读者更好地理解和掌握Prototype框架。

    浅谈javascript的原型继承

    在Ext库中,我们看到`Ext.Object.chain`方法,它使用类似的方法实现继承,但有一个额外的步骤:在返回结果之前,清除了`TemplateClass.prototype`,确保没有不必要的引用: ```javascript var ExtObject = Ext....

    uniapp利用天地图做一个地图选点

    只需掌握uniapp的组件使用和天地图的API调用,就可以创建出具有地图选点、定位、搜索等复杂功能的应用。在实际开发中,记得根据项目需求进行性能优化和适配不同平台的特性,以提供最佳的用户体验。

    Vue axios 中提交表单数据(含上传文件)

    在 Vue 中使用 axios 库来提交表单数据是一种常见的做法,尤其是在上传文件时。我们可以使用 FormData 对象来模拟表单提交,并将其作为参数传递给 axios 的 post 方法。通过使用 axios 库,我们可以轻松地处理服务器...

    前端大厂最新面试题-2019快看漫画前端社招面经.docx

    以下是一个使用 JSON.parse 和 JSON.stringify 的简单实现: ```javascript function deepClone(obj) { if (obj === null || typeof obj !== 'object') { return obj; } let clone = new obj.constructor(); ...

    实现TodoList案例

    例如,在TodoList应用中,父组件可能需要向子组件(如TodoItem)传递待办事项的标题和状态。定义prop的方式如下: ```html &lt;template&gt; &lt;todo-item :title="task.title" :done="task.done"&gt;&lt;/todo-item&gt; &lt;/...

    JavaScript实用技巧集锦

    14. **类型检查与转换**:JavaScript是动态类型语言,但`typeof`、`instanceof`和`Object.prototype.toString.call()`等方法可以帮助我们检查和转换变量类型。 15. **CSS操作**:JavaScript可以直接操作DOM改变样式...

    ExtJs 类的设计

    这篇博客文章“ExtJs 类的设计”可能深入探讨了如何在ExtJs中有效地设计和使用类。 1. **类的定义** 在ExtJs中,类通过`Ext.extend()`函数创建。这个函数用于创建子类,并继承父类的属性和方法。例如,你可以定义...

    每个开发者都应该知道的33个JavaScript概念.zip

    31. 模板字符串(Template Strings):使用反引号定义,支持多行和嵌入表达式。 32. 深拷贝和浅拷贝:复制对象时,区分是否包括子对象的引用。 33. 遍历器接口(Iterator Interface):允许对象被遍历,配合for......

    新版设计模式手册 C#版本

    C#中的委托(`Delegate`)和事件(`Event`)机制是命令模式的应用。 16. **解释器模式(Interpreter)**:给定一个语言,定义其文法的一种表示,并且给出一个解释器,这个解释器用于给定表示的实例解释语言中的句子...

    关于数字金额转换为¥的问题.rar

    3. **模板字符串(Template literals)**:使用反引号(`)包围的字符串,可以方便地插入变量并支持多行书写。 以下是一个简单的示例代码,展示了如何将数字金额转换为"¥"格式: ```javascript function ...

    vue面试题,1000+前端面试真题,Html、Css、JavaScript、Vue、React、Node、TypeScript

    - **与Vue的集成**:在Vue项目中使用TypeScript,配置tsconfig.json,类型提示和类型检查。 - **装饰器**:在TypeScript中如何使用装饰器增强元编程能力。 8. **Webpack** - **模块打包**:理解Webpack的模块...

    游戏编程基础测试——测测自己的水平

    函数原型(Function Prototype)在C++中用于声明函数的签名,包括返回类型、函数名和参数列表。理解函数原型对于正确调用函数至关重要。而函数重载(Function Overloading)则允许在同一作用域内定义多个同名函数,...

    javascript API 库函数

    ES6引入的模板字符串(`template literals`)允许使用`${expression}`插入变量或表达式,使得字符串拼接更加方便。 10. **函数编程** JavaScript支持高阶函数,如`Array.prototype.map`、`filter`等,以及闭包、...

    js.zip

    10. **模块化(Modularity)**:通过CommonJS(Node.js中使用)、AMD(RequireJS中使用)和ES6的`import`和`export`语法,JavaScript实现了代码的模块化,提高了代码的可复用性和组织性。 11. **事件和事件处理...

    JDK中有关23个经典设计模式的示例

    `java.awt.event.ActionEvent`和`java.awt.event.ActionListener`作为事件和事件监听器之间的中介。 20. 备忘录模式(Memento):在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。`...

    你可能不知道的前端知识点

    模板字符串使用反引号(``)表示,支持内联表达式,使字符串拼接更加简洁和易读。 9. **深浅拷贝(Depth Copy vs Shallow Copy)** 在处理对象和数组时,了解如何进行深拷贝和浅拷贝非常重要,这直接影响到数据的独立...

    C#23种开发模式实例

    C#中,Event和Delegate是实现方式。 13. 模板方法模式(Template Method Pattern):在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中。使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤...

Global site tag (gtag.js) - Google Analytics