前端知识归纳

2019-04-12 admin

技能考察:

一、关于Html

1、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、output

3、h5中新增的API, 修改的API, 废弃的API 稍作了解 (离线存储, audio, video)

a、localStorage:一直存储在本地,直到手动清除;
   sessionStorage:页面关闭则缓存清空;
b、audio音频(兼容苹果用touchstart)、video视频

二、关于CSS

1、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和border

4、CSS模块化开发(封装); SCSS和LESS的使用

a、scss安装使用npm,less使用ruby

5、屏幕适配 以及 页面自适应

a、百分比布局
b、文字大小用rem
c、媒体查询

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

三、关于布局

  1. 标准文档流(padding + margin + 负margin) + 浮动float + 定位
  2. 百分比布局(流式布局): px单位 用 %num代替, 占父级元素的百分比
  3. flex弹性布局: 主轴 辅助轴的几个属性
  4. 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\. 对象的封装, 继承
       为了更好的去管理数据, 分类数据     实现高内聚, 低耦合

二、设计模式

  设计模式感觉也是 将面向对象思想 再度抽象成现实中 某些特定模式

三、数据结构和算法

   学习常用的排序搜索算法, 顺序表,链表,栈,队列,树,堆 结构等等...
   考验你的 抽象思维 和 数学功底了
   将现实需求 抽象成 计算机代码 的思维能力

附加技能考察:

一. 学习能力

  1. 持续学习的态度–博客, 笔记记录
  2. 技术论坛活跃度高, 问答多
  3. GitHub开源项目参与

二. 了解一门后端语言

  1. python, node.js, php等…
  2. 数据库mysql,redis,mongodb. sql的操作语句, mongo的操作语句, redis操作语句
  3. node + express 搭建本地服务等
  4. python + django + request + scrapy

三. 系统编程

  1. Linux命令行操作, 系统文件管理
  2. 多任务, 多线程, 多进程, 协程, 并发, 并行, 串行, 同步, 异步等概念的理解

[转载]原文链接:https://segmentfault.com/a/1190000018849368

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-61622.html

文章标题:前端知识归纳

相关文章
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
大家在做些页面的时候,很多都是用ajax实现的,在显示的时候有很多表单提交的add或者update操作,显然这样很烦,突然想到了一个比较好的方法,下面给大家分享下如何用js 实现依赖注入的思想,后端框架思想搬到前端来。 应用场景: 前后端一...
2017-03-29
前端单页应用微服务化解决方案2 - Single-SPA
技术选型 经过各种技术调研我们最终选择的方案是基于 Single-SPA 来实现我们的前端微服务化. Single-SPA 一个用于前端微服务化的JavaScript前端解决方案 使用Single-SPA之后,你可以这样做: (兼容各...
2018-09-07
Vue.js bootstrap前端实现分页和排序
写之前先抱怨几句。本来一心一意做.net开发的,渐渐地成了只做前端。最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面。 深知自己前端技术不足,以前虽说用asp.net前后台都做,但...
2017-03-14
详解JavaScript中数组的相关知识
创建数组 js中数组的声明可以有如下几种方式: var arr = []; &#x2F;&#x2F; 简写模式 var arr = new Array(); &#x2F;&#x2F; new一个array对象 var arr = new ...
2017-03-27
JSON相关知识汇总
JSON:JavaScript 对象表示法(JavaScript Object Notation) JSON 语法规则 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON有6种类型的值: 对象、数组、字符串、数字、...
2017-03-25
前端E2E测试框架 cypress了解一下
What is E2E? 所谓的E2E就是end-to-end。 假设我们编写的每个功能程序都是一个黑匣子,最终用户也只会看到这个黑匣子,那么站在用户的角度来看并不需要知道这个黑匣子内部是什么东西也不需要知道怎么实现的,我只管知道最终效果是...
2018-04-29
AngularJS基础知识笔记之过滤器
过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。 S.No. 名称 描述 1 大写 转换文本为大写文本。 2 小写 转换文本为小写文本。 3 货币 货币格式格式文本。 4 过滤器 过滤数组中它根...
2017-03-23
回到顶部