this应用详解-js原生

  学习记录,以防遗忘,适合新手解惑。老鸟避让!

  在微信H5的开发中,很多页面都是简单的一个模型item在加上很多很多数据组成起来的。例如微信朋友圈,仔细观察,他的一个基本模型就是 “头像图片 + 用户昵称 + 一段文本 + 一张或大于一张小于九张的图片 + startTime ”。总计五部分,这样的一个模板写好以后,只需要去刷新(即请求数据库数据),拿到数据后,进行动态渲染,把数据填充到模板里面。拿到了X条数据,就渲染出X个模板,最后,我们的朋友圈就这样展示出来了。原理就是这样,和我今天要记录的 this 指针有一点点关系。

  模板只有一个!那么绑定在五个模块(即整个模板)上面的方法肯定是一模一样的,那请求的数据是不一样的,怎么区分事件呢?简单说,就是五个朋友都发了一条朋友圈,你要看第二个人的文字详情或图片大图,你点击了第二个人的圈圈详情,他就展示了该人的详情,那他怎么不展示其他人的详情呢?一个模板出来的模型,靠什么区分每一个 item 呢?可能其他语言有其他好的办法,JS里面可以依靠 this 指针来实现。

this应用详解-js原生

如图,通过模板结合数据创造出列表页,每个item 都有两个按钮,点击具体的某一个“去阅读”,不影响其他的“去阅读”按钮,还可以进行点击源“去阅读”按钮的一些样式变化和其他事件。

this应用详解-js原生

  模板中,给“去阅读”按钮绑定 onclick 事件,传参 this ,在 函数中利用this 来区分当前用户点击的是哪一个item并作出该item 对应的事件,例如去请求不同的接口以及样式改变等,

this应用详解-js原生

this应用详解-js原生

之前我有拿过 e.target 方法来尝试找到点击源并做后续的事,但发现可能不太适合以上场景。使用this 却很方便。以上仅为记录回忆用,语言潦草具有理科男文章性质。待有时间在精细修改下。

上一篇:当前标识(NT AUTHORITY\NETWORK SERVICE)没有对“C:\WINDOWS\Microsoft.NET\Frame


下一篇:fw:学好Python必读的几篇文章