工作日常--内存和性能
来源:互联网 发布:装安卓平面设计软件 编辑:程序博客网 时间:2024/04/30 16:00
- 事件委托
在最初还没有出现类似于jquery这种第三方库的时候,很多人习惯了为页面中的dom添加很多的事件。在页面元素相对来说少的情况下,是可以这么做。可是在比如点击某个下拉列表的单个项的时候,为每个标签单独命名id,然后绑定事件既繁琐又不是很方便。如下代码
<ul id="my_ulChildren"> <li id="children1"></li> <li id="children2"></li> <li id="children3"></li></ul><script> var child1 = document.getElementById("children1"); var child2 = document.getElementById("children2"); var child3 = document.getElementById("children3"); child1.onclick = function(){} child2.onclick = function(){} child3.onclick = function(){}</script>
如上的代码,应该在实际开发中很多人都写过。/捂脸 笔者在最开始接触的时候也写过类似的代码。
但,其实我们可以用事件委托来实现点击单个li元素,用到的也是事件冒泡。
<ul id="my_ulChildren"> <li id="children1">第一个儿子</li> <li id="children2">第二个儿子</li> <li id="children3">第三个儿子</li> </ul> <script type="text/javascript"> let cavans = document.getElementById("my_ulChildren"); cavans.onclick = function(e) { switch (e.target.id) { case "children1": console.log(e.target.innerHTML) break; case "children2": console.log(e.target.innerHTML); break; case "children3": console.log(e.target.innerHTML); break; } } </script>
为什么不提倡第一种处理方式呢?每个触发事件都是一个函数,都会存放到内存中。那么自然就会消耗性能。故,利用事件委托完美的解决了这个问题。
- 移除事件处理程序
有时我们移除已有事件委托的元素的时候,会遇到该元素已经没有了。但是该元素的事件依然放在内存中。如下代码
<div id="myDiv"> <input type="button" value="按钮" id="myBtn" ></div><script> let myDiv = document.getElementById("myDiv"); let btn = document.getElementById("myDiv"); btn.onclick = function(){ // 正确做法 // myBtn.onclick = null; myDiv.innerHTML = ''; console.log(23333);}</script>
正确的处理方法如上注释代码/
- 日常开发总结
在定义变量的时候,尽量避免使用全局变量定义。亦或者你定义了全局变量之后,在不使用它的时候给他指定为null值。虽然今天写的只是对于现在我们普通的开发来说早已不是什么大事情,如今的手机内存甚至比一些电脑的内存都多。亦或者我么根本不用考虑电脑端的一些内存占用问题。但是我还是觉得,对于开发就得有自己所坚持的,无所谓别人怎么写代码。自己要写的规范,降低内存使用率。
明晚继续。。。。。。
阅读全文
0 0
- 工作日常--内存和性能
- websphere性能设置和日常维护
- websphere性能设置和日常维护
- 内存和性能
- JVM内存和性能
- javascript内存和性能
- JavaScript内存和性能
- JS 内存和性能
- 事件---内存和性能
- 高可用性dataguard搭建和日常维护工作
- 日常上班工作
- 工作日常心得
- 工作日常--javascript事件
- 工作日常1
- java内存和工作原理
- Oracle日常性能查看
- Oracle日常性能查看
- Oracle日常性能查看
- yii2 The file or directory to be published does not exist
- 分布式Tomcat session共享
- selenium+python自动化测试(4)
- Mysql数据库迁移
- 相机校准和3D重建
- 工作日常--内存和性能
- python基础知识
- linux变量操作
- STM32F103ZET(基于秉火开发板)+Cubemx(F1 V1.60库)+RTC(修复官方例程日期不更新bug)
- 设计模式学习
- 会话技术-显示用户的上次访问时间(十七)
- 计组第四章-存储系统
- Restful
- sizeof(数组名)和sizeof(指针)