Js中使用hasOwnProperty方法检索ajax响应对象的例子

经常使用百度搜索的同学，一定不会忽视输入框的下拉索引，它是如此方便，然而得天独厚的条件使得这项异步技术多少面临些考验，高并发的服务端请求督促着他们的前端攻城师必须尽可能地减少发送ajax的次数。听起来似乎与本文无关，但并不是这样。首先就暂且让我们为百度免费做个广告吧。在百度首页输入“前端”一词，利用chromebug可以很轻松地看到所发送的响应，结果显示如下：

代码如下:

window.bdsug.sug({q:'前端';,p:false,s:['前端开发','前端工程师','前端总线','前端开发工程师','前端框架','前端总线频率','前端面试题','前端分析','前端开发工具','前端观察']});

百度试图通过返回一个带有obj参数的sug方法，来进行对下拉数据的渲染，当你在不刷新页面的情况下再次输入“前端”，类似的请求并没有发生，这说明他们很可能建立了一个缓存对象，它的作用是临时存储请求过来的object，当后面输入同样的词汇时，会首先检索缓存对象的键，匹配成功后，直接读取该对象的值，并不再向服务端发送请求，这样就可以有效地节约成本了。

抛砖引玉，接下来谈谈真正的主角：hasOwnProperty方法。

相信jser们对hasOwnProperty并不陌生，我在此也只是江边卖水了。

它是对象的专属，用来判断一个属性是否存在于某对象的键中，return的是一个boolean值。这是一个例子：

代码如下:

var test0 = Array.prototype.hasOwnProperty('split'); //false，因为数组不存在split方法
var test1 = String.prototype.hasOwnProperty('split'); //true，因为split是String对象的内置方法

当你知道这些的时候，似乎还不足以看到hasOwnProperty的作用力，那么下面简单地重现一下百度下拉的例子：

代码如下:

var data = {}, saveObj = function(val){
 if(data.hasOwnProperty(val)){ //如果提交的值存在于data对象中，则不发送请求
  var len = data[val].length;
  for(var i = 0; i < len; i++){
   console.log(data[val][i]);
  }
 }else{
  var url = 'http://suggestion.baidu.com/su?wd=' + val;
  $.ajax({ //为了示例清晰，此处用jquery的ajax为例
   url : url + '&p=3&cb=window.bdsug.sug&sid=1421_1513_1541_1542_1582&t=1353756355137', //最后面一个参数t是一个时间戳
   dataType : 'jsonp',
   type : 'GET',
   success : function(res){
    var msg = res.data, len = msg.length;
    msg == null && (msg = []);
    if(len > 0){
     data[val] = msg; //缓存搜索结果
     for(var i = 0; i < len; i++){
      console.log(msg[i]); //打印出请求结果
     }
    }
   }, error : function(){
    alert('error');
   }
  });
 }
};

有同事质疑，这样一来，缓存对象data占用的内存将会随着存储键值的越多而越大。那么我想说这是不可避免的，要节约服务端的请求，就必然要牺牲其它，而事实上缓存对象占据的空间通常情况下是可以忽略的，因为它并非“常驻内存”，一旦页面刷新它将销毁。然而我们可以给出另一个解决方案，给此对象约定一个峰值，比如最多它只允许存储100个键值对，当超过100的数量时，通过delete运算符删除前十条存储的键或者干脆就不存储，这样就可以避免此问题了。

hasOwnProperty方法在对象的检测中用得尤为普遍，当然有兴趣的同学也可以去了解下propertyIsEnumerable方法，它是hasOwnProperty的增强版，能检测自有属性且该属性的可枚举性，本文就不再做详细说明了。

赞 (0)

