项目vue入坑已有一年之久,从nodejs的安装到v格式的语法,vue监控数据进行dome回写的架构理念均有无数文章深入介绍。
实际到了应用上大家可能更多遇到的是···这个数据回写怎么没反应?那个效果状态如何实现?这个需求是不是能做出来?
更多涉及到的却涵盖各方各面,针对需求实现,以下列举一些经常被提问到的前端技术,前端可不仅仅只局限于vue!
1.简单动画效果如何实现?
分为两种:js实现动作交互,css3实现指定动态。
何谓css3?
对于页面元素实现样式的一套规则标准。css2以及css3其实都是一样的东西。
3就是2的升级版本。性能增加,bug改进,此概念可以类推到html5,所以以后请不要再问我会不会html5了!
大哥们!html5就是html规则的一个版本、版本、版本!
css3+html5很厉害吗?
当然厉害!两套规则发布时间相隔不远,主要在于指导大厂浏览器内核开发,而前端的开发又依赖于浏览器发布出来的css、js接口。
为了适应前端越来越多样化的更迭,新版本较突出的贡献是css加入的动画,html加入画布,多媒体等元素。
css如何实现动画效果
通过@keyframes创建动画。
在@keyframes里指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
把@keyframes创建的动画绑定到一个选择器
如:运行名为myfirst的动画:
div{
animation-name:myfirst; //调用myfirst定义的动画效果
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
@keyframesmyfirst //定义动画效果
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100%{background: red; left:0px; top:0px;}
}
2.dom有哪些事件接口可以通过js进行编写?
在项目需求里面会经常遇到拖移,点击等等事件的编写。dom里有哪些事件呢?
以上是最常用的两类交互事件,在鼠标事件上一个点击事件又存在事件冒泡(内含元素绑定的事件在触发时父级元素事件也会被触发),这种情况需要使用到:
event.stopPropagation(); //阻止事件冒泡到DOM树上
在vue单页面开发中,有时候也会需要对body进行事件的监听,监听方法:
mounted() {
document.body.addEventListener('click',this.functionName, false);
},
beforeDestroy() {
document.body.removeEventListener('click',this. functionName, false); //取消监听
},
在vue页面销毁之前一定需要将监听事件取消,避免污染其他页面应用,new对象同理。
3.html5中的可视化技术:Canvas和SVG
Canvas画布,利用JavaScript在网页绘制图像,通过.getContext("2d")来在画布中绘制图形。能够以.png和.jpg格式保存存储图像,可以说是位图。
SVG,可缩放矢量图形(ScalableVector Graphics),基于可扩展标记语言XML。
svg中的每个图形都是以DOM节点的形式插入到页面中,可以用js或其他方法直接操作,Canvas就像动画,每次显示全部的一帧的内容,想改变里面某个元素的位置或者变化需要在下一帧中全部重新显示。
通常大数据可视化项目中这两类技术应用比较常见,比如地图绘制可以通过svg,密集型图形化动画绘制可以使用Canvas。
4.元素在页面中的定位position
将html元素指定到页面中的固定位置这就是css中的position属性。
在应用transform样式的dom中的fixed定位,父级元素将不再指向浏览器,而是应用了transform样式的dom元素
通过设定元素的z-index值,能强制对绝对定位的元素进行图层的排布,相当于三维中的z轴,数字越大,位置越浮于上。
5.定时器疯狂点击队列问题
在页面没有刷新的时候,通过setTimeout定义的定时器会一直存在,即便在dom销毁的状态下,也会一直触发定时事件,这就需要开发中一定要记得对其进行销毁动作。
varaction=setTimeout(function(){...},1000); //使用变量action接收定时器名称
if(action)clearTimeout(action); //判断定时器是否存在,有的话就清除
6.技术图谱
最后给大家提供一张前端的技术图谱,有兴趣的可以从头了解起!
END