首页 / JAVASCRIPT / prototype 1.5相关知识及他人笔记

prototype 1.5相关知识及他人笔记

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了prototype 1.5相关知识及他人笔记，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10776字，纯文字阅读大概需要16分钟。

内容图文

一直没有没有时间看prototype,现在好了，已经更新到了1.5 pre1,呵呵,强大的功能不得不学习啊,这个是提升自己JS能力的又一个捷径.

1. Prototype是什么?
或许你还没有用过它， prototype.js 是一个由Sam Stephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端，高交互性WEB应用程序的重担。轻松加入Web 2.0特性。

如果你最近体验了这个程序包，你很可能会发现文档并不是它的强项之一。像所有在我之前的开发者一样，我只能一头扎进prototype.js的源代码中并且试验其中的每一个部分。我想当我学习他的时候记写笔记然后分享给其他人将会很不错。

我也一起提供了这个包的对象，类，方法和扩展的非官方参考。

2. 通用性方法
这个程序包里面包含了许多预定义的对象和通用性方法。编写这些方法的明显的目的就是为了减少你大量的重复编码和惯用法。

从Prototype1.5.x版本开始，你可以更方便的如下面代码一样操作DOM对象了:

程序代码

var ele = $("myelement");
ele.hide(); //隐藏DOM对象对比从前的版本var ele = $("myelement");
Element.hide(ele); //隐藏DOM对象

这样的改变有什么益处呢？我觉得一来是更面向对象了，二来就是便于将来IDE里的代码提示。

2.1. 使用 $()方法
$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。

比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。下面的例子会向你描述这些。

程序代码

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.3.1.js"></script>

<script>
function test1()
{
var d = $('myDiv');
alert(d.innerHTML);
}

function test2()
{
var divs = $('myDiv','myOtherDiv');
for(i=0; i<divs.length; i++)
{
alert(divs.innerHTML);
}
}
</script>
</HEAD>

<BODY>
<div id="myDiv">
<p>This is a paragraph</p>
</div>
<div id="myOtherDiv">
<p>This is another paragraph</p>
</div>

<input type="button" value=Test1 onclick="test1();"><br>
<input type="button" value=Test2 onclick="test2();"><br>

</BODY>
</HTML>

这个方法的另一个好处就是你可以传入id字符串或者元素对象自己，这使得在创建可以传入任何形式参数的方法的时候，它变得非常有用。

2.2. 使用$F()方法
$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。这个方法可以传入元素的id或者元素自己。

程序代码

<script>
function test3()
{
alert( $F('userName') );
}
</script>

<input type="text" id="userName" value="Joe Doe"><br>
<input type="button" value=Test3 onclick="test3();"><br>

2.3. 使用Try.these()方法
Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易，他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。

在下面的例子中， xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。使用Try.these()方法我们可以得到正常工作的那个方法的返回值。

程序代码

<script>
function getXmlNodeValue(xmlNode){
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;)
);
}
</script>

3. Ajax 对象
上面提到的共通方法非常好，但是面对它吧，它们不是最高级的那类东西。它们是吗？你很可能自己编写了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。

我很肯定你对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候，这个包如何让它更容易。

Ajax 对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX 功能涉及的狡猾的代码。这个对象包含一系列的封装AJAX逻辑的类。我们来看看它们的一些。

3.1. 使用 Ajax.Request类
如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程，然后解析出响应然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。

为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。

假如你有一个应用程序可以通过url http://yoursever/app/get_sales?empID=1234&year=1998与服务器通信。它返回下面这样的XML 响应。

程序代码

<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
<response type="object" id="productDetails">
<monthly-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-01</year-month>
<sales>$8,115.36</sales>
</employee-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-02</year-month>
<sales>$11,147.51</sales>
</employee-sales>
</monthly-sales>
</response>
</ajax-response>

用 Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。

程序代码

<script>
function searchSales()
{
var empID = $F('lstEmployees');
var y = $F('lstYears');
var url = 'http://yoursever/app/get_sales';
var pars = 'empID=' + empID + '&year=' + y;
var myAjax = new Ajax.Request(
url,
{method: 'get', parameters: pars, onComplete: showResponse}
);

}

