`
Everyday都不同
  • 浏览: 722610 次
  • 性别: Icon_minigender_1
  • 来自: 宇宙
社区版块
存档分类
最新评论

【前端】近期前端开发小结

    博客分类:
  • jsp
阅读更多

近期一直在做前端开发。。。感觉自己的知识点被不断刷新。。秉持着好记性不如烂笔头的念头,就此记录下吧,以供参考~

1、js的闭包

当把js函数写在$(document).ready(function(){...}里面,就相当于闭包的效果。被包围起来的js函数内部可以互相调用,但是外部无法直接调用,闭包可以避免前端内存泄漏(?)如:

 

$(document).ready(function(){
	function getOperatorHtml(msg) {
		//...
		e += '<div class="content-top-list" name="on" data-name="'+msg.userName+'" id="'+msg.userName+'_div" onclick="switchShow(\''+msg.userName+'\')">';
		//...
		return e;
	}
	
	function switchShow(userName) {
		//...
	}
}

 点击class为content-top-list的div这个会报错:找不到switchShow方法,而通过调试查看改元素发现Event Listeners也并没有这个switchShow。

 

原因是onclick属性是跟dom节点相关的,相对于闭包里的js函数属于“外部”操作,是无法调用闭包内部的js方法的。

 

2、jquery的delegate绑定事件

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素),即可以给动态生成的元素绑定事件。

父元素必须是在dom上一加载的时候就有的dom元素,而非通过append动态添加,子元素则没有此限制,一般推荐用顶级父元素body即可~

这个方法的神奇之处在于“未来的元素”,也就是说还未append到dom上的元素也能用它来指定。。必须注意是用于“子元素”而非自己本身。用法如:

 

$("body").delegate(".content-top-list","click", function(){
        	//$(this)即是获取当前click的对象
                //.....
    	});

 写body是因为懒得去找子元素.content-top-list的直接父节点,注意作用对象为.content-top-list的元素。

比如1中的情形,我们可以这样绑定,而非直接通过onclick:

$(document).ready(function(){
	function getOperatorHtml(msg) {
		//...
		e += '<div class="content-top-list" name="on" data-name="'+msg.userName+'" id="'+msg.userName+'_div" >';
		//...
		return e;
	}
	
	$("body").delegate(".content-top-list","click", function(){
			var userName = $(this).data("name");
        	switchShow(userName);
    	});
	
	function switchShow(userName) {
		//...
	}
}

 注意:data("attrName")可以获取属性为data-attrName对应的值。

 

3、调用iframe里面的js函数和本页面js函数的先后顺序

之前已经讲过当一个页面嵌入iframe时,本页面和iframe页面的js互相调用的方式,这里需要注意执行顺序,如:

window.frames[0].setLate(name);
if(!isOverflow) {
  switchShow(name)
}

 这个例子里,虽然顺序是先调用iframe的js函数setLate,但是执行顺序是switchShow(name)-->window.frames[0].setLate(name)

可以理解成iframe里的js函数是以子线程的方式被执行,而本页面的js函数是主线程的方式被执行

 

4、滚动条置底

方法为: dom对象.scrollTop = dom对象.scrollHeight;

调用时需注意:

   1)对象是dom对象,如果是jquery对象,需用jquery对象[0]转换成dom对象

   2)该dom对象是存在的(即是一个dom节点真实存在)

   3)改dom对象已经显示出来了。(这点比较容易被忽视,hide时是无效的)

 

5、判断某个元素是否是显示的

if($("selector选择器“).filter(":visible").length>0)

 

6.前端定时器

注意每setInterval一次,就相当于创建一个定时器的“副本”一次,比如:

system["readMessage"] = window.setInterval(function (){readMessage()}, 1000);

如果调用多次,就会启动多个相同的定时器。

但是clearInterval一次,就会把所有的创建好的定时器的“副本”都给关掉。关定时器的经典写法是:

if(system["readMessage"]) {
      clearInterval(system["readMessage"]);
      system["readMessage"]=null;
}

 所以:创建定时器的时候要注意之前是否已经创建过,为避免重复创建(毕竟页面上同个定时器运行多个副本会造成资源浪费或卡顿),如果可能重复创建,建议每次创建前先调用关闭的逻辑在创建。可保证一个定时器只有一个“副本”在运行~

 

7.注意append也有可能触发remove

如:

var $transferContent = top.$("#" + transferFrom).find(".mianze").siblings().not("#historyChat_" + transferFrom);
$contentDiv.append($transferContent);

 会把top.$("#" + transferFrom)的这部分内容追加到$contentDiv,但同时top.$("#" + transferFrom)的这部分内容也会被remove;

而:

var $transferContent = top.$("#" + transferFrom).find(".mianze").siblings().not("#historyChat_" + transferFrom);
var $transferContent2 = $transferContent.clone();
$contentDiv.append($transferContent2);

 这样也会追加到$contentDiv,而top.$("#" + transferFrom)的这部分内容也会被保留下来。

原因:clone出来的内容不在文档流中,不clone,就指向文档流(文档流就是整个dom节点),append是节点的移动,移动当然会删除原有的。append一直就是移动节点,只是常用时经常时直接新增节点(新增的时候内容一般是自己新定义的,所以当然不涉及到删除~)

 

分享到:
评论

相关推荐

    2021年前端程序员的年终工作总结.docx

    5. 数据库开发:在数据库开发方面,前端程序员学习了数据库的设计和操作,如SQL语句优化、数据库设计等,也学习了oracle和access数据库的使用。 6. 自我总结:前端程序员通过对自己的总结,明白了自己的不足之处,...

    Vue.js前端开发实战-自测卷和课后习题答案.rar

    在这个"Vue.js前端开发实战-自测卷和课后习题答案"的压缩包中,包含了与Vue.js实战相关的测试题目及其解答,对于学习者来说是宝贵的资源。 首先,Vue.js的核心概念包括: 1. **数据绑定**:Vue.js实现了双向数据...

    前端web结课作业 小米商城 纯HTML+CSS

    【标题】:“前端Web结课作业 - 小米商城 纯HTML+CSS” 这个项目是基于前端Web技术实现的小米商城的模拟页面,主要采用了HTML和CSS两种基础语言进行开发。HTML(HyperText Markup Language)是网页内容的结构化标记...

    微信小程序(商城)完整代码(后端、前端、小程序端、数据库)

    微信小程序(商城)完整代码包含了构建一个功能完备的线上商城所需的所有组件,涵盖了后端服务、前端展示、小程序客户端以及数据库设计。这个项目为开发者提供了一个全面了解微信小程序开发流程和实践的机会,同时也...

    小试小程序云开发(小结)

    【小试小程序云开发(小结)】 在本文中,我们将探讨小程序云开发的实践与经验,特别是如何利用微信小程序的云端能力进行全栈开发。微信小程序作为一种轻量级的应用形式,自推出以来就受到广泛关注。随着技术的发展,...

    前端结课设计——打地鼠游戏

    【前端结课设计——打地鼠游戏】是一个利用HTML5、CSS3和JavaScript技术实现的互动小游戏,旨在展示前端开发者在课程结束时所掌握的技术能力。这个游戏基于经典的打地鼠玩法,用户需快速点击出现在随机位置的地鼠,...

    springmvc学习笔记-前端控制器、上传、异常、开发心得小结等.zip

    本学习笔记将涵盖前端控制器、文件上传、异常处理以及开发过程中的心得小结。 1. **前端控制器(DispatcherServlet)** 前端控制器是SpringMVC的核心组件,负责接收所有HTTP请求,然后根据请求的类型和映射规则...

    Web前端开发基础:综合练习 .ppt

    --*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能灵活使用HTML、CSS设计网页 能力目标 综合使用HTML、CSS设计网页 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4...

    前端开发必备常用工具函数小结

    在前端开发中,掌握一些常用工具函数能够极大地提高开发效率和代码质量。下面将详细介绍文章中提到的一些关键工具函数,并扩展相关知识。 1. **时间格式化:** 文章推荐使用`moment.js`库来处理时间格式化。`moment...

    Web前端开发基础:制作旅游文本网页.ppt

    第二单元 HTML部分 前端开发基础精品课程》 《Web 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能够设置简单的文本网页 能力目标 熟练设置的属性 知识目标 HTML教程 参考资料 2 教学内容 1 单元目标 3 ...

    Web前端开发基础:CSS控制-标记制作导航菜单.ppt

    --*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 CSS控制标记制作导航菜单 能力目标 学会使用 CSS控制标记 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结...

    2024最新前端自学资料,前端最新学习路线

    五、小结 综上所述,前端自学之路虽然充满挑战,但只要系统学习、勤于实践,并保持对新技术的关注和学习,就能在前端开发领域取得进步。对于有意进入前端领域的初学者来说,上述提供的知识体系和学习路线是一份宝贵...

    Web前端开发基础:CSS制作电子相册.ppt

    --*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能灵活使用 CSS排版 能力目标 学会使用 CSS制作电子相册 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 ...

    Web前端开发基础:CSS控制表单.ppt

    --*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 使用CSS控制页面背景、表格、表单 能力目标 学会使用CSS控制表单 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 ...

    Web应用前端技术的探索与实践

    4.7 小结 51 5 一些应用的问题 51 5.1 21cn.com 51 5.2 综合管理平台 51 5.2.1 文件组织 51 5.2.2 UI 53 5.2.3 Jsp文件胡乱包含 53 6 前端组件及其研发的探索和实践 54 6.1 用户、应用 55 6.2 网站和web应用公共组件...

    Web前端开发基础:CSS控制图文混排.ppt

    --*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能使用CSS控制图文混排 能力目标 CSS选择器类型 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 标签选择...

    网站前端总结

    ### 网站前端设计总结 ... ... - **发展史与开发组织** ... ... - **语义化标记**: 如 `&lt;header&gt;`, `&lt;footer&gt;...而JavaScript则是前端开发的核心,用于实现交互性和动态效果,其语法和特性也是前端工程师必须掌握的基本技能之一。

    网站前端的课程设计

    适合小型网站的课程设计

Global site tag (gtag.js) - Google Analytics