this应用详解-js原生

 

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

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

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

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

 

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

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