前端基础打卡已经基本结束了,内容从css基础,动画,js基本算法,作用域,闭包,节流防抖这些基本的web知识大家有没有都掌握了呢?年后会出一个进阶路线规划图,希望笔者可以带着大家,一起进步,一起成长.
第八周
星期一
[参考答案]
/**
* 创建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]]
[参考答案]
<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>
[参考答案]
比如说当前容器font-size:16px;
则1em
就等于16px;
1rem=16px
以此类推计算12px=0.75rem,10px=0.625rem,2rem=32px;[参考答案]
(1)cookie数据始终在同源的http请求头中携带,cookie在浏览器和服务器之间来回传递,cookie可以限制保存在某个路径下,sessionstorage和localstorage不会自动把数据发送给服务器,仅在本地保存。cookie是浏览器和服务器之间传递数据的媒介。 (2)存储大小不同 cookie数据存储为4k,sessionstorage和localstorage一般在5-10M。 (3)数据存活周期不同,sessionstorage仅在当前浏览器关闭前有效,localstorage始终有效,cookie仅在设置的过期时间前有效。 (4)作用域不同:sessionstorage只作用于当前浏览器窗口,localstorage和cookie在同源窗口中可以共享
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
[参考答案]
function checkType(target){
return Object.prototype.toString.call(target).slice(8,-1)
}
周末福利打卡
如何优化SPA应用的首屏加载速度慢的问题?
[参考答案]
1. css中visiblity:hidden和display:none的区别
[参考答案]
2.简单介绍一下vue2.0+版本的组件生命周期及其执行顺序,并说说组件之间通信的几种方式?
[参考答案]
1. 生命周期总结 beforecreate : 可以在这加个loading事件 created :在这结束loading,做一些初始化,实现函数自执行 mounted :发起api请求,获取后端数据,配合路由钩子做一些任务 beforeDestory:组件销毁前的操作 destoryed :组件已被删除后的操作
[参考答案]
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('');
}
[参考答案]
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 + '');
}
})
}
Vue的单向数据流指的是父子之间的props始终是从父级向下流动到子组件中,但反过来则不行。这样会防止子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解和维护。 其次,每次父级组件发生更新时,子组件中所有的prop都将会更新为最新值, 这意味着我们不应该在子组件内部改变 prop。如果我们这样做,Vue会在浏览器的控制台中发出警告。子组件想修改prop,只能通过 $emit 派发一个自定义事件,父组件接收到后,由父组件修改。
computed:是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 watch:更多的是「观察」的作用,类似于数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作; 运用场景:
[参考答案]
keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗,比如从页面a跳转到其他页面后再返回页面a时,不用重新执行页面a的代码,而是从缓存中加载已经缓存的页面a,这样可以减少加载时间及性能消耗,提高用户体验性。 如果需要频繁切换路由,我们就可以考虑用keep-alive,来达到避免数据的重复请求的目的。
<keep-alive>
<router-view> </router-view>
</keep-alive>
其次我们也可以配合router.meta在路由中配置,实现更加自定义的路由缓存.
[参考答案]
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;
}