JavaScript 语言中的 for 循环用于多次执行代码块，它是 JavaScript 中最常用的一个循环工具，还可用于数组的遍历循环等。
我们为什么要使用 for 循环呢？打个比方，例如我们想要控制台输出1到1000之间的所有数字，如果单写输出语句，要写1000句代码，但是如果使用 for 循环，几句代码就能实现。总之，使用 for 循环能够让我们写代码更方便快捷（当然啦，否则要它干嘛）。
for 循环语法
语法如下所示：
for(变量初始化; 条件表达式; 变量更新) {
// 条件表达式为true时执行的语句块
}
变量初始化，表示代码块开始前执行。
条件表达式，定义运行循环代码块的条件。
变量更新，在循环代码块每次被执行之后再执行。
示例：
例如我们在一个HTML文件中，编写如下代码，实现计算1到100的总和：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
<script>
var result = 0;
for(var i = 1; i <= 100; i++) {
result = result + i;
}
alert(result);
</script>
</body>
</html>
在浏览器中打开这个文件，会弹出一个弹出层，弹出层中显示的是1到100的总和：
上述代码中，我们声明了一个变量 result 并给它赋值为 0，表示初始的总和为 0 。
然后在 for 循环中三个语句：
变量初始化 i = 1，表示从 1 开始计算。
条件表达式 i <= 100，表示只要 i 小于等于 100 循环就会一直执行，当 i 大于 100 循环会停止。
变量更新 i++，之前我们学运算符的时候学过，这是递增运算符 ++，表示为其操作数增加 1。
此时我们可以一点点来看这个 for 循环：
第一次循环： result = 0 + 1 // 此时result值为0， i的值为1
第二次循环： result = 1 + 2 // 此时result值为0+1，i的值为2
第三次循环： result = 3 + 3 // 此时result值为1+2，i的值为3
第四次循环： result = 6 + 4 // 此时result值为3+3，i的值为4
第五次循环： result = 10 + 5 // 此时result值为6+4，i的值为5
...
我们只需要搞清楚 for 循环中的执行原理，不需要手动来计算求和，只要写好代码，执行代码后计算机会很快会告诉我们1到 100 的总和。
再补充一下，上述代码中result = result + i，我们也可以写成 result += i，这是我们之前学过的加赋值运算符，还记得吗？
示例：
再来看一个例子，例如我们可以使用 for 循环来实现数组遍历，首先定义一个数组 lst：
var lst = ["a", "b", "c", "d", "e"];
在写 for 循环时，首先就是要搞清楚小括号里面的三个语句，因为我们可以通过数组中元素的下标索引来获取元素的值，而数组的索引又是从 0 开始，所以变量初始化可以设置为i = 0。第二个条件表达式，因为数组中最后一个索引为 lst.length - 1，所以只要小于等于 lst.length - 1，循环就会一直执行。而i <= lst.length - 1 就相当于 i<lst.length。第三个变量更新，当循环每循环一次，索引值就加一，所以为 i++。
所以循环可以像下面这样写：
for(i = 0; i<lst.length; i++){
console.log(lst[i]); // 输出数组中的元素值，从索引为0的值开始输出，每次加1，一直到lst.length-1
}
输出：
a
b
c
d
e
其实遍历数组还有一种更好的方法，就是使用 for...in 循环语句来遍历数组。
for...in 循环
for...in 循环主要用于遍历数组或对象属性，对数组或对象的属性进行循环操作。for...in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。
语法如下：
for (变量 in 对象) {
// 代码块
}
for 循环括号内的变量是用来指定变量，指定的可以是数组对象或者是对象属性。
示例：
使用 for...in 循环遍历我们定义好的 lst 数组：
var lst = ["a", "b", "c", "d", "e"];
for(var l in lst){
console.log(lst[l]);
}
输出：
a
b
c
d
e
除了数组，for...in 循环还可以遍历对象，例如我们遍历 侠侠 的个人基本信息：
var object = {
姓名:'侠侠',
年龄:'22',
性别:'男',
出生日期:'1997-08-05',
职业:'程序员',
特长:'跳舞'
}
for(var i in object) {
console.log(i + ":" + object[i]);
}
输出：
姓名: 侠侠
年龄: 22
性别: 男
出生日期: 1997-08-05
职业:程序员
特长:跳舞
动手小练习
请自定义一个长度为7的数组，然后通过 for 循环将数组中的元素遍历出来。
求和：1~100的奇数和。
求和：1~100的偶数和。
使用对象定义一个人的个人信息（包括姓名、性别、年龄、出生日期、兴趣爱好、职业、特长等），然后使用 for...in 循环将这些信息遍历输出。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
表格需求
一般管理系统对表格会有以下需求
可以分页（需要有分页条）
可以多选（表格带复选框）
顶部需要加一些操作按钮（新增，删除等等）
表格每行行尾有操作按钮
表格行可以编辑
如下图为一个示例表格
如果我们直接使用element-ui提供的组件的话，那么开发一个这样的表格就需要使用到以下内容
需要使用表格的插槽功能，开发每一行的按钮
需要通过样式调整顶部按钮，表格，分页条的布局样式
需要监听分页的事件然后去刷新表格数据
顶部按钮或操作按钮如果需要获取表格数据，需要调用表格提供的api
对于有行编辑的需求，还需要通过插槽去渲染行编辑的内容，同时要控制行编辑的开关
不仅仅开发表格比较麻烦，而且还要考虑团队协作，如果每个人实现表格的方式存在差别，那么可能后期的维护成本也会变得很高。那怎么办呢？
项目安装
安装插件
在使用element-ui的项目中，可以通过以下命令进行安装
npm install vue-elementui-table -S
在项目中使用
在main.js中添加以下代码
import ZjTable from 'vue-element-table'
Vue.use(ZjTable)
然后即可像下文中的使用方式进行使用
表格配置
为了满足团队快速开发的需要，小编对上面提出来的需求进行了封装，然后使用的时候，开发人员只需要配置一些JSON便可以完成以上功能的开发。
基础配置
一个基础的表格包含了数据和列信息，那么如何用封装的表格去配置呢？
<template>
<zj-table
:columns="columns"
:data="data"
:pagination="false"
/>
</template>
<script>
export default {
data() {
return {
// 表格的列信息, 数组每一项代表一个字段，可以使用element 列属性的所有属性，以下仅为示例
columns: Object.freeze([
{
// 表头显示的文字
label: '姓名',
// 对应数据里面的字段
prop: 'name'
},
{
label: '性别',
prop: 'sex',
// 格式化表格,与element-ui 的表格属性相同
formatter(row, column, cellValue) {
return cellValue === 1 ? '男' : '女'
}
},
{
label: '年龄',
prop: 'age'
}
]),
data: [
{
name: '子君',
sex: 1,
age: 18
}
]
}
}
}
</script>
通过上面的配置，就可以完成一个基础表格的开发，完整代码见 https://github.com/snowzijun/vue-element-table/blob/master/example/views/demo/base.vue，效果如下图所示
表格默认会显示复选框，也可以通过配置selectable属性来关闭掉
添加分页
简单的表格用封装之后的或未封装的开发工作量区别并不大，我们继续为表格添加上分页
<template>
<!--
current-page.sync 表示页码, 添加上 .sync 在页码发生变化时自动同步页码
page-size.sync 每页条数
total 总条数
height="auto" 配置height:auto, 表格高度会根据内容自动调整，如果不指定，表格将保持充满父容器，同时表头会固定，不跟随滚动条滚动
@page-change 无论pageSize currentPage 哪一个变化，都会触发这个事件
-->
<zj-table
v-loading="loading"
:columns="columns"
:data="data"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:total="total"
height="auto"
@page-change="$_handlePageChange"
/>
</template>
<script>
export default {
data() {
return {
columns: Object.freeze([
// 列字段与上例一样，此处省略
]),
data: [],
// 当前页码
currentPage: 1,
// 每页条数
pageSize: 10,
// 总条数
total: 0,
// 是否显示loading
loading: false
}
},
created() {
this.loadData()
},
methods: {
// 加载表格数据
loadData() {
this.loading = true
setTimeout(() => {
// 假设总条数是40条
this.total = 40
const { currentPage, pageSize } = this
// 模拟数据请求获取数据
this.data = new Array(pageSize).fill({}).map((item, index) => {
return {
name: `子君${currentPage + (index + 1) * 10}`,
sex: Math.random() > 0.5 ? 1 : 0,
age: Math.floor(Math.random() * 100)
}
})
this.loading = false
}, 1000)
},
$_handlePageChange() {
// 因为上面设置属性指定了.sync,所以这两个属性会自动变化
console.log(this.pageSize, this.currentPage)
// 分页发生变化，重新请求数据
this.loadData()
}
}
}
</script>
完整代码请参考 https://github.com/snowzijun/vue-element-table/blob/master/example/views/demo/pagination.vue
通过封装，表格将自带分页功能,通过上面代码，实现效果如下所示,是不是变得简单了一些。接下来我们继续给表格添加按钮
添加顶部按钮
表格上面可能会有新增，删除等等按钮，怎么办呢，接下来我们继续通过配置去添加按钮
<template>
<zj-table
:buttons="buttons"
/>
</template>
<script>
export default {
data() {
return {
buttons: Object.freeze([
{
// id 必须有而且是在当前按钮数组里面是唯一的
id: 'add',
text: '新增',
type: 'primary',
icon: 'el-icon-circle-plus',
click: this.$_handleAdd
},
{
id: 'delete',
text: '删除',
// rows 是表格选中的行，如果没有选中行，则禁用删除按钮, disabled可以是一个boolean值或者函数
disabled: rows => !rows.length,
click: this.$_handleRemove
},
{
id: 'auth',
text: '这个按钮根据权限显示',
// 可以通过返回 true/false来控制按钮是否显示
before: (/** rows */) => {
return true
}
},
// 可以配置下拉按钮哦
{
id: 'dropdown',
text: '下拉按钮',
children: [
{
id: 'moveUp',
text: '上移',
icon: 'el-icon-arrow-up',
click: () => {
console.log('上移')
}
},
{
id: 'moveDown',
text: '下移',
icon: 'el-icon-arrow-down',
disabled: rows => !rows.length,
click: () => {
console.log('下移')
}
}
]
}
])
}
},
created() {},
methods: {
// 新增
$_handleAdd() {
this.$alert('点击了新增按钮')
},
// 顶部按钮会自动将表格所选的行传出来
$_handleRemove(rows) {
const ids = rows.map(({ id }) => id)
this.$alert(`要删除的行id为${ids.join(',')}`)
},
// 关注作者公众号
$_handleFollowAuthor() {}
}
}
</script>
表格顶部可以添加普通的按钮，也可以添加下拉按钮，同时还可以通过before来配置按钮是否显示，disabled来配置按钮是否禁用，上面完整代码见 https://github.com/snowzijun/vue-element-table/blob/master/example/views/demo/button.vue
通过上面的代码就可以配置出下面的表格,是不是很简单呢？
表格顶部可以有按钮，行尾也是可以添加按钮的，一起来看看
行操作按钮
一般我们会将一些单行操作的按钮放在行尾，比如编辑，下载等按钮，那如何给行尾配置按钮呢?
<template>
<zj-table
:columns="columns"
/>
</template>
<script>
export default {
data() {
return {
columns: Object.freeze([
{
// 可以指定列的宽度，与element-ui原生用法一致
width: 220,
label: '姓名',
prop: 'name'
},
// 行编辑按钮，在表格末尾出现，自动锁定右侧
{
width: 180,
label: '操作',
// 通过 actions 指定行尾按钮
actions: [
{
id: 'follow',
text: '关注作者',
click: this.$_handleFollowAuthor
},
{
id: 'edit',
text: '编辑',
// 可以通过before控制按钮是否显示，比如下面年龄四十岁的才会显示编辑按钮
before(row) {
return row.age < 40
},
click: this.$_handleEdit
},
{
id: 'delete',
text: '删除',
icon: 'el-icon-delete',
disabled(row) {
return row.sex === 0
},
// 为了拿到this,这里需要用箭头函数
click: () => {
this.$alert('女生被禁止删除了')
}
}
]
}
])
}
},
methods: {
// 关注作者公众号
$_handleFollowAuthor() {
console.log('微信搜索【前端有的玩】，这是对小编最大的支持')
},
/**
* row 这一行的数据
*/
$_handleEdit(row, column) {
this.$alert(`点击了姓名为【${row.name}】的行上的按钮`)
}
}
}
</script>
行操作按钮会被冻结到表格最右侧，不会跟随滚动条滚动而滚动，上面完整代码见, https://github.com/snowzijun/vue-element-table/blob/master/example/views/demo/button.vue
通过上面的代码就可以完成以下效果
最后再来一起看看行编辑
行编辑
比如上例，我希望点击行尾的编辑按钮的时候，可以直接在行上面编辑用户的姓名与性别，如何配置呢?
<template>
<zj-table
ref="table"
:columns="columns"
:data="data"
/>
</template>
<script>
export default {
data() {
return {
columns: Object.freeze([
{
label: '姓名',
prop: 'name',
editable: true,
field: {
componentType: 'input',
rules: [
{
required: true,
message: '请输入姓名'
}
]
}
},
{
label: '性别',
prop: 'sex',
// 格式化表格,与element-ui 的表格属性相同
formatter(row, column, cellValue) {
return cellValue === '1' ? '男' : '女'
},
editable: true,
field: {
componentType: 'select',
options: [
{
label: '男',
value: '1'
},
{
label: '女',
value: '0'
}
]
}
},
{
label: '年龄',
prop: 'age',
editable: true,
field: {
componentType: 'number'
}
},
{
label: '操作',
actions: [
{
id: 'edit',
text: '编辑',
// 如果当前行启用了编辑，则不显示编辑按钮
before: row => {
return !this.editIds.includes(row.id)
},
click: this.$_handleEdit
},
{
id: 'save',
text: '保存',
// 如果当前行启用了编辑，则显示保存按钮
before: row => {
return this.editIds.includes(row.id)
},
click: this.$_handleSave
}
]
}
]),
data: [
{
// 行编辑必须指定rowKey字段，默认是id,如果修改为其他字段，需要给表格指定row-key="字段名"
id: '0',
name: '子君',
sex: '1',
age: 18
},
{
// 行编辑必须指定rowKey字段，默认是id,如果修改为其他字段，需要给表格指定row-key="字段名"
id: '1',
name: '子君1',
sex: '0',
age: 18
}
],
editIds: []
}
},
methods: {
$_handleEdit(row) {
// 通过调用 startEditRow 可以开启行编辑
this.$refs.table.startEditRow(row.id)
// 记录开启了行编辑的id
this.editIds.push(row.id)
},
$_handleSave(row) {
// 点击保存的时候，通过endEditRow 结束行编辑
this.$refs.table.endEditRow(row.id, (valid, result, oldRow) => {
// 如果有表单验证，则valid会返回是否验证成功
if (valid) {
console.log('修改之后的数据', result)
console.log('原始数据', oldRow)
const index = this.editIds.findIndex(item => item === row.id)
this.editIds.splice(index, 1)
} else {
// 如果校验失败，则返回校验的第一个输入框的异常信息
console.log(result)
this.$message.error(result.message)
}
})
}
}
}
</script>
不需要使用插槽就可以完成行编辑，是不是很开心。上述完整代码见 https://github.com/snowzijun/vue-element-table/blob/master/example/views/demo/row-edit.vue
效果如下图所示:
其他功能
除了上面的功能之外，表格还可以配置其他许多功能，比如
可以指定字段为链接列，需要给列配置link属性
可以通过插槽自定义顶部按钮，行操作按钮，行字段等
可以在按钮区域右侧通过插槽配置其他内容
其他等等
表格开发说明
通过上面的代码示例，我们已经知道了封装之后的表格可以完成哪些事情，接下来一起来看看表格是如何实现的。完整代码见 https://github.com/snowzijun/vue-element-table/tree/master/src/components/zj-table
表格布局
整个表格是通过JSX来封装的，因为JSX使用起来更加灵活。对于我们封装的表格，我们从竖向可以分为三部分，分别是顶部按钮区，中间表格区，底部分页区，如何去实现三个区域的布局呢，核心代码如下
render(h) {
// 按钮区域
const toolbar = this.$_renderToolbar(h)
// 表格区域
const table = this.$_renderTable(h)
// 分页区域
const page = this.$_renderPage(h)
return (
<div class="zj-table" style={{ height: this.tableContainerHeight }}>
{toolbar}
{table}
{page}
</div>
)
}
通过三个render函数分别渲染对应区域，然后将三个区域组合在一起。
渲染表格列
通过前文的讲解,我们可以将表格的列分为以下几种
常规列
行编辑列
操作按钮列
插槽列
链接列(文档后续完善)
嵌套列(文档后续完善)
$_renderColumns(h, columns) {
// 整体是否排序
let sortable = this.sortable ? 'custom' : false
return columns
.filter(column => {
const { hidden } = column
if (hidden !== undefined) {
if (typeof hidden === 'function') {
return hidden({
columns,
column
})
}
return hidden
}
return true
})
.map(column => {
const {
useSlot = false,
// 如果存在操作按钮，则actions为非空数组
actions = [],
// 是否可编辑列， 对于可编辑列需要动态启用编辑
editable = false,
// 是否有嵌套列
nests,
// 是否可点击
link = false
} = column
let newSortable = sortable
if (column.sortable !== undefined) {
newSortable = column.sortable ? 'custom' : false
}
column = {
...column,
sortable: newSortable
}
if (nests && nests.length) {
// 使用嵌套列
return this.$_renderNestColumn(h, column)
} else if (editable) {
// 使用编辑列
return this.$_renderEditColumn(h, column)
} else if (useSlot) {
// 使用插槽列
return this.$_renderSlotColumn(h, column)
} else if (actions && actions.length > 0) {
// 使用操作列
column.sortable = false
return this.$_renderActionColumn(h, column)
} else if (link) {
// 使用链接列
return this.$_renderLinkColumn(h, column)
} else {
// 使用默认列
return this.$_renderDefaultColumn(h, column)
}
})
},
行编辑列
当前表格行编辑支持input,select,datepicker,TimeSelect,InputNumber等组件，具体渲染代码如下所示
// 编辑单元格
$_renderEditCell(h, field) {
const components = {
input: Input,
select: ZjSelect,
date: DatePicker,
time: TimeSelect,
number: InputNumber
}
const componentType = field.componentType
const component = components[componentType]
if (component) {
return this.$_renderField(h, field, component)
} else if (componentType === 'custom') {
// 如果自定义，可以通过component指定组件
return this.$_renderField(h, field, field.component)
}
return this.$_renderField(h, field, Input)
},
$_renderField(h, field, Component) {
// 编辑行的id字段
const { rowId, events = {}, nativeEvents = {} } = field
const getEvents = events => {
const newEvents = {}
Object.keys(events).forEach(key => {
const event = events[key]
newEvents[key] = (...rest) => {
const args = [
...rest,
{
rowId,
row: this.editRowsData[rowId],
value: this.editRowsData[rowId][field.prop]
}
]
return event(...args)
}
})
return newEvents
}
// 事件改写
const newEvents = getEvents(events)
const newNativeEvents = getEvents(nativeEvents)
return (
<Component
size="small"
on={newEvents}
nativeOn={newNativeEvents}
v-model={this.editRowsData[rowId][field.prop]}
{...{
attrs: field,
props: field
}}
/>
)
}
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
配色，设计师的世纪难题。从平面到屏幕，CMYK 到 RGB，墨点到像素，色彩越来越丰富，形式越来越复杂。UI 的发展从拟物的繁琐细节中挣脱出来，却在色彩的展现中放飞了自我。
零售业有个有趣的研究成果 —— 「七秒钟定律」：人们在挑选商品和服务时 ，只需要 7 秒钟就可以确定是否感兴趣，而在这短暂的 7 秒钟内，色彩的作用占到了 67%。
要在小小的手机屏幕中加入这么多颜色，并保持其中的联系和逻辑，着实不易。如果你还对配色一无所知，完全不知道配色应该怎么入手，那么你需要了解一下，我几年经验总结的配色思路。
无论我们用 PS、AI，还是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我们来看看这些案例：
虽然是不同的应用，但是这个拾色器的用法大同小异，但是，很多新人并没有搞懂拾色器的正确应用逻辑。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑，也就是色相（H）、饱和度（S）、明度（B）。
HSB 是色彩科学中对所有颜色属性的理论划分，是种概念上的定义，可以用来解释任何色彩，也就是说可以和 RGB 和 CMYK 相互转化，且 HSB 的选色逻辑更清晰、简洁、干练。
因为一个正确的选色过程，是先确定出色相，然后再在这个色相维度下选出明度和饱和度，所以我们首先要关注色相选择条。
细心的同学应该已经发现了，它们的首尾都是红色，那是因为色相的序列是一个首尾相接的环形模式，所以它实际上就是色环的柱状展示图，应用起来和色环没有实际区别。
接下来就要说到重点，饱和度和明度选择区，我自己使用的习惯，是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域，然后明确它们在 UI 中的对应情绪和应用场景。
在过去的大量分析中，互联网产品的主色和重要辅助色都会往右上角聚集，一些次要、不可点的色彩聚集在中上方，而文字背景色则聚集在左侧，无人区则是我们重点避开的对象。
下面我们分析几个案例，看看它们在这个选择区中的色彩分布情况：
大家也可以自己拿一些主流的应用做截图，然后把它们的 UI 元素色彩排列到拾色面板中，就会得到基本一致的结果。牢记这9个区域的场景划分，可以帮助我们非常、安全地完成 UI 配色。
在众多的 UI 设计规范中，色彩部分的介绍，都必然包含三种类型，分别是：
1. 主色的选择
主色是一个应用的最核心的色彩，品牌的象征色，比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。
确定主色，并没有大家想象的那么复杂，它的要点在于——你想让用户感受到哪种情绪，然后通过情绪关联一个大致的色彩范围，再进行微调。
在今天的互联网产品中，主色的应用选择范围在拾色器区域的右上角，前面已经有解释了。这和平面设计中的用色有非常大的不同。
移动端产品要在一个方寸大的空间中争夺用户的注意力，引起用户的兴趣，那么低饱和清淡的色调是无法实现这个目标的，所以今天主色饱和度越来越，比如我们之前整理的一篇总结：
为什么支付宝要换 Logo 颜色？分析下目前 Logo 的主色趋势
再加上屏幕的 RGB 显示特性，高对比度，高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法，就是在确定色相类型后，在右上方区域选出合适的色值。
2. 辅助色的选择
辅助色是丰富应用中的次要色彩，它会包含一到若干个和主色不同的色彩，除了品牌传达外，具有更强的实用性。
前面我们提到过色环，这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型，它蕴含一个最朴素的原则，即两个颜色在这个环形中角度越大，那么视觉差异性越大，对比越强，比如下图的展示：
这些配色的模式是不能闭着眼随便挑的，它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择，是根据实际场景的功能决定的。
比如通知、提醒、取消用大红色，确认、同意用绿色或者蓝色，收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，跟着常规方法来做，是没有其它思路的情况下最简单、最安全的辅助色选择方式。
没有标准元素用色的情况下，再考虑应用色环的 「角度原则」，越需要被突出的颜色，可以在色环中离主色越远，越不需要被突出的则越近。
比如下方携程的案例，主色在蓝色的情况下，支付、保险金标签这些需要被重点突出的色彩，使用了主色的互补色， 让我们一眼就能看见并产生强烈的操作欲望。
3. 中性色的选择
中性色，是页面中文字、背景用到的颜色，它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要，实际情况恰恰相反。
主色辅助色决定了界面视觉是否出彩，而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例，就应该明白，即使只有黑白灰的状态下，我们理解这些页面和进行使用也不会有丝毫的障碍。
中性色的配置，就是制定一个由深到浅的灰度阶梯，应用在对应权重的元素上，色彩轻重的主要判断依据是 HSB 中的 B（明度） 值。
中性色虽然指的是无个性，但并不是只能用纯灰色，常见的一种做法，就是为中性色添加适量的蓝色饱和度，提升观看体验（满足RGB的某种特性）。
这种做法，颜色越浅的时候饱和度应用色值就越低，将这个规律在拾色器中进行表现，那么我们就可以得到一个 L 型曲线，我称它为 「中性曲线」。
掌握对于主色、辅助色、中性色的选择方法，那么对于UI配色的奥义来说，你已经掌握了一半，接下来就要了解更具体的实践思路了。
配色并不是只有色彩的色值本身，大家一直在研究各种色彩心理学和理论，却很少关心它们如何应用，如何配置。
所以，我根据主色和辅助色应用总结了一个配色的四象限表格，再分别看看它们对应的案例：
1. 主色占比大，色彩丰富度高
主色会作为顶部标题栏或其它重要模块中的背景色，进行大面积应用，加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务，需要用丰富的色彩来进行暗示，吸引用户关注。
2. 主色占比大，色彩丰富度低
这类配色中，主色的应用占比也大，出现频率高，鲜有其它颜色出现。比较适用于图片内容丰富的题材中，或者是相对正式、品牌感强的应用。
3. 主色占比小，色彩丰富度高
这是多数主流应用的趋势，降低主色占比，留出更多的空间给内容模块的展示上，突出自身带有的服务和功能。
4. 主色占比小，色彩丰富度低
通常，会应用这种方式是因为产品的服务是相对单一，但也需要用户投入注意力的应用，设计师就会尽力避免给予用户过多的干扰。
每次在进行配色的时候，我们都需要对自己要应用哪种配色应用方式做出规划，然后再动手执行。有了这个目标，后面在整个项目的设计中的配色步骤就是水到渠成的事情了。
在实践前，我们要简单讲讲一个应用或者界面的标准配色的流程了，流程顺序如下：
具体应该怎么使用这套流程，我们用一个图虫APP改版的案例来做演示，首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。
1. 配色流程演示
原型是 UI 设计的基本艺能了，在开始具体设计、配色前，搭建页面的框架原型是一个必备的条件，下面，是我们已经准备好的原型案例。
然后，我们确定以橙色作为应用主色，并在拾色器中进行确认。
有了主色，就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的，那么首先可以用到的就是顶部标题栏的背景色了，以及底部 Tabbar 中的选中色，大按钮色等。
接着，我们开始整理中性色的使用，选择新的颜色来填充文字和背景，清晰的表现模块层级，文字信息的权重。
最后，就是添加辅助色和其它色彩的元素了，这个步骤建议都是放在最后一步操作。因为色彩越丰富，越难控制，容易让整个画面显得杂乱无序，所以先完成基础搭建，可以更好的帮助我们判断彩色的使用是否合理。
下面，我们使用彩色的金刚区图标，然后将用户关注、认证用户、标签等元素使用其它色彩，来丰富页面的色彩内容。
2. 其他配色类型应用
根据第一个方案，我们可以再用这个原型来实现其余的三个方案的配色。
比如下面的主色占比大，但是色彩丰富度低的。因为已经不太适用其它辅助色，所以主色填充上我们不再填充顶部导航栏的背景，而是将更多元素应用主色，减少辅助色数量。
然后是主色占比小，色彩丰富度高的方案，进一步降低主色应用的比例，然后在金刚区、标签等处使用较为丰富的配色。
最后，就是主色占比小，色彩丰富性也低的方案，那么使用中性色的元素就开始增多，只保留最核心的一些元素使用主色，和极少的辅助色。
根据四种不同的配色方案，我们就可以得到四种不同的配色结果和风格，在每次设计开始实施前，我们都可以根据这种做法来做尝试，并选出自己满意的方案。
要再次强调，UI 配色是极其强调形式的应用科学，最后做的往往会和一开始想的效果有极大出入，所以需要我们有几个备选方案，可以随时进行调整，并选出合理的那个。
以上是我们关于配色有关知识点的分享，希望可以帮助大家提升对 UI 配色的认识。
文章来源：优设 作者：超人的电话亭
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
提交规范
AngularJS 在开发者文档中关于 git commit 的指导说明，提到严格的 git commit 格式规范可以在浏览项目历史的过程中看到更易读的信息，并且能用 git commit 的信息直接生成 AngularJS 的 change log 。
commit messages 格式规范
commit messages 由 header 、body 、footer 组成。
header 又包含 type 、scope 、subject 。header 是必需的，不过其中的 scope 是可选的。
body 和 footer 可以省略。
<type>(<scope>): <subject>
// 空行
<BLANK LINE>
<body>
// 空行
<BLANK LINE>
<footer>
注：为了能在 github 以及各种 git 工具中看得更清晰，commit messages 的每一行都不要超过 100 个字符。
Header
Type
类型必须是以下几种之一：
feat: 新功能
fix: bug 修复
docs: 仅修改文档
style: 修改格式（空格，格式化，省略分号等），对代码运行没有影响
refactor: 重构（既不是修 bug ，也不是加功能）
build: 构建流程、外部依赖变更，比如升级 npm 包、修改 webpack 配置等
perf: 性能优化
test: 测试相关
chore: 对构建过程或辅助工具和库（如文档生成）的更改
ci: ci 相关的更改
除此之外，还有一个特殊的类型 revert ，如果当前提交是为了撤销之前的某次提交，应该用 revert 开头，后面加上被撤销的提交的 header，在 body 中应该注明： This reverts commit <hash>. ，hash 指的就是将要被撤销的 commit SHA 。
// 例如
revert: feat(user): add user type
This reverts commit ca16a365467e17915f0273392f4a13331b17617d.
Scope
scope 可以指定提交更改的影响范围，这个视项目而定，当修改影响超过单个的 scope 时，可以指定为 * 。
Sbuject
subject 是指更改的简洁描述，长度约定在 50 个字符以内，通常遵循以下几个规范：
用动词开头，第一人称现在时表述，例如：change 代替 changed 或 changes
第一个字母小写
结尾不加句号（.）
Body
body 部分是对本地 commit 的详细描述，可以分成多行。
跟 subject 类似，用动词开头，第一人称现在时表述，例如：change 代替 changed 或 changes。
body 应该说明修改的原因和更改前后的行为对比。
Footer
footer 基本用在这两种情况：
不兼容的改动（ Breaking Changes ）,通常用 BREAKING CHANGE: 开头，后面跟一个空格或两个换行符。剩余的部分就是用来说明这个变动的信息和迁移方法等。
关闭 Issue, github 关闭 Issue 的例子
// BREAKING CHANGE: 的例子
BREAKING CHANGE: isolate scope bindings definition has changed and
the inject option for the directive controller injection was removed.
To migrate the code follow the example below:
Before:
scope: {
myAttr: 'attribute',
myBind: 'bind',
myExpression: 'expression',
myEval: 'evaluate',
myAccessor: 'accessor'
}
After:
scope: {
myAttr: '@',
myBind: '@',
myExpression: '&',
// myEval - usually not useful, but in cases where the expression is assignable, you can use '='
myAccessor: '=' // in directive's template change myAccessor() to myAccessor
}
The removed `inject` wasn't generaly useful for directives so there should be no code using it.
// Closes Issue 例子
Closes #2314, #3421
完整的例子
例一: feat
feat($browser): onUrlChange event (popstate/hashchange/polling)
Added new event to $browser:
- forward popstate event if available
- forward hashchange event if popstate not available
- do polling when neither popstate nor hashchange available
Breaks $browser.onHashChange, which was removed (use onUrlChange instead)
例二: fix
fix($compile): couple of unit tests for IE9
Older IEs serialize html uppercased, but IE9 does not...
Would be better to expect case insensitive, unfortunately jasmine does
not allow to user regexps for throw expectations.
Closes #392
Breaks foo.bar api, foo.baz should be used instead
例三: style
style($location): add couple of missing semi colons
查看更多例子
规范 commit message 的好处
首行就是简洁实用的关键信息，方便在 git history 中快速浏览
具有详实的 body 和 footer ，可以清晰的看出某次提交的目的和影响
可以通过 type 过滤出想要查找的信息，也可以通过关键字快速查找相关提交
可以直接从 commit 生成 change log
// 列举几个常用的 log 参数
// 输出 log 的首行
git log --pretty=oneline
// 只输出首行的 commit 信息。不包含 hash 和 合并信息等
git log --pretty=format:%s
// 查找有关“更新菜单配置项”的提交
git log --grep="更新菜单配置项"
// 打印出 chenfangxu 的提交
git log --author=chenfangxu
// 红色的短 hash，黄色的 ref , 绿色的相对时间
git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr)%Creset'
用工具实现规范提交
上面介绍了规范提交的格式，如果让各位同学在 git commit 的时候严格按照上面的规范来写，首先心智是有负担的，得记住不同的类型到底是用来定义什么的，subject 怎么写，body 怎么写，footer 要不要写。其次，对人的规范大部分都是反人性的，所以很可能在过不了多久，就会有同学渐渐的不按照规范来写。靠意志力来控制自己严格按照规范来写是需要额外耗费一些精力的，把精力耗费在这种事情上面实在有些浪费。
用工具实现规范提交的方案，一种是在提交的时候就提示必填字段，另一种是在提交后校验字段是否符合规范。这两种在实际项目中都是很有必要的。
Commitizen
Zen-like commit messages for internet citizens. 嗯~~一种禅意
Commitizen 是一个帮助撰写规范 commit message 的工具。他有一个命令行工具 cz-cli，接下来会把使用 Commitizen 分成几个阶段来介绍。
体验 git cz
// 全局安装 Commitizen
npm install -g commitizen
你的仓库可能还不是对 Commitizen 友好的，此时运行 git cz 的效果跟 git commit 一样，也就是没有效果。 不过，可以执行 npx git-cz 来体验。
如果想直接运行 git cz 实现语义化的提交，可以根据 streamich/git-cz 文档中说的全局安装 git cz。
// 全局安装 git cz
npm install -g git-cz
除此之外还有一种更推荐的方式，就是让你的仓库对 Commitizen 友好。
Commitizen 友好
全局安装 Commitizen 后，用 cz-conventional-changelog 适配器来初始化你的项目
// 初始化 cz-conventional-changelog 适配器
commitizen init cz-conventional-changelog --save-dev --save-exact
上面的初始化做了三件事：
安装 cz-conventional-changelog 依赖
把依赖保存到 package.json 的 dependencies 或 devDependencies 中
在根目录的 package.json 中 添加如下所示的 config.commitizen
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
或者，在项目根目录下新建一个 .czrc 文件，内容设置为
{
"path": "cz-conventional-changelog"
}
现在运行 git cz 效果如下：
cz-customizable 自定义中文配置
通过上面的截图可以看到，提交的配置选项都是英文的，如果想改成中文的，可以使用 cz-customizable 适配器。
运行下面的命令，注意之前已经初始化过一次了，这次再初始化，需要加 --force 覆盖
npm install cz-customizable --save-dev
commitizen init cz-customizable --save-dev --save-exact --force
现在 package.json 中 config.commitizen 字段为：
"config": {
"commitizen": {
"path": "./node_modules/cz-customizable"
}
}
cz-customizable 文档中说明了查找配置文件的方式有三种，我们按照第一种，在项目根目录创建一个 .cz-config.js 的文件。按照给出的示例 cz-config-EXAMPLE.js 编写我们的 config。 commit-type 可以参考 conventional-commit-types 。
可以点击查看我配置好的文件 qiqihaobenben/commitizen-git/.cz-config.js ，里面中详细的注释。
commitlint 校验提交
Commitizen 文档中开始就介绍到，Commitizen 可以在触发 git commit 钩子之前就能给出提示，但是也明确表示提交时对 commit messages 的校验也是很有用的。毕竟即使用了 Commitzen，也是能绕过去，所以提交最后的校验很重要。
commitlint 可以检查 commit messages 是否符合常规提交格式，需要一份校验配置，推荐 @commitlint/config-conventional 。
npm i --save-dev @commitlint/config-conventional @commitlint/cli
在项目根目录创建 commitlint.config.js 文件并设置校验规则：
module.exports = {
extends: ["@commitlint/config-conventional"],
// rules 里面可以设置一些自定义的校验规则
rules: {},
};
在项目中安装 husky ，并在项目根目录新建 husky.config.js 文件，加入以下设置：
// 安装 husky
npm install --save-dev husky
// husky.config.js 中加入以下代码
module.exports = {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
注意：因为 @commitlint/config-conventional 校验规则遵循 Angular 的规范， 所以我们在用 cz-customizable 自定义中文配置时， 是按照给出的符合 Angular 规范的示例 cz-config-EXAMPLE.js 编写.cz-config.js 的。但是如果你自定义的 Commitizen 配置不符合 Angular 规范，可以使用 commitlint-config-cz 设置校验规则。（推荐还是按照 Angular 规范进行 cz-customizable 自定义配置）
// 安装 commitlint-config-cz
npm install commitlint-config-cz --save-dev
// commitlint.config.js 改为
module.exports = {
extends: [
'cz'
]
};
git commit 触发 git cz
在提交的时候，我们都习惯了 git commit ，虽然换成 git cz 不难，但是如果让开发者在 git commit 时无感知的触发 git cz 肯定是更好的，
而且也能避免不熟悉项目的人直接 git commit 提交一些不符合规范的信息。
我们可以在 husky.config.js 中设置：
"hooks": {
"prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
}
注意： 在 window 系统，可能需要在 git base 中才能生效。
生成 CHANGELOG
standard-version
是一个使用 semver 和 conventional-commits 支持生成 CHANGELOG 进行版本控制的实用程序。
standard-version 不只是能生成 CHANGELOG , 还能根据 commit 的 type 来进行版本控制。
// 安装 standard-verison
npm i --save-dev standard-version
// 在 package.json 中的 scripts 加入 standard-version
{
"scripts": {
"release": "standard-version"
}
}
示例项目
可以查看 commitizen-git ，里面归纳了快速配置 Commitizen 友好仓库的步骤。
差不多三五分钟就能搞定。
可以看一下配置完后，执行 git commit 的效果。
扩展
更复杂的自定义提示
cz-customizable 中自定义配置项通常情况是够用的，
commitlint 中校验的规则基本上也是够用的，但是会有比较硬核的开发者会觉得还是不够，还要更多。比如一些 prompt 更加自定义，
提交时询问的 question 添加更多的逻辑，比如可以把一些重要的字段校验提前到 Commitizen 中，或者添加更多自定义的校验。
如果真想这么干，那就去 fork 一份 cz-conventional-changelog 或者 cz-customizable 来改，
或者直接自己写一个 adapter。
Commitizen 友好徽章
如果把仓库配置成了对 Commitizen 友好的话，可以在 README.md 中加上这个小徽章
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Web 安全是互联网中不可或缺的一个领域，这个领域中诞生了大量的黑帽子与白帽子，他们都是安全领域的王者，在平时里，他们利用各种巧妙的技术互相博弈，时不时就会掀起一场 Web 安全浪潮，真可谓神仙打架，各显神通。
本文从一个吃瓜群众的角度，聊一聊 Web 安全的一些有趣故事。
安全世界观
安全攻防案例
总结与思考
安全世界观
在互联网发展之初，IE 浏览器垄断的时期，大家上网的目的都很单纯，主要通过浏览器分享信息，获取新闻。但随着互联网的不断发展发展，一个网页能做的事情越来越多，除了看新闻，我们还可以看视频、玩游戏、购物、聊天等，这些功能都大大丰富了我们的生活。
随着网页功能的逐渐增多，就开始出现了一些黑帽子，他们试图通过一些技术手段来牟取利益。在我小的时候，印象最深的就是木马病毒，它可以监控你的键盘，将你在键盘上敲打的内容发送到黑客的机器上，黑客通过分析这些内容，很容易就能得到你的游戏账号和密码。
在这之后，就诞生出了一些杀毒软件，致力于解决网络上的各种病毒，随着不断地发展，杀毒软件已经成为一台电脑必不可少的软件。
为什么会出现这样的安全问题？
安全归根到底是信任的问题，如果所有人都按照正常的流程去上网，不去谋取私利，也就没有安全问题可谈了。
安全的根本在于信任，但要让所有人互相信任谈何容易。在当前阶段，我们可以做到：持续做好安全防护，让漏洞越来越少，非法攻击越来越困难，这样就能逐渐减少黑帽子的数量，让病毒制造者越来越少。
如何做好安全
要做好安全，首先得理解安全问题的属性，前人通过无数实践，最后将安全的属性总结为安全三要素，分别为：机密性、完整性、可用性。
机密性
保护数据内容不被泄露。
通常使用加密的方法。
完整性
保护数据内容是完整的、没有被篡改。
通常使用数字签名的方法。
可用性
数据随时都能够使用。
通常是在防御 DOS。
有了安全 3 要素之后，我们就可以对安全问题进行评估了。
资产等级划分
找出最重要的数据。
找出最重要数据的宿主空间，如：在数据库里，那么数据库就得重点防御。
找出数据库的宿主空间，如：在一台服务器上，那么这台服务器就得做次等防御。
找出服务器的宿主空间，如：在 OSI 网络层级上，那么在网络层面就得做一般防御。
威胁分析
找出威胁（可能造成危害的来源）。
找出风险（可能出现的损失叫做风险）。
风险分析
采取多标准决策分析，即：风险 = 威胁等级 * 威胁可行性。
计算所有的威胁，将最终的风险进行排序，优先解决风险大的问题。
确认解决方案
找出不安全的实现方式，并确定解决方案。
解决方案不要改变商业需求的初衷。
解决方案需对用户透明，不要改变用户的习惯。
做好安全评估之后，我们就有了一份安全解决方案，后续的安全工作只需按照这个方案去做，就没有任何问题。
安全的原则
有了安全解决方案之后，我们还可以制定一些安全原则，遵守原则做事，可以让我们事半功倍。
黑名单、白名单原则
白名单方案指的是给安全的资源授权。
黑名单方案指的是禁用不安全的资源。
我们应该优先使用白名单方案，因为黑名单通常统计不完所有的不安全资源。
如：XSS 攻击的方式非常多，可以通过 script、css、image 标签等，尽管你将这些标签都加入黑名单，也不能保证其他的标签都没有 XSS 的攻击隐患。
最小权限原则
只授予必要的权限，不要过度授权，减少出错机会。
如：普通权限的 Linux 用户只能操作 ~ 文件夹下的目录，如果有人想删库跑路，在执行 rm -rf / 时，就会提示无权限。
纵深防御原则
这条原则类似 木桶理论，安全水平往往取决于最短的那块板。
即：不要留下短板，黑帽子们往往可以利用短板为突破口，挖掘更大的漏洞。
数据与代码分离原则
当用户数据被当成代码执行时，混淆了数据和代码的边界，从而导致安全问题。
如：XSS 就是利用这一点去攻击的。
不可预测性原则
这条原则是为了提高攻击门槛，有效防止基于篡改、伪造的攻击。
如：数据库中使用 uuid 代替 number 型的自增主键，可以避免 id 被攻击者猜到，从而进行批量操作。
token 也是利用不可预测性，攻击者无法构造 token 也就无法进行攻击。
有了这些安全原则，我们就可以开干了，接下来介绍几个常见的攻防案例。
安全攻防案例
安全攻防的案例非常多，这里主要介绍几个出镜率比较高的安全问题。
客户端攻击
XSS 攻击
CSRF 攻击
点击劫持
XSS 攻击
XSS 攻击的本质是将用户数据当成了 HTML 代码一部分来执行，从而混淆原本的语义，产生新的语义。
如图所示，我们注册了一个 <script>alert(document.cookie)</script> 的用户名，所有能看到此用户名字的页面，都会弹出当前浏览器的 Cookie，如果代码的逻辑是将 Cookie 发送到攻击者的网站，攻击者就能冒充当前用户进行登录了。
XSS 攻击方式有很多，所有和用户交互的地方，都有可能存在 XSS 攻击。
例如：
所有 input 框。
window.location。
window.name。
document.referrer。
document.cookie。
localstorage。
...
由于页面中与用户交互的地方非常多，肯定还有一些 XSS 的攻击方式没有被发现，而一旦被黑帽子发现，就可能造成严重的影响，所以我们务必引起重视。
XSS 攻击影响
被 XSS 攻击成功后，攻击者就可以获取大量的用户信息，例如：
识别用户 UA。
识别用户浏览器扩展。
识别用户浏览过的网站。
通过 CSS 的 Visited 属性。
获取用户真实的 IP。
通过 WebRTC 等。
盗取 Cookie
伪造用户登录，窃取用户资料。
XSS 钓鱼。
向页面注入一个登录弹窗，让用户认为是网站内的登录弹窗（其实是钓鱼网站的），一旦用户登录，账号密码就泄露给了钓鱼网站。
XSS 攻击防御
目前来说，XSS 已经得到了互联网行业的重视，许多开发框架都内置了安全的 HTML 渲染方法。
我们也可以自定义进行一些安全配置。
配置 HTTP 中的 http-only 头，让前端 JS 不能操作 Cookie。
输入检查，在用户提交数据时，使用 XssFilter 过滤掉不安全的数据。
输出检查，在页面渲染的时候，过滤掉危险的数据。
CSRF 攻击
CSRF（Cross-site request forgery）跨站请求伪造，是一种利用用户身份，执行一些用户非本意的操作。
如图所示：
用户先登录了服务器 B，然后去访问服务器 C。
服务器 C 通过恶意脚本，冒充 A 去调用服务器 B 上的某个功能，
对于服务器 B 来说，还以为这是 A 发起的请求，就当作正常请求处理了。
试想一下，如果 C 冒充 A 进行了一次转账，必定会造成大量的经济损失。
CSRF 防御方式
防御 CSRF 主要有以下几种方式：
验证码
每一次请求都要求用户验证，以确保请求真实可靠。
即：利用恶意脚本不能识别复杂的验证码的特点，保证每次请求都是合法的。
Referer 检查
检查发起请求的服务器，是否为目标服务器。
即：HTTP 请求中的 Referer 头传递了当前请求的域名，如果此域名是非法服务器的域名，则需要禁止访问。
Token
利用不可预测性原则，每一请求必须带上一段随机码，这段随机码由正常用户保存，黑帽子不知道随机码，也就无法冒充用户进行请求了。
点击劫持
点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。
就像一张图片上面铺了一层透明的纸一样，你看到的是攻击者的页面，但是其实这个页面只是在底部，而你真正点击的是被攻击者透明化的另一个网页。
如果所示，当你点击了页面上的按钮之后，本以为会...... ，而真正执行的操作是关注了某人的博客。
点击劫持防御
由于点击劫持主要通过 iframe，所以在防御时，主要基于 iframe 去做。
方案一：frame busting
正常网站使用 JS 脚本判断是否被恶意网站嵌入，如：博客网站监测到被一个 iframe 打开，自动跳转到正常的页面即可。
if (self !== top) { // 跳回原页面 top.location = self.location;}
方案二：使用 HTTP 中的 x-frame-options 头，控制 iframe 的加载，它有 3 个值可选：
DENY，表示页面不允许通过 iframe 的方式展示。
SAMEORIGIN，表示页面可以在相同域名下通过 iframe 的方式展示。
ALLOW-FROM，表示页面可以在指定来源的 iframe 中展示。
配置 iframe 的 sandbox 属性
sandbox = "allow-same-origin" 则只能加载与主站同域的资源。
服务器端攻击
服务器端的攻击的方式也非常多，这里列举几个常见的。
SQL 注入攻击
文件上传漏洞
登录认证攻击
应用层拒绝服务攻击
webServer 配置安全
SQL 注入攻击
SQL 注入和 XSS 一样，都是违背了数据和代码分离原则导致的攻击方式。
如图所示，我们利用 SQL 注入，就能在不需要密码的情况下，直接登录管理员的账号。
攻击的前提是：后端只用了简单的拼接 SQL 的方式去查询数据。
# 拼接出来的 sql 如下：select * from user where username = 'admin' or 1=1 and password = 'xxx'# 无论密码输入什么，这条 sql 语句都能查询到管理员的信息
除此之外，SQL 注入还有以下几种方式：
使用 SQL 探测，猜数据库表名，列名。
通过 MySQL 内置的 benchmark 探测数据库字段。
如：一段伪代码 select database as current if current[0]==='a',benchmark（10000,'猜对了'） 如果表明猜对了，就延迟 10 s 并返回成功。
使用存储过程执行系统命令
通过内置的方法或存储过程执行 shell 脚本。
如：xp_cmdshell、sys_eval、sys_exec 等。
字符串截断
如：MySQL 在处理超长的字符串时，会显示警告，但会执行成功。
注册一个 admin + 50 个空格的用户，会触发截断，最终新增一个 admin 用户，这样就能拥有管理员权限了。
SQL 注入防御
防止 SQL 注入的最好的办法就是，不要手动拼接 SQL 语句。
最佳方案，使用预编译语句绑定变量
通常是指框架提供的拼接 SQL 变量的方法。
这样的语义不会发生改变，变量始终被当成变量。
严格限制数据类型，如果注入了其他类型的数据，直接报错，不允许执行。
使用安全的存储过程和系统函数。
CRLF 注入
在注入攻击中，换行符注入也是非常常见的一种攻击方式。
如果在 HTTP 请求头中注入 2 个换行符，会导致换行符后面的所有内容都被解析成请求实体部分。
攻击者通常在 Set-Cookie 时，注入换行符，控制请求传递的内容。
文件上传漏洞
上传文件是网页开发中的一个常见功能，如果不加处理，很容易就会造成攻击。
如图所示，攻击者上传了一个木马文件，并且通过返回的 URL 进行访问，就能控制服务器。
通常我们会控制上传文件的后缀名，但也不能完全解决问题，攻击者还可以通过以下方式进行攻击：
伪造正常文件
将木马文件伪装成正常的后缀名进行上传。
如果要避免这个问题，我们可以继续判断上传文件的文件头前 10 个字节。
Apache 解析方式是从后往前解析，直到找到一个认识的后缀名为止
如：上传一个 abc.php.rar.rar.rar 能绕过后缀名检查，但在执行时，被当成一个 php 文件进行执行。
IIS 会截断分号进行解析
如：abc.asp;xx.png 能绕过后缀名检查，但在执行时，被当成一个 asp 文件进行执行。
HTTP PUT 方法允许将文件上传到指定位置
通过 HTTP MOVE 方法，还能修改上传的文件名。
通过二者配合，就能先上传一个正常的后缀名，然后改为一个恶意的后缀名。
PHP CGI 路径问题
执行 http://abc.com/test.png/xxx.php 时，会把 test.png 当做 php 文件去解析。
如果用户正好是把一段恶意的 php 脚本当做一张图片进行上传，就会触发这个攻击。
文件上传漏洞防御
防御文件上传漏洞，可以从以下几点考虑：
将文件上传的目录设置为不可执行。
判断文件类型
检查 MIME Type，配置白名单。
检查后缀名，配置白名单。
使用随机数改写文件名和文件路径
上传文件后，随机修改文件名，让攻击者无法执行攻击。
单独设置文件服务器的域名
单独做一个文件服务器，并使用单独的域名，利用同源策略，规避客户端攻击。
通常做法是将静态资源存放在 CDN 上。
登录认证攻击
登录认证攻击可以理解为一种破解登录的方法。攻击者通常采用以下几种方式进行破解：
彩虹表
攻击者通过搜集大量明文和 MD5 的对应关系，用于破解 MD5 密文找出原文。
对于彩虹表中的 MD5 密码，我们可以加盐，进行二次加密，避免被破解。
Session Fixation 攻击
利用应用系统在服务器的 SessionID 固定不变机制，借助他人用相同的 SessionID 获取认证和授权。
攻击者登录失败后，后端返回了 SessionID，攻击者将 SessionID 交给正常用户去登录，登录成功后，攻击者就能使用这个 SessionID 冒充正常用户登录了。
如果浏览器每一次登录都刷新 SessionID 可以避免这个问题。
Session 保持攻击
有些时候，后端出于用户体验考虑，只要这个用户还活着，就不会让这个用户的 Session 失效。
攻击者可以通过不停发起请求，可以让这个 Session 一直活下去。
登录认证防御方式
多因素认证
密码作为第一道防御，但在密码验证成功后，我们还可以继续验证：动态口令，数字证书，短信验证码等，以保证用户安全。
由于短信和网页完全是 2 套独立的系统，攻击者很难获取到短信验证码，也就无法进行攻击。
除此之外，前端登录认证还有多种方式，如果你对此感兴趣，可以参考我之前写的 前端登录，这一篇就够了。
应用层拒绝服务攻击
应用层拒绝服务攻击，又叫 DDOS 攻击，它指的是利用大量的请求造成资源过载，导致服务器不可用。
通常有以下几种 DDOS 攻击方式：
SYN Flood 洪水攻击
利用 HTTP 3 次握手机制，消耗服务器连接资源。
如：攻击者发起大量的 HTTP 请求，但并不完成 3 次握手，而是只握手 2 次，这时服务器端会继续等待直至超时。这时的服务器会一直忙于处理大量的垃圾请求，而无暇顾及正常请求。
Slowloris 攻击
以非常低的速度发送 HTTP 请求头，消耗服务器连接资源。
如：攻击者发送大量 HTTP 请求，但每个请求头都发的很慢，每隔 10s 发送一个字符，服务器为了等待数据，不得始终保持连接，这样一来，服务器连接数很快就被占光了。
HTTP POST DOS
发送 HTTP 时，指定一个非常大的 Content-Length 然后以很长的间隔发送，消耗服务器连接资源。
CC 攻击
针对一些非常消耗资源的页面，不断发起请求。
如：页面中的某些页面，需要后端做大量的运算，或者需要做非常耗时的数据库查询。在大量的请求下，服务器的 CPU、内存等资源可能就被占光了。
Server Limit DOS
通过 XSS 注入一段超长的 Cookie，导致超出 Web 服务器所能承受的 Request Header 长度，服务器端就会拒绝此服务。
ReDOS
针对一些缺陷的正则表达式，发起大量请求，耗光系统资源。
应用层拒绝服务攻击防御
对于应用层拒绝服务攻击，目前也没有特别完美的解决方案，不过我们还是可以进行一些优化。
应用代码做好性能优化
合理使用 Redis、Memcache 等缓存方案，减少 CPU 资源使用率。
网络架构上做好优化
后端搭建负载均衡。
静态资源使用 CDN 进行管理。
限制请求频率
服务器计算所有 IP 地址的请求频率，筛选出异常的 IP 进行禁用。
可以使用 LRU 算法，缓存前 1000 条请求的 IP，如果有 IP 请求频率过高，就进行禁用。
其实，处理 DDOS 核心思路就是禁用不可信任的用户，确保资源都是被正常的用户所使用。
WebServer 配置安全
我们在部署 web 应用的时候，经常会用到 Nginx、Apache、IIS、Tomcat、Jboss 等 Web 服务器，这些服务器本身也存在一些安全隐患，如果配置不当，很容易收到攻击。
在配置 Web 服务器时，可以参考以下几点：
以用户权限运行 Web 服务器
遵守最小权限原则，以最小权限身份运行 Web 服务器，限制被入侵后的权限。
删除可视化后台
运行 Tomcat、Jboss 等 Web 服务器时，默认会开启一个可视化的运营后台，运行在 8080 端口，并且第一次访问是没有认证的。
攻击者可以利用可视化后台，远程加载一段 war 包或者上传木马文件，进行控制。
及时更新版本
主流的 Web 服务器，每隔一段时间就会修复一些漏洞，所以记得及时更新版本。
总结与思考
本文介绍了 Web 安全的基本概念，以及大量的攻防技巧，其实这只是 Web 安全中的冰山一角，如果你对此感兴趣，不妨在安全领域继续深耕学习，一定能看到更广阔一片天。
对于一个开发者来说，我们应该在写代码时就将安全考虑其中，形成自己的一套安全开发体系，做到心中有安全，时时考虑安全，就能无形之中化解不法分子的攻击。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：随着医疗行业与互联网的联系日益紧密，医疗行业对产品经理的需求也越来越迫切。在这个特殊行业中，医疗产品经理需要具备哪些能力，应该如何工作，创造哪些价值？本文围绕医疗产品经理展开，从七个方面展开介绍分析，希望对你有帮助。
越来越多的医疗机构开始考虑设置医疗产品经理这个岗位，但是对于产品经理具体应该做什么工作，可能产生何等价值，以及如何招聘到合适的人才，和这个角色在组织内部如何开展工作，都有很多的困惑。今天我们就简单聊聊这个话题。
总的来说医疗产品经理还是个非常新，甚至可以说有一些超前的职能，传统FMCG和互联网行业的产品经理对应的工作内容和思考方式并不能简单照搬过来使用。我们需要清空过去在这些行业积累的认知，从医疗经营的原点出发，从下面7个方面思考：
产品经理就是足球场上的中场大将，起到承上启下，功放转换的枢纽，具体说有三大作用：
什么是进攻？进攻就是尝试主动去占据一块领地。
对营利性医疗机构来说最常见的情况有4种：
那么，又何谓防守呢？简单来说，就是对应上述各种进攻的应对。
十年前私立医院还不算很多，也还没有那么多连锁诊所品牌的时候，事实上大家主要都在忙着跑马圈地，短兵相接的攻防其实并不多。现在随着市场参与者的倍增，慢慢开始出现了小区域内的半正面PK，并且我预计在未来两年内可能会出现直接内部指名道姓对标的战斗。
足球场上的三条线是进攻、防守和中场，这里我们所说的三条线，大体对应的是：市场营销、医疗质量和行政职能三大板块。产品经理的重要价值就是能够打通这三条线的隔阂，把整个医院的资源凝结成有效的市场成果。
医疗产品不等于，不等于，不等于“打包套餐”！这个概念请务必建立起来。
首先要厘定什么是医疗产品。
可以用“三个明确”来界定之：
医疗产品开发的逻辑的源头就在于评估一种医疗服务是否吻合这三个明确，因此不是所有的医疗服务都可能变成“产品”。
比如我们医院口腔科有一个非常棒的医生，专注于牙齿美容，我们称之为“微笑设计”。这种设计是完全量体裁衣的，我们市场团队对他的关注点就主要在故事性的传播，而不是试图将这种高度个性化、动态化的医疗行为产品化。
简单来说，对于符合三个明确的医疗服务，我们对其进行产品化的“化”，是一系列有序的动作：
囿于篇幅，这里我们就不展开详述了。
理想中的医疗产品经理对下面4件事情负责：
很容易看出来，这4种不同的职责恰好也就对应了攻防转换的价值所在。其中促销是一个容易被忽视和轻视的事情，“不就是打折然后发个微信（十年前是发短信）推文嘛”——绝对不是这样，促销是一门大学问，打折、捆绑、买赠、兑奖、积分凡此种种。不仅花样很多，更重要的是背后的深层次的思考，是“为什么”。
另外，目前的医疗机构基本上也没有人比较认真、成体系地做竞品追踪。这样会失去潜在市场机会，非常可惜。
我认为一名出色的医疗产品经理应该在下面四个方面都具备一定的能力，没有特别的短板：
特别就同理心和表达能力简单阐述。同理心，即换位思考，用现在更流行的话说，是场景意识。能否准确地设置出用户的场景，体会到用户的感受，会直接决定产品带给客户的体验，进而一系列结果：定价、毛利、传播ROI、客户口碑，口碑带来的新客增长，等等不一而足。
而表达能力则是决定这个产品经理是否能实现“串联三条线”价值的决定性因素。医院是一个观念高度保守，流程高度复杂的行业，很多人雄心勃勃地进来，最终死在“搞不定那些人”上。因此，优秀的表达能力，包括书面和口头表达能力，是遴选医疗产品经理必须考量的重要因素之一。
我不是危言耸听：产品经理几乎要和医院里所有部门打交道。
常见的如下面这些：
医疗、护理和财务对于产品工作的重要性相信无需赘言。后面几个呢？
试想，你精心设计的卖点，是你自己拉着每一个潜在客户去吆喝么？当然不是，客服要帮你介绍，新媒体要帮你写文章、画插图。他们是不是要吃透你的意思？如果涉及填表、兑奖，要不要和客服商量流程？遇到产品的技术较为复杂，需要不需要策划一些活动帮助客户直观理解其价值？最后，当潜在用户感兴趣而打电话给呼叫中心的时候，接线员是否已经被你提前武装好，能充分回答各种提问了？
至于独立的数据部门，是我的一个强力推荐。传统上由财务和病案提供的数据，更多聚焦于“既往”而很少关注“开来”。如果不由同时懂得医疗业务和有商业经验的数据部门处理，很难直接推动运营的改善和提升。
很多人问我，产品经理属于市场营销部门吗？难道不是属于运营部，或者医疗企划之类的部门吗？
别忘了，市场营销最基本的范式——4P中第一个P就是产品，Product。只要你所在的医疗机构设置有相对完整的市场部门，就应该在其中设置产品经理岗位。或者反过来说，如果你准备建制产品经理岗位，从一开始就应该将其设置在市场部内，并从头开始考虑这个职位所需要的上下游角色和他们之间的衔接。
如前面所分析的，产品经理的后端，一定要有提供数据支持的部门，前端一定要有专业的传播团队，这样才能实现产品的潜力。横向上，产品经理和他的上级，一定要高度重视与客户服务团队的紧密合作。
老实说，现在几乎没有多少现成的、成熟的医疗产品经理。因为营利性医疗行业太新了，而产品经理这个岗位在这个行业又是近一两年刚刚兴起的角色。
从招聘角度来说，我建议不要拘泥于候选人必须有医疗背景。我就没念过医学院，十一年前入行，就这样摸着石头过河，也多多少少做过一些还不错的产品，有过几个“爆款”的心得。相对来说，我更看重候选人是否有完整的商业思考逻辑能力。
换一个角度来说，还可以在医院内部挖掘有潜力的人才，从临床部门转型为产品经理。最关键的环节在于这个人是否有足够强烈的兴趣。世上无难事只怕有心人，有医学院背景的人才，只要对产品工作发自内心感兴趣，就有很大的转型成功概率。
文章来源：人人都是产品经理 作者：易亮
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
「空间陈列法」是说先构建一个空间，然后将主体元素用合适的形式陈列出来。
这是随着手机兴起而真正流行起来的一招，因为PC时代都是宽大的横屏设计，适合展现视野开阔的大场面，像大漠、海边等等，而「空间陈列」作为小场景，在PC端就显得不大气，因此使用较少；而手机端却刚好相反，瘦长竖屏就适合表现长焦特写的小场景，像微距下的花鸟鱼虫等等，这时「空间陈列」就用的恰到好处。
如图所示，同样的产品展示图，在PC端就显得单薄，版面空缺，整体不饱满；而在手机端则用的刚刚好，确实这种长焦特写、微距放大的陈列小场景就是手机屏的最爱，所以在手机时代，空间陈列图才会呈现井喷式增长。
其实合成、三维和摄影都可以实现「空间陈列」，但本书还是以合成为主，而合成的难点就在于如何将产品和空间进行自然融合，不能有违和感。
若想合的天衣无缝，第一步就是要做到「透视准确」，而透视作为构图中的重要知识点，可以说是无处不在，在前面的章节里也多次提及。我们只有掌握透视的变化规律，才能准确表现出元素的空间关系，如果透视不对，那空间将会失真，下面就来详细讲讲这个理性知识点——透视。
日常生活中，当我们看周围事物时，会有远近、高低、长短、宽窄等不同，这是由于距离、方位等差异在视觉中呈现的不同反映，这种现象就是透视。透视学的出现可以帮我们非常科学的表现各种空间感和立体感，它广泛用于绘画、建筑、环艺、设计等诸多领域，而常见的透视共3类：空气透视、散点透视和焦点透视，这3类的侧重点各有不同。
空气透视又称「色彩透视」，由于空气介质的存在（雨、雪、雾、烟等），使人们看到近处景物比远处的轮廓更清晰、色彩更饱满的视觉现象，例如下方海报中的「烟雨蒙蒙」，这种近实远虚感就是典型的空气透视，随着镜头拉远，山川也变得越来越模糊。
散点透视则是中国画特有的一种透视类型，例如下方的《清明上河图》就是这类透视的代表作，在这五米长的画卷中，很难找出画家的具体观察位置，好似在移动中作画，每到一处画一部分，最后拼接起来，这种视点不断移动的画法就是散点透视，散点透视适合表现景色的波澜壮阔，重在写意，体现一种气势和意境。
而焦点透视才是本文重点，它是透视学中的核心理论，也是西方绘画所遵循的透视原则，最早研究透视就是从这里开始，如果散点透视是「写意」，那焦点透视则「写实」，一切都以客观还原为准。
例如名画《最后的晚餐》，所有视线都汇聚一点（称为灭点），营造出一种立体空间感，这些就像自己身处画面中央所看到的逼真景象。
而我们在设计中常说的透视也都指「焦点透视」，这是我们需要掌握的重中之重。记得高中学习素描时，老师就说画静物要「近大远小」，其实就是对焦点透视最为形象的描述，例如草地上的奶牛，离我们越近就越大，越远则越小，正是这种近大远小的透视变化才使场景有了空间和层次。
在介绍焦点透视前，我们先说说透视中一个很重要的影响因素——观察视角。视角即指人眼（称为视点）在观察事物时视线之间所形成的角度。
如下图所示，其实就是人眼观看角度的变化，常见有3种：当我们平视前方时就是「平视视角」；仰头看时则是「仰视视角」；低头看时便是「俯视视角」。
其中平视时人眼和物体形成的假想连线称为「水平视线」，这是判断视角高低的参考线。
当我们将产品放入空间时，就要根据陈列形式选择合适视角，从下方的示意图中能看到，三种视角给人的感受都不相同：
而上图的仰视和俯视都属于小视角，即产品视线和水平视线的夹角较小，这是设计中的常见视角，大概就是把头微微抬起或低下时看到的场景，这时画面最自然也最舒服。反之若视角过大，即头抬的很高或压的很低时，这时产品的形变就很夸张，显得刻意、不舒服。
说完3种视角，现在正式讲解焦点透视，一般根据物体灭点的数量不同，焦点透视又分3种：平行透视（一点透视）、成角透视（两点透视）和斜角透视（三点透视），它们都有各自的透视效果和适用范围，但若铺开讲会很复杂，因此下面就结合「空间陈列」进行介绍。
用立方体简单说明，就是有一面与画面平行，这时物体的厚度边线若向内延伸，最后都会汇聚到1个点上，因此又称「一点透视」。这是最简单也最易掌握的一种透视形式，其中汇聚点称为「灭点」，而灭点所在的那条线则是「视平线」，即与人眼等高的一条水平线。
再来看看平行透视在生活中的场景呈现，如图所示，将各种景物进行前后连线并延伸，最后都是汇到一点才消失。平行透视适合表现场景纵深，给人一种正式感和平和感。
电商中的产品展示也一样，例如下方示意图中，不管哪种视角，产品和立方体都是正对观众，让人觉得摆放角度正正好。
总体来说平行透视只有1个灭点，变化并不多，视觉表现单一，没有太多的空间变化，基本就是从正面来表现整个场景，因此上手简单，只要确保前后连线都汇聚一点即可，这样画面各元素也会显得整齐。但有时这种正视会让画面缺少层次感，显得很平，此时可尝试俯视视角或者强化背景的空间纵深。
下面展示平行透视在3种视角下的应用案例，注意观察不同视角下的产品呈现和透视变化，虽然微妙，但每种视角确实给人不一样的视觉感受。
平行平视
当画面为平行透视和平视视角时，这时的观察位置很正。如下图所示，空间和产品都显得有些平整，虽然场景的立体感较弱，但视觉舒服协调，表现起来也相对简单。注意平视的「视平线」基本位于主体元素的中心处，即是说人眼此时正对前方物体的中心，这样才会有平视效果。
平行仰视
当画面为仰视时，一般视角都不会太大，微微仰视即可，这样视觉才舒服。如下图所示，其实和平视比起来，小角度仰视的透视变化并不明显，没有夸张形变，但依然能体现空间和产品的高大。此时「视平线」位于主体中心靠下的位置，这时人眼明显是从下往上看。
平行俯视
如果觉得画面的层次感和立体感不够，那就尝试下俯视视角，如下图所示，由于俯视时我们能同时看到物体的顶面和正面，这样就能表现物体的厚度，立体感也明显增强。而画面的「视平线」则位于主体中心靠上的位置，这时人眼就是从上往下看，但同样属于小角度俯视。
平行透视的俯视还有一种特殊情形——正俯视，即视角为90°的俯视，这时我们是从物体的正上方低头往下看，如下图所示，当产品平放桌面时，正俯视能清晰看到产品的全貌。
在空间陈列中这是一种常见视角，上手简单，展现清晰。例如下方案例中，俯视下的产品摆放非常灵活，根据构图需求可以工整 ① 也可以随意 ② ，并且产品多以正面展现为主，整体直观、舒服。
以上都是产品的陈列案例，其实正俯视有时也会用于场景呈现中，如下图所示，视点位于场景的正上方，有点类似无人机的俯瞰拍摄，这种看似「刁钻」的视角能给画面带来独特的戏剧效果，令人印象深刻。
空间平行透视
除了3种视角，这里还要介绍一种平行透视的常见形式——空间平行透视，这种形式即画面的正前方有个类似方盒的纵深空间，而人物或产品就放置在空间里。
如图所示，该形式也有视角的3种变化，但为了确保视觉的自然舒服，仰视和俯视也都是小角度的上下摆动，所以产品的透视变化并不明显，场景呈现也没有很夸张。
为何要将该形式单独列出？因为它非常适合手机端的竖屏构图。
手机不像PC，无法通过宽屏来表现视野开阔的大场面，手机屏更适合长焦特写的小场景，但这样有时就会显得左右拥挤不透气，这时「空间平行透视」就刚好取长补短，通过「深度」刻画将狭窄空间的纵深感体现出来，最终使观者视线在前后维度上有了延伸和舒展。
该形式正是利用平行透视的纵深性，才缓解了手机屏的拥挤感。下面分视角列举案例，要注意不管平视、仰视还是俯视，空间里的所有元素最后都要汇聚一点，这样透视才合理，纵深效果也最好。
3种视角中，空间平视最常见，因为这种方方正正的空间展示最适合手机的竖屏构图，看着最舒服，上手也简单，易于搭建。在平视下，由于没有视角的高低变化，空间基本位于人眼的正前方，无任何偏移，摆放角度非常正，构图给人一种稳定感，元素也没有夸张形变，组合方便，真实自然。
对于「空间平行透视」，「深度」刻画很关键，我们要根据版面构图选择合适的深浅。例如下方案例中：① ② 的深度浅，空间相对封闭，适合展现小空间，给人温馨感和趣味性；而 ③ 的深度深，空间开阔，适合展现大空间，这样能让视线更舒展，画面更透气。
在仰视下，我们是抬头向上看，这时空间显得高大，给人强烈的气势感。如下图所示，视平线贴近地面，像是我们蹲着向上看，这种仰望视角，建筑和人物都很高大，再加上强烈的纵深感，虽然空间左右依然狭窄，但上下和前后维度却变的非常开阔，画面通透。
空间仰视能渲染氛围，提升场景的戏剧效果，突出视觉冲击力，但要注意仰视视角不能太大，否则夸张的仰视效果反而给人一种压抑感。
在俯视下，视平线处于空间中心的上方，类似我们站在高处往下看，如下图所示，这时空间显得立体，远近的各类元素也能得到清晰展现，层次分明。
俯视适合展现空间的全局观，也让各物体有着丰富的体积感。除非有特殊的构图需求，不然和仰视一样，俯视视角不能过大，否则俯视就变成俯瞰，会产生遥远的距离感，空间也压缩的厉害，进而导致形变和失真。
还是拿立方体举例，就是物体与画面形成一定夹角，这时物体的所有边线分别向各自方向进行延伸，最后会在视平线上形成一左一右2个灭点，因此又称「两点透视」。这类透视最接近我们日常的观察角度，即是说大部分时候，我们看到的物体都属于成角透视。
虽然成角透视只比平行透视多了1个灭点，但2个灭点的位置却很灵活，这样空间的透视变化也更加丰富。
例如下方是我们经常看到的景象，虽然都是典型的成角透视，但 ① 是2个灭点都在画面外，这时建筑给人的感觉结构平稳，立体感强，侧重写实；而 ② 则是1个灭点在画面内，另1个在画面外，这时空间右侧的透视形变较大，产生纵深感，整个场景更有张力和冲击。
其实还有第3种情形是2个灭点都在画面内，但由于空间会产生夸张形变和失真，因此总体少见，不再举例说明。
再看看成角透视下的产品展示效果，如下图所示，不同于单面展示为主的平行透视，成角透视则以展示物体的两面为主，这样立体感更强，构图也更稳定。注意在成角透视中，画面所有的竖向边线都是平行，不会产生灭点。
相比平行透视，成角透视在表现上更复杂一些，一般都以2灭点在画面外的情形为主，这时透视最舒服。注意要想画面只产生2个灭点，那当中的所有元素都需排列整齐，这也是成角透视的常用做法，此时画面会显得整齐统一。下面列举3种视角下的电商案例，其中以仰视和俯视最为常见。
平视下的成角透视相对少见，因为使用成角透视就是为了凸显物体的立体感，但平视由于视角很正，恰恰就会显得立体感较弱，这时2种效果会有矛盾，影响场景的协调性。例如下方的2个案例中，产品看着就有些平整，和方形盒子以及立方体稍显冲突，但整体视觉真实平和，没有形变。
仰视下的成角透视就显得刚刚好，如下图所示，所有元素均用2个立面展示，加上透视形变，这时空间的立体感强，产品和立方体也都有明显的体积感，视觉平稳、饱满，而且还能体现产品形象的高大，凸显价值感。
注意2个案例中，视平线上都只有2个灭点，这是因为产品和立方体的排列都很整齐，反之若无序排列，就会产生多个灭点，这样画面会显凌乱，视觉不舒服，所以在表现成角透视时，尽量确保所有元素都能整齐排列。
在成角透视中，俯视视角最常见。因为该视角下的物体可以展现3个面，能进一步强化元素的立体感和方位感，如图所示，物体的空间关系明显，层次分明，构图也平稳。
一般成角俯视适合小场景陈列（若是大场景则垂直方向会发生严重形变，这就是后面要讲的「斜角透视」），刚好这是手机屏的擅长，小空间配上小角度俯视会给人一种亲切感，类似长焦镜头的特写画面，很好的拉近了观者的心理距离，因此属于手机端的常用构图。
空间成角透视
成角透视的优势在于画面立体、稳定和写实，这些优势刚好适合空间的立体呈现，如下图所示，成角透视即可用于室内塑造 ① 也可用于外形搭建 ② ，类似我们站在空间侧面看整体，此时空间立体、饱满，结构有张力。
但由于成角透视都是在画面两端形成灭点，所以该透视下的空间更适合横构图，但手机屏却是竖构图，对于横向拥挤的竖长屏，成角透视就会有些施展不开，左右狭窄，无法像横版那样开阔的展现空间，也没有平行透视那样看着规整，因此使用较少。
物体与画面存在一定夹角，并且在2点透视的基础上，再加入了高度变化，这样垂直方向的连线会向上或者向下汇聚，最终画面形成3个灭点，又称「三点透视」。相比成角透视，斜角透视其实就是让本没有交集的竖线有了交集，这样垂直方向就有了强烈的汇聚感。
斜角透视的形变夸张，常用于大型物体的仰视或高处俯瞰，类似广角拍摄。
如下图所示，该透视能表现出建筑或空间的宏大感，并且越宏大透视就越强烈。这时画面的夸张构图会显得观者渺小，给人一种压迫感，也让场景有着极强冲击力，同时带来了更加刺激的视觉感受。
其实只要观者在场景中显得很小，这时看到的画面就会产生斜角透视，例如当我们仰望高楼时，相对高楼而言，渺小的我们就会看到斜角透视。
但如果产品展示采用斜角透视时，就会有一种强烈的不真实感，因为相对产品来说，我们并不渺小，所以日常是不会看到这样的场景，这种场景更像是「昆虫视角」，如图所示，斜角透视下，虽然画面不真实，但会有种特别的戏剧效果。
另外斜角透视没有平视视角，因为平视物体的竖向边线依然平行，不会在垂直方向产生第3个灭点，因此仍属于成角透视。总之只有在大角度仰视或俯视大型物体时，才会看到斜角透视。
这种形变强烈的夸张透视虽然生活中相对少见，但电商中用的还真不少。还记得我们在第2章讲创意方法时提过的「独特视角」吗？其中一个方向就是使用斜角透视。
这种透视可以体现物体的巨大（仰视）或者场景的宏大（俯视），正是这样一种不真实也不自然的视觉感受，反倒给人一种强烈的气势和冲击，画面极具张力的构图往往能脱颖而出，并在第一时间抓人眼球，吸引注意，所以成角透视特别适合大促主题的场景搭建和氛围营造，下面分视角举例。
斜角仰视
视能让物体显得高大，而斜角仰视则让物体显得「巨大」。如图所示，2个案例中的产品都十分「巨大」，通过这样一种「刁钻」视角和夸张手法渲染出了产品气势，使产品显得分量十足，同时也提升了视觉冲击力，整个场景都变的大气。其中 ① 由于版面有限，有个灭点没有标示出来。
斜角俯视
当我们站在一个很高的地方俯瞰周围，或者用无人机在高空航拍，这时看到的景象就是斜角俯视。如图所示，尽管竖构图并不适合展现辽阔的大场面，但在斜角俯视的帮助下，2个案例依然体现了场景的宏大，视觉冲击强，这种居高临下感使人视野开阔。
平行斜角透视
斜角透视中还有一种特殊情形——平行斜角透视，就是当空间或产品的一面与画面平行时，此时不管透视多强烈，画面也只有2个灭点。
如图所示，当立方体的一面正对视点时，侧面便从2个主立面减为了1个，这时除了垂直方向的1个灭点外，原本视平线上的2个也就成了1个，虽然只剩2灭点，但本质仍属于透视强烈的斜角透视。
既然是与画面平行，那和平行透视有何区别？
下面看张空间对比图，能看到2者的形变差异还是相当大：左图为平行透视，像是我们在看一个小方盒，亲切、自然、真实；而右图则是平行斜角透视，更像是我们在仰望一个巨大空间的入口，充满戏剧性，并有压迫感。
其实对于手机端，「平行斜角透视」才是斜角透视中的常用形式，因为它的摆放角度很正，这种正面观察很适合手机端的竖屏构图，而且前后的纵深刻画也能缓解版面的左右拥挤，另外画面纵向的汇聚感还能迅速吸引注意，给人一种巨大冲击力和强烈氛围感，其中仰视比俯视更加常见。
平行斜角仰视
近几年这类透视越来越多见，因为它既适合竖构图，也能提升画面的形式感和表现力，非常利于促销主题的氛围打造。
如图所示，整个画面就像是我们站在宏大场景的正中央仰望时看到的景象，各元素摆放很正，虽有压迫感，但空间和产品都显得非常高大，张力十足，能让用户牢牢聚焦，同时也产生了强烈冲击力，更易在用户脑海中形成记忆。
平行斜角俯视
在这类透视下我们会感觉自己拥有高高在上的「上帝视角」，元素摆放同样很正，视野辽阔，场景宏大。但过大的俯视视角会对场景进行一定压缩，再加上俯瞰产生的遥远距离感，这样就显得元素有些「小气」，无法体现仰视下的高大，因此画面的刺激感没那么强烈，总体相对少见。
以上便是焦点透视的3种类型，我们再来回顾下各自的使用情形，如下图所示，这是一张3种透视的转换示意图，都是仰视视角，旁边小人则是观察者的大小示意：
希望通过这张示意图能帮大家更好理解什么时候该用哪种透视，总之小场景搭建一般以「平行透视」和「成角透视」为主，而恢弘的大场景则以「斜角透视」为主。
当然现实里的透视远不会这么单一，根据物体不同的摆放位置以及不同的观测距离，很多时候同一画面也会存在多种透视，例如平行透视和成角透视就经常组合出现。
电商设计也一样，例如下方案例中，整个空间是平行透视，而里面的盒子则是成角透视，这时视平线上会有3个灭点，其实若产品的摆放再凌乱些，还会出现更多灭点，但这种无序组合会让空间塑造变的复杂，看着也不规整，因此并不推荐。
但要注意不管画面的透视多复杂，当中的视平线却只能有1条，并且无论水平方向有多少个灭点，最后也都会落在视平线上。
除了以上3种透视外，其实还有4点透视（超广角透视）、5点透视（鱼眼透视）等等，但都过于复杂，用的也很少，这里就不做展开。对于电商里的「空间陈列」，3种透视已够用，它是我们塑造空间的基础，如果一开始的透视错了，即便配色、光影做的再出彩那也无用。
总有人说透视难掌握，其实只要我们在生活中多观察、多留意身边物体的透视变化和规律，及时总结，那这种理性还原就不难做到。当然设计终归还是理性与感性的双重表达，所以透视虽要遵循，但切忌生搬硬套，视觉协调即可。
讲完了焦点透视，我们知道了空间塑造的基本原则，下面就来说说都有哪些陈列场景。
相对PC来说，手机端受屏幕所限，陈列场景其实没那么复杂，核心是要先构建一个空间，然后让产品以合适的视角及透视在空间里呈现出来，而这个空间场景则要和主题氛围、产品气质都高度匹配。
一般来说，手机端常用的陈列场景有4类：盒子陈列、台面陈列、自然陈列以及舞台陈列，选择哪类则要看哪个场景对产品的烘托效果最好。
在介绍每个场景前，我先说说关于产品组合的2原则，因为很多时候在空间摆放的产品数量较多，这时它们的组合形式就变的尤其重要，稍不注意就会显得画面杂乱无章，不够协调，而且凌乱的摆放也会降低产品的品质感，缺少吸引力。关于组合原则，核心有2点：大小合理以及三角构图。
大小合理
如果将多个产品摆一起，则要确保它们之间的相对大小符合现实中的真实差异，现实中尺寸大的产品就要相对大些，而尺寸小的产品就要相对小一点，这样才会真实并经得起推敲。
而有些设计师在组合产品时，也不管大小的真实差异，放进版面后就很随意的放大或缩小，最后出来的组合要不就大小一样，要不就比例失真，这些都会给用户一种强烈的不协调感和不真实感。
下面再看一组对比图，明显大小一样的左图会有不适感，也缺少层次；而大小合理的右图则更有美感也更舒服。
其实大小合理的最终目的是希望整体结构错落有致，就像右图一样，这种有高有低的组合才能体现韵律感和结构美。所以如果可以选择，那我们就选择一些尺寸差异较大的产品，尽量避免出现大小差不多的情况。
当然如果必须陈列大小一样的产品，那也可以通过透视或者辅助元素来改善，例如空间里的近大远小、立方体加高都能改变高度一样的情形。
三角构图
当我们选好不同大小的产品后，就要注意它们的组合形式，千万不能乱堆一气，不同的摆放会形成不同结构，而每种结构又会给人不同感受。我们在「图形分割」中讲过「正三角」具有很强的稳定性，因此当产品采用正三角构图时，会让人觉得版面平稳、视觉舒服。
如图所示，所谓三角构图，其实就是将尺寸大的产品放中间，而尺寸小的产品放两边，这样不但构图稳定，而且画面也有节奏和变化。可以说「三角构图」就是空间陈列里最常用的构图方式，而本节展示的所有案例中，大部分也都是三角构图。
明确了产品的组合原则，知道了如何陈列才舒服，下面就正式讲讲空间陈列的4类场景。
盒子陈列
「盒子陈列」就是在盒子里面放产品，而盒子多以礼盒为主，使用场景和主题相对单一，基本用于送礼之意的专题页。创意虽然普通，但却不易出错，是种相对安全的表现方式。当然若能在盒里加些小心思，画面也会很出彩，像我之前看过一个新年Banner，就是礼盒里装着一个大家庭在吃年夜饭的温馨场景，这样的新组合便让人眼前一亮。
另外若能提升礼盒刻画的精致度，那画面也会有不错的设计感。而盒子外形也不只有方形，常用的还有圆形和异形。观察视角则以小角度俯视居多，因为这个视角最接近我们日常看礼盒的真实情形，盒内产品在俯视下能看的一清二楚，展现也立体。
盒子陈列的难点在于当盒内要摆放很多产品时，如何能让产品真实、自然的呈现，这需要我们既注意摆放的合理性，也能准确表现透视，还要刻画出产品的明暗变化，总之只有把握好产品的空间感、立体感以及光影感，画面才会舒服协调。
方形盒是最常用的盒子类型，毕竟也是生活中最常用的礼盒外形，结构感强而且易表现。如下图所示，礼盒都是成角透视，且左右灭点都在画面之外，这样结构最稳定，立体感也强。注意盒里的产品呈现，特别是俯视视角下，产品越多越要注意它们是否协调统一，透视、光影等细节一个都不能少，把控不到位就会显得凌乱，画面别扭。
圆形盒比较少见，因为和立方体比起来，圆柱体的透视没那么强烈，结构感偏弱，但圆润的外形能使画面变的柔和，给人一种亲和力和温馨感，如图所示，由于圆形盒没有明显块面，所以不管透视还是光影，刻画起来都相对简单。
异形盒是指外形为不规则形状的盒子，总体也很少见，但易出彩。形状用的好便能打破「盒子陈列」的常规感，使画面变的新颖有创意。
例如下方案例中，不管是心形、猫头轮廓还是圣诞树，都能成为画面焦点并引人注意。另外盒子呈现均用了「正俯视」视角，其实除了小角度俯视外，这种视角也很常见，因为该视角下的产品陈列清晰完整，盒子外形也能直观显示，的展现了其外形的特别之处。
台面陈列
在空间陈列的4类场景中，「台面陈列」用的最多，适用范围也最广，可以说电商中的大部分主题和产品都能使用，算是一种真正白搭的表现方式。
「台面陈列」就是在空间里搭建一个「台面」，然后在上面放置相关产品。由于该手法还是以放大特写的小场景为主，元素形变不能太大，因此画面常用平行透视和成角透视，视角则很灵活，跟着构图走，3种（平视、俯视、仰视）都有。「台面陈列」上手简单，场景多变，其中的关键元素——台面需要根据主题、场景进行灵活变化，常见有2类：桌面和几何体。
桌面很好理解，就是桌子顶部的陈列面，所有产品都放置其上。由于桌子是家里常见家具之一，因此桌面陈列往往能传递一种「家」的温暖和温馨。
可能有人觉得「桌面」形式有些单一，其实远没那么简单，我们不要固化思维，要能灵活变化桌子的样式和装饰，例如方桌还是圆桌？木桌还是大理石桌？光面还是铺桌布？这些都是可变量，再加上视角和周围环境的变化，总之形式可以很丰富。
如图所示，桌面陈列尤其适合各类美食的组合呈现，这时整个场景贴近生活，颇有带入感。
就是将各种几何形体作为陈列产品的台面，几何体相对抽象，表现场景更多元，因此比具象「桌面」更加常用。
如图所示，几何体一般都是组合出现，特别适合多产品陈列，简约大方，能烘托出产品的品质感。同时通过高高低低的大小排列也能表现出画面的结构美以及层次感，总之是一种 「上手简单、易出效果」的表现方式。
常用几何体有「立方体」和「圆柱体」，它们适合陈列，高度调节方便，使用灵活。
如下图所示，整体表现并不复杂，就是将各种产品放在几何体上。但作为画面的核心元素，这时几何体的形态、排列、视角和透视就变的非常重要，我们要根据创意需求和产品气质选择最合适的展现方式，而这些展现本身就有不错的形式感。
几何体陈列既能营造空间关系和简约气质，也能让用户聚焦产品本身，因为它的外形简单，不抢产品，不像一些复杂元素或场景，虽然视觉丰富但最后却让产品淹没其中，这样就本末倒置。
自然陈列
「自然陈列」需要先创建一个合适的自然环境，然后再将产品以合适方式融入其中。相对其他场景，自然环境显然复杂一些，呈现手法常以「合成」和「插画」为主。因为产品都是实物拍摄，为了风格统一，自然环境会偏向写实风格，这样2者结合才协调。
从下方案例能看到，「自然陈列」常用于季节感受或者产地溯源等主题，画面通过「自然场景」营造出天然健康的绿色氛围。而场景中的元素繁多，呈现复杂，这就需要我们具备优秀的整合能力。
对于「自然」塑造，视角以平视和小角度俯视居多，但画面由于没有太多的几何型物体，所以透视没那么严谨，核心是注意近、中、远景的层次区分，还有光影的合理添加。如果这些把控不到位，就很可能出现场景杂乱、缺少层次、没有带入感的粗糙画面，最终沦为各种素材的乱堆一气。
以上列举的都是以花草树木为主的自然环境，确实绿色场景在「自然陈列」中用的也是最多，但除了绿色场景外，有时也会用到其他环境。如下图所示，像海底 ① 、沙滩 ② 、海面 ③ 、冰山 ④ 也是适合陈列的自然场景，特别是夏季主题会经常用到。
舞台陈列
最后一类「舞台陈列」常用于大促主题的气氛营造，这类场景不挑类目，任何产品放在「舞台」上，灯光一打，色彩再斑斓些，都能营造出热闹的促销氛围。
如图所示，舞台外形以圆形居多，因为圆形的透视感较弱，构图灵活，而且也符合大家对舞台的第一印象。舞台视角则很灵活，3种均很常见，核心是和产品视角保持一致。
关于「舞台」塑造，还有2处需要注意的地方：
舞台外形除了最常用的「圆形」外，还有半圆形、方形和六边形等等；舞台造型也可以很丰富，并不局限于常规的表演舞台，各种造型都可尝试，例如上方左四图就是现代感十足的三维舞台，总之我们要根据创意和风格塑造相匹配的陈列舞台。
另外就是灯光运用，可以说这是「舞台陈列」和其他场景的最大区别，但灯光也不是越多越好，太多反而显得眼花缭乱，其实能渲染出绚烂气氛即可。而有光就有影，在灯光照射下，产品一定要有准确的光影呼应，这样才不会显得突兀。例如上方案例中，仔细观察灯光下的产品呈现，能看到产品表面都产生了被灯光照射后的色彩、明暗等变化，这些细节刻画才让画面更真实，融合更自然。
本次案例会用胶原蛋白口服液作主体元素，然后用这4类场景（盒子、台面、自然、舞台）来设计4张不同视角、不同风格的Banner，让大家看看在不同场景下，如何将产品融入其中。先展示案例会用到的3种产品视角， 下方案例会根据不同的场景视角选择对应素材。
「空间陈列法」的内容量挺大，主要分成了「焦点透视」和「陈列场景」2大部分来介绍，其中焦点透视是立体「空间」的塑造基础；而陈列场景则是产品「陈列」的具体环境。
常用场景有4类：盒子陈列、台面陈列、自然陈列和舞台陈列，每种陈列都有各自适用的主题和氛围：「盒子」常用于温馨的送礼主题；「台面」则能根据不同主题灵活应变，属于百搭场景；而「自然」则适合季节或者溯源主题，体现天然清新感；最后的「舞台」则用于氛围浓烈的大促主题。不管哪种场景，都要确保产品和空间的视角、透视相一致，这样场景才会真实协调。另外多产品陈列时，还要注意它们之间的大小比例以及摆放结构，其中三角结构最常用。总之在手机时代，「空间陈列」是一种真正适合小屏竖构图的表现方式。
文章来源：优设 作者：贤辈
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
CSS :before 选择器
定义和说明
:before 选择器向选定的元素前插入内容。
使用content 属性来指定要插入的内容。
CSS :after 选择器
定义和说明
:after 选择器向选定的元素之后插入内容。
使用content 属性来指定要插入的内容。
这两个伪元素会在真正页面元素之前和之后插入一个额外的元素，从技术角度上讲，它们与下面的HTML标记是等效的。
1.伪类光圈
<div class="hover-circle">CSS</div>
.hover-circle {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 3rem;
letter-spacing: 0.3rem;
font-weight: bold;
position: relative;
cursor: pointer;
color: #666;
}
.hover-circle::before {
width: 8.5rem;
height: 8.5rem;
border: 3px solid pink;
content: "";
border-radius: 50%;
position: absolute;
opacity: 0;
}
.hover-circle::after {
width: 7.2rem;
height: 7.2rem;
border: 6px solid pink;
content: "";
border-radius: 50%;
position: absolute;
opacity: 0;
}
.hover-circle:hover::before,
.hover-circle:hover::after {
animation-duration: 0.8s;
animation-delay: 0.2s;
animation: circle 0.8s;
}
@keyframes circle {
0% {
opacity: 0;
scale: 1;
}
25% {
opacity: 0.25;
}
50% {
opacity: 0.5;
scale: 1.03;
}
75% {
opacity: 0.75;
}
100% {
opacity: 1;
scale: 1.03;
}
}
2.伪类括号效果
<div class="hover-text">CSS</div>
.hover-text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 3rem;
letter-spacing: 0.3rem;
font-weight: bold;
position: relative;
cursor: pointer;
color: #666;
}
.hover-text::before {
content: "[";
position: absolute;
left: 0.8rem;
opacity: 0;
color: #999;
}
.hover-text::after {
content: "]";
position: absolute;
right: 0.8rem;
opacity: 0;
color: #999;
}
.hover-text:hover::before {
animation-duration: 0.8s;
animation-delay: 0.2s;
animation: hovertext1 0.8s;
}
.hover-text:hover::after {
animation-duration: 0.8s;
animation-delay: 0.2s;
animation: hovertext2 0.8s;
}
@keyframes hovertext1 {
0% {
opacity: 0;
left: 0.8rem;
}
100% {
opacity: 1;
left: 0.5rem;
}
}
@keyframes hovertext2 {
0% {
opacity: 0;
right: 0.8rem;
}
100% {
opacity: 1;
right: 0.5rem;
}
}
3.炫酷丝带效果
双边丝带
<div class="tc">
<div class="title1"><span>距离结束还有10天</span></div>
</div>
.title1 {
position: relative;
display: inline-block;
}
.title1 span {
position: relative;
z-index: 2;
display: inline-block;
padding: 0 15px;
height: 32px;
line-height: 32px;
background-color: #dc5947;
color: #fff;
font-size: 16px;
box-shadow: 0 10px 6px -9px rgba(0, 0, 0, 0.6);
}
.title1 span::before,
.title1 span::after {
position: absolute;
bottom: -6px;
border-width: 3px 5px;
border-style: solid;
content: "";
}
.title1 span::before {
left: 0;
border-color: #972f22 #972f22 transparent transparent;
}
.title1 span::after {
right: 0;
border-color: #972f22 transparent transparent #972f22;
}
.title1::before,
.title1::after {
position: absolute;
top: 6px;
content: "";
border-style: solid;
border-color: #dc5947;
}
.title1::before {
left: -32px;
border-width: 16px 26px 16px 16px;
border-left-color: transparent;
}
.title1::after {
right: -32px;
border-width: 16px 16px 16px 26px;
border-right-color: transparent;
}
右边丝带
<span class="title2">距离结束还有10天</span>
.title2 {
position: relative;
display: inline-block;
padding: 0 15px;
height: 32px;
line-height: 32px;
background-color: #dc5947;
color: #fff;
font-size: 16px;
}
.title2::before {
position: absolute;
top: -4px;
left: 0;
border-width: 2px 4px;
border-style: solid;
border-color: transparent #972f22 #972f22 transparent;
content: "";
}
.title2::after {
position: absolute;
top: 0;
right: -8px;
border-width: 16px 8px 16px 0;
border-style: solid;
border-color: #dc5947 transparent #dc5947 #dc5947;
content: "";
}
箭头丝带
<span class="title3">距离结束还有10天</span>
.title3 {
position: relative;
display: inline-block;
margin-right: 16px;
padding: 0 10px;
height: 32px;
line-height: 32px;
background-color: #dc5947;
color: #fff;
font-size: 16px;
}
.title3::before {
position: absolute;
top: 0;
left: -16px;
border-width: 16px 16px 16px 0;
border-style: solid;
border-color: transparent #dc5947 transparent transparent;
content: "";
}
.title3::after {
position: absolute;
top: 0;
right: -16px;
border-width: 16px 16px 16px 0;
border-style: solid;
border-color: #dc5947 transparent #dc5947 #dc5947;
content: "";
}
多个箭头丝带
<div class="mt30 pl16">
<span class="title3">距离结束还有10天</span>
<span class="title3 ml5">距离结束还有10天</span>
<span class="title3 ml5">距离结束还有10天</span>
</div>
.title4 {
width: 200px;
height: 140px;
position: absolute;
top: -8px;
left: -8px;
overflow: hidden;
}
.title4::before {
position: absolute;
left: 124px;
border-radius: 8px 8px 0 0;
width: 16px;
height: 8px;
background-color: #972f22;
content: "";
}
.title4::after {
position: absolute;
left: 0;
top: 124px;
border-radius: 0 8px 8px 0;
width: 8px;
height: 16px;
background-color: #972f22;
content: "";
}
.title4 span {
display: inline-block;
text-align: center;
width: 200px;
height: 40px;
line-height: 40px;
position: absolute;
top: 30px;
left: -50px;
z-index: 2;
overflow: hidden;
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 1px dashed #fff;
box-shadow: 0 0 0 3px #dc5947, 0 14px 7px -9px rgba(0, 0, 0, 0.6);
background-color: #dc5947;
color: #fff;
}
悬挂标签
<div class="pr mt30" style="background-color: #eee; height: 200px;">
<div class="title4"><span>企业热门动态</span></div>
<div class="title5"><span>企业热门动态</span></div>
</div>
.title5 {
width: 140px;
height: 200px;
position: absolute;
top: -8px;
right: -8px;
overflow: hidden;
}
.title5::before {
position: absolute;
right: 124px;
border-radius: 8px 8px 0 0;
width: 16px;
height: 8px;
background-color: #972f22;
content: "";
}
.title5::after {
position: absolute;
right: 0;
top: 124px;
border-radius: 0 8px 8px 0;
width: 8px;
height: 16px;
background-color: #972f22;
content: "";
}
.title5 span {
display: inline-block;
text-align: center;
width: 200px;
height: 40px;
line-height: 40px;
position: absolute;
top: 30px;
right: -50px;
z-index: 2;
overflow: hidden;
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border: 1px dashed #fff;
box-shadow: 0 0 0 3px #dc5947, 0 14px 7px -9px rgba(0, 0, 0, 0.6);
background-color: #dc5947;
color: #fff;
}
4.几何图形
三角形
<div class="triangle"></div>
.triangle {
width: 0;
height: 0;
margin: 50px auto;
border-bottom: 100px solid #dc5947;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
transform: scale(1.2);
transition: 0.5s;
}
五角星
<div class="pentagram"></div>
.pentagram {
width: 0;
height: 0;
margin: 100px auto;
position: relative;
border-bottom: 70px solid #dc5947;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
-webkit-transform: scale(1), rotate(35deg);
-moz-transform: scale(1), rotate(35deg);
-ms-transform: scale(1), rotate(35deg);
-o-transform: scale(1), rotate(35deg);
transform: scale(1), rotate(35deg);
}
.pentagram::after {
content: "";
width: 0;
height: 0;
border-bottom: 70px solid #dc5947;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
transform: rotate(-70deg);
position: absolute;
top: 0px;
left: -100px;
}
.pentagram::before {
content: "";
width: 0;
height: 0;
border-bottom: 80px solid #dc5947;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
transform: rotate(-35deg);
position: absolute;
top: -45px;
left: -60px;
}
5.水滴
<div class="drop"></div>
.drop::after {
content: "";
position: absolute;
width: 30px;
height: 20px;
border-radius: 50%;
background-color: #ace3ff;
margin: 100px auto;
top: -50px;
left: 25px;
box-shadow: 5px 12px 4px #ace3ff, -5px 11px 4px #ace3ff, 0px 14px 4px #4d576e;
-webkit-transform: rotate(35deg);
}
.drop::before {
content: "";
position: absolute;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 40px 50px 40px;
border-color: transparent transparent #ace3ff transparent;
top: -30px;
left: 10px;
}
.drop {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ace3ff;
position: relative;
margin: 100px auto;
box-shadow: 0px 6px 0 #3f475a;
}
6 绚丽流动边框
<div class="box-line1"></div>
.box-line2,
.box-line2::before,
.box-line2::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.box-line2 {
width: 200px;
height: 200px;
margin: auto;
color: #69ca62;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
.box-line2::before,
.box-line2::after {
content: "";
z-index: 99;
margin: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
.box-line2::before {
animation-delay: -4s;
}
.box-line2:hover::after,
.box-line2:hover::before {
background-color: rgba(255, 0, 0, 0.3);
}
@keyframes clipMe {
0%,
100% {
clip: rect(0px, 220px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 220px, 0px);
}
50% {
clip: rect(218px, 220px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 218px);
}
}
@keyframes surround {
0%,
100% {
clip: rect(0px, 220px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 220px, 0px);
}
50% {
clip: rect(218px, 220px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 218px);
}
}
.box-line1:before,
.box-line1:after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: "";
z-index: 99;
margin: -5%;
animation: surround linear infinite 8s;
box-shadow: inset 0 0 0 2px #69ca62;
}
.box-line1:before {
animation-delay: -4s;
}
.box-line1 {
border: 1px solid #69ca62;
position: absolute;
left: 500px;
top: 200px;
margin: auto;
width: 200px;
height: 200px;
margin: auto;
}
7.Tooltip提示
<div class="tip" data-tip="CSS伪类">CSS伪类</div>
.tip::after {
content: attr(data-tip);
display: none;
position: absolute;
padding: 5px 10px;
left: 15%;
bottom: 100%;
width: 150px;
margin-bottom: 12px;
transform: translateX(-50%);
font-size: 12px;
background: #000;
color: #fff;
cursor: default;
border-radius: 4px;
}
.tip::before {
content: " ";
position: absolute;
display: none;
left: 15%;
bottom: 100%;
transform: translateX(-50%);
margin-bottom: 3px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 9px solid #000;
}
.tip:hover::after,
.tip:hover::before {
display: block;
}
8.CSS 伪类盒子阴影
使用伪元素:before and :after制作出了完美惊艳的相片阴影效果。其中的技巧是使用绝对定位固定伪元素，然后给它们的z-index一个负值，以背景出现。
<div class="box effect2">
<h3>CSS 伪类盒子阴影</h3>
</div>
.effect2 {
position: relative;
}
.effect2::before, .effect2::after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2::after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
CSS Box 阴影效果
9.Tabs当前激活状态
<div class="sm-box flex">
<div class="menu-tabs active">首页</div>
<div class="menu-tabs">新闻</div>
<div class="menu-tabs">视频</div>
<div class="menu-tabs">图片</div>
</div>
.menu-tabs {
display: block;
padding: 0.25rem 1.5rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
width: 50px;
border: 0;
height: 35px;
justify-content: center;
display: flex;
cursor: pointer;
}
.menu-tabs:hover {
color: #20a884;
position: relative;
}
.menu-tabs:hover:after {
position: absolute;
content: "";
border: 1px solid #20a884;
width: 3rem;
left: 0;
bottom: 0;
margin-left: 50%;
transform: translateX(-50%);
}
.active {
position: relative;
color: #20a884;
}
.flex {
display: flex;
}
.active::after {
position: absolute;
content: "";
border: 1px solid #20a884;
width: 3rem;
left: 0;
bottom: 0;
margin-left: 50%;
transform: translateX(-50%);
}
10.伪元素模糊背景
<div class="container">
<div class="overlay">
<h1>A blurred overlay</h1>
<p>... mask or whatever
<br>that is responsive and could be cross-browser compatible back to IE9</p>
</div>
</div>
.container {
width: 100%;
height: 100%;
margin: 0;
}
.container,
.overlay:before {
background: url(https://wow.techbrood.com/assets/landing.jpg) no-repeat fixed 0 0 / cover;
}
.container {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.overlay {
max-height: 200px;
margin: 0 auto;
max-width: 768px;
padding: 50px;
position: relative;
color: white;
font-family: "Lato";
position: relative;
text-align: center;
z-index: 0;
}
.overlay:before {
content: "";
-webkit-filter: blur(100px);
filter: blur(100px);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
11.蓝湖文字
<span class="lanhu_text">
本站由叫我詹躲躲提供技术支持
</span>
.lanhu_text {
position: relative;
color: #2878ff;
}
.lanhu_text::before {
content: "";
width: 80px;
height: 20px;
position: absolute;
left: -86px;
top: 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAABCAYAAABJwyn/AAAAjElEQVQoU22NSw7CQAxDX8ahICF2HIDTcf9d1c8kaDpthQSL6CmxHRuk8cZfMxqf6DGh+Y5uCxquaB7xdUCXilZHWvBorEiOaqAKrkRRUEmUOw283TKRRb9b4GnIEpWmGYrA237kDh1w6J5N7zzzZv13gtuvT7t++jefUTYmwvpk7v3fPaCzn//9LfsBvRpHnliu+xMAAAAASUVORK5CYII=) 0 no-repeat;
}
.lanhu_text::after {
content: "";
width: 80px;
height: 20px;
position: absolute;
right: -86px;
top: 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAABCAYAAABJwyn/AAAAhElEQVQoU22OSw7CQAxDXzJDWbHiEFyRJQflFggJSjyDph9oC6snx45lO52rrKJqzIyNlkFUPv6vnv+3uW9vrPpBq77/uWFPAXnrnfYVQ16JiWq0stjvxKB9vDc/MeaXWo5cqDEFUkKpEuEoB3ollHvUZ9QV4rFD3R3d9ujwJK5HxAW9AStemAIOwCNlAAAAAElFTkSuQmCC) 100% no-repeat;
}
12 主要标题
<div class="first-title">服务项目</div>
.first-title {
position: relative;
color: #a98661;
font-weight: 400;
font-size: 30px;
text-align: center;
}
.first-title::before,
.first-title::after {
position: absolute;
content: "";
width: 110px;
border-bottom: 1px solid #a98661;
top: 50%;
transform: translateY(-50%);
}
.first-title::before {
left: 100px;
}
.first-title::after {
right: 100px;
}
13.鼠标浮层遮罩浮层
<div class="black-mask"></div>
.black-mask {
position: relative;
height: 100%;
width: 100%;
cursor: pointer;
}
.black-mask:hover {
transition-duration: 1s;
scale: 1.02;
}
.black-mask:hover:before {
object-fit: cover;
}
.black-mask:hover:after {
height: 100%;
opacity: 1;
transition-duration: 1s;
display: flex;
align-items: flex-end;
padding: 0 30px 15px;
}
.black-mask::before {
position: absolute;
content: "";
background: url(https://dcdn.it120.cc/2019/11/14/f17c5848-6d1f-4254-b3ba-64d3969d16b6.jpg) no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
.black-mask::after {
position: absolute;
content: "雾在微风的吹动下滚来滚去，像冰峰雪山，似蓬莱仙境，如海市蜃楼，使人觉得飘然欲仙。山河景色在雾的装点下，变得更加美丽。远处的七连山巍峨挺拔，它们仿佛成了神仙住的宝山，令人神往。近处池塘边时时飘来雾气，在初升阳光的照耀下，呈现出赤、橙、黄、绿、青、蓝、紫七种色彩。......";
width: 90%;
height: 0%;
bottom: 0;
right: 0;
z-index: 32;
background: rgba(0, 0, 0, 0.3);
opacity: 1;
color: #fff;
opacity: 0;
padding: 0 30px 0;
}
14.绚丽光圈
<div class="aperture">光圈</div>
.aperture {
width: 136px;
height: 136px;
background-color: #dc5947;
border-radius: 50%;
line-height: 136px;
text-align: center;
color: #fff;
font-size: 24px;
cursor: pointer;
position: relative;
}
.aperture::before {
border: 3px dashed #a0ff80;
content: "";
width: 144px;
height: 144px;
position: absolute;
border-radius: 50%;
left: -8px;
top: -6px;
animation: clockwise 5s linear infinite;
}
@keyframes clockwise {
100% {
transform: rotate(360deg);
}
}
15.彩色流动边框
<div class="rainbow"></div>
.rainbow {
position: relative;
z-index: 0;
width: 400px;
height: 300px;
border-radius: 10px;
overflow: hidden;
padding: 2rem;
}
.rainbow::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #399953;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
.rainbow::after {
content: '';
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: white;
border-radius: 5px;
}
@keyframes rotate {
100% {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
16.炫酷伪类边框
<div class="corner-button">CSS3</div>
.corner-button::before, .corner-button::after {
content: '';
position: absolute;
background: #2f2f2f;
z-index: 1;
transition: all 0.3s;
}
.corner-button::before {
width: calc(100% - 3rem);
height: calc(101% + 1rem);
top: -0.5rem;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.corner-button::after {
height: calc(100% - 3rem);
width: calc(101% + 1rem);
left: -0.5rem;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.corner-button:hover {
color: pink;
}
.corner-button {
font-family: 'Lato', sans-serif;
letter-spacing: .02rem;
cursor: pointer;
background: transparent;
border: 0.5rem solid currentColor;
padding: 1.5rem 2rem;
font-size: 2.2rem;
color: #06c17f;
position: relative;
transition: color 0.3s;
text-align: center;
margin: 5rem 12rem;
}
.corner-button:hover::after {
height: 0;
}
.corner-button:hover::before {
width: 0;
}
.bg-f2{
background: #2f2f2f;
}
17.伪类美化文字
<div class="beautify-font" data-text='躲躲'>躲躲</div>
<div class="beautify-font2" data-text='躲躲'>躲躲</div>
.beautify-font{
position: relative;
font-size: 12rem;
color: #0099CC
}
.beautify-font::before{
position: absolute;
font-size: 12rem;
color: #333;
content: attr(data-text);
white-space:nowrap;
width: 50%;
display: inline-block;
overflow: hidden;
transition:1s ease-in-out 0s;
}
.beautify-font2{
position: relative;
font-size: 6rem;
color: #0099CC
}
.beautify-font2::before{
position: absolute;
font-size: 6rem;
color: #333;
content: attr(data-text);
white-space:nowrap;
height: 50%;
display: inline-block;
overflow: hidden;
transition:1s ease-in-out 0s;
}
.beautify-font:hover::before{
width:0;
}
.beautify-font2:hover::before{
height: 0;
}
18.照片堆叠效果
只使用一张图片来创造出一堆图片叠摞在一起的效果，能做到吗？当然，关键是要使用伪元素:before和:after来帮助呈现。把这些伪元素的z-index设置成负值，让它们以背景方式起作用。
<div class="stackthree"><img src="./images/city.jpg"></div>
.stackthree::before {
background: #eff4de;
}
.stackthree, .stackthree::before, .stackthree::after {
border: 6px solid #fff;
height: 200px;
width: 200px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.stackthree::before {
top: 5px;
left: -15px;
z-index: -1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.stackthree::after {
top: -2px;
left: -10px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.stackthree::before, .stackthree::after {
background: #768590;
content: "";
position: absolute;
z-index: -1;
height: 0px\9;
width: 0px\9;
border: none\9;
}
.stackthree {
float: left;
position: relative;
margin: 50px;
}
为元素的兼容性
不论你使用单冒号还是双冒号语法，浏览器都能识别。因为IE8只支持单冒号的语法，所以，如果你想兼容IE8，保险的做法是使用单冒号。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在最后的 阿宝哥有话说 环节，阿宝哥将介绍 WebSocket 与 HTTP 之间的关系、WebSocket 与长轮询有什么区别、什么是 WebSocket 心跳及 Socket 是什么等内容。
下面我们进入正题，为了让大家能够更好地理解和掌握 WebSocket 技术，我们先来介绍一下什么是 WebSocket。
一、什么是 WebSocket
1.1 WebSocket 诞生背景
早期，很多网站为了实现推送技术，所用的技术都是轮询。轮询是指由浏览器每隔一段时间向服务器发出 HTTP 请求，然后服务器返回的数据给客户端。常见的轮询方式分为轮询与长轮询，它们的区别如下图所示：
为了更加直观感受轮询与长轮询之间的区别，我们来看一下具体的代码：
这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而 HTTP 请求与响应可能会包含较长的头部，其中真正有效的数据可能只是很小的一部分，所以这样会消耗很多带宽资源。
比较新的轮询技术是 Comet)。这种技术虽然可以实现双向通信，但仍然需要反复发出请求。而且在 Comet 中普遍采用的 HTTP 长连接也会消耗服务器资源。
在这种情况下，HTML5 定义了 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。Websocket 使用 ws 或 wss 的统一资源标志符（URI），其中 wss 表示使用了 TLS 的 Websocket。如：
ws://echo.websocket.org
wss://echo.websocket.org
WebSocket 与 HTTP 和 HTTPS 使用相同的 TCP 端口，可以绕过大多数防火墙的限制。默认情况下，WebSocket 协议使用 80 端口；若运行在 TLS 之上时，默认使用 443 端口。
1.2 WebSocket 简介
WebSocket 是一种网络传输协议，可在单个 TCP 连接上进行全双工通信，位于 OSI 模型的应用层。WebSocket 协议在 2011 年由 IETF 标准化为 RFC 6455，后由 RFC 7936 补充规范。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。
介绍完轮询和 WebSocket 的相关内容之后，接下来我们来看一下 XHR Polling 与 WebSocket 之间的区别：
1.3 WebSocket 优点
较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。
更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于 HTTP 请求需要等待客户端发起请求服务端才能响应，延迟明显更少。
保持连接状态。与 HTTP 不同的是，WebSocket 需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。
更好的二进制支持。WebSocket 定义了二进制帧，相对 HTTP，可以更轻松地处理二进制内容。
可以支持扩展。WebSocket 定义了扩展，用户可以扩展协议、实现部分自定义的子协议。
由于 WebSocket 拥有上述的优点，所以它被广泛地应用在即时通信、实时音视频、在线教育和游戏等领域。对于前端开发者来说，要想使用 WebSocket 提供的强大能力，就必须先掌握 WebSocket API，下面阿宝哥带大家一起来认识一下 WebSocket API。
二、WebSocket API
在介绍 WebSocket API 之前，我们先来了解一下它的兼容性：
（图片来源：https://caniuse.com/#search=W...）
从上图可知，目前主流的 Web 浏览器都支持 WebSocket，所以我们可以在大多数项目中放心地使用它。
在浏览器中要使用 WebSocket 提供的能力，我们就必须先创建 WebSocket 对象，该对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。
使用 WebSocket 构造函数，我们就能轻易地构造一个 WebSocket 对象。接下来我们将从 WebSocket 构造函数、WebSocket 对象的属性、方法及 WebSocket 相关的事件四个方面来介绍 WebSocket API，首先我们从 WebSocket 的构造函数入手：
2.1 构造函数
WebSocket 构造函数的语法为：
const myWebSocket = new WebSocket(url [, protocols]);
相关参数说明如下：
url：表示连接的 URL，这是 WebSocket 服务器将响应的 URL。
protocols（可选）：一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议。比如，你可能希望一台服务器能够根据指定的协议（protocol）处理不同类型的交互。如果不指定协议字符串，则假定为空字符串。
当尝试连接的端口被阻止时，会抛出 SECURITY_ERR 异常。
2.2 属性
WebSocket 对象包含以下属性：
每个属性的具体含义如下：
binaryType：使用二进制的数据类型连接。
bufferedAmount（只读）：未发送至服务器的字节数。
extensions（只读）：服务器选择的扩展。
onclose：用于指定连接关闭后的回调函数。
onerror：用于指定连接失败后的回调函数。
onmessage：用于指定当从服务器接受到信息时的回调函数。
onopen：用于指定连接成功后的回调函数。
protocol（只读）：用于返回服务器端选中的子协议的名字。
readyState（只读）：返回当前 WebSocket 的连接状态，共有 4 种状态：
CONNECTING — 正在连接中，对应的值为 0；
OPEN — 已经连接并且可以通讯，对应的值为 1；
CLOSING — 连接正在关闭，对应的值为 2；
CLOSED — 连接已关闭或者没有连接成功，对应的值为 3。
url（只读）：返回值为当构造函数创建 WebSocket 实例对象时 URL 的绝对路径。
2.3 方法
close([code[, reason]])：该方法用于关闭 WebSocket 连接，如果连接已经关闭，则此方法不执行任何操作。
send(data)：该方法将需要通过 WebSocket 链接传输至服务器的数据排入队列，并根据所需要传输的数据的大小来增加 bufferedAmount 的值 。若数据无法传输（比如数据需要缓存而缓冲区已满）时，套接字会自行关闭。
2.4 事件
使用 addEventListener() 或将一个事件监听器赋值给 WebSocket 对象的 oneventname 属性，来监听下面的事件。
close：当一个 WebSocket 连接被关闭时触发，也可以通过 onclose 属性来设置。
error：当一个 WebSocket 连接因错误而关闭时触发，也可以通过 onerror 属性来设置。
message：当通过 WebSocket 收到数据时触发，也可以通过 onmessage 属性来设置。
open：当一个 WebSocket 连接成功时触发，也可以通过 onopen 属性来设置。
介绍完 WebSocket API，我们来举一个使用 WebSocket 发送普通文本的示例。
2.5 发送普通文本
在以上示例中，我们在页面上创建了两个 textarea，分别用于存放 待发送的数据 和 服务器返回的数据。当用户输入完待发送的文本之后，点击 发送 按钮时会把输入的文本发送到服务端，而服务端成功接收到消息之后，会把收到的消息原封不动地回传到客户端。
// const socket = new WebSocket("ws://echo.websocket.org");
// const sendMsgContainer = document.querySelector("#sendMessage");
function send() {
const message = sendMsgContainer.value;
if (socket.readyState !== WebSocket.OPEN) {
console.log("连接未建立，还不能发送消息");
return;
}
if (message) socket.send(message);
}
当然客户端接收到服务端返回的消息之后，会把对应的文本内容保存到 接收的数据 对应的 textarea 文本框中。
// const socket = new WebSocket("ws://echo.websocket.org");
// const receivedMsgContainer = document.querySelector("#receivedMessage");
socket.addEventListener("message", function (event) {
console.log("Message from server ", event.data);
receivedMsgContainer.value = event.data;
});
为了更加直观地理解上述的数据交互过程，我们使用 Chrome 浏览器的开发者工具来看一下相应的过程：
以上示例对应的完整代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebSocket 发送普通文本示例</title>
<style>
.block {
flex: 1;
}
</style>
</head>
<body>
<h3>阿宝哥：WebSocket 发送普通文本示例</h3>
<div style="display: flex;">
<div class="block">
<p>即将发送的数据：<button onclick="send()">发送</button></p>
<textarea id="sendMessage" rows="5" cols="15"></textarea>
</div>
<div class="block">
<p>接收的数据：</p>
<textarea id="receivedMessage" rows="5" cols="15"></textarea>
</div>
</div>
<script>
const sendMsgContainer = document.querySelector("#sendMessage");
const receivedMsgContainer = document.querySelector("#receivedMessage");
const socket = new WebSocket("ws://echo.websocket.org");
// 监听连接成功事件
socket.addEventListener("open", function (event) {
console.log("连接成功，可以开始通讯");
});
// 监听消息
socket.addEventListener("message", function (event) {
console.log("Message from server ", event.data);
receivedMsgContainer.value = event.data;
});
function send() {
const message = sendMsgContainer.value;
if (socket.readyState !== WebSocket.OPEN) {
console.log("连接未建立，还不能发送消息");
return;
}
if (message) socket.send(message);
}
</script>
</body>
</html>
其实 WebSocket 除了支持发送普通的文本之外，它还支持发送二进制数据，比如 ArrayBuffer 对象、Blob 对象或者 ArrayBufferView 对象：
const socket = new WebSocket("ws://echo.websocket.org");
socket.onopen = function () {
// 发送UTF-8编码的文本信息
socket.send("Hello Echo Server!");
// 发送UTF-8编码的JSON数据
socket.send(JSON.stringify({ msg: "我是阿宝哥" }));
// 发送二进制ArrayBuffer
const buffer = new ArrayBuffer(128);
socket.send(buffer);
// 发送二进制ArrayBufferView
const intview = new Uint32Array(buffer);
socket.send(intview);
// 发送二进制Blob
const blob = new Blob([buffer]);
socket.send(blob);
};
以上代码成功运行后，通过 Chrome 开发者工具，我们可以看到对应的数据交互过程：
下面阿宝哥以发送 Blob 对象为例，来介绍一下如何发送二进制数据。
Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。
对 Blob 感兴趣的小伙伴，可以阅读 “你不知道的 Blob” 这篇文章。
2.6 发送二进制数据
在以上示例中，我们在页面上创建了两个 textarea，分别用于存放 待发送的数据 和 服务器返回的数据。当用户输入完待发送的文本之后，点击 发送 按钮时，我们会先获取输入的文本并把文本包装成 Blob 对象然后发送到服务端，而服务端成功接收到消息之后，会把收到的消息原封不动地回传到客户端。
当浏览器接收到新消息后，如果是文本数据，会自动将其转换成 DOMString 对象，如果是二进制数据或 Blob 对象，会直接将其转交给应用，由应用自身来根据返回的数据类型进行相应的处理。
数据发送代码
// const socket = new WebSocket("ws://echo.websocket.org");
// const sendMsgContainer = document.querySelector("#sendMessage");
function send() {
const message = sendMsgContainer.value;
if (socket.readyState !== WebSocket.OPEN) {
console.log("连接未建立，还不能发送消息");
return;
}
const blob = new Blob([message], { type: "text/plain" });
if (message) socket.send(blob);
console.log(`未发送至服务器的字节数：${socket.bufferedAmount}`);
}
当然客户端接收到服务端返回的消息之后，会判断返回的数据类型，如果是 Blob 类型的话，会调用 Blob 对象的 text() 方法，获取 Blob 对象中保存的 UTF-8 格式的内容，然后把对应的文本内容保存到 接收的数据 对应的 textarea 文本框中。
数据接收代码
// const socket = new WebSocket("ws://echo.websocket.org");
// const receivedMsgContainer = document.querySelector("#receivedMessage");
socket.addEventListener("message", async function (event) {
console.log("Message from server ", event.data);
const receivedData = event.data;
if (receivedData instanceof Blob) {
receivedMsgContainer.value = await receivedData.text();
} else {
receivedMsgContainer.value = receivedData;
}
});
同样，我们使用 Chrome 浏览器的开发者工具来看一下相应的过程：
通过上图我们可以很明显地看到，当使用发送 Blob 对象时，Data 栏位的信息显示的是 Binary Message，而对于发送普通文本来说，Data 栏位的信息是直接显示发送的文本消息。
以上示例对应的完整代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebSocket 发送二进制数据示例</title>
<style>
.block {
flex: 1;
}
</style>
</head>
<body>
<h3>阿宝哥：WebSocket 发送二进制数据示例</h3>
<div style="display: flex;">
<div class="block">
<p>待发送的数据：<button onclick="send()">发送</button></p>
<textarea id="sendMessage" rows="5" cols="15"></textarea>
</div>
<div class="block">
<p>接收的数据：</p>
<textarea id="receivedMessage" rows="5" cols="15"></textarea>
</div>
</div>
<script>
const sendMsgContainer = document.querySelector("#sendMessage");
const receivedMsgContainer = document.querySelector("#receivedMessage");
const socket = new WebSocket("ws://echo.websocket.org");
// 监听连接成功事件
socket.addEventListener("open", function (event) {
console.log("连接成功，可以开始通讯");
});
// 监听消息
socket.addEventListener("message", async function (event) {
console.log("Message from server ", event.data);
const receivedData = event.data;
if (receivedData instanceof Blob) {
receivedMsgContainer.value = await receivedData.text();
} else {
receivedMsgContainer.value = receivedData;
}
});
function send() {
const message = sendMsgContainer.value;
if (socket.readyState !== WebSocket.OPEN) {
console.log("连接未建立，还不能发送消息");
return;
}
const blob = new Blob([message], { type: "text/plain" });
if (message) socket.send(blob);
console.log(`未发送至服务器的字节数：${socket.bufferedAmount}`);
}
</script>
</body>
</html>
可能有一些小伙伴了解完 WebSocket API 之后，觉得还不够过瘾。下面阿宝哥将带大家来实现一个支持发送普通文本的 WebSocket 服务器。
三、手写 WebSocket 服务器
在介绍如何手写 WebSocket 服务器前，我们需要了解一下 WebSocket 连接的生命周期。
从上图可知，在使用 WebSocket 实现全双工通信之前，客户端与服务器之间需要先进行握手（Handshake），在完成握手之后才能开始进行数据的双向通信。
握手是在通信电路创建之后，信息传输开始之前。握手用于达成参数，如信息传输率，字母表，奇偶校验，中断过程，和其他协议特性。 握手有助于不同结构的系统或设备在通信信道中连接，而不需要人为设置参数。
既然握手是 WebSocket 连接生命周期的第一个环节，接下来我们就先来分析 WebSocket 的握手协议。
3.1 握手协议
WebSocket 协议属于应用层协议，它依赖于传输层的 TCP 协议。WebSocket 通过 HTTP/1.1 协议的 101 状态码进行握手。为了创建 WebSocket 连接，需要通过浏览器发出请求，之后服务器进行回应，这个过程通常称为 “握手”（Handshaking）。
利用 HTTP 完成握手有几个好处。首先，让 WebSocket 与现有 HTTP 基础设施兼容：使得 WebSocket 服务器可以运行在 80 和 443 端口上，这通常是对客户端唯一开放的端口。其次，让我们可以重用并扩展 HTTP 的 Upgrade 流，为其添加自定义的 WebSocket 首部，以完成协商。
下面我们以前面已经演示过的发送普通文本的例子为例，来具体分析一下握手过程。
3.1.1 客户端请求
GET ws://echo.websocket.org/ HTTP/1.1
Host: echo.websocket.org
Origin: file://
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: Zx8rNEkBE4xnwifpuh8DHQ==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
备注：已忽略部分 HTTP 请求头
字段说明
Connection 必须设置 Upgrade，表示客户端希望连接升级。
Upgrade 字段必须设置 websocket，表示希望升级到 WebSocket 协议。
Sec-WebSocket-Version 表示支持的 WebSocket 版本。RFC6455 要求使用的版本是 13，之前草案的版本均应当弃用。
Sec-WebSocket-Key 是随机的字符串，服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一个特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然后计算 SHA-1 摘要，之后进行 Base64 编码，将结果做为 “Sec-WebSocket-Accept” 头的值，返回给客户端。如此操作，可以尽量避免普通 HTTP 请求被误认为 WebSocket 协议。
Sec-WebSocket-Extensions 用于协商本次连接要使用的 WebSocket 扩展：客户端发送支持的扩展，服务器通过返回相同的首部确认自己支持一个或多个扩展。
Origin 字段是可选的，通常用来表示在浏览器中发起此 WebSocket 连接所在的页面，类似于 Referer。但是，与 Referer 不同的是，Origin 只包含了协议和主机名称。
3.1.2 服务端响应
HTTP/1.1 101 Web Socket Protocol Handshake ①
Connection: Upgrade ②
Upgrade: websocket ③
Sec-WebSocket-Accept: 52Rg3vW4JQ1yWpkvFlsTsiezlqw= ④
备注：已忽略部分 HTTP 响应头
① 101 响应码确认升级到 WebSocket 协议。
② 设置 Connection 头的值为 "Upgrade" 来指示这是一个升级请求。HTTP 协议提供了一种特殊的机制，这一机制允许将一个已建立的连接升级成新的、不相容的协议。
③ Upgrade 头指定一项或多项协议名，按优先级排序，以逗号分隔。这里表示升级为 WebSocket 协议。
④ 签名的键值验证协议支持。
介绍完 WebSocket 的握手协议，接下来阿宝哥将使用 Node.js 来开发我们的 WebSocket 服务器。
3.2 实现握手功能
要开发一个 WebSocket 服务器，首先我们需要先实现握手功能，这里阿宝哥使用 Node.js 内置的 http 模块来创建一个 HTTP 服务器，具体代码如下所示：
const http = require("http");
const port = 8888;
const { generateAcceptValue } = require("./util");
const server = http.createServer((req, res) => {
res.writeHead(200, { "Content-Type": "text/plain; charset=utf-8" });
res.end("大家好，我是阿宝哥。感谢你阅读“你不知道的WebSocket”");
});
server.on("upgrade", function (req, socket) {
if (req.headers["upgrade"] !== "websocket") {
socket.end("HTTP/1.1 400 Bad Request");
return;
}
// 读取客户端提供的Sec-WebSocket-Key
const secWsKey = req.headers["sec-websocket-key"];
// 使用SHA-1算法生成Sec-WebSocket-Accept
const hash = generateAcceptValue(secWsKey);
// 设置HTTP响应头
const responseHeaders = [
"HTTP/1.1 101 Web Socket Protocol Handshake",
"Upgrade: WebSocket",
"Connection: Upgrade",
`Sec-WebSocket-Accept: ${hash}`,
];
// 返回握手请求的响应信息
socket.write(responseHeaders.join("\r\n") + "\r\n\r\n");
});
server.listen(port, () =>
console.log(`Server running at http://localhost:${port}`)
);
在以上代码中，我们首先引入了 http 模块，然后通过调用该模块的 createServer() 方法创建一个 HTTP 服务器，接着我们监听 upgrade 事件，每次服务器响应升级请求时就会触发该事件。由于我们的服务器只支持升级到 WebSocket 协议，所以如果客户端请求升级的协议非 WebSocket 协议，我们将会返回 “400 Bad Request”。
当服务器接收到升级为 WebSocket 的握手请求时，会先从请求头中获取 “Sec-WebSocket-Key” 的值，然后把该值加上一个特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然后计算 SHA-1 摘要，之后进行 Base64 编码，将结果做为 “Sec-WebSocket-Accept” 头的值，返回给客户端。
上述的过程看起来好像有点繁琐，其实利用 Node.js 内置的 crypto 模块，几行代码就可以搞定了：
// util.js
const crypto = require("crypto");
const MAGIC_KEY = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
function generateAcceptValue(secWsKey) {
return crypto
.createHash("sha1")
.update(secWsKey + MAGIC_KEY, "utf8")
.digest("base64");
}
开发完握手功能之后，我们可以使用前面的示例来测试一下该功能。待服务器启动之后，我们只要对 “发送普通文本” 示例，做简单地调整，即把先前的 URL 地址替换成 ws://localhost:8888，就可以进行功能验证。
感兴趣的小伙们可以试试看，以下是阿宝哥本地运行后的结果：
从上图可知，我们实现的握手功能已经可以正常工作了。那么握手有没有可能失败呢？答案是肯定的。比如网络问题、服务器异常或 Sec-WebSocket-Accept 的值不正确。
下面阿宝哥修改一下 “Sec-WebSocket-Accept” 生成规则，比如修改 MAGIC_KEY 的值，然后重新验证一下握手功能。此时，浏览器的控制台会输出以下异常信息：
WebSocket connection to 'ws://localhost:8888/' failed: Error during WebSocket handshake: Incorrect 'Sec-WebSocket-Accept' header value
如果你的 WebSocket 服务器要支持子协议的话，你可以参考以下代码进行子协议的处理，阿宝哥就不继续展开介绍了。
// 从请求头中读取子协议
const protocol = req.headers["sec-websocket-protocol"];
// 如果包含子协议，则解析子协议
const protocols = !protocol ? [] : protocol.split(",").map((s) => s.trim());
// 简单起见，我们仅判断是否含有JSON子协议
if (protocols.includes("json")) {
responseHeaders.push(`Sec-WebSocket-Protocol: json`);
}
好的，WebSocket 握手协议相关的内容基本已经介绍完了。下一步我们来介绍开发消息通信功能需要了解的一些基础知识。
3.3 消息通信基础
在 WebSocket 协议中，数据是通过一系列数据帧来进行传输的。为了避免由于网络中介（例如一些拦截代理）或者一些安全问题，客户端必须在它发送到服务器的所有帧中添加掩码。服务端收到没有添加掩码的数据帧以后，必须立即关闭连接。
3.3.1 数据帧格式
要实现消息通信，我们就必须了解 WebSocket 数据帧的格式：
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len | Extended payload length |
|I|S|S|S| (4) |A| (7) | (16/64) |
|N|V|V|V| |S| | (if payload len==126/127) |
| |1|2|3| |K| | |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
| Extended payload length continued, if payload len == 127 |
+ - - - - - - - - - - - - - - - +-------------------------------+
| |Masking-key, if MASK set to 1 |
+-------------------------------+-------------------------------+
| Masking-key (continued) | Payload Data |
+-------------------------------- - - - - - - - - - - - - - - - +
: Payload Data continued ... :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Payload Data continued ... |
+---------------------------------------------------------------+
可能有一些小伙伴看到上面的内容之后，就开始有点 “懵逼” 了。下面我们来结合实际的数据帧来进一步分析一下：
在上图中，阿宝哥简单分析了 “发送普通文本” 示例对应的数据帧格式。这里我们来进一步介绍一下 Payload length，因为在后面开发数据解析功能的时候，需要用到该知识点。
Payload length 表示以字节为单位的 “有效负载数据” 长度。它有以下几种情形：
如果值为 0-125，那么就表示负载数据的长度。
如果是 126，那么接下来的 2 个字节解释为 16 位的无符号整形作为负载数据的长度。
如果是 127，那么接下来的 8 个字节解释为一个 64 位的无符号整形（最高位的 bit 必须为 0）作为负载数据的长度。
多字节长度量以网络字节顺序表示，有效负载长度是指 “扩展数据” + “应用数据” 的长度。“扩展数据” 的长度可能为 0，那么有效负载长度就是 “应用数据” 的长度。
另外，除非协商过扩展，否则 “扩展数据” 长度为 0 字节。在握手协议中，任何扩展都必须指定 “扩展数据” 的长度，这个长度如何进行计算，以及这个扩展如何使用。如果存在扩展，那么这个 “扩展数据” 包含在总的有效负载长度中。
3.3.2 掩码算法
掩码字段是一个由客户端随机选择的 32 位的值。掩码值必须是不可被预测的。因此，掩码必须来自强大的熵源（entropy），并且给定的掩码不能让服务器或者代理能够很容易的预测到后续帧。掩码的不可预测性对于预防恶意应用的作者在网上暴露相关的字节数据至关重要。
掩码不影响数据荷载的长度，对数据进行掩码操作和对数据进行反掩码操作所涉及的步骤是相同的。掩码、反掩码操作都采用如下算法：
j = i MOD 4
transformed-octet-i = original-octet-i XOR masking-key-octet-j
original-octet-i：为原始数据的第 i 字节。
transformed-octet-i：为转换后的数据的第 i 字节。
masking-key-octet-j：为 mask key 第 j 字节。
为了让小伙伴们能够更好的理解上面掩码的计算过程，我们来对示例中 “我是阿宝哥” 数据进行掩码操作。这里 “我是阿宝哥” 对应的 UTF-8 编码如下所示：
E6 88 91 E6 98 AF E9 98 BF E5 AE 9D E5 93 A5
而对应的 Masking-Key 为 0x08f6efb1，根据上面的算法，我们可以这样进行掩码运算：
let uint8 = new Uint8Array([0xE6, 0x88, 0x91, 0xE6, 0x98, 0xAF, 0xE9, 0x98,
0xBF, 0xE5, 0xAE, 0x9D, 0xE5, 0x93, 0xA5]);
let maskingKey = new Uint8Array([0x08, 0xf6, 0xef, 0xb1]);
let maskedUint8 = new Uint8Array(uint8.length);
for (let i = 0, j = 0; i < uint8.length; i++, j = i % 4) {
maskedUint8[i] = uint8[i] ^ maskingKey[j];
}
console.log(Array.from(maskedUint8).map(num=>Number(num).toString(16)).join(' '));
以上代码成功运行后，控制台会输出以下结果：
ee 7e 7e 57 90 59 6 29 b7 13 41 2c ed 65 4a
上述结果与 WireShark 中的 Masked payload 对应的值是一致的，具体如下图所示：
在 WebSocket 协议中，数据掩码的作用是增强协议的安全性。但数据掩码并不是为了保护数据本身，因为算法本身是公开的，运算也不复杂。那么为什么还要引入数据掩码呢？引入数据掩码是为了防止早期版本的协议中存在的代理缓存污染攻击等问题。
了解完 WebSocket 掩码算法和数据掩码的作用之后，我们再来介绍一下数据分片的概念。
3.3.3 数据分片
WebSocket 的每条消息可能被切分成多个数据帧。当 WebSocket 的接收方收到一个数据帧时，会根据 FIN 的值来判断，是否已经收到消息的最后一个数据帧。
利用 FIN 和 Opcode，我们就可以跨帧发送消息。操作码告诉了帧应该做什么。如果是 0x1，有效载荷就是文本。如果是 0x2，有效载荷就是二进制数据。但是，如果是 0x0，则该帧是一个延续帧。这意味着服务器应该将帧的有效负载连接到从该客户机接收到的最后一个帧。
为了让大家能够更好地理解上述的内容，我们来看一个来自 MDN 上的示例：
Client: FIN=1, opcode=0x1, msg="hello"
Server: (process complete message immediately) Hi.
Client: FIN=0, opcode=0x1, msg="and a"
Server: (listening, new message containing text started)
Client: FIN=0, opcode=0x0, msg="happy new"
Server: (listening, payload concatenated to previous message)
Client: FIN=1, opcode=0x0, msg="year!"
Server: (process complete message) Happy new year to you too!
在以上示例中，客户端向服务器发送了两条消息。第一个消息在单个帧中发送，而第二个消息跨三个帧发送。
其中第一个消息是一个完整的消息（FIN=1 且 opcode != 0x0)，因此服务器可以根据需要进行处理或响应。而第二个消息是文本消息（opcode=0x1）且 FIN=0，表示消息还没发送完成，还有后续的数据帧。该消息的所有剩余部分都用延续帧（opcode=0x0）发送，消息的最终帧用 FIN=1 标记。
好的，简单介绍了数据分片的相关内容。接下来，我们来开始实现消息通信功能。
3.4 实现消息通信功能
阿宝哥把实现消息通信功能，分解为消息解析与消息响应两个子功能，下面我们分别来介绍如何实现这两个子功能。
3.4.1 消息解析
利用消息通信基础环节中介绍的相关知识，阿宝哥实现了一个 parseMessage 函数，用来解析客户端传过来的 WebSocket 数据帧。出于简单考虑，这里只处理文本帧，具体代码如下所示：
function parseMessage(buffer) {
// 第一个字节，包含了FIN位，opcode, 掩码位
const firstByte = buffer.readUInt8(0);
// [FIN, RSV, RSV, RSV, OPCODE, OPCODE, OPCODE, OPCODE];
// 右移7位取首位，1位，表示是否是最后一帧数据
const isFinalFrame = Boolean((firstByte >>> 7) & 0x01);
console.log("isFIN: ", isFinalFrame);
// 取出操作码，低四位
/**
* %x0：表示一个延续帧。当 Opcode 为 0 时，表示本次数据传输采用了数据分片，当前收到的数据帧为其中一个数据分片；
* %x1：表示这是一个文本帧（text frame）；
* %x2：表示这是一个二进制帧（binary frame）；
* %x3-7：保留的操作代码，用于后续定义的非控制帧；
* %x8：表示连接断开；
* %x9：表示这是一个心跳请求（ping）；
* %xA：表示这是一个心跳响应（pong）；
* %xB-F：保留的操作代码，用于后续定义的控制帧。
*/
const opcode = firstByte & 0x0f;
if (opcode === 0x08) {
// 连接关闭
return;
}
if (opcode === 0x02) {
// 二进制帧
return;
}
if (opcode === 0x01) {
// 目前只处理文本帧
let offset = 1;
const secondByte = buffer.readUInt8(offset);
// MASK: 1位，表示是否使用了掩码，在发送给服务端的数据帧里必须使用掩码，而服务端返回时不需要掩码
const useMask = Boolean((secondByte >>> 7) & 0x01);
console.log("use MASK: ", useMask);
const payloadLen = secondByte & 0x7f; // 低7位表示载荷字节长度
offset += 1;
// 四个字节的掩码
let MASK = [];
// 如果这个值在0-125之间，则后面的4个字节（32位）就应该被直接识别成掩码；
if (payloadLen <= 0x7d) {
// 载荷长度小于125
MASK = buffer.slice(offset, 4 + offset);
offset += 4;
console.log("payload length: ", payloadLen);
} else if (payloadLen === 0x7e) {
// 如果这个值是126，则后面两个字节（16位）内容应该，被识别成一个16位的二进制数表示数据内容大小；
console.log("payload length: ", buffer.readInt16BE(offset));
// 长度是126， 则后面两个字节作为payload length，32位的掩码
MASK = buffer.slice(offset + 2, offset + 2 + 4);
offset += 6;
} else {
// 如果这个值是127，则后面的8个字节（64位）内容应该被识别成一个64位的二进制数表示数据内容大小
MASK = buffer.slice(offset + 8, offset + 8 + 4);
offset += 12;
}
// 开始读取后面的payload，与掩码计算，得到原来的字节内容
const newBuffer = [];
const dataBuffer = buffer.slice(offset);
for (let i = 0, j = 0; i < dataBuffer.length; i++, j = i % 4) {
const nextBuf = dataBuffer[i];
newBuffer.push(nextBuf ^ MASK[j]);
}
return Buffer.from(newBuffer).toString();
}
return "";
}
创建完 parseMessage 函数，我们来更新一下之前创建的 WebSocket 服务器：
server.on("upgrade", function (req, socket) {
socket.on("data", (buffer) => {
const message = parseMessage(buffer);
if (message) {
console.log("Message from client:" + message);
} else if (message === null) {
console.log("WebSocket connection closed by the client.");
}
});
if (req.headers["upgrade"] !== "websocket") {
socket.end("HTTP/1.1 400 Bad Request");
return;
}
// 省略已有代码
});
更新完成之后，我们重新启动服务器，然后继续使用 “发送普通文本” 的示例来测试消息解析功能。以下发送 “我是阿宝哥” 文本消息后，WebSocket 服务器输出的信息。
Server running at http://localhost:8888
isFIN: true
use MASK: true
payload length: 15
Message from client:我是阿宝哥
通过观察以上的输出信息，我们的 WebSocket 服务器已经可以成功解析客户端发送包含普通文本的数据帧，下一步我们来实现消息响应的功能。
3.4.2 消息响应
要把数据返回给客户端，我们的 WebSocket 服务器也得按照 WebSocket 数据帧的格式来封装数据。与前面介绍的 parseMessage 函数一样，阿宝哥也封装了一个 constructReply 函数用来封装返回的数据，该函数的具体代码如下：
function constructReply(data) {
const json = JSON.stringify(data);
const jsonByteLength = Buffer.byteLength(json);
// 目前只支持小于65535字节的负载
const lengthByteCount = jsonByteLength < 126 ? 0 : 2;
const payloadLength = lengthByteCount === 0 ? jsonByteLength : 126;
const buffer = Buffer.alloc(2 + lengthByteCount + jsonByteLength);
// 设置数据帧首字节，设置opcode为1，表示文本帧
buffer.writeUInt8(0b10000001, 0);
buffer.writeUInt8(payloadLength, 1);
// 如果payloadLength为126，则后面两个字节（16位）内容应该，被识别成一个16位的二进制数表示数据内容大小
let payloadOffset = 2;
if (lengthByteCount > 0) {
buffer.writeUInt16BE(jsonByteLength, 2);
payloadOffset += lengthByteCount;
}
// 把JSON数据写入到Buffer缓冲区中
buffer.write(json, payloadOffset);
return buffer;
}
创建完 constructReply 函数，我们再来更新一下之前创建的 WebSocket 服务器：
server.on("upgrade", function (req, socket) {
socket.on("data", (buffer) => {
const message = parseMessage(buffer);
if (message) {
console.log("Message from client:" + message);
// 新增以下
蓝蓝设计的小编 http://www.lanlanwork.com
