脑子混了记得不多了,记得多少就记录多少吧。。。。
使用css实现一个持续的动画效果
animation:mymove 5s infinite;@keyframes mymove {from {top:0px;}to {top:200px;}}
主要考: animation 用法
使用js实现一个持续的动画效果
最开始的思路是用定时器实现,最后没有想的太完整,面试官给出的答案是用 requestAnimationFrame。
- requestAnimationFrame
由于之前没有用过这个 API 所以是现学的。
//兼容性处理
最近有很多想学习前端开发,他们问我有没有什么好的web前端学习资料及前端的一些项目实战,我本是一名前端程序员,对于web前端,网页制作这方面的资料我肯定是有的啦!
获取方式:加web前端技术学习群:685362217
不足之处请指正(毕竟是现学的)顺便查了一下优势:
- 浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果
- 解决毫秒的不精确性
- 避免过度渲染(渲染频率太高、 tab 不可见暂停等等) 注: requestAnimFrame 和 定时器一样也头一个类似的清除方法cancelAnimationFrame。
右边宽度固定,左边自适应
第一种:
<style>body{ display: flex;}.left{ background-color: rebeccapurple; height: 200px; flex: 1;}.right{ background-color: red; height: 200px; width: 100px;}</style><body> <div class="left"></div> <div class="right"></div></body>
第二种
#container{ position:relative;}#center{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px;}第三种#container{ position:relative;}#center{ position:absolute; margin:auto; top:0; bottom:0; left:0; right:0;}第四种 flex#container{ display:flex; justify-content:center; align-items: center;}
四种定位的区别
- static 是默认值
- relative 相对定位 相对于自身原有位置进行偏移,仍处于标准文档流中
- absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指 position不是 static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以 body元素为偏移参照基准, 完全脱离了标准文档流。
- fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。
Flex布局用的多吗?
因为项目考虑兼容 IE9 所以直接说用的不多
移动端适配怎么做的?
使用媒体查询做的响应式布局,根据不同屏幕宽度加载不同 css.
let与var的区别?
let 为 ES6 新添加申明变量的命令,它类似于 var,但是有以下不同:
- var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象
- let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升
- let 不允许重复声明.
为什么 var 可以重复声明?(这个就不知道了)
当我们执行代码时,我们可以简单的理解为新变量分配一块儿内存,命名为 a,并赋值为 2,但在运行的时候编译器与引擎还会进行两项额外的操作:判断变量是否已经声明:
- 首先编译器对代码进行分析拆解,从左至右遇见 var a,则编译器会询问作用域是否已经存在叫 a 的变量了,如果不存在,则招呼作用域声明一个新的变量 a,若已经存在,则忽略 var 继续向下编译,这时 a = 2被编译成可执行的代码供引擎使用。
- 引擎遇见 a=2时同样会询问在当前的作用域下是否有变量 a,若存在,则将 a赋值为 2(由于第一步编译器忽略了重复声明的var,且作用域中已经有 a,所以重复声明会发生值得覆盖而并不会报错)。若不存在,则顺着作用域链向上查找,若最终找到了变量 a则将其赋值 2,若没有找到,则招呼作用域声明一个变量 a并赋值为 2。 参考链接
封装一个函数,参数是定时器的时间,.then执行回调函数。
function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time));}
一个关于 this 指向的问题
差不多应该是这样,记不太清了
obj = { name: 'a', getName : function () { console.log(this.name); }}var fn = obj.getNameobj.getName()var fn2 = obj.getName()fn()fn2()
CommonJS 中的 require/exports 和 ES6 中的 import/export 区别?
- CommonJS 模块的重要特性是加载时执行,即脚本代码在 require 的时候,就会全部执行。一旦出现某个模块被”循环加载”,就只输出已经执行的部分,还未执行的部分不会输出。
- ES6 模块是动态引用,如果使用 import 从一个模块加载变量,那些变量不会被缓存,而是成为一个指向被加载模块的引用,需要开发者自己保证,真正取值的时候能够取到值。
- import/export 最终都是编译为 require/exports 来执行的。
- CommonJS 规范规定,每个模块内部, module 变量代表当前模块。这个变量是一个对象,它的 exports 属性(即module.exports )是对外的接口。加载某个模块,其实是加载该模块的 module.exports 属性。
- export 命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
一行代码实现数组去重?
[...new Set([1,2,3,1,'a',1,'a'])]
使用addEventListener点击li弹出内容,并且动态添加li之后有效
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul>
这个题没答出来