相关推荐

  • JS实现移动端按首字母检索城市列表附源码下载

    JS实现移动端按首字母检索城市列表附源码下载

    我们常见的手机通讯录或微信通讯录,联系人信息是按字母顺序排列的列表,通过点击右侧的字母,会迅速定位检索到首字母对应的联系人.那么我今天给大家介绍的是按首字母快速定位到城市列表,效果和通讯录一样的.  查看演示 下载源码 准备 查看演示     下载源码 准备 首先我们需要用到全国的城市数据,这些城市数据来源于网络,我已经将数据格式化成JSON形式了,大家可以直接拿去用. 我们还需要用到一个叫better-scroll的滚动插件,它能帮我们将超长的页面原生的滚动条处理掉,优化滚动效果. 接着我们准

  • JavaScript字符串检索字符的方法

    在字符串中检索字符的几种方式,供大家参考,具体内容如下 var text="abcdefgh你好,很高兴认识你!"; var str1="abc"; var str2="def"; var str3="ABC"; var str4="很高兴"; function isContain(str,substr){ return new RegExp(substr).test(str); } console.log

  • 开发实例：JSP中实现全文检索

    JSP中的全文检索 全文检索一直都是web方面的关键技术,如何在浩如烟海的信息中找到自己想要的信息是人们最关心的.鼎鼎大名的GOOGLE就是一个很成功的例子,网络上的人们大部分都用GOOGLE来查找自己需要的内容.全文检索主要有两个技术指标:快速和精确.前一段时间做了一个新闻系统,老板要加上全文检索的功能,想了很久才用一个不太高明的方法实现了.现在分享一下,希望是抛砖引玉吧,如果大家有更好的办法请跟在后边:) 先介绍一下我的新闻系统:数据库里存新闻的基本信息,如标题,发布人,发布时间,主体新闻的

  • 在IE8上JS实现combobox支持拼音检索功能

    在IE8上JS实现combobox支持拼音检索功能

    最近在ie8碰到一个js问题,需要实现(ie8)使用拼音或者拼音首字母来检索select中的内容,原来的combobox只能支持汉字输入检索,现在需要进行改进,现在我将一步一步的实现方法记录下来,功能简单,也可能有bug和不足,供学习参考.(本文只是提供思路学习和备份,实际情况需要在ie8或者ie兼容模式上使用,所以没有考虑到别的浏览器) 目录结构: test |--js |--index.html 在index页面中添加 index.html <!DOCTYPE html> <html

  • javascript数据结构与算法之检索算法

    javascript数据结构与算法之检索算法

    查找数据有2种方式,顺序查找和二分查找.顺序查找适用于元素随机排列的列表.二分查找适用于元素已排序的列表.二分查找效率更高,但是必须是已经排好序的列表元素集合. 一:顺序查找 顺序查找是从列表的第一个元素开始对列表元素逐个进行判断,直到找到了想要的结果,或者直到列表的结尾都没有找到想要找的元素. 代码如下: function seqSearch(data,arr) { for(var i = 0; i < arr.length; ++i) { if(arr[i] == data) { retur

  • JSP开发中hibernate框架的常用检索方式总结

    JSP开发中hibernate框架的常用检索方式总结

    总结hibernate框架的常用检索方式 1.hibernate框架的检索方式有以下几种: OID检索:根据唯一标识OID检索数据 对象导航检索:根据某个对象导航查询与该对象关联的对象数据 HQL检索:通过query接口对象查询 QBC检索:通过criteria接口对象查询 SQL检索:通过SQL语句查询  2.HQL检索方式: 查询全部数据:session.createQuery("from 类名"); 根据条件查询:session.createQuery("from 类名

  • 基于JavaScript实现类似于百度学术高级检索功能

    百度学术http://xueshu.baidu.com/高级检索是通过前台生成后台内部高级语法来实现高级检索的,可以通过前台js做字符串拼接传给后台实现,难度不大: 下面是高级检索的核心功能代码,我使用的是纯js实现,并未使用jquery: <p class="fl srh-btn"> <input type="submit" class="srh-submit" style="height:px" valu

  • js仿淘宝的拼音检索特效代码

    以下是HTML网页特效代码,点击运行按钮可查看效果 js仿taobao效果 *{ margin:0;padding:0;} body{ font:normal 12px Verdana, Arial, Helvetica, sans-serif; text- align:center;} #warpper{ position:absolute; left:100px; top:100px;} h5{ float:left;} a{ text-decoration:underline; curso

  • 简单谈谈MySQL5.7 JSON格式检索

    简单谈谈MySQL5.7 JSON格式检索

    MySQL5.7版本开始支持JSON格式,在创建表时,可以指定列表的数据类型为JSON,但是如何在JSON格式上创建索引呢?? 本人做了一个简单测试. 第一步:建立一个包含JSON类型的表: CREATE TABLE json_test` ( id` int (8) NOT NULL AUTO_INCREMENT, content` json NOT NULL , PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 第二步:初始化数据

  • Js中使用hasOwnProperty方法检索ajax响应对象的例子

    经常使用百度搜索的同学,一定不会忽视输入框的下拉索引,它是如此方便,然而得天独厚的条件使得这项异步技术多少面临些考验,高并发的服务端请求督促着他们的前端攻城师必须尽可能地减少发送ajax的次数.听起来似乎与本文无关,但并不是这样.首先就暂且让我们为百度免费做个广告吧.在百度首页输入"前端"一词,利用chromebug可以很轻松地看到所发送的响应,结果显示如下: 复制代码 代码如下: window.bdsug.sug({q:'前端';,p:false,s:['前端开发','前端工程师',

  • 使用JS中的exec()方法构造正则表达式验证

    正则表达式,又称正规表示法.常规表示法.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则.在很多文本编辑器里,正则表达式通常被用来检索.替换那些符合某个模式的文本. 一.Javascript中的正则表达式 在Javascript中,可以使用RegExp对象构造正则表达.我们需要新建一个实例化的RegExp()对象,可以传入两个参数:第一个参数是匹配的模式,第二个参数是一

  • JS中的hasOwnProperty()和isPrototypeOf()属性实例详解

    这两个属性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf() 先讲解hasOwnProperty()方法和使用.在讲解isPropertyOf()方法和使用 看懂这些至少要懂原型链 一.Object.prototype.hasOwnProperty() 概述 hasOwnProperty()方法用来判断某个对象是否含有指定的自身属性 语法 obj.hasOwnPropert

  • JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()

    首先了解枚举属性 一般利用for~in遍历 var a = [1,2,3]; for(var i in a){ console.log(a[i]); } or var o = {p1:1,p2:2}; for(var i in o){ console.log(i+'='+o[i]); }//p1=1;p2=2; <1>并不是所有的属性都会在for~in遍历中显示.比如(数组的)length属性和constructor属性.那些已经被显示的属性被称为可枚举的,可以通过各个对象所提供的proper

  • JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)

    IE中new Date(strDate)返回无效时间解决方式: 方法一: function getDateForStringDate(strDate){ //切割年月日与时分秒称为数组 var s = strDate.split(" "); var s1 = s[0].split("-"); var s2 = s[1].split(":"); if(s2.length==2){ s2.push("00"); } return

  • 使用JS中的Replace()方法遇到的问题小结

    今天在写pc客户端自动化打包脚本的时候遇到遇到了几个问题,虽然是小问题,但是也卡了一段时间,所以决定记录一下. js的replace()方法是用于替换某些内容,它可以接收两个参数,第一个是一个被替换的正则表达式对象或者一个字符串,第二个可以是将要替换成的内容或者函数,将要替换成的内容须是一个字符串.我在执行的时候遇到的报错是:Cannot read property 'replace' of undefined.具体代码如下: var fs=require("fs") var info

  • JS中的Replace方法使用经验分享

    JS中的Replace方法使用经验分享

    最近查一个bug,原因是JS中的Replace方法造成的,当将一个字符串中有处需要替换时,一般会用到JS中的Replace方法,Replace方法的第一个参数如果是传的字符串,只会替换第一处.代码如下: 复制代码 代码如下: var str = "0CEA65D5-DB8E-4876-A6F8-C88AC7F0E185,E846C244-8A19-4374-879B-0B1DC08D1747,6CB3EBA4-1E22-4E4D-8800-AE31130B6F5D"; alert(st

  • js中数组排序sort方法的原理分析

    本文实例分析了js中数组排序sort方法的原理.分享给大家供大家参考.具体分析如下: 最近在百度的项目中要用到对数组进行排序,当然一开始自然想到了数组的sort方法,这方法应用非常简单,大致如下: 复制代码 代码如下: window.onload=function(){         var arr=[2,55,55,1,75,3,9,35,70,166,432,678,32,98];         var arr2=["George","John","

  • 浅谈JS中的bind方法与函数柯里化

    绑定函数bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.不同于call和apply只是单纯地设置this的值后传参,它还会将所有传入bind()方法中的实参(第一个参数之后的参数)与this一起绑定. 关于这个特性看<JS权威指南>原文的例子: var sum = function(x,y) { return x + y }; var succ = sum.bind(null, 1); //让this指向null,其后的实参也会作为实参传入被绑定的函数sum

  • JS中的数组方法笔记整理

    push()方法:可以向数组的末尾添加一个或者多个元素,并且返回新的长度 pop()方法:可以删除数组最后一个元素,并且返回被删除的元素,注意:如果数组是空的,该方法不进行任何操作,返回undefined. unshift()方法:可以向数组的开头添加一个或者多个元素,并且返回新的长度 shift()方法:可以删除数组第一个元素,并且返回被删除的元素,注意:如果数组是空的,该方法不进行任何操作,返回undefined. splice()方法:从数组中添加/删除项目,然后返回被删除的项目,该方法会

随机推荐