this应用详解-js原生
学习记录,以防遗忘,适合新手解惑。老鸟避让!
在微信H5的开发中,很多页面都是简单的一个模型item在加上很多很多数据组成起来的。例如微信朋友圈,仔细观察,他的一个基本模型就是 “头像图片 + 用户昵称 + 一段文本 + 一张或大于一张小于九张的图片 + startTime ”。总计五部分,这样的一个模板写好以后,只需要去刷新(即请求数据库数据),拿到数据后,进行动态渲染,把数据填充到模板里面。拿到了X条数据,就渲染出X个模板,最后,我们的朋友圈就这样展示出来了。原理就是这样,和我今天要记录的 this 指针有一点点关系。
模板只有一个!那么绑定在五个模块(即整个模板)上面的方法肯定是一模一样的,那请求的数据是不一样的,怎么区分事件呢?简单说,就是五个朋友都发了一条朋友圈,你要看第二个人的文字详情或图片大图,你点击了第二个人的圈圈详情,他就展示了该人的详情,那他怎么不展示其他人的详情呢?一个模板出来的模型,靠什么区分每一个 item 呢?可能其他语言有其他好的办法,JS里面可以依靠 this 指针来实现。
如图,通过模板结合数据创造出列表页,每个item 都有两个按钮,点击具体的某一个“去阅读”,不影响其他的“去阅读”按钮,还可以进行点击源“去阅读”按钮的一些样式变化和其他事件。
模板中,给“去阅读”按钮绑定 onclick 事件,传参 this ,在 函数中利用this 来区分当前用户点击的是哪一个item并作出该item 对应的事件,例如去请求不同的接口以及样式改变等,
之前我有拿过 e.target 方法来尝试找到点击源并做后续的事,但发现可能不太适合以上场景。使用this 却很方便。以上仅为记录回忆用,语言潦草具有理科男文章性质。待有时间在精细修改下。
this应用详解-js原生的更多相关文章
- 详解js和jquery里的this关键字
详解js和jquery里的this关键字 js中的this 我们要记住:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象.this对象是在运行时基于函数的执行环境绑定的,在全局环境中 ...
- 详解js变量、作用域及内存
详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4 原文出处: trigkit4 基本类型值有:undefined,NUll,Boolean,Number和Strin ...
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- 详解js的bind、call、apply
详解js的bind.call.apply 说明 虽然bind.call.apply都是js很基础的一块知识,但是我从未认真总结过这三者的区别. 由于公司后端是用的微服务架构,又没有中间层对接,导致前端 ...
- 详解js面向对象编程
转自:http://segmentfault.com/a/1190000000713346 基本概念 ECMA关于对象的定义是:”无序属性的集合,其属性可以包含基本值.对象或者函数.“对象的每个属性或 ...
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- 详解js中的闭包
前言 在js中,闭包是一个很重要又相当不容易完全理解的要点,网上关于讲解闭包的文章非常多,但是并不是非常容易读懂,在这里以<javascript高级程序设计>里面的理论为基础.用拆分的方式 ...
- 详解k8s原生的集群监控方案(Heapster+InfluxDB+Grafana) - kubernetes
1.浅析监控方案 heapster是一个监控计算.存储.网络等集群资源的工具,以k8s内置的cAdvisor作为数据源收集集群信息,并汇总出有价值的性能数据(Metrics):cpu.内存.netwo ...
- Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串
Jquery 选择器 详解 在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...
随机推荐
- Hadoop2-HDFS学习笔记之入门(不含YARN及MR的调度功能)
架构 Hadoop整体由HDFS.YARN.MapReduce三大部分组成,推荐架构参考:https://www.cnblogs.com/zhjh256/p/10573684.html. 注:2.x的 ...
- Bugku-CTF之cookies欺骗
Day22 cookies欺骗 http://123.206.87.240:8002/web11/ 答案格式:KEY{xxxxxxxx} 本题要点:cookie欺骗.base64编码传参
- 顺手写一下HTTP协议
本文目录 一 什么是HTTP协议 二 Http的特点 三 Http报文 回到目录 一 什么是HTTP协议 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写 ...
- ajaxToolkit 异步加载报 错误500的解决方法
设置IIS程序池的托管模式为经典
- Python各种图像库的图像的基本读写方式
目前主流的图像库有几下几种: 1. OpenCV 2. PIL(Pillow) 3. matplotlib.image 4. skimage 5. scipy. ...
- CentOS7攻克日记(二) —— 配置初始化及网络配置
reboot之后到达这个页面,点击第一个进去同意一下协议之后Done,然后点击右下角的FINISH
- 【搬运工】mysql用户权限设置
关于mysql的用户管理,笔记 1.创建新用户 通过root用户登录之后创建 >> grant all privileges on *.* to testuser@localhost id ...
- 'telnet' 不是内部或外部命令,也不是可运行的程序
1.打开控制面板 2. 3. 4.这样就好可,重新打开cmd命令.
- d3.event=null
d3功能奇多, 已经模块化,(其实感觉和react差不多了). 所以默认打包的单个文件 <script src="https://d3js.org/d3.v5.min.js" ...
- Js拾忆
instanceof运算符:他是判断一个构造函数的prototype是否在对象的原型链上查找到 var a = new Array(); console.log(a instanceof Array) ...