前端基础打卡已经基本结束了,内容从css基础,动画,js基本算法,作用域,闭包,节流防抖这些基本的web知识大家有没有都掌握了呢?年后会出一个进阶路线规划图,希望笔者可以带着大家,一起进步,一起成长.
第八周
星期一
1. 写一个js函数，可以生成n*n维矩阵坐标
[参考答案]
/**
* 创建n维矩阵坐标
* @param {number} n 维数,如1,2,3,4
* @param {number} w 单位坐标尺寸, 如1, 100, 200等
*/
function createNSPACE(n, w) {
let pos = []
for(let i=0; i< n; i++) {
for(let j=0; j < n; j++) {
pos.push([j*w, i*w])
}
}
return pos
}
// 使用
createNSPACE(2, 100) // => [[0, 0], [100, 0], [0, 100], [100, 100]]2. 用css3的animation的steps属性实现一个关键帧动画
[参考答案]
<style>
.loading-word {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: #000;
}
.loading-word .word {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 40px;
}
.loading-word .word::before {
content: 'loading...';
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
font-size: 12px;
color: #ccc;
animation: steps steps(4, start) infinite 4s;
}
@keyframes steps {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
</style>
<div class="loading-word">
<div class="word">趣谈前端</div>
</div>星期二
1. em,rem,px的区别，并简单介绍？
[参考答案]
px像素, 相对长度单位。是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸
比如说当前容器font-size:16px;则1em就等于16px;
rem 是CSS3新增的一个相对单位（相对于根元素的）,比如浏览器的默认字体是16px，那么
1rem=16px以此类推计算12px=0.75rem，10px=0.625rem，2rem=32px；
2. HTML5本地存储有哪些方式？说说他们的异同点？
[参考答案]
本地存储方式: cookie, sessionstorage, localstorage
相同点: 都保存在浏览器端, 且都受同源策略影响
不同点:
（1）cookie数据始终在同源的http请求头中携带，cookie在浏览器和服务器之间来回传递，cookie可以限制保存在某个路径下，sessionstorage和localstorage不会自动把数据发送给服务器，仅在本地保存。cookie是浏览器和服务器之间传递数据的媒介。
（2）存储大小不同 cookie数据存储为4k，sessionstorage和localstorage一般在5-10M。
（3）数据存活周期不同，sessionstorage仅在当前浏览器关闭前有效，localstorage始终有效，cookie仅在设置的过期时间前有效。
（4）作用域不同：sessionstorage只作用于当前浏览器窗口，localstorage和cookie在同源窗口中可以共享
星期四
1. 下面的代码输出什么?
var a = 1;
if (function f(){}) {
a += typeof f;
}
console.log(a)
[参考答案]
打印值为: 1undefined.
分析: JavaScript中if语句求值使用的是eval函数，eval(function f(){}) 返回 function f(){} 也就是 true。eval只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回.那么此时在if条件体内部其实没有f这个变量,所以返回undefined
2. 用js实现一个判断任何数据类型的函数(包括基本类型,引用类型, map, set, symbol)
[参考答案]
function checkType(target){
return Object.prototype.toString.call(target).slice(8,-1)
}
周末福利打卡
如何优化SPA应用的首屏加载速度慢的问题？
[参考答案]
代码压缩(gzip)
外部文件按需引入
代码分割(code splitting)
路由组件懒加载
图片懒加载
骨架屏
ssr技术的应用
雪碧图
静态资源走CDN,做好缓存策略
Tree Shaking,做好无用代码的清理
第九周
星期一
1. css中visiblity:hidden和display:none的区别
[参考答案]
是否是继承属性：display不是继承属性，visibility是继承属性，后代元素的visibility属性若存在则不继承，若不存在则继承父元素visibility的值，意味着：父元素的visibility为hidden但是子元素的visibility为visible则子元素依旧可见，子元素visibility不存在则子元素不可见。而元素的display属性设为none其后整棵子树都不可见。
是否占据空间：使用display:none，在文档渲染时，该元素不会渲染（但依然存在文档对象模型树中）；而使用visibility :hidden，其占的空间会被空白占位。即display:none不会在渲染树中出现，visibility :hidden会。
属性改变后是否重新渲染：visibility:hidden不渲染；display:none渲染
是否有transition和animation动画: visibility:hidden有动画,有过渡, display:none没有
2.简单介绍一下vue2.0+版本的组件生命周期及其执行顺序，并说说组件之间通信的几种方式？
[参考答案]
1. 生命周期总结
beforecreate : 可以在这加个loading事件
created ：在这结束loading，做一些初始化，实现函数自执行
mounted ：发起api请求，获取后端数据，配合路由钩子做一些任务
beforeDestory：组件销毁前的操作
destoryed ：组件已被删除后的操作
2.Vue组件间通信的几种方式
props/$emit(比如父组件向子组件传值(父组件通过props向下传递数据给子组件))
emit/emit/on(通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级)
vuex
attrs/attrs/listeners
provide/inject
parent /parent/children与 ref
星期三
1. 写一个方式,实现将rgb颜色转化为hex表示法,如 rgb(255, 255, 255) 转为 #ffffff?
[参考答案]
function rgb2hex(sRGB) {
let res = [];
let reg = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/g
if ( !reg.test(sRGB)){
return sRGB;
}
else {
let reg2 = /(\d+)/g;
sRGB.replace(reg2,function ($0) {
res.push(('0'+(+$0).toString(16)).slice(-2));
});
}
return '#'+res.join('');
}2. 用js实现将字符串转换为驼峰形式？
[参考答案]
function string2Camle(sName) {
let reg = /(\w)?-+(.)?/g
return sName.replace(reg, function (word,s1,s2) {
console.log(word,s1,s2)
if(!s1) {
return s2
}else {
return s2 ? (s1 + s2.toUpperCase()): (s1 + '');
}
})
}星期四
1. 怎样理解 Vue 的单向数据流？
Vue的单向数据流指的是父子之间的props始终是从父级向下流动到子组件中，但反过来则不行。这样会防止子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解和维护。
其次，每次父级组件发生更新时，子组件中所有的prop都将会更新为最新值, 这意味着我们不应该在子组件内部改变 prop。如果我们这样做，Vue会在浏览器的控制台中发出警告。子组件想修改prop，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。
2. vue中computed和watch的区别和运用的场景？
computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算
watch：更多的是「观察」的作用，类似于数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；
运用场景：
当我们需要进行数值计算，并且依赖于其它数据时，应该使用computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都重新计算；
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用watch，使用watch选项允许我们执行异步操作(访问一个API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
周末福利打卡
1. 谈谈你对vue中 keep-alive 的理解？
[参考答案]
keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗，比如从页面a跳转到其他页面后再返回页面a时,不用重新执行页面a的代码，而是从缓存中加载已经缓存的页面a，这样可以减少加载时间及性能消耗，提高用户体验性。
如果需要频繁切换路由，我们就可以考虑用keep-alive，来达到避免数据的重复请求的目的。
<keep-alive>
<router-view> </router-view>
</keep-alive>
其次我们也可以配合router.meta在路由中配置,实现更加自定义的路由缓存.
2. 用js写一个方法,实现数组的二分查找(比如arr = [1,2,3,4,7,6], 我们查找4的位置)
[参考答案]
function binary_search(arr, key) {
var min = 0,
max = arr.length - 1;
while(min <= max){
var mid = parseInt((max + min) / 2);
if(key == arr[mid]){
return mid;
}else if(key > arr[mid]){
min = mid + 1;
}else if(key < arr[mid]){
max = mid -1;
}
}
return -1;
}
京公网安备 11010502036488号