结构层 HTML
DOCTYPE
<!DOCTYPE html>
声明:
表示兼容 HTML 的所有历史版本以及最新的 HTML5 版本,不支持HTML5中的DOCTYPE定义的浏览器仍然会使用HTML4.01等历史版本的兼容模式来进行文档解析。
语义化标签
在恰当的位置上使用语义恰当的标签
- 用正确的标签做正确的事情,杜绝全部使用无任何语义的
<div>
标签来实现嵌套 - 尽量使用带有语义化结构的标签
- 使项目维护人员更容易对代码进行分块,便于阅读理解
标签的分类
- 行内元素:默认宽度由内容宽度决定
<a>
<b>
<img>
<span>
<input>
<button>
<select>
<strong>
- 块级元素:默认宽度为父元素宽度的 100%
<div>
<ul>
<ol>
<li>
<dl>
<dt>
<dd>
<h1>
…<h6>
<p>
<table>
- 空元素:不显示内容,但对页面解析有着其他作用
<br>
<hr>
<link>
<meta>
<area>
<base>
<col>
<command>
<embed>
<keygen>
<param>
<source>
<track>
H5 新增标签
<header></header>
页面头部元素<video src=""></video>
视频<source />
插入视频或音频的属性配置参数<article></article>
描述段落文章<time></time>
输出时间<datalist></datalist>
可选数据列表,配合<input>
使用<progress></progress>
显示 JavaScript 执行进度<command />
定义命令按钮
H5 标签新增属性
<input>
新增 atuocomplete placeholder atuofocus required<type>
新增 email url number range color search date
行为层 JavaScript
ECMAScript 标准
ECMAScript 5
-
ECMAScript5 内容主要包括严格模式、JSON 对象、新增 Object 接口、新增 Array 接口和 Function.prototype.bind。
-
JSON
JSON.parse()
字符串转 JSONJSON.stringify()
JSON 转字符串JSON.toString()
调用 Object 上的 toString 方法,获取 JSON 对象的值转为字符串JSON.valueOf()
获取某个对象的值JSON.toLocaleString()
与 JSON.toString() 类似,但对于 Date 对象,会返回格式化后的时间字符串
-
bind()
绑定函数,重新绑定 this 变量,将第一个参数作为 this -
String.trim()
去掉多余空格 -
Date.now()
Date.toJSON()
ECMAScript 6
-
块级作用域变量声明关键字 let、const
- const 必须进行初始化赋值,一旦赋值后不能进行二次修改赋值
- 在全局作用域下用 let、const 声明的变量不会作为属性添加到全局作用域对象里
- 使用 let、const 执行语句比 var 快约 65%
-
字符串模板
let test = '000' let str = `111 ${test} 222 `;
不会压缩空格和换行,按照原有格式输出
-
解构赋值
- 数组解构:
let [a, b, c] = [11, 22]
console.log© //undefined
按顺序执行,常量个数不够的,会被定义为 undefined; 个数超出的会被舍弃。 - 对象解构:
let [one, two, three] = {two:2, three:3, one:1}
根据对象引用的键名赋值,无视顺序,如果有已经声明的对象,会当做重复声明处理(报错)
- 数组解构:
-
数组新特性
...
复制:
const arr = [1, 2, 3]; const arr1 = [...arr];
keys()
遍历键名values()
遍历键值entries()
遍历键值对
-
函数参数
增加了默认参数、不定参数和拓展参数 -
箭头函数
=>
函数内的 this 与外部相同 -
添加了 class 关键字(类)
-
import/export module(模块)
-
循环与迭代器
- for … in 遍历对象
- for … of/map/forEach 遍历数组
- 迭代器 iterator
let iterator = numbers[Symbol.iterator](); iterator.next(); // 返回 {done: false, value:item} => {循环遍历是否完成,next()调用获取到的值}
-
生成器 Generator
-
集合类型 Map Set WeakMap WeakSet
- Set: 增强的数组类型
- Map: 增强的对象类型
- WeakSet: 只存储对象类型的元素,不能遍历,没有 size
- WeakMap: 只接受基本类型的值作为键名,没有 keys, values, entries 等遍历方法
**JS 可能产生内存泄漏的场景:**闭包函数,全局变量,对象属性循环引用,DOM节点删除时未解绑事件,Map和Set的属性直接删除。(Map和Set使用的是强引用,属性元素被移除时回收机制无法回收占用的内存)
-
Promise、Symbol、Proxy 增强类型
-
Promise
Promise.then 解决异步的多层嵌套问题let promise = new Promise(function(resolve, reject){ ... }); promise.then(function(msg) { return msg; });
-
Symbol
- ES6 新增的基本数据类型,Symbol 变量是不能被重复声明的
- 一般作为属性键值,能避免对象属性键的命名冲突
let object = {}; let name = Symbol(); object[name] = 'ouven';
-
Proxy
可以拦截某个对象的属性访问方法,然后重载对象的’.'运算符let object = new Proxy({}, { get: function(target, key, receiver) { return Reflect.get(target, key, receiver); }, set: function(target, key, value, receiver) { return Reflect.set(target, key, value, receiver); } });
-
-
统一码
- Unicode(目前不建议使用)
-
进制数支持
- 二进制 0b1111
- 八进制 0o1111
-
Reflect 对象和 tail calls 尾调用
- Reflect 对象用于对原有对象进行赋值和取值操作,但不会触发 getter 和 setter 调用(使用
=
对对象进行赋值或取值操作会自动触发getter或setter方法) - tail calls 保证函数尾部调用时调用栈有一定的长度限制
- Reflect 对象用于对原有对象进行赋值和取值操作,但不会触发 getter 和 setter 调用(使用
ECMAScript 7+
-
幂指数操作符
x**y
相当于 Math.pow(x, y) -
Array.prototype.includes
判断数组里是否包含某元素 -
异步函数 async/await
const asyncFunction = async function() { const numbers = [1, 2, 3]; for(let number of numbers) { await sleep(3000); console.log(number); } } let result = asyncFunction(); console.log('finish'); /* finish 1 2 3 */
异步实现的方法: setTimeout、事件监听、观察者模式、$.Deferred、Promise、Generator、async/await、第三方 async 库
TypeScript
- 强类型支持
- 声明时需要定义变量的类型
- Decorator 装饰器特性
- 用来注解 class、property、method、parameter
表现层 CSS
CSS 选择器
-
选择器类型:
id选择器,类选择器,元素选择器,组合选择器,伪类,伪元素
-
选择器属性优先级:
!important > 内联 style(1000) > #id(100) > .class(10) > element(1)
-
伪类和伪元素的区别:
- 伪元素会在HTML中添加before或after之类内容
- 伪类表示元素在用户不同操作下的状态或者选择指定某些元素的描述,如:visited、:hover、:first-child、:nth-child、:enable、:checked
前端界面技术
CSS 样式统一化
- reset: 将元素的 margin 和 padding 都设为 0
- normalize: 将元素的 margin 和 padding 都设为 5px
- neat: 将与文本相关的元素的 margin 和 padding 都设为 5px,其余元素设为 0
CSS 预处理
- 预处理工具:SASS、LESS、Stylus、postCSS
- 一般具有的特性:
- 变量声明和计算
- 语法表达式:if-else、for循环等
- 函数处理
- 属性的继承
- 兼容性补全
动画实现
- JavaScript直接实现动画
- 可伸缩矢量图形SVG动画
- CSS3 过渡动画 transition
- CSS3 animation
- Canvas 动画 元素
- requestAnimationFrame。
响应式网站开发技术
响应式设计
根据不同设备浏览器尺寸或分辨率展示不同的页面内容
实现方式
- 通过前端或后端判断 userAgent 来跳转不同的页面
- 使用 Media query 媒体查询等手段让页面根据不同设备浏览器自动改变页面布局和显示
如:使用 bootstrap 响应式自动布局框架
选择哪种实现方式应考虑:
* 能否使用同一个站点域名避免跳转
* 能否保证移动端加载的资源内容最优
* 如何做移动端和桌面浏览器的差异化功能
* 如何根据更多的信息进行更加的灵活判断,而不仅仅依靠 userAgent
结构层响应式
图片响应式:通过 Media query 判断、、模板判断、图片服务器判断
表现层响应式
- 响应式布局(PC 端优先,扩展到移动端)
- 通过栅格系统解决百分比方式布局
- 屏幕适配布局(主要针对移动端,内容按照屏幕大小自动缩放比例的布局方式)
- 通过 zoom 属性 或 rem 单位
行为层响应式
分为 JavaScript 内容在前端引入和在后端引入两种情况。