天翻地覆:object+异步调用实战训练

最新推荐文章于 2024-08-21 23:01:45 发布

原创最新推荐文章于 2024-08-21 23:01:45 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript魔鬼课程专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种实现数据缓存的方法，并演示了如何利用异步加载技术更新缓存，减少重复请求，提高应用程序效率。

前面我们弄了一个new对象，然后从对象里获取数据。
http://blog.youkuaiyun.com/github_26672553/article/details/53637525
其中getList()函数每次获取都会被调用。

现在，我们给加入“数据缓存”的概念。保证getList只会调用一次(比如，第二次调用getOne()的时候不会再去调用getList)。

在ECMAScript 5.1开始，Object中支持getter和setter(就像Java一样)

_cache:{list:null},
get cache_list(){
  return this._cache.list;
},
set cache_list(value){
  this._cache.list = value;
},

我们来改造news对象：

var news = {
    _cache:{list:[],detail:{}},
    get cache_list(){
      return this._cache["list"];
    },
    set cache_list(value){
      this._cache["list"] = value;
    },
    loadCache(){
      if(this.cache_list.length == 0){
        this.cache_list = this.getList();
      }
    },

  getList(){
    return [
      {newsid:101,newstitle:"标题1"}，
      {newsid:102,newstitle:"标题2"}，
      {newsid:103,newstitle:"标题3"}
    ];
  }，
  getOne(newsid){
    // 加载缓存
    this.loadCache();

    var index = -1;
    var getRet = this.cache_list.map((item,i)=>{
      if(item.newsid == newsid){
        index = i;
        return item;
      }
    });

    if(index >= 0){
      return getRet[index];
    }else{
      return null;
    }
  }
}

调用：

alert(news.getOne(103).newstitle);
alert(news.getOne(101).newstitle);

这样我们就实现了“数据缓存”功能(这只是一个思路)。

模拟ajax

我们暂时并不调用，只是来模拟一下(我们我们会用到fetch函数)。
设置一个定时器，在定时器到期后执行一次函数或者指定代码段。

var ajax = (doSth)=>{
    var name = "jack";
  setTimeout(function(){
    doSth(name); // doSth相当于回调函数
  },1000);
};
// 调用
ajax(function(name){
  alert(name);
});

上面代码全部换成箭头函数的写法：

var ajax = (doSth)=>{
    var name = "jack";
  setTimeout(()=>{
    doSth(name); // doSth相当于回调函数
  },1000);
};

// 调用
ajax(name=>{
  alert(name);
});

整合到news对象中

替换掉getList()中的内容，真实开发其中的数据，肯定是从后端异步获取而来。
我要学习怎么通过异步，改造news。

var ajax = (doSth)=>{
    var apiData = [
      {newsid:101,newstitle:"标题1"}，
      {newsid:102,newstitle:"标题2"}，
      {newsid:103,newstitle:"标题3"}
    ];
  setTimeout(()=>{
    doSth(apiData); // doSth相当于回调函数
  },1000);
};


// news对象
var news = {
    _cache:{list:[],detail:{}},
    get cache_list(){
      return this._cache["list"];
    },
    set cache_list(value){
      this._cache["list"] = value;
    },
    loadCache(action){ // 加载缓存数据
      if(this.cache_list.length == 0){
        //this.cache_list = this.getList();
        ajax((apiData)=>{
          this.cache_list = apiData; // 设置新闻列表缓存
          action(); // 异步获取到数据之后的操作
        });
      }
    },
  getOne(newsid,callback){
    // 加载缓存
    this.loadCache(()=>{
        var index = -1;
        var getRet = this.cache_list.map((item,i)=>{
          if(item.newsid == newsid){
            index = i;
            return item;
          }
        });

        if(index >= 0){
          callback(getRet[index]); // 手动执行 
        }
    });

  }
}

调用：

news.getOne(103,(item)=>{
  alert(item.newstitle);
});