Leon‘s Blog
wangliang1124 / anotherleon.github.io Goto Github PK
View Code? Open in Web Editor NEWLeon‘s Blog
Leon‘s Blog
最近做了一个小程序的项目,用mpvue写的,项目很小,主要有登录页,查询页,查询结果页,维保页等,我负责开发登录和结果页。之前觉得项目很简单,应该很容易就能搞定,没想到十个工作日的排期都在跌跌撞撞中进行。
getCarList(searchForm, options) {
// ... 省略部分非关键代码
const sellerName = this.sellerName
if (!sellerName) return
const cache = this.cacheList[sellerName]
if (cache && !!cache.length) {
this.carList = cache
return
}
// 异步请求过程
wx.request({
// ... 省略部分代码
success: (res) => {
// 先把获得的数据放进缓存
this.cacheList[sellerName] = res.data.data.carInfoList
// 出现bug的地方,this.carList就好比一个筐子,谁先请求到数据,它的里面装的就是谁。
// this.carList = res.data.data.carInfoList // 同时把数据给v-for循环中的carList,carList得值变化或会重新渲染列表
this.carList = this.cacheList[this.sellerName] || [] // 临时处理的办法:从缓存中找,没找到就是空的
},
})
},
this.carList = this.cacheList[this.sellerName]
,这样的写法隐藏隐患,因为carList,cacheList,sellerName随时可能在请求的过程中被修改。比如:由tab a快速切换到 tab b 的时候,tab a 正好请求回数据,这时候实际上执行的是 this.carList = this.cacheList['b'] || []
,而这时候缓存中其实肯定是没有b的,所以必然为空数组。 getCarList(sellerName, searchForm, options) {
/* ... 省略部分非关键代码 */
// 处理promise的方法
const process = async (promise) => {
const result = await promise
if (result.sellerName === this.sellerName) { // 根据当前tab的sellerName和结果中的sellerName是否一致决定items的数据
this.items = result.data
}
}
this.items = [] // 清空一下,防止装着别的数据
// 第一次请求缓存里没有promise
const cache = this.cacheList[sellerName]
if (cache) {
process(cache[sellerName])
return false
}
// promise化小程序异步请求过程,这一步可以进一步封装...
const p = new Promise((resolve, reject) => {
wx.request({
/* 省略部分代码 */
resolve({sellerName, data: data.data.carInfoList}) // 返回sellerName作为一个凭证
})
})
this.cacheList[sellerName] = p // 把promise保持在缓存里,之后如果promise已经resolve就不用等待了
process(p)
},
补充: 也可以把所有的数据放在list{ [sellerName]: [] }这样的数据结构里,每次请求的数据这样添加this.list = {...this.list, data}就能保持数据响应。这样可以省去判断数据是否是当前的。
// 业务页面
async onClick(sellerName) { /// 这里是相应点击事件的业务逻辑
this.sellerName = sellerName
this.items = []
this.loading = true
const result = await memoizedReqest(sellerName)
if(result.name === this.sellerName){
this.items = result.data
this.loading = false
}
},
// utils.js
request(options) {
return new Promise((resolve, reject) => {
wx.request({
/* 省略部分代码 */
resolve({name, data: res})
})
})
}
memoize(func) {
var cache = {}
return function(name) {
context = this;
args = arguments;
if (cache[name]) return cache[name]
return cache[name] = func.apply(context, args);
};
}
export default memoizedReqest = memoize(request)
异步请求的应该场景还是挺多的,比如类似百度的搜索框的自动联想、树形目录、分页、新闻列表等等都可能用到异步请求,因此我认为这篇总结对类似情境有一定的参考意义,也希望对看到这篇文章的人有所帮助。
当然我知道的我的方法必定是不完美的,一定存在更优雅、更具有普遍适用性的方案,不过限于本人的见识目前只能做到这样了,我在今后的工作中也将继续探索更好的解决办法。
通过这个简单的小项目,我发现要做到完美并不容易,需要对框架、业务、JS语言的特性有很深的理解才行。当然办法总部困难多,只要动脑筋多思考总会有更好的办法的。
The value i++ is the value of i before the increment. The value of ++i is the value of i after the increment.
Example:
var i = 42;
alert(i++); // shows 42
alert(i); // shows 43
i = 42;
alert(++i); // shows 43
alert(i); // shows 43
https://mp.weixin.qq.com/s/SJVKl-cTpqIz1vcUgNy_Cw
width: 100px; // 要有宽
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: @clamp;
white-space:nowrap;
居中
文本、图片、定宽块、不定块块
考察点 line-height, flex布局、block、inline-blcok, vertical-align, 负margin
relative,absolute 文档流
let 块级作用域、先声明后使用(没有变量提示)、不能重复声明 const 常量
解构赋值
变量名和属性名不一致怎么办:let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
默认值写法? fetch({page=1, pageSize=10}), 如果传入的是 {page:null, pageSize: undefined} 会怎样? undefined 才会触发默认值
async函数,写法 返回值,await 结果
箭头函数 this 指向外层函数运行时的this,外层没有指向全局
箭头函数 如果想返回一个对象,但是又不想使用return,怎么办 =>({})
优点 简洁优雅
装饰器
三种判断类型的方式
数组过滤falsy值
const compact = arr => arr.filter(Boolean)
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34])
react生命周期
ref的干什么用的
组件通信方式
父->子 props
子->父 回调
兄弟、多层级 redux、mobx、react context
setState要注意什么
异步
mobx redux 相关概念
项目
代码目录分层
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.