- 浏览: 1334389 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (471)
- 原创文章 (4)
- Database (84)
- J2SE (63)
- Web (26)
- Javascript (30)
- Lucene (11)
- os (13)
- 算法 (8)
- Webservice (1)
- Open projects (18)
- Hibernate (18)
- Spring (15)
- Css (2)
- J2ee (2)
- 综合技术 (18)
- 安全管理 (13)
- PatternsInJava (27)
- NIO (5)
- Ibatis (2)
- 书籍收藏 (1)
- quartz (7)
- 并发编程 (15)
- oracle问题 (2)
- ios (60)
- coco2d-iphone (3)
- C++ (6)
- Zookeeper (2)
- golang (4)
- animation (2)
- android (1)
最新评论
-
dandingge123:
【引用】限制UITextField输入长度的方法 -
qja:
...
对List顺序,逆序,随机排列实例代码 -
安静听歌:
现在在搞这个,,,,,哎~头都大了,,,又freemarker ...
通用大型网站页面静态化解决方案(一) -
springdata-jpa:
java quartz定时任务demo教程源代码下载,地址:h ...
Quartz 配置参考 -
马清天:
[b][/b][list][*]引用[u][/u][/list ...
通用大型网站页面静态化解决方案(一)
prototype
是在 IE 4 及其以后版本引入的一个针对于某一类的对象
的方法,而且特殊的地方便在于:它是一个给类的对象添加方法的方法!这一点可能听起来会有点乱,别急,下面我便通过实例对这一特殊的方法作已下讲解:
首先,我们要先了解一下类的概念,JavaScript 本身是一种面向对象的语言,它所涉及的元素根据其属性的不同都依附于某一个特定的类。我们所常见的类包括:数组
变量
(Array)、逻辑变量 (Boolean)、日期
变量(Date)、结构变量(Function)、数值变量(Number)、对象变量(Object)、字符串
变量 (String) 等,而相关的类的方法,也是程序员经常用到的(在这里要区分一下类的注意和属性发方法),例如数组的push方法、日期的get系列方法、字符串的 split
方法等等,
但是在实际的编程过程中不知道有没有感觉到现有方法的不足?prototype 方法应运而生!下面,将通过实例由浅入深讲解 prototype 的具体使用方法:
1、最简单的例子,了解 prototype:
(1) Number.add(num):作用,数字相加
实现方法:Number.prototype.add = function(num){return(this+num);}
试验:alert((3).add(15)) -> 显示 18
(2) Boolean.rev(): 作用,布尔变量取反
实现方法:Boolean.prototype.rev = function(){return(!this);}
试验:alert((true).rev()) -> 显示 false
是不是很简单?这一节仅仅是告诉读者又这么一种方法,这种方法是这样运用的。
2、已有方法的实现和增强,初识 prototype:
(1) Array.push(new_element)
作用:在数组末尾加入一个新的元素
实现方法:
Array.prototype.push = function(new_element){
this[this.length]=new_element;
return this.length;
}
让我们进一步来增强他,让他可以一次增加多个元素!
实现方法:
Array.prototype.pushPro = function() {
var currentLength = this.length;
for (var i = 0; i < arguments.length; i++) {
this[currentLength + i] = arguments[i];
}
return this.length;
}
应该不难看懂吧?以此类推,你可以考虑一下如何通过增强 Array.pop 来实现删除任意位置,任意多个元素(具体代码就不再细说了)
(2) String.length
作用:这实际上是 String 类的一个属性,但是由于 JavaScript 将全角、半角均视为是一个字符,在一些实际运用中可能会造成一定的问题,现在我们通过 prototype 来弥补这部不足。
实现方法:
String.prototype.cnLength = function(){
var arr=this.match(/[^\x00-\xff]/ig);
return this.length+(arr==null?0:arr.length);
}
试验:alert("EaseWe空间Spaces".cnLength()) -> 显示 16
这里用到了一些正则表达式
的方法和全角字符的编码原理,由于属于另两个比较大的类别,本文不加说明,请参考相关材料。
3、新功能的实现,深入 prototype:在实际编程中所用到的肯定不只是已有方法的增强,更多的实行的功能的要求,下面我就举两个用 prototype 解决实际问题的例子:
(1) String.left()
问题:用过 vb
的应该都知道left函数
,从字符串左边取 n 个字符,但是不足是将全角、半角均视为是一个字符,造成在中英文混排的版面中不能截取
等长的字符串
作用:从字符串左边截取 n 个字符,并支持全角半角字符的区分
实现方法:
String.prototype.left = function(num,mode){
if(!/\d+/.test(num))return(this);
var str = this.substr(0,num);
if(!mode) return str;
var n = str.Tlength() - str.length;
num = num - parseInt(n/2);
return this.substr(0,num);
}
试验:
alert("EaseWe空间Spaces".left(8)) -> 显示 EaseWe空间
alert("EaseWe空间Spaces".left(8,true)) -> 显示 EaseWe空
本方法用到了上面所提到的String.Tlength()方法,自定义方法之间也能组合出一些不错的新方法呀!
(2) Date.DayDiff()
作用:计算出两个日期型变量的间隔时间(年、月、日、周)
实现方法:
Date.prototype.DayDiff = function(cDate,mode){
try{
cDate.getYear();
}catch(e){
return(0);
}
var base =60*60*24*1000;
var result = Math.abs(this - cDate);
switch(mode){
case "y":
result/=base*365;
break;
case "m":
result/=base*365/12;
break;
case "w":
result/=base*7;
break;
default:
result/=base;
break;
}
return(Math.floor(result));
}
试验:alert((new Date()).DayDiff((new Date(2002,0,1)))) -> 显示 329
alert((new Date()).DayDiff((new Date(2002,0,1)),"m")) -> 显示 10
当然,也可以进一步扩充,得出响应的小时、分钟,甚至是秒。
(3) Number.fact()
作用:某一数字的阶乘
实现方法:
Number.prototype.fact=function(){
var num = Math.floor(this);
if(num<0)return NaN;
if(num==0 || num==1)
return 1;
else
return (num*(num-1).fact());
}
试验:alert((4).fact()) -> 显示 24
这个方法主要是说明了递归的方法在 prototype 方法中也是可行的!
发表评论
-
教你实现 jQuery 的选择器
2010-12-05 21:08 6520做网站免不了用到JS,如果大量用到选择一个JS框架是个不错的选 ... -
关闭输入框自动完成 firefox msie disable input autocomplete
2010-10-28 10:43 3129English Title:Shut input casing ... -
jquery source
2010-10-20 15:03 1234http://tech.ddvip.com/2009-01/1 ... -
使用 JavaScript 拦截和跟踪浏览器中的 HTTP 请求
2010-10-20 14:10 3819HTTP 请求的拦截技术可以广泛地应用在反向代理、拦截 Aja ... -
监听输入框值的即时变
2010-10-20 12:34 1641写道 <html> <head> ... -
判断上传文件的大小
2010-10-19 12:44 1364var Sys = {}; if ... -
js继承的实现
2010-10-19 11:16 1148写道 js继承有5种实现方式: 1、继承第一种方式:对象 ... -
js面向对象
2010-10-19 11:15 2570写道 1、js区别于java的特性还有:实例化类对象时,如 ... -
js高级进阶
2010-10-19 11:14 8165写道 1、js不支持函数(方法)的重载 2、js中,一个 ... -
jQuery 简但实现select二级联动
2010-08-23 12:09 4766写道 < !DOCTYPE html PUBLIC ... -
原始的Ajax 直接使用XmlHttpRequest
2010-08-23 11:29 1906写道 //定义XMLHttp实例 var xmlHttp ... -
jquery checkbox,radio ,select value
2010-08-12 10:01 1683写道 .date-region select:visi ... -
jquery flot 使用笔记
2010-06-27 00:57 5811写道 <!DOCTYPE HTML PUBLIC &q ... -
js clone
2010-05-13 13:50 1285<!DOCTYPE html PUBLIC &q ... -
javascript可以轻松操作客户端剪贴板内容
2010-04-19 12:29 1362写道 <html> <head> ... -
dhtml
2010-04-09 10:18 2377写道 Object.__defineGetter__ = ... -
MzTreeView
2010-03-24 16:05 5668写道 MzTreeView 1.0 是数据一次性加载,客户 ... -
JavaScript 节点操作 以及DOMDocument属性和方法
2010-03-24 15:28 16261Attributes 存储节点的属 ... -
在网页里打开本地的驱动器
2010-03-24 12:14 1597<html> <head> < ... -
页面登录进度条
2010-03-24 12:13 1625<form name=loading> < ...
相关推荐
### JavaScript中的Prototype用法详解 #### 一、引言 在JavaScript中,`prototype`是一个非常重要的概念,尤其是在面向对象编程(OOP)方面。通过理解并掌握`prototype`的使用,开发者可以更加灵活地扩展对象的功能,...
### JS:prototype用法详解 #### 一、概念解析与基本使用 `prototype`是JavaScript中一个非常重要的概念,尤其自IE4及其后续版本引入以来,成为开发人员扩展内置对象功能的强大工具。`prototype`主要服务于面向...
Prototype.js 是一个强大的JavaScript类库,它为开发者提供了丰富的功能,使得创建具有高度互动性和Web2.0特性的富客户端页面变得更为简单。这个库的设计理念是扩展JavaScript的基础对象,提供一套统一且易于使用的...
JavaScript中的`prototype`是语言核心概念之一,它在对象创建、继承和方法共享中起着关键作用。在JavaScript中,每个对象都有一个`prototype`属性,这个属性引用了一个对象,通常用于实现对象间的继承。理解`...
在JavaScript编程中,prototype是面向对象编程的一个重要概念。Prototype是给构造函数的原型对象添加属性或方法,使该构造函数创建的所有实例都能共享这些属性或方法。在IE4及后续版本中开始支持prototype属性,它...
在 JavaScript 中,可以使用 prototype 来扩展对象的方法和属性,从而实现对象的扩展和继承。 ### 克隆对象 prototype 还可以用来实现对象的克隆。例如,可以使用 prototype 来实现对象的深拷贝。将对象的 ...
Prototype是JavaScript库,它为浏览器...而源代码文件`prototype-1.6.0.3.js`则让你可以直接在项目中应用或研究Prototype的实现。对于前端开发者而言,掌握Prototype能提升开发效率,同时增强网页的交互性和动态性。
《prototype_1.7.3.js:JavaScript框架的里程碑》 在JavaScript的世界里,Prototype库是一个不可或缺的重要组成部分,尤其在Web开发领域,它为开发者提供了强大的功能和便利性。Prototype_1.7.3.js是这个库的一个...
Prototype JavaScript 框架是Web开发中的一个关键工具,...通过深入学习Prototype 1.6中文手册,并结合源码阅读,开发者不仅可以熟练掌握Prototype的用法,还能对JavaScript有更深入的理解,从而在实际项目中游刃有余。
它在Web开发中扮演着重要的角色,尤其在AJAX(异步JavaScript和XML)应用中,Prototype.js 提供了丰富的功能和工具,使得开发者能更高效地编写JavaScript代码。 ### 一、Prototype.js核心特性 1. **DOM操作**:...
Prototype是一个由Sam Stephenson编写的JavaScript库,它提供了一套简洁、高效且易于使用的API来简化Web应用开发过程中的许多常见任务。该库专注于简化DOM操作、事件处理、AJAX调用等Web 2.0应用的核心功能。由于其...
- **扩展JavaScript对象**:Prototype.js提供了一系列方法,如`extend`和`merge`,用于方便地合并和扩展对象属性,使得代码更加简洁和可维护。 - **DOM操作**:Prototype.js封装了对DOM元素的操作,比如`Element`类...
在JavaScript中,每个函数都有一个`prototype`属性,这个属性实际上是一个对象,它定义了该函数作为构造函数时,新创建的对象将继承的属性和方法。当创建一个新对象时,它的`__proto__`属性会指向构造函数的`...
通过阅读Prototype.js 1.6的中文和英文手册,开发者可以深入了解其用法和背后的原理,提高JavaScript编程效率,创建更具交互性和动态性的网页应用。"prototypeAPI"这个文件可能包含了Prototype.js的API参考文档,是...
在prototype.js 1.4版本中,用户可以查找特定的方法、属性和类,了解其用法和参数。这对于学习和使用该库非常有帮助。 3. **Noname1.html** - 这可能是一个示例或测试页面,用于展示如何在实际项目中使用prototype....
本文将深入探讨JavaScript中的类和继承,并结合`prototype.js`文件中的示例进行解析。 ### 类的概念与模拟 在JavaScript中,我们通常使用函数来模拟类的行为。一个函数可以看作是一个类的定义,通过`new`关键字来...
3. **原型对象的方法**:JavaScript中的`prototype`对象有一些内置方法,如`hasOwnProperty()`用于检查属性是否属于当前对象而不是原型链,`isPrototypeOf()`用来判断对象是否存在于原型链上,以及`toString()`等。...
以上就是关于`prototype.js`文件的基本介绍和使用方法。通过这个库,你可以更高效地进行JavaScript编程,实现丰富的Web交互功能。记得结合`prototype.js`开发手册,深入学习并熟练掌握其各种用法,提升你的...
Prototype.js 是一个广泛使用的 JavaScript 库,它为浏览器环境提供了许多实用的功能,尤其是在对象操作和事件处理方面。1.6 版本是该库的一个重要里程碑,引入了许多改进和优化,使得开发人员能够更加高效地编写 ...
《Prototype开发者手册(中文版)》是一本专为JavaScript开发者准备的重要参考资料,它详细介绍了Prototype JavaScript框架的使用方法和核心概念。Prototype是一个广泛使用的开源JavaScript库,它的目标是简化...