专栏首页趣谈前端前端进阶第8-9周打卡题目汇总

前端进阶第8-9周打卡题目汇总

前端基础打卡已经基本结束了,内容从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应用的首屏加载速度慢的问题?

[参考答案]

  1. 代码压缩(gzip)
  2. 外部文件按需引入
  3. 代码分割(code splitting)
  4. 路由组件懒加载
  5. 图片懒加载
  6. 骨架屏
  7. ssr技术的应用
  8. 雪碧图
  9. 静态资源走CDN,做好缓存策略
  10. Tree Shaking,做好无用代码的清理

第九周

星期一

1. css中visiblity:hidden和display:none的区别

[参考答案]

  1. 是否是继承属性:display不是继承属性,visibility是继承属性,后代元素的visibility属性若存在则不继承,若不存在则继承父元素visibility的值,意味着:父元素的visibility为hidden但是子元素的visibility为visible则子元素依旧可见,子元素visibility不存在则子元素不可见。而元素的display属性设为none其后整棵子树都不可见。
  2. 是否占据空间:使用display:none,在文档渲染时,该元素不会渲染(但依然存在文档对象模型树中);而使用visibility :hidden,其占的空间会被空白占位。即display:none不会在渲染树中出现,visibility :hidden会。
  3. 属性改变后是否重新渲染:visibility:hidden不渲染;display:none渲染
  4. 是否有transition和animation动画: visibility:hidden有动画,有过渡, display:none没有

2.简单介绍一下vue2.0+版本的组件生命周期及其执行顺序,并说说组件之间通信的几种方式?

[参考答案]

1. 生命周期总结 beforecreate : 可以在这加个loading事件 created :在这结束loading,做一些初始化,实现函数自执行 mounted :发起api请求,获取后端数据,配合路由钩子做一些任务 beforeDestory:组件销毁前的操作 destoryed :组件已被删除后的操作

2.Vue组件间通信的几种方式

  1. props/$emit(比如父组件向子组件传值(父组件通过props向下传递数据给子组件))
  2. emit/emit/on(通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信,包括父子、兄弟、跨级)
  3. vuex
  4. attrs/attrs/listeners
  5. provide/inject
  6. 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:更多的是「观察」的作用,类似于数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作; 运用场景:

  1. 当我们需要进行数值计算,并且依赖于其它数据时,应该使用computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都重新计算;
  2. 当我们需要在数据变化时执行异步或开销较大的操作时,应该使用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;
}

本文分享自微信公众号 - 趣谈前端(beautifulFront),作者:徐小夕

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 初中级前端面试题目汇总和答案解析

    •const和let•模板字符串•箭头函数•函数的参数默认值•Spread / Rest 操作符•二进制和八进制字面量(通过在数字前面添加0o或0O即可将其转为...

    徐小夕
  • 使用Intersection Observer API实现视频队列自动播放

    笔者利用空余时间研究了一下javascript的Intersection Observer API,发现其有很大的应用场景,比如图片或者内容的懒加载,视差动画等...

    徐小夕
  • 《精通react/vue组件设计》之快速实现一个可定制的进度条组件

    这篇文章是笔者写组件设计的第四篇文章,之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳...

    徐小夕
  • 为什么旧金山的科技人才正准备回流纽约?

    这些高科技人才来到旧金山,导致房租上涨,现在他们又准备离开了。 至少,他们当中大部分人想要离开。来自人才招聘平台Woo.io的报告显示准备离开湾区的高科技人才...

    点滴科技资讯
  • windows / linux系统中,端口被占用解决方法

    一、在windows操作系统中,查询端口占用和清除端口占用的程序 提升权限后用:netstat -b 或用 1、查询端口占用的进程ID          ...

    流柯
  • 如何解决windows系统和linux系统中端口被占用的问题

    这篇文章主要介绍了如何解决windows系统和linux系统中端口被占用的问题的相关资料,需要的朋友可以参考下

    习惯说一说
  • 中文全文检索讯搜xunsearch安装

    Xunsearch (迅搜)是一套免费开源的专业中文全文检索解决方案,简单易用而且 功能强大、性能卓越能轻松处理海量数据的全文检索。它包含后端索引、搜索服务程序...

    ytkah
  • 虚机RAC因CTK参数无法启动的处理解析

    虚机RAC的一个节点失去连接,进入vSphere检查发现虚拟机电源关闭。打开电源时发生如下错误:

    孙杰
  • 看我如何绕过某托管公司域上的强大XSS过滤器

    本文为大家分享的是最近一次绕过某托管公司域上的XSS过滤器的经历。话不多说,下面我们直入主题!

    FB客服
  • 为博客添加 Gitalk 评论插件结语

    BY

扫码关注云+社区

领取腾讯云代金券