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 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
toString()一个会自动调用的方法
Feb 08 Javascript
JQuery for与each性能比较分析
May 14 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
js中复选框的取值及赋值示例详解
Oct 18 Javascript
ES6学习教程之Promise用法详解
Nov 22 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
十天学会php之第八天
2006/10/09 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python验证码识别处理实例
2015/12/28 Python
python游戏地图最短路径求解
2019/01/16 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
高中的自我鉴定
2013/12/16 职场文书
读书心得体会
2013/12/28 职场文书
捐资助学感谢信
2015/01/21 职场文书
初中教师个人总结
2015/02/10 职场文书
单身申明具结书
2015/02/26 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
党员心得体会范文2016
2016/01/23 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS