专业技能模块
熟悉HTML5+CSS3 的新功能，并配合Bootstrap 进行PC、移动端的页面开发；熟悉LESS
HTML5
H5新特性
- 新增选择器 document.querySelector、document.querySelectorAll
- 拖拽释放(Drag and drop) API
- 媒体播放的 video 和 audio
- 本地存储 localStorage 和 sessionStorage
- 语意化标签 article、footer、header、nav、section
- 增强表单控件 calendar、date、time、email、url、search
待掌握
- 地理位置 Geolocation
- 桌面通知 Notifications
- 历史管理 history
- 跨域资源共享(CORS) Access-Control-Allow-Origin
- Form Data 对象
- 跨窗口通信 PostMessage
- 绘画 canvas
- 多任务 webworker
- 全双工通信协议 websocket
- 离线应用 manifest
伪类和伪元素
- 伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。(:hover 它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类 )
- 伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。(:before 虽然用户可以看见 这些文本，但是它实际上并不在DOM文档中)
html5语义化
语义化优点
- 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
CSS3
css3新特性
CSS3 边框
- 创建圆角 border-radius : length length;
- 边框阴影 {box-shadow : [inset] x-offset y-offset blur-radius extension-radius spread-radiuscolor} // 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量 模糊半径 阴影扩展半径 阴影颜色}
- 边框图片 border-image
CSS3 背景
- background-size 属性: 在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。
- background-origin 属性 : 规定背景图片的定位区域，背景图片可以放置于 content-box 、padding-box 或 border-box 区域，
- background-clip 属性: 规定背景颜色的绘制区域
- CSS3 多重背景图片 : CSS3 允许为元素设置多个背景图像
CSS3 文本效果
- text-shadow 属性: 给为本添加阴影，能够设置水平阴影、垂直阴影、模糊距离，以及阴影的颜色。
- text-wrap 属性: 设置区域内的自动换行。
CSS3 字体
- 字体定义: 字体需要在 CSS3 @font-face 规则中定义。
- 使用粗体字体: 试直接在html中通过 b 标签也可以实现加粗的效果
CSS3 2D 转换
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸，转换是使元素改变形状、尺寸和位置的一种效果。
translate() 方法: 通过 translate(x , y) 方法，元素根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数从其当前位置移动，x为正值向右移动，为负值向左移动；y为正值向下移动，为负值向上移动；
rotate() 方法: 控制元素顺时针旋转给定的角度。为正值，元素将顺时针旋转。为负值，元素将逆时针旋转。
scale() 方法: 根据给定的宽度（X 轴）和高度（Y 轴）参数，控制元素的尺寸的增加、减少。
skew() 方法:根据给定的水平线（X 轴）和垂直线（Y 轴）参数设置元素翻转给定的角度。
matrix() 方法: matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许旋转、缩放、移动以及倾斜元素。
2D Transform 方法汇总
CSS3 3D 转换
- rotateX() 旋转：绕X轴旋转 eg:（transform: rotateX(120deg);）
- rotateY() 旋转：绕Y轴旋转
CSS3 过渡
通过 CSS3可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式
时为元素添加效果。
要实现这一点，必须规定以下两项内容：
- 设置添加过渡效果的 CSS 属性；
- 设置过渡效果的时长；
注意： 如果时长未设置，则不会有过渡效果，因为默认值是 0;
过渡属性详解
CSS3 动画
CSS3 中通过@keyframes 规则来创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当
前样式（动画开始前的样式）逐渐改为新样式（需要变到的样式）的动画效果。
- 通过from , to关键字设置动画发生的时间
- 通过百分比设置动画发生的时间
动画属性详解
CSS3 多列
- CSS3 创建多列 : column-count 属性规定元素应该被分隔的列数。
- CSS3 规定列之间的间隔: column-gap 属性规定列之间的间隔。
- CSS3 列规则: column-rule 属性设置列之间的宽度、样式和颜色规则。
列属性详解
CSS3 用户界面
- CSS3 resize ： 在 CSS3中 resize 属性设置是否可由用户调整元素尺寸。
- CSS3 box-sizing： box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。边框计算在width中
- CSS3 outline-offset：outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
Bootstrap
什么是Bootstrap？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，Bootstrap就是采用LESS做底层语言的 。
为什么使用 Bootstrap？
- 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持：所有的主流浏览器都支持 Bootstrap。
- 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计
- 它为开发人员创建接口提供了一个简洁统一的解决方案。
- 它包含了功能强大的内置组件，易于定制。
- 它还提供了基于 Web 的定制。
- 它是开源的。
主要使用的是Bootstrap组件官方文档
引入位置如下图：
less 预处理器
- less是一种动态样式语言,属于CSS预处理器的范畴，它扩展了CSS语言
- 增加了变量、Mixin、函数等特性,使CSS更易维护和扩展
- less 既可以在客户端上运行,也可以借助Node.js在服务端运行
- less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
- less的兼容性比较好，而且添加了许多对CSS的扩展，支持变量和函数
- less是一款预处理器即在运行之前进行预处理可以减小运行时消耗的时间
- 但less不是css，浏览器不能直接识别，即浏览器无法执行less代码，要执行必须先将less转换成css
掌握原生JavaScript 操作DOM,BOM 元素，熟悉ES6 的新特性，对于JS 中面向对象，继承，原型链，闭包等面向对象的知识有一定的掌握与了解
原生JavaScript 操作DOM
什么是 DOM？
DOM: 全称 Document Object Mode 文档对象模型，表示由多层节点构成的文档。
document: 表示每个文档的根节点，它的唯一子结点是 html,也就是文档元素 (documentElement)，文档元素是文档最外层的元素，所有子元素都存在于这个元素之内。每个文档只有一个文档元素。
Node： 表示 dom 中的节点，DOM 中一共有12中节点类型，而这12个节点都继承至 Node类型。
原生JavaScript 操作BOM
获取浏览器可视窗口尺寸
- 获取可视窗口宽度：window.innerWidth
- 获取可视窗口高度：window.innerHeight
浏览器的弹出层
- 提示框：window.alert(‘提示信息’)
- 询问框：window.confirm(‘提示信息’) 【点击确定：返回值为true 点击取消：返回值为false】
- 输入框：window.prompt(‘提示信息’) 【点击确认：返回值为输入的内容 点击取消：返回值为null】
开启和关闭标签页
- 开启：window.open(‘地址’)
- 关闭：window.close()
浏览器的常见事件
- 资源加载完毕：window.οnlοad=function(){}
- 可视尺寸改变：window.οnresize=function(){}
- 滚动条位置改变：window.οnscrοll=function(){}
浏览器的历史纪录操作
- 回退页面：window.history.back()
- 前进页面：window.history.forward()
浏览器卷去的尺寸
- 卷去的高度： document.documentElement.scrollTop / document.body.scrollTop
- 卷去的宽度： document.documentElement.scrollLeft / document.body.scrollLeft
浏览器滚动到
- 滚动到：window.scrollTo(参数)
ES6 新特性
变量和作用域
- let 、const、 块级作用域和变量声明
- 解构赋值（按照一定的结构解析出来进行赋值）
原生对象的方法扩展
- String : 模板字符串
- RegExp
- Number
- Function
- 函数参数默认值
- rest参数
- 函数内部严格模式
- 函数的name属性
- 箭头函数
- Array : 扩展运算符…
- Object 和 Symbol
数据结构Set和Map
元编程相关Proxy和Reflect
异步编程Promise、Generator和Async
语言层面类、模块的支持
JS中对象分类、及其它原生对象
Iterator
JS -> 面向对象
面向对象的三个特征，分别说一下什么意思
封装,继承和多态；
封装： 将对象运行所需的资源封装在程序对象中——基本上，是方法和数据。
JS -> 继承
JS -> 原型链
原型
原型就是对象,JS中原型一共有两个,一个是prototype，一个是**__proto__属性**
prototype: 浏览器的标准属性,程序员使用的,显示原型,存在于函数中
__ proto __: 浏览器的非标准属性,浏览器使用的,隐式原型,存在于实例对象中
原型的作用之一:共享数据,节省内存空间
1.实例对象一般都是通过构造函数进行创建的,实例化对象的时候做的四件事:
原型的作用之二:实现JS中的继承
1). 通过改变原型指向实现继承
2). 借用构造函数显示继承
3). 组合继承
4). 拷贝继承:浅拷贝和深拷贝(递归后再说)
JS -> 闭包
- 理解:
- 当嵌套的内部函数引用了外部函数的变量时就产生了闭包(执行外部函数,不一定就会产生闭包)
- 什么时候产生的闭包? 执行内部函数定义(创建内部函数对象)后
- 通过chrome工具得知: 闭包本质是内部函数中的一个对象(非js的容器), 这个容器中包含引用的变量
- 闭包内部包含了被引用变量(函数)的对象
- 说白了,闭包其实就是一种引用关系,引用关系存在于内部函数中,引用的是外部函数的变量的对象(深入理解)
- 函数内部本身是个局部作用域,如果出现闭包,延长了局部作用域的生命周期
- 闭包延长局部变量的生命周期后,如果不及时释放会出现内存泄漏
- 闭包作用:
- 闭包的作用:延长外部函数变量对象的生命周期
- 让函数外部可以操作(读写)函数内部的数据(变量/函数)
- 闭包什么产生的?
- 闭包在嵌套内部函数定义执行完成时就产生了(不是调用)
- 闭包什么时候挂的?
- 在嵌套的内部函数成为垃圾对象的时候
- 闭包的优点/缺点及如何清除闭包
- 优点/缺点: 延长外部函数变量对象的生命周期(不及时清除容易造成内存溢出、泄漏)
- 释放闭包: 让内部函数对象成为垃圾对象, 断开指向它的所有引用
注意问题:函数中定义函数,内部函数没有调用,则不会出现在局部执行上下文的变量对象中
内存泄露 ：是指程序在申请内存后，无法释放已申请的内存空间就造成了内存泄漏，一次内存泄漏似乎不会有大的影响，但内存泄漏堆积后的后果就是内存溢出。
内存溢出： 指程序申请内存时，没有足够的内存供申请者使用，或者说，一个杯子里你非要装一桶的水，那么结果就是内存不够用，即所谓的内存溢出，简单来说就是自己所需要使用的空间比我们拥有的内存大内存不够使用所造成的内存溢出。
熟悉主流框架Vue，了解双向数据绑定及框架原理，熟悉组件化开发
Vue
双向数据绑定及框架原理
组件化开发
熟练使用npm/yarn 管理项目所依赖的各种功能包，git /webpack 等主流研发流程工具
npm/yarn 管理项目
git 工具
webpack工程化
了解后端Nodejs，MySQL 数据库、 SQL 语句
Nodejs
MySQL 数据库
SQL 语句
熟悉Python+Opencv 的计算机视觉编程, 包括目标识别、多传感器融合等
目标识别
多传感器融合
熟悉Linux 操作系统等相关基础知识，有windows/Linux 平台编程经验
Linux 操作系统
熟练掌握Ps
项目模块
介绍项目
仿美团移动端项目
店铺商品的加入购物车功能，商品的下单功能，用户地址管理功能，账号管理功能
主页面有四个分别是 首页，购物车页面，订单页面，个人中心页面 主要的四个界面通过路由实现
采用基于 webpack 的 Vue 进行项目构建，使用 vue-router 实现页面跳转，使用 vuex 管理应用组件状态，使用 axios 与后端进行数据交互
