【面试必看】零经验如何准备前端面试（面试项目技能描述）

转载自b站up主宇哥在学习

1. 技能描述

• 能磨平浏览器兼容性问题
  • 能够使用HTML+ CSS还原设计稿，熟悉HTML5 新属性以及语义化、掌握CSS3动画和 flex、grid、浮动等布局方式。
• 了解浏览器事件循环标准
  • 熟悉JS数据类型及常用API，深入理解原型链、闭包、this等特性，掌握 Promise、async异步处理方案。
• 通过webpack优化项目
  • 掌握Vue/ React(小程序)框架，能使用脚本架和社区提供的工具、UI库，独立搭建项目。
• 核心竞争力之一
  • 掌握git flow分支管理和git、Linux常用命令，熟悉HTTP协议，能与后端同事完成数据交互
• 核心竞争力之二
  • 有较强的学习能力，掌握常用的设计模式、数据结构和算法思想
• 根据公司岗位描述自由发挥

2. 项目

2.1 项目列举

• demo 类，一个仿首页和小游戏
  • 主要体现出对html，css，js的掌握程度
  • 准备2-3个例子
    • 仿写首页
      • 展现出自己扎实的html功底以及对CSS常用布局、选择器的用法、响应式原理、动画、过渡的掌握
      • 比如在写的过程中掌握了各种选择器、子选择器、伪类选择器的用法。
    • 实现一个小游戏
      • 通过这个游戏考验自己抽象的能力，学会如何把复杂的逻辑用代码表示
      • 例如：2048，在写的过程中需要考虑游戏初始化包括4X4的网格，生成两个方块，键盘事件的监听，上下左右触发对应的函数，每次移动后方块是否合并，分数增加、布局的改变、已经新生方块的位置，判断游戏是否满足终止条件
      • 最主要的是能把一个项目做到最优（完善到自己能做到的最好的程度）
  • 工具：网页栅格尺
• 组件或工具库
  • 实现一个可配置的swipe组件或者listview组件
    • 通过自定义表单创建一张问卷调查
    • 实现一个popDialog
    • 甚至可以是一个日期选择器
    • 示例：图片上传组件
      • FormData 属性
        • 可以学到FormData 属性以及他所提供的的API兼容性如何
      • 原生XMLHttpRequest如何使用
      • canvas 实现压缩、添加水印
        • 如果图片过大，你需要考虑canvas实现一个简易的图片压缩算法，还能学到给图片加水印
      • navigator.userAgent 判断拍照手机型号、Exif.js读取元数据改变角度心
        • 如果是拍照后直接上传，还需要考虑手机系统的识别决定拍到的角度是否需要调整
      • 判断文件后缀和类型复习正则，甚至还可以学习到文件流（Blob）
      • 文件流操作
• 真实项目的某些模块，重点了解背景

2.2 描述项目的思路

考虑：为什么 -> 用什么 -> 怎么做 -> 成果展示

• 有什么样的需求遇到什么样的困难
• 决定使用什么技术或方案
• 方案落地并不顺利过程中我如何克服
• 取得了什么样的效果我从中的思考与收获
  示例：
  

2.3 如何描述自己在项目中遇到的难点

作为一个零经验的前端小白，面试时面试官更看重的是我们掌握的基础知识以及知识深度。如果能好好准备上面这些项目再加上多刷一些面试题好好巩固一下基础的话，找一份工作还算可以的。