技能考察:一、关于Html1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时 让浏览器的爬虫和机器很好地解析。结构化:头部header、侧栏sider、主体内容main、尾部footer. b、作用:没有css,也能呈现内容结构、代码结构;用户体验;有利于SEO;方便设备解析;利于团队开发和维护;2、h5中新增的属性; 如自定义属性data, 类名className等, 新增表单元素, 拖拽Drag a、在html标签自定义属性"data-xxx",js可以通过dataset设置"data-xxx"自定义属性 b、新增表单元素:datalist、keygen、output3、h5中新增的API, 修改的API, 废弃的API 稍作了解 (离线存储, audio, video)a、localStorage:一直存储在本地,直到手动清除; sessionStorage:页面关闭则缓存清空;b、audio音频(兼容苹果用touchstart)、video视频二、关于CSS1、CSS选择器( 三大特性 )a、层叠性:标签的多个重复的样式,一个属性会覆盖另外一个属性,比如设置一个红色背景,一个黄色背景,只能取其一。b、继承性:子标签会继承父标签样式c、优先级:!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承2、 BFC机制a、创建了BFC的元素中,在垂直方向上的margin会发生重叠。根元素<html>就是一个BFC元素(这个可以解释margin重叠)b、BFC元素在页面上是一个独立的容器,外面的元素和里面的元素互不影响。c、BFC元素不会和浮动的元素重叠。(这个可以解释两栏自适应)d、计算BFC元素高度时,里面浮动元素3、 盒模型a、框模型,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个元素。b、元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度; 元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度。c、w3c标准盒模型: width和height不包括padding和border ie盒模型: width和height包含padding和border4、CSS模块化开发(封装); SCSS和LESS的使用a、scss安装使用npm,less使用ruby5、屏幕适配 以及 页面自适应a、百分比布局b、文字大小用remc、媒体查询6、CSS3中新增的选择器子元素选择器,相邻兄弟选择器,通用兄弟选择器,群组选择器7、CSS3中新增的属性, transform trasition animation等…a、transform: translate,translateX,translateY在水平方向、垂直方向或者两个方向上平移元素b、transform: scale、scaleX、scaleY在水平方向、垂直方向或者两个方向上缩放元素c、transform: rotate 旋转元素d、transform: skew,skewX,skewY在水平方向、垂直方向或者两个方向上使元素倾斜一定的角度e、transform: matrix三、关于布局标准文档流(padding + margin + 负margin) + 浮动float + 定位百分比布局(流式布局): px单位 用 %num代替, 占父级元素的百分比flex弹性布局: 主轴 辅助轴的几个属性grid栅格布局: 使用框架中的类名来替代: 本质上还是百分比布局四、关于JS基础1. 变量数据类型及检测: 基本 + 引用2. 运算符: 算术 + 条件 + 逻辑 + 位 + 短路, 隐式转换等 3. 条件, 循环, 异常处理 if switch(){case xxx:} try catch finally throw 4. 函数定义, 调用方式(apply, call, 直接调用), 传参: 实参给形参赋值5. 字符串, 数组, 对象常用API, 6. 正则表达式五、关于JS高级1. 作用域, 作用域链, 闭包2. 原型, 原型链, 继承3. 函数上下文, this指向4. js的运行机制, 事件队列和循环5. Ajax原理, axios库6. 同步, 异步编程7. jQuery源码学习六、关于浏览器 1. 浏览器的构成和运行机制, 2. 浏览器内核 3. 浏览器交互: BOM和DOM相关webApi, 监听事件 4. 浏览器缓存机制 5. 浏览器的渲染原理 6. 浏览器的安全性: 跨域 和 攻击七、关于网络协议 1. HTTP协议 2. cookie, session, token八、关于ES6语法 1. 字符串, 数组, 对象 扩展的api 2. 变量扩展: let const 解构赋值 块级作用域 3. 函数扩展: 箭头函数 默认参数, rest参数 4. 展开运算符, 模板字符串 5. set 和 map数据结构 6. 迭代器和生成器函数 next 和 yield的理解 7. proxy对象 属性代理器: 属性的读取(get)和设置(set)相关操作 8. promise对象, 异步编程的解决方案 9. async + await: 异步编程的终极方案 promise + generator的语法糖 10. class语法 构造函数的语法糖 11. 模块化编程 export + import 的 导出和导入九、VUE基础 1. 基本指令 2. 实例的 属性 和 方法 3. 实例的生命周期 4. 组件基础: 创建,注册,添加属性方法,套用等… 5. 组件通信传值 父子, 兄弟, 跨级 6. 插槽slot 等…十、VUE高级 1. vue-router: 搭建SPA 路由,组件的配置 路由间的传值 路由跳转 路由的导航守卫 记住在router.js 和 组件页面中的使用方式 2. vuex: 状态管理: 数据仓库store 实例化仓库的5大属性的使用 state, getters, mutations, actions, modules 辅助函数mapState等…, 仓库中计算属性的映射, 方便操作 记住在 store.js 和 组件中 使用方式十一、VUE深入, 源码阅读 1. 数据响应式原理 2. virtual dom 3. diff 算法 4. nextTick等等… 工程能力考察:一、项目能力 1. vue-cli脚手架搭建 和 功能配置 vue.config.js 2. webpack的常用配置 3. 项目构建 打包 4. 熟悉各类框架的文档… 5. UI框架: Bootstrap, MUI, Element-ui等 6. 常用的插件整理, 整理一个自己插件库, 封装自己的方法库,组件库 7. 常用的工具熟练度 8. PC端 和 移动端开发注意事项 9. 经验总结: 快速确定项目的技术选型 10. 坑点总结: 项目遇到坑坑坑!!! 11. 项目中的性能优化记录 ( 都是细节点…多记录 ) 12. 需求文档的理解, 可以结合 项目流程图, UML图 13. 问题解决能力: (bug定位调试, 查找文档, 寻求他人…) 14. 记录习惯养成二、模块化, 组件化开发能力 1. 项目分类; 各类文件整理,分类 2. 各类功能封装 3. 组件和功能模块的抽离, 解耦, 复用内功考察:一、面向对象的编程思想 1. 类的抽象 2. 对象的封装, 继承 为了更好的去管理数据, 分类数据 实现高内聚, 低耦合二、设计模式 设计模式感觉也是 将面向对象思想 再度抽象成现实中 某些特定模式三、数据结构和算法 学习常用的排序搜索算法, 顺序表,链表,栈,队列,树,堆 结构等等… 考验你的 抽象思维 和 数学功底了 将现实需求 抽象成 计算机代码 的思维能力附加技能考察:一. 学习能力持续学习的态度–博客, 笔记记录技术论坛活跃度高, 问答多GitHub开源项目参与二. 了解一门后端语言python, node.js, php等…数据库mysql,redis,mongodb. sql的操作语句, mongo的操作语句, redis操作语句node + express 搭建本地服务等python + django + request + scrapy三. 系统编程Linux命令行操作, 系统文件管理多任务, 多线程, 多进程, 协程, 并发, 并行, 串行, 同步, 异步等概念的理解