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


Posted in Javascript onDecember 08, 2014

经常使用百度搜索的同学,一定不会忽视输入框的下拉索引,它是如此方便,然而得天独厚的条件使得这项异步技术多少面临些考验,高并发的服务端请求督促着他们的前端攻城师必须尽可能地减少发送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的增强版,能检测自有属性且该属性的可枚举性,本文就不再做详细说明了。

Javascript 相关文章推荐
JavaScript 代码压缩工具小结
Feb 27 Javascript
javascript内存管理详细解析
Nov 11 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
js实现的map方法示例代码
Jan 13 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
基于vue.js实现的分页
Mar 13 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 #Javascript
JavaScript对象之深度克隆介绍
Dec 08 #Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 #Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 #Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 #Javascript
js继承call()和apply()方法总结
Dec 08 #Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 #Javascript
You might like
用文本文件制作留言板提示(上)
2006/10/09 PHP
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
linux下 C语言对 php 扩展
2008/12/14 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python中Flask框架简单入门实例
2015/03/21 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python 中的 else详解
2016/04/23 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
python实现斗地主分牌洗牌
2020/06/22 Python
什么是唯一索引
2015/07/05 面试题
预备党员思想汇报范文
2013/12/29 职场文书
优秀党员获奖感言
2014/02/18 职场文书
开学典礼决心书
2014/03/11 职场文书
会计学专业自荐信
2014/06/25 职场文书
商场租赁意向书
2014/07/30 职场文书
购房意向书
2014/08/30 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2014年防汛工作总结
2014/12/08 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
Python实现天气查询软件
2021/06/07 Python
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android