JavaScript - 测试 Prototype

简介: JavaScript - 测试 Prototype

测试 JavaScript 框架库 - Prototype


引用 Prototype

如需测试 JavaScript 库,您需要在网页中引用它。

为了引用某个库,请使用 <script> 标签,其 src 属性设置为库的 URL:

引用 Prototype

<!DOCTYPE html><html><head><scriptsrc="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js"></script></head><body></body></html>



Prototype 描述

Prototype 提供的函数可使 HTML DOM 编程更容易。

与 jQuery 类似,Prototype 也有自己的 $() 函数。

$() 函数接受 HTML DOM 元素的 id 值(或 DOM 元素),并会向 DOM 对象添加新的功能。

与 jQuery 不同,Prototype 没有用以取代 window.onload() 的 ready() 方法。相反,Prototype 会向浏览器及 HTML DOM 添加扩展。

在 JavaScript 中,您可以分配一个函数以处理窗口加载事件:

JavaScript 方式:

function myFunction(){    var obj=document.getElementById("h01");     obj.innerHTML="Hello Prototype";}onload=myFunction;

等价的 Prototype 是不同的:

Prototype 方式:

function myFunction(){    $("h01").insert("Hello Prototype!");}Event.observe(window,"load",myFunction);

Event.observe() 接受三个参数:

  • 您希望处理的 HTML DOM 或 BOM(浏览器对象模型)对象
  • 您希望处理的事件
  • 您希望调用的函数

测试 Prototype

请试一下下面这个例子:

Example

<!DOCTYPE html> <html> <script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js"> </script> <script>function myFunction(){    $("h01").insert("Hello Prototype!");}Event.observe(window,"load",myFunction); </script> </head> <body> <h1 id="h01"></h1> </body> </html>


尝试一下 »

请再试一下这个例子:

Example

<!DOCTYPE html> <html> <script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js"> </script> <script>function myFunction(){    $("h01").writeAttribute("style","color:red").insert("Hello Prototype!");}Event.observe(window,"load",myFunction); </script> </head> <body> <h1 id="h01"></h1> </body> </html>


测试一下 »

正如您在上面的例子中看到的,与 jQuery 相同,Prototype 允许链式语法。

链接(Chaining)是一种在同一对象上执行多个任务的便捷方法。

目录
相关文章
|
14天前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
1天前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
4 0
|
11天前
|
JavaScript 前端开发
JavaScript prototype(原型对象)
JavaScript prototype(原型对象)
18 0
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-原型(prototype)
关于JavaScript基础知识中原型(prototype)概念的介绍。
29 1
|
2月前
|
Web App开发 应用服务中间件 定位技术
three.js:三维模型加载量测试
three.js:三维模型加载量测试
|
2月前
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
49 0
|
2月前
|
JavaScript 前端开发 应用服务中间件
【qkl】JavaScript连接web3钱包,实现测试网络中的 Sepolia ETH余额查询、转账功能
【区块链】JavaScript连接web3钱包,实现测试网络中的 Sepolia ETH余额查询、转账功能
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的高中信息技术课程在线测试系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的高中信息技术课程在线测试系统附带文章和源代码部署视频讲解等
42 6
|
4月前
|
前端开发 JavaScript 算法
JavaScript事件监听测试代码
JavaScript事件监听测试代码
27 0
|
5月前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
48 2