function showResponse(originalRequest)
{
//put returned XML in the textarea
$('result').value = originalRequest.responseText;
}
</script>

<select id="lstEmployees" size="10" onchange="searchSales()">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
<option selected="selected" value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<br><textarea id=result cols=60 rows=10 ></textarea>

你看到传入 Ajax.Request构造方法的第二个对象了吗？参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get'的属性，另一个属性名为 parameters 包含HTTP请求的查询字符串，和一个onComplete 属性/方法包含函数showResponse。

还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为true 或 false 来决定AJAX对服务器的调用是否是异步的（默认值是 true）。

这个参数定义AJAX调用的选项。在我们的例子中，在第一个参数通过HTTP GET命令请求那个url，传入了变量 pars包含的查询字符串， Ajax.Request 对象在它完成接收响应的时候将调用showResponse 方法。

也许你知道， XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法，Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。就像我们例子中的 onComplete 。你传入的方法将会被用一个参数调用，这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。

还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法，当AJAX无误的执行完后调用，相反的，也可以在onFailure选项处传入一个方法，当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。

我们的例子没有用任何有趣的方式处理这个 XML响应，我们只是把这段XML放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息，然后更新页面中的某些元素，或者甚至可能做某些XSLT转换而在页面中产生一些HTML。

3.2. 使用 Ajax.Updater 类
如果你的服务器的另一端返回的信息已经是HTML了，那么使用这个程序包中 Ajax.Updater 类将使你的生活变得更加得容易。用它你只需提供哪一个元素需要被AJAX请求返回的HTML填充就可以了，例子比我写说明的更清楚。

程序代码

<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';

var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});

}
</script>

<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>

你可以看到，这段代码比前面的例子更加简洁，不包括 onComplete 方法，但是在构造方法中传入了一个元素id。我们来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。

我们将加入更多的选项，指定处理错误的一个方法。这个是用 onFailure 选项来完成的。

我们也指定了一个 placeholder 只有在成功请求之后才会被填充。为了完成这个目的我们修改了第一个参数从一个简单的元素id到一个带有两个属性的对象， success (一切OK的时候被用到) 和 failure (有地方出问题的时候被用到) 在下面的例子中没有用到failure属性，而仅仅在 onFailure 处使用了 reportError 方法。

程序代码

<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater(
{success: 'placeholder'},
url,
{method: 'get', parameters: pars, onFailure: reportError});

}

function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>

<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>

如果你的服务器逻辑是返回JavaScript 代码而不是单纯的 HTML 标记， Ajax.Updater对象可以执行那段JavaScript代码。为了使这个对象对待响应为JavaScript，你只需在最后参数的对象构造方法中简单加入evalScripts: true属性。
最近做otalk,开始是基于prototype1.4的,后来因为我加上了scriptaculous 1.6.1,她要求prototype的版本是1.5的,所以就升级到了1.5,看着demo学习起了scriptaculous的用法.
用法稍后整理,因为在使用过程中很多次效果都不让自己满意,想看代码又看不明白,经过一次折磨,我下定决心,一定要把scriptaculous和prototype的代码看明白!
这里作为我的学习笔记,可能没有什么顺序了逻辑,等到学习完,最后整理
首先是定义类  看着笑笑老师的一些介绍,自己看是试验起来,往往很多东西看了觉着明白,其实还是差很多的
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
定义了一个class函数作为创建类的模版或者说是原型
使用方法
var llinzzi= Class.create();
llinzzi.prototype = {
    initialize:function(){
          document.write('实例被创建');
    },
    fun1:function(){document.write('方法被实例调用');}
}
var linChild = new llinzzi();
运行,输出'实例被创建'说明initialize是创建实例的时候被调用的
回顾 Class代码中
    return function() {
      this.initialize.apply(this, arguments);
    }
看出,当执行create方法时,就开始调用.
linChild.fun1();
输出'方法被实例调用',fun1方法被成功调用
就是当采用了prototype的Class.create();方法创建对象的时候,initialize作为特殊的方法,在创建实例的时候被执行,用以初始化.
续承
Object.extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}
用法
Object.extend(目标,源);
让我产生奇怪的是scriptaculous中的一段代码
    var options = Object.extend({
      greedy:     true,
      hoverclass: null,
      tree:       false
    }, arguments[1] || {});
既然是定义一个options为什么还要用Object.extend方法
直接
var options ={
      greedy:     true,
      hoverclass: null,
      tree:       false
}
不就行了么?等等,出现问题了.后面还有arguments[1] || {},这应该是目标,目标是函数的参数,分析下,获取参数,如果没有这个参数的时候则为{}就是恐,如果有的话,相比也是{hoverclass:'xx'}的格式,哦,原来定义options也不是这么简单的,先看有没有参数,无论有没有,利用Object.extend方法,把参数中的对象追加或覆盖到前面的{     greedy:     true,      hoverclass: null,      tree:       false}中,如果参数是无,则相当简单的上面的 var options = {};了但,如果参数中有{hoverclass:'abc'}呢?这时候覆盖了原来的hoverclass的值null,然后看Object.extend方法返回值就是第一个参数被覆盖后的全部的值
不得不佩服,一段一句进行定义,同时有设置了默认值.
越看越有意思,继续看下去

内容总结

以上是互联网集市为您收集整理的prototype 1.5相关知识及他人笔记全部内容，希望文章能够帮你解决prototype 1.5相关知识及他人笔记所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/376072.html

来源：【匿名】

【上一篇】飞鱼(shqlsl) javascript作品集【下一篇】javascript 怎么调用php方法

更多 ►

【prototype 1.5相关知识及他人笔记】教程文章相关的互联网学习教程文章

javascript中各类的prototype属性【代码】

prototype作用：获取调用对象的对象原型引用应用：可以为某对象原型添加方法例：function getMax() {var max = this[0];for(var x=0; x<this.length; x++){if(this[x] > max)max = this[x];}return max; } Array.prototype.getMax = getMax;//以后数组使用获取最大值的方法就可以如下调用，例如arr是以个整数数组 arr.getMax();//OK 原文：http://www.cnblogs.com/fantasy01/p/4072581.html

JavaScript——this、constructor、prototype【代码】

thisthis表示当前对象，如果在全局作用范围内使用this，则指代当前页面对象window；如果在函数中使用this，则this指代什么是根据运行时此函数在什么对象上被调用。我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。先看一个在全局作用范围内使用this的例子： <script type="text/javascript">console.log(this === window); // trueconsole.log(window.alert === this.alert); // trueconsole.log(th...

javascript中的prototype详细解释【代码】

本文基于下面几个知识点: 1.在.Net中可以使用clone()来实现原型法原型法的主要思想是，现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。 2.javascript的方法可以分为三类： a 类方法 b 对象方法 c 原型方法例子：functionPeople(name) {this.name=name;//对象方法this.Introduce=function(){alert("My name is "+this.name);} } //类方法 People.Run=function(){alert("I can run"); ...

HTML 学习笔记 JavaScript (prototype)【代码】【图】

原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html原博客的作者是一个非常牛逼的前端大神，我作为一个初学者，在此借助大神的博客进行自己的学习。在这里感谢原作者无私的分享。也强烈建议大家到原作者的博客下学习。好了，现在让我们跟着大神的脚步前进吧。用过JavaScript的人肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都有一个prototype属性，可以为其添加函数供实例访问，其他的...

javascript: prototype【代码】

[ 作者：byeyear Email：east3@163.com 转载请注明 ]古希腊有哲学家认为，在那遥远的虚无之处，人类目光所不能及的地方，有一匹原型马，世间万马皆依此而生。我们有构造函数horse()用于从原型马构造一匹我们能看到、触摸到、骑到的马：function horse() {this.color = ‘red‘;this.height = 80;this.length = 160; }// Now, if you want, you can construct your own horse.// var myHorse = new horse();可以从该构造函数访...

JavaScript学习--Item15 prototype原型和原型链详解【代码】【图】

用过JavaScript的同学们肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都会有一个prototype属性，可以为其添加函数供实例访问，其它的就不清楚了，最近看了一些 JavaScript高级程序设计，终于揭开了其神秘面纱。每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，也就是说将函数用作构造函数调用（使用new操作符调用...

关于JS的prototype(原型)(转载)

最近在自学JS 发现了一个不错的BLOG 里面对JS的语法讲解的比较透彻适合新入门的选手研究一番https://bonsaiden.github.io/JavaScript-Garden原型JavaScript 不包含传统的类继承模型，而是使用 prototype 原型模型。虽然这经常被当作是 JavaScript 的缺点被提及，其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单，但是实现 JavaScript 中的原型继承则要困难的多。 (It is for example fairly trivia...

关于js中object对象的prototype

我们都有一个误区，就是认为形成 Javascript 对象的prototype chain 的 prototype 就是一个名字为 prototype 的属性，而且是可以访问的。其实，Javascript 的 prototype 和名字为 prototype 的属性在一开始一点儿关系都没有，是两个不同的事物。 var Richard = new Object(); alert(typeof(Richard.prototype)); //undefinedvar Richard = new Object(); alert(Richard.__proto__); //[object Object]对于一般对象来说，我们只能...

JavaScript中的prototype属性【代码】【图】

1 <!doctype html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Document</title>6 <script type="text/javascript">7/* 8 每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，也就是说将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。9*/10function employee(n...

js中_proto_ constructor prototype的作用【图】

日常只是使用，对于__proto__,prototype,construct属性知道的总是解释不太清楚，有点糊里糊涂，一知半解，今天理理清楚。js中使用的对象，有函数对象，声明对象，实例化对象。例子代码：funtion Person（）{ }；var p=new Person();1.__proto__和construction是对象所具有的属性，2.prototype是函数所具有的属性，是实例化对象所共有的属性和方法的对象，是实例化对象所共享的对象。因为函数也是一种对象，所以函数也具有__proto_...

javascript中的prototype和constructor

http://www.jb51.net/article/25027.htmhttp://blog.csdn.net/chunqiuwei/article/details/22092551http://developer.51cto.com/art/200907/134913.htm 总结：特别说明：只有构造函数才有prototype属性，而构造函数的实例是没有该属性的，也就是说 console.log(a1.prototype)输出的是undefined。在javascript中，每个函数都自动有一个prototype属性，而不是每一个对象拥有prototype属性原型属性与实例对象的创建与否没有关系，它...

面向对象的JavaScript-006-Function.prototype.bind() 的4种作用【代码】【图】

1. 1// Function.prototype.bind() 的作用 2 3// 1.Creating a bound function 4this.x = 9; 5var module = {6 x: 81,7 getX: function() { returnthis.x; }8 };9 10 console.log(module.getX()); // 81 11 12var retrieveX = module.getX;13 console.log(retrieveX()); 14// 9, because in this case, "this" refers 15// to the global object 16 17// Create a new function with ‘this‘ bound to ...

JavaScript面向对象编程（4）prototype使用案例:内置对象增强【代码】

接上一讲，prototype可以用于动态增强对象，那么有些js的原生类，没有提供我们想要的功能的时候，我们就可以用prototype对其增强。下面是一些具体的案例，希望大家能举一反三：<pre name="code" class="javascript">//检测指定元素是否在数组中 Array.prototype.contains=function(e){for(i in this){if(this[i]===e)return true; }return false; }; //测一测 alert(new Array('a','b').contains('a')); var arr = ['red','yellow'...

JavaScript中的prototype【代码】【图】

1、prototype 在JavaScript中并没有类的概念，但JavaScript中的确可以实现重载，多态，继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。 2、Simple Examplevar Blog = function( name, url ){this.name = name;this.url = url; }; Blog.prototype.jumpurl = ‘‘; Blog.prototype.jump = function(){window.location = this.jumpurl; }; /**等同于 Blog.prototype = {jumpurl : ‘‘,jump : fu...

JavaScript 面向对象 (prototype 原型模式)【代码】【图】

一、 JavaScript 设计思想　　1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。比如，如果网页上有一栏"用户名"要求填写，浏览器就无法判断访问者是否真的填写了，只有让服务器端判断。如果没有填写，服务器端就返回错误，要求用户重新填写，这太浪费时间和服务器资源了。　　因此，网景公司急需一种网...

首页 / JAVASCRIPT / prototype 1.5相关知识及他人笔记

prototype 1.5相关知识及他人笔记

内容导读

内容图文

内容总结

内容备注

内容手机端

【prototype 1.5相关知识及他人笔记】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程