`
lzkyo
  • 浏览: 466728 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js之自定义对象/URI编码

阅读更多
一、定义对象
1.对象初始化器方式
格式:objectName = {property1:value1, property2:value2,…, propertyN:valueN}
property是对象的属性,value则是对象的值,值可以是字符串、数字或对象三者之一
例如:
Js代码 复制代码
  1. var user={name:“user1”,age:18};   
  2. var user={name:“user1”,job:{salary:3000,title:programmer}  
var user={name:“user1”,age:18};
var user={name:“user1”,job:{salary:3000,title:programmer}
以这种方式也可以初始化对象的方法,例如:
Js代码 复制代码
  1. var user={name:“user1”,age:18,getName:function(){return this.name;}             
  2. }  
var user={name:“user1”,age:18,getName:function(){return this.name;}          
}

2.工厂函数(factory function)方式
例如:
Js代码 复制代码
  1. //每个对象都共享了同一个函数。   
  2. function showColor(){   
  3.     alert(this.color);   
  4. }   
  5.   
  6. function createCar(sColor,iDoors){   
  7.     var oTemp = new Object;//对象的属性可在对象创建后动态定义   
  8.     oTemp.color = sColor;   
  9.     oTemp.doors = iDoors;   
  10.     oTemp.showColor = showColor;   
  11.     return oTemp;   
  12. }   
  13.   
  14. var oCar1 = createCar("red",4);   
  15. var oCar2 = createCar("blue",3);  
//每个对象都共享了同一个函数。
function showColor(){
    alert(this.color);
}

function createCar(sColor,iDoors){
    var oTemp = new Object;//对象的属性可在对象创建后动态定义
    oTemp.color = sColor;
    oTemp.doors = iDoors;
    oTemp.showColor = showColor;
    return oTemp;
}

var oCar1 = createCar("red",4);
var oCar2 = createCar("blue",3);

3.构造函数方式
创建构造函数就像定义工厂函数一样容易。第一步选择类名,即构造函数的名字。根据惯例,这个名字的首字母大写,以使它与首字母通常是小写的变量名区分开。
例如:
Js代码 复制代码
  1. function Car(sColor,iDoors){   
  2.      this.color = sColor;   
  3.     this.doors = iDoors;   
  4.     this.showColor = function(){alert(this.color);};   
  5. }   
  6.   
  7. var oCar1 = new Car("red",4);   
  8. var oCar2 = new Car("blue",3);  
function Car(sColor,iDoors){
     this.color = sColor;
    this.doors = iDoors;
    this.showColor = function(){alert(this.color);};
}

var oCar1 = new Car("red",4);
var oCar2 = new Car("blue",3);

在构造函数内部无创建对象,而是使用this关键字。使用new运算符调用构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。然后可以直接赋予this属性,默认情况下是构造函数的返回值(不必明确使用return运算符)。
4.原型(prototype)方式
该方式利用了对象的prototype属性,可把它看成创建新对象所依赖的原型。这里,用空构造函数来设置类名。然后所有的属性和方法都被直接赋予prototype属性。
Js代码 复制代码
  1. function Car(){   
  2. }   
  3. //使用原型方式时,不能通过给构造函数传递参数初始化属性的值,这意味必须在对象创建后才能改变属性的默认值   
  4. Car.prototype.color ="red";   
  5. Car.prototype.doors = 4;   
  6. Car.prototype.drivers = new Array("Lucy","Lily");//对象却很少被多个实例共享的,属性drivers是指向Array对象的指针   
  7. Car.prototype.showColor = function(){//函数共享不会造成任何问题   
  8.    alert(this.color);   
  9. }   
  10. var oCar1 = new Car();   
  11. var oCar2 = new Car();   
  12. oCar1.drivers.push("Mike");   
  13. alert(oCar1.drivers);//outputs "Lucy,Lily,Mike"   
  14. alert(oCar2.drivers);//outputs "Lucy,Lily,Mike"  
function Car(){
}
//使用原型方式时,不能通过给构造函数传递参数初始化属性的值,这意味必须在对象创建后才能改变属性的默认值
Car.prototype.color ="red";
Car.prototype.doors = 4;
Car.prototype.drivers = new Array("Lucy","Lily");//对象却很少被多个实例共享的,属性drivers是指向Array对象的指针
Car.prototype.showColor = function(){//函数共享不会造成任何问题
   alert(this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();
oCar1.drivers.push("Mike");
alert(oCar1.drivers);//outputs "Lucy,Lily,Mike"
alert(oCar2.drivers);//outputs "Lucy,Lily,Mike"

是否有种合理的创建对象的方法呢?答案是联合使用构造函数和原型方式。
5.混合的构造函数/原型方式
用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果所有函数都只创建一次,而每个对象都具有自己的对象属性实例。
Js代码 复制代码
  1. function Car(sColor,iDoors){   
  2.    this.color = sColor;   
  3.    this.doors = iDoors;   
  4.    this.drivers = new Array("Lucy","Lily");   
  5. }   
  6. Car.prototype.showColor = function(){   
  7.    alert(this.color);   
  8. }   
  9. var oCar1 = new Car("red",4);   
  10. var oCar2 = new Car("blue",3);   
  11. oCar1.drivers.push("Mike");   
  12. alert(oCar1.drivers);//outputs "Lucy,Lily,Mike"   
  13. alert(oCar2.drivers);//outputs "Lucy,Lily"  
function Car(sColor,iDoors){
   this.color = sColor;
   this.doors = iDoors;
   this.drivers = new Array("Lucy","Lily");
}
Car.prototype.showColor = function(){
   alert(this.color);
}
var oCar1 = new Car("red",4);
var oCar2 = new Car("blue",3);
oCar1.drivers.push("Mike");
alert(oCar1.drivers);//outputs "Lucy,Lily,Mike"
alert(oCar2.drivers);//outputs "Lucy,Lily"

现在就更像创建一般对象了。所有的非函数属性都在构造函数中创建,意味着又可用构造函数的参数赋予属性默认值了。因为只创建showColor()函数的一个实例,所以没有内存浪费。这种方式是ECMAScript主要采用的方式,它具有其他方式的特性,却没有它们的副作用。
6.动态原型方法
动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。
Js代码 复制代码
  1. function Car(sColor,iDoors){   
  2.    this.color = sColor;   
  3.    this.doors = iDoors;   
  4.    this.drivers = new Array("Lucy","Lily");   
  5.    if(typeof Car._initialized == "undefined"){   
  6.    Car.prototype.showColor = function(){   
  7.      alert(this.color);       
  8.    }   
  9.    Car._initialized = true;   
  10.   }   
  11. }  
function Car(sColor,iDoors){
   this.color = sColor;
   this.doors = iDoors;
   this.drivers = new Array("Lucy","Lily");
   if(typeof Car._initialized == "undefined"){
   Car.prototype.showColor = function(){
     alert(this.color);    
   }
   Car._initialized = true;
  }
}

直到检查typeof Car._initialized是否等于"undefined"之前,这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义,构造函数将用原型方式继续定义对象的方法,然后把Car._initialized设置为true。如果这个值定义了(它的值为true时,typeof的值为Boolean),那么就不再创建该方法。简而言之,该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次。

例子:定义一个StringBuffer类
Js代码 复制代码
  1. function StringBuffer(){   
  2.    this._strings_=new Array;   
  3. }   
  4. //把该参数附加到字符串数组中   
  5. StringBuffer.prototype.append = function (str){   
  6.    this._strings_.push(str);   
  7. }   
  8. //返回真正连接成的字符串   
  9. StringBuffer.prototype.toString = function(){   
  10.    return this._strings_.join("");   
  11. }   
  12. //清空   
  13. StringBuffer.prototype.removeAll = function(){   
  14.    this._strings_.splice(0,this._strings_.length);//this._strings_.length=0   
  15. }  
function StringBuffer(){
   this._strings_=new Array;
}
//把该参数附加到字符串数组中
StringBuffer.prototype.append = function (str){
   this._strings_.push(str);
}
//返回真正连接成的字符串
StringBuffer.prototype.toString = function(){
   return this._strings_.join("");
}
//清空
StringBuffer.prototype.removeAll = function(){
   this._strings_.splice(0,this._strings_.length);//this._strings_.length=0
}


二、URI编码
    encodeURI()和encodeURIComponent()方法用于编码传递给浏览器的URI(统一资源标识符)。
    用法:
  • encodeURI():处理完整的URI.
  • encodeURIComponent():处理URI的一个片断。

   区别:
  • encodeURI():不对URI中的特殊字符进行编码,如冒号、前斜杠、问号和英镑符号。
  • encodeURIComponent():对它发现的所有非标准字符进行编码。

   如:var sUri = "http://www.wrox.com/illegal value.html#start";
   encodeURI(sUri):http://www.wrox.com/illegal%20value.html#start
   encodeURIComponent(sUri):starthttp%3A%2F%2Fwww.wrox.com%2Fillegal%20value.html%23start

   decodeURI()和decodeURIComponent()对应于encodeURI()和encodeURIComponent()的编码解码。
    说明:decodeURI()只对encodeURI()编码的字符解码。
    decodeURIComponent()会解码所有的encodeURIComponent()编码过的字符。
分享到:
评论

相关推荐

    PHP+JS Base64和URI编码解码混合使用

    在浏览器端,JavaScript可能先进行Base64编码,然后在前端进行URI编码,以便在URL或Ajax请求中使用。 在提供的压缩包文件"demo"中,很可能包含了一个示例,演示了这种混合编码的使用方法。这个示例可能包括一个PHP...

    js gb2312编码

    UrlEncode.js和UrlEncode2.js则可能是JavaScript脚本,提供了自定义的URL编码功能,或者是对内置编码函数的扩展或封装。 总之,理解并正确使用JavaScript中的GB2312编码、mailto:链接中的汉字编码以及百度URL编码,...

    JavaScript、JavaWeb对汉字等的编码与解码处理

    escape函数是JavaScript中最早的编码函数之一,它可以将字符串转换为编码后的字符串。escape函数的主要特点是将 Unicode 值大于255的字符转换为"%u"格式的字符串。例如,汉字“中文”将被转换为“%u4E2D%u534E”格式...

    这是本人做的一个很好的Java自定义标签

    与传统的脚本语言(如JavaScript)相比,Java自定义标签能够更好地利用Java的强大功能,提高代码的可维护性和可扩展性。 #### 2. Java自定义标签的优势 - **封装性**:可以将复杂的业务逻辑封装到一个简单的标签中...

    base64编码工具

    这个字符串可以直接插入到HTML、CSS或JavaScript代码中,作为数据URI的一部分来直接显示或执行文件内容,无需通过额外的HTTP请求。 对于自定义内容编码,用户可以输入任何二进制数据的文本表示,比如十六进制或八...

    js base64编码格式图片另存为下载

    在JavaScript(JS)中,Base64是一种常用的编码方式,用于将二进制数据转换成ASCII字符串,便于在网络上传输。在前端开发中,我们有时会遇到需要将Base64编码的图片保存或下载到本地的情况。这个过程涉及到浏览器的...

    base64编码js类2

    5. **自定义Base64类**:在给定的"base64编码js类2"中,可能是一个自定义的JavaScript类,提供了更全面或更高效的Base64编码和解码功能,比如支持Unicode字符,或者提供了批量处理和流式处理的接口。 6. **Web API*...

    qrjs2js是一款仿纯js二维码生成插件

    总结,qrjs2js是一款强大且易于使用的JavaScript二维码生成插件,不仅提供了多种格式选择,还允许自定义样式,是网页开发中的实用工具。了解并掌握qrjs2js的使用,能够丰富你的项目功能,提升产品互动性。

    protochrome:Chrome自定义协议处理,simon和garfunkle样式

    如果您想在Chrome中处理自定义协议而无需操作静态远程域,则可以将该模式重新用于任何情况。 这个怎么运作 扩展程序检测到在多功能框中键入了'ndn'关键字...一旦用户启用了扩展程序并开始输入,扩展程序便会启动...

    极小的 javascript gbk支持类

    编码表是经过简单压缩的,最后打包出的min版只有不到30k(gzip 后20k) 正常的编码表可能要到200K以上 本库不包含GBK自定义(扩展)码区 实现了URI相关函数,方便始用 API GBK.encode({string}) 解码GBK为一个字节数组...

    基于PHP的URL编码转换工具源码.zip

    8. **RFC标准**:URL编码遵循互联网工程任务组(IETF)制定的RFC 3986标准,规定了URI(统一资源标识符)的语法和解析规则。 9. **URL解码问题**:解码时要注意URL编码可能会引发的XSS(跨站脚本攻击)或SQL注入等...

    js生成二维码插件

    "js生成二维码插件"是专为JavaScript环境设计的工具,允许开发者通过简单的API调用在网页上生成二维码。这种插件不支持旧版本的Internet Explorer,如IE6、7、8,这是因为这些浏览器对现代Web技术的支持有限,例如...

    用jquery-table2excel,进行导出excel表格 带图片 jquery.table2excel.js下载

    对于包含图片的表格,`jquery-table2excel`会将图片转换为Base64编码,并嵌入到生成的Excel文件中,这样在打开Excel时仍能显示图片。 然而,需要注意的是,由于Excel文件格式的限制,不是所有的HTML特性都能完美地...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    5.21.htm URI编码处理函数的例子 5.22.htm 数值处理函数的例子 5.23.htm 一个isNaN方法应用的例子 第6章(/C06/) 6.1.htm 简单对象的使用 6.2.htm 如何使用构造函数为...

    uri-[removed]平台URI Java脚本问题

    在处理URI时,有时会遇到URI编码和解码的问题,例如非ASCII字符的处理。JavaScript提供了`decodeURIComponent()`和`encodeURIComponent()`函数来处理这种情况,但需要注意的是,这两个函数在处理某些特殊字符时可能...

    js中unicode转码方法详解.docx

    JavaScript(简称JS)是一种广泛用于前端开发的轻量级脚本语言,它处理字符串时经常需要进行Unicode编码和解码。Unicode是一种国际标准,旨在表示世界上几乎所有的字符和符号,确保在不同系统间数据的兼容性。在JS中...

    JavaScript基础篇(3)之Object、Function等引用类型

    9. 浏览器内置对象如URI编码方法(如encodeURIComponent)也被用于处理特定的任务。 10. 方法重载、归并方法等高级特性也是JavaScript中引用类型的一部分,但是在这个段落中并未详细展开,可能需要在更高级的学习...

    黑马程序员 安卓学院 万元哥项目经理 分享220个代码实例

    |--文件之指定编码读写文件 |--文件之释放Assets下的文件到应用的File目录 |--文件之随机存储RandomAccessFile |--文件使用时间排序 |--文件复制粘贴 |--文件路径之通过uri获取 |--时间java常用应用 |--时间之handle...

    vuebase64fileupload利用Vuejs将上传文件作为base64datauris

    Vue.js 是一个流行的前端JavaScript框架,它以组件化、易用性和灵活性著称。在现代Web应用中,文件上传是一个常见的功能,而将文件转换为Base64编码的数据URI(data URI scheme)则有助于实现异步上传、预览文件等...

    JavaScript全局函数使用简单说明

    1、decodeURI() 参数:string 功能描述:对 encodeURI() 函数编码过的 URI 进行解码。 实例: 可把 //www.jb51.net/My first/ 解码为 //www.jb51.net/My first/ 2、decodeURIComponent() 参数:string 功能描述:函数可对...

Global site tag (gtag.js) - Google Analytics