微信开发入门第五章：模块、模板和缓存

最新推荐文章于 2021-08-11 09:18:24 发布

转载最新推荐文章于 2021-08-11 09:18:24 发布 · 1.5k 阅读

本文介绍如何利用ES6的Class和Module特性优化缓存操作类，提高代码可读性和维护性，并展示了如何更新初始化数据及清除缓存。

5.11　使用ES6改写缓存操作类

我们用ES6的新特性Class、Module来改写缓存操作类。

代码清单 5-17 用ES6改写DBPost DBPost.js

class DBPost{
constructor(url){
  this.storageKeyName="postList";
}
//得到全部信息
getAllPostData() {
  var res = wx.getStorageSync(this.storageKeyName);
  if (!res) {
    res = require("../data/data.js").postList;
    this.execSetStorageSync(res);
  }
  return res;
}
//本地缓存  保存/更新
execSetStorageSync(data) {
  wx.setStorageSync(this.storageKeyName, data);
}

};
export{DBPost}

以上代码使用ES6的Class改写了缓存数据库操作类。可以看到，同prototype的实现方式相比，ES6的写法更加符合现代语言的类的标准定义习惯。

注意Class中定义的两个函数，它们是不需要function关键字的。同时，方法之间不要加“,”，否则会报错。

最后export输出语法也非常简洁，如export {DBPost};

接着，我们再看如何使用ES6版本的DBPost。

代码清单 5-17 用ES6使用DBPost post.js

import{DBPost}from'../../db/DBPost.js';

Page({

    data:{ },
    onLoad:function(){
      var dbPost = new DBPost();
     
      this.setData({
        postList:dbPost.getAllPostData(),
        
        });
      },
    
         
})

注意，这里不再使用require来加载DBPost.js这个文件，而是使用ES6导入模块的关键字import将DBPost导入进来。这种写法的可读性比require要高得多。

通过以上两种不同的写法，可以清晰地看到ES6提供的Class模板让JavaScript的面向对象编程变得更加的清晰，更符合现代面向对象写法。但Class仅仅是一个语法糖，不使用ES6一样可以实现面向对象的编写方法。

建议开发者使用Class来编写对象，小程序本身在编译时会集成babel这个插件，将ES6转成ES5。我们将选用ES6实现的这个版本作为Orange Can的项目代码，当然如果你不熟悉ES6，也可以使用prototype这种编写方式。

5.12　完善文章数据

在这一章的末尾，我们将完善文章数据，顺便看一下如何更新缓存中的初始化数据。目前，我们仅有3篇文章的数据，现在再增加两篇文章的数据。

在data.js文件中再增加两篇文章数据，代码如下：

代码清单 5-19 增加两篇文章 data.js

{
    date:"Apr  23  2018",
  title:"最美的情郎",
  avatar:"/images/avatar/avatar-2.png",
  postImg:"/images/post/post-7.jpg",
  content:"弱水三千只取一瓢，姹紫嫣红独守一色，浮生百相只爱一人",
  collectNum:{array:[89347]},
  messageNum:243,
  readingNum:34,
},
{
    date: "Apr  24  2018",
  title: "最爱的女孩",
  avatar: "/images/avatar/avatar-2.png",
  postImg: "/images/post/post-8.jpg",
  content: "你的酒窝没有酒，我却醉的像条狗",
  collectNum: { array: [89347] },
  messageNum: 24423,
  readingNum: 4234,
}

理论上，当增加了两篇文章数据后，不需要增加任何代码，再次刷新项目后，文章列表页面应该立刻出现这两篇文章的数据。

但实际上并不是这样，保存后post页面还是只有3篇文章的数据。原因很简单，因为缓存已经存在了，如果更改了初始化数据又不清除缓存，那么缓存是不会被更新的。

点击开发工具左侧的【缓存】按钮，随后在弹出的菜单中点击【清除数据缓存】，然后再编译项目，发现文章列表里已经有5篇文章了。