lisang
/
vuepress-theme-vdoing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css/html

This commit is contained in:
xugaoyi 2019-12-13 19:51:36 +08:00
parent d328fbae35
commit 5e332e4d66
22 changed files with 1818 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.gitignore vendored
View File

@ -1,9 +1,9 @@
# npm
# package-lock.json
package-lock.json
node_modules
# vscode
#.vscode
.vscode
# vuepress
dist
docs/.vuepress/dist

8
docs/.vuepress/config/nav.js
View File

@ -3,9 +3,11 @@ module.exports = [
{
text: '前端',
items: [
{text: 'JavaScript', link: '/web/'},
{text: 'TypeScript', link: '/web/'},
{text: 'vue', link: '/web/'}
{text: 'JavaScript', link: '/web/JavaScript/01.JavaScript中的名词概念'},
//{text: 'vue', link: '/web/vue/'},
//{text: 'TypeScript', link: '/web/TypeScript/'},
//{text: 'ES6', link: '/web/ES6/'},
{text: 'CSS/HTML', link: '/web/CSS-HTML/01.flex布局基础'},
]
},
{

27
docs/.vuepress/config/sidebar.js
View File

@ -1,4 +1,31 @@
module.exports = { // 侧边栏
'/web/': [
{
title: 'JavaScript',
collapsable: false, //是否可折叠，可选的，默认true
children: [
['JavaScript/01.JavaScript中的名词概念','JavaScript中的名词概念'],
['JavaScript/02.数据类型转换','数据类型转换'],
['JavaScript/03.ES5面向对象','ES5面向对象'],
['JavaScript/04.ES6面向对象','ES6面向对象'],
['JavaScript/05.new命令原理','new命令原理'],
['JavaScript/06.多种数组去重性能对比','多种数组去重性能对比'],
]
},
{
title: 'CSS/HTML',
collapsable: false,
children: [
['CSS-HTML/01.flex布局基础','flex布局基础'],
['CSS-HTML/02.flex布局案例-骰子','flex布局案例-骰子'],
['CSS-HTML/03.flex布局案例-网格布局','flex布局案例-网格布局'],
['CSS-HTML/04.flex布局案例-圣杯布局','flex布局案例-圣杯布局'],
['CSS-HTML/05.flex布局案例-输入框布局','flex布局案例-输入框布局'],
['CSS-HTML/06.CSS3之transform过渡','CSS3之transform过渡'],
['CSS-HTML/07.CSS3之animation动画','CSS3之animation动画'],
]
},
],
'/other/': [// 针对不同页面设置不同侧边栏
{
title: '技术',

40
docs/readme.md
View File

@ -7,7 +7,7 @@ tagline: web前端工程师，热衷于学习与总结
features:
- title: 前端
details: web前端开发相关技术
url: /web/
url: /web/JavaScript/01.JavaScript中的名词概念
imgname: /img/web.jpg
- title: python
details: 人生苦短，我学python
@ -20,7 +20,45 @@ features:
footer: Copyright © 2019-present evanblog
---
## :earth_americas:前端
* JavaScript
* [ES6面向对象](web/JavaScript/04.ES6面向对象)
* [new命令原理](web/JavaScript/05.new命令原理)
* [多种数组去重性能对比](web/JavaScript/06.多种数组去重性能对比)
* [更多... 👉](web/JavaScript/01.JavaScript中的名词概念)
* CSS/HTML
* [flex布局基础](web/CSS-HTML/01.flex布局基础)
* [flex布局案例-圣杯布局](web/CSS-HTML/04.flex布局案例-圣杯布局)
* [CSS3之animation动画](web/CSS-HTML/07.CSS3之animation动画)
* [更多... 👉](web/CSS-HTML/01.flex布局基础)
## 🐍python
> 敬请期待
## :bulb:技术杂谈
* 技术
* [Git使用文档](other/git)
* [GitHub高级搜索技巧](other/github)
* [Markdown使用教程](other/markdown)
* 学习
* [学习效果低，忘性很大怎么办？](other/LearningAndMemory)
* [学习网站分享](other/study)
* 面试
* [面试问题集锦](other/interview)
* 其他
* [关于本博客搭建](https://github.com/xugaoyi/evanblog)
* [更多... 👉](other/git)
## :email: 联系

166
docs/web/CSS-HTML/01.flex布局基础.md Normal file
View File

@ -0,0 +1,166 @@
# flex布局基础
先上代码，[效果](#效果)在后面
## 代码
html结构
```html
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</div>
```
css样式
```css
/* 父元素上定义弹性盒模型，称之为 “容器” */
.box{width: 350px;height: 300px;margin: 100px auto;background: #eee;
/* 基本概念：.box为容器，.box下的span为项目；.box的x轴为主轴，y轴为交叉轴 */
/* flex 定义为弹性盒模型 */
display: flex;
/*flex-direction 排列方向： row 行（默认） | row-reverse 行-反转 | column 列 | column-reverse 列-反转 */
flex-direction: row;
/*flex-wrap 是否换行： nowrap 不换行（默认，可能会压缩项目宽度） | wrap 换行 | wrap-reverse 换行-反转，第一行在下方 */
flex-wrap: wrap;
/* flex-flow 方向和换行的简写：默认值为row nowrap，方向 和 是否换行 的取值 */
flex-flow: row wrap;
/* justify-content 项目在主轴上的对齐方式: flex-start 左对齐（默认） | flex-end 右对齐 | center 居中 | space-between 两端对齐 | space-around 项目两侧的间隔相等*/
justify-content: space-around;
/* align-items 项目在交叉轴上的对齐方式：stretch（默认）伸展，如果项目未设置高度或设为auto，将占满整个容器的高度 |
flex-start 交叉轴的起点对齐 | flex-end 交叉轴的终点对齐 | center 交叉轴的中心点对齐 | baseline 项目的第一行文字的基线对齐（适用于每个项目高度不一致，以项目中的文字为基准对齐） */
align-items: center
/* align-content 多根轴线的对齐方式（一排项目为一根轴线，只有一根轴线时此样式不起作用）:
stretch（默认）伸展，轴线占满整个交叉轴 | flex-start 容器顶部对齐 | flex-end 容器底部对齐 | center 与交叉轴的中点对齐 |
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布| space-around 每根轴线两侧的间隔都相等*/
align-content：flex-start
/* 代码单词中文含义 ：
flex 弹性； direction 方向； wrap 外套、包； flow 流动
justify 对齐； content 内容；space 空间、距离；between 在...之间；around 周围的
align 排列；stretch 伸展；
*/
}
/* 子元素称之为 “项目” */
.box span{
display:block;width: 50px;height: 50px;background: mediumspringgreen;margin: 10px;text-align: center;line-height: 50px;
/* flex-grow 项目的放大比例，默认为0，即如果存在剩余空间，也不放大;
如果所有为1时，则它们将等分剩余空间（如果有的话）。
如果其中一个项目为2，其他项目都为1，则为2的占据的剩余空间将比其他项多一倍。
*/
flex-grow: 0; /* grow 扩大 */
/* flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目都为1，当空间不足时，都将等比例缩小。
如果其中一个项目为0，其他项目都为1，则空间不足时，为0的不缩小*/
flex-shrink: 1; /* shrink 缩小 */
/* flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（宽度）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。
它可以设为跟`width`或`height`属性一样的值（比如50px），则项目将占据固定空间*/
flex-basis: auto; /* basis 基础 */
/* flex属性是flex-grow,flex-shrink 和 flex-basis的简写，默认值为`0 1 auto`。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto)，即放大 和 none (0 0 auto)，即缩小。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。*/
flex:0 1 auto; /* flex: 0放大 1缩小 auto原本宽度*/
}
.box span:nth-child(2){
/* order 项目的排列顺序。数值越小，排列越靠前，默认为0 ; 取值：正负整数。*/
order: -1;
background: red;
}
.box span:nth-child(7){
/* align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
取值：auto（默认） | flex-start | flex-end | center | baseline | stretch。
*/
align-self: flex-end;
background: blue;
}
```
## 效果
> 可用<kbd>F12</kbd>开发者工具查看代码
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</div>
<style>
/* 父元素上定义弹性盒模型，称之为 “容器” */
.box{
width: 350px;
height: 300px;
margin: 100px auto;
background: #eee;
/* 基本概念：.box为容器，.box下的span为项目；.box的x轴为主轴，y轴为交叉轴 */
/* flex 定义为弹性盒模型 */
display: flex;
/*flex-direction 排列方向： row 行（默认） | row-reverse 行-反转 | column 列 | column-reverse 列-反转 */
flex-direction: row;
/*flex-wrap 是否换行： nowrap 不换行（默认，可能会压缩项目宽度） | wrap 换行 | wrap-reverse 换行-反转，第一行在下方 */
flex-wrap: wrap;
/* flex-flow 方向和换行的简写：默认值为row nowrap，方向 和 是否换行 的取值 */
flex-flow: row wrap;
/* justify-content 项目在主轴上的对齐方式: flex-start 左对齐（默认） | flex-end 右对齐 | center 居中 | space-between 两端对齐 | space-around 项目两侧的间隔相等*/
justify-content: space-around;
/* align-items 项目在交叉轴上的对齐方式：stretch（默认）伸展，如果项目未设置高度或设为auto，将占满整个容器的高度 |
flex-start 交叉轴的起点对齐 | flex-end 交叉轴的终点对齐 | center 交叉轴的中心点对齐 | baseline 项目的第一行文字的基线对齐（适用于每个项目高度不一致，以项目中的文字为基准对齐） */
align-items: center
/* align-content 多根轴线的对齐方式（一排项目为一根轴线，只有一根轴线时此样式不起作用）:
stretch（默认）伸展，轴线占满整个交叉轴 | flex-start 容器顶部对齐 | flex-end 容器底部对齐 | center 与交叉轴的中点对齐 |
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布| space-around 每根轴线两侧的间隔都相等*/
align-content：flex-start
/* 代码单词中文含义 ：
flex 弹性； direction 方向； wrap 外套、包； flow 流动
justify 对齐； content 内容；space 空间、距离；between 在...之间；around 周围的
align 排列；stretch 伸展；
*/
}
/* 子元素称之为 “项目” */
.box span{
display:block;width: 50px;height: 50px;background: mediumspringgreen;margin: 10px;text-align: center;line-height: 50px;
/* flex-grow 项目的放大比例，默认为0，即如果存在剩余空间，也不放大;
如果所有为1时，则它们将等分剩余空间（如果有的话）。
如果其中一个项目为2，其他项目都为1，则为2的占据的剩余空间将比其他项多一倍。
*/
flex-grow: 0; /* grow 扩大 */
/* flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目都为1，当空间不足时，都将等比例缩小。
如果其中一个项目为0，其他项目都为1，则空间不足时，为0的不缩小*/
flex-shrink: 1; /* shrink 缩小 */
/* flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（宽度）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。
它可以设为跟`width`或`height`属性一样的值（比如50px），则项目将占据固定空间*/
flex-basis: auto; /* basis 基础 */
/* flex属性是flex-grow,flex-shrink 和 flex-basis的简写，默认值为`0 1 auto`。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto)，即放大 和 none (0 0 auto)，即缩小。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。*/
flex:0 1 auto; /* flex: 0放大 1缩小 auto原本宽度*/
}
.box span:nth-child(2){
/* order 项目的排列顺序。数值越小，排列越靠前，默认为0 ; 取值：正负整数。*/
order: -1;
background: red;
}
.box span:nth-child(7){
/* align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
取值：auto（默认） | flex-start | flex-end | center | baseline | stretch。
*/
align-self: flex-end;
background: blue;
}
</style>
<p>参考：<a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html" target="_blank" rel="noopener noreferrer">http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p>

276
docs/web/CSS-HTML/02.flex布局案例-骰子.md Normal file
View File

@ -0,0 +1,276 @@
# flex布局案例-骰子
先上代码，[效果](#效果)在后面
## 代码
html结构
```html
<div class="box">
<div class="first-face">
<span class="pip"></span>
</div>
<div class="second-face">
<span class="pip"></span><span class="pip"></span>
</div>
<div class="third-face">
<span class="pip"></span><span class="pip"></span><span class="pip"></span>
</div>
<div class="fourth-face">
<div class="column">
<span class="pip"></span><span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span><span class="pip"></span>
</div>
</div>
<div class="fifth-face">
<div class="column">
<span class="pip"></span><span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span><span class="pip"></span>
</div>
</div>
<div class="sixth-face">
<div class="column">
<span class="pip"></span><span class="pip"></span><span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span><span class="pip"></span><span class="pip"></span>
</div>
</div>
</div>
```
css样式
```css
/* 一 */
.first-face { /* 形成上下左右居中 */
display: flex;
justify-content: center;/* 项目在主轴上居中 */
align-items: center;/* 项目在交叉轴上居中 */
}
/* 二 */
.second-face {
display: flex;
justify-content: space-between;/* 两侧对齐 */
}
.second-face .pip:nth-of-type(2) {
align-self: flex-end;/* 居下 */
}
/* 三 */
.third-face {
display: flex;
justify-content: space-between;/* 两侧对齐 */
}
.third-face .pip:nth-of-type(2) {
align-self: center;/* 居中 */
}
.third-face .pip:nth-of-type(3) {
align-self: flex-end;/* 居下 */
}
/* 四 、六*/
.fourth-face,.sixth-face {
display: flex;
justify-content: space-between;/* 两侧对齐 */
}
.fourth-face .column,
.sixth-face .column {
display: flex;
flex-direction: column;/* 纵向排列 */
justify-content: space-between;/* 两侧对齐 */
}
/* 五 */
.fifth-face {
display: flex;
justify-content: space-between;/* 两侧对齐 */
}
.fifth-face .column {
display: flex;
flex-direction: column;
justify-content: space-between;/* 两侧对齐 */
}
.fifth-face .column:nth-of-type(2) {
justify-content: center;/* 居中对齐 */
}
/* 基础样式 */
.box {
display: flex;
align-items: center;/* 项目在交叉轴上居中 */
justify-content: center;/* 项目在主轴上居中 */
vertical-align: center;
/* 允许项目换行 */
flex-wrap: wrap; /* 项目是多行时以交叉轴中心对齐 */
align-content: center;
font-family: 'Open Sans', sans-serif; background: linear-gradient(top, #222, #333);
}
/* 类名包含face的元素 */
[class$="face"] {margin: 5px;padding: 4px;background-color: #e7e7e7;
width: 104px;height: 104px;object-fit: contain;
box-shadow:
inset 0 5px white,
inset 0 -5px #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7; border-radius: 10%;
}
.pip {display: block;width: 24px;height: 24px;border-radius: 50%;margin: 4px; background-color: #333;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
```
## 效果
> 可用<kbd>F12</kbd>开发者工具查看代码
<div class="box">
<div class="first-face">
<span class="pip"></span>
</div>
<div class="second-face">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="third-face">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="fourth-face">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
<div class="fifth-face">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
<div class="sixth-face">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
</div>
<style>
/* 一 */
.first-face { /* 形成上下左右居中 */
display: flex;
/* 项目在主轴上居中 */
justify-content: center;
/* 项目在交叉轴上居中 */
align-items: center;
}
/* 二 */
.second-face {
display: flex;
/* 两侧对齐 */
justify-content: space-between;
}
.second-face .pip:nth-of-type(2) {
/* 居下 */
align-self: flex-end;
}/* 三 */
.third-face {
display: flex;
/* 两侧对齐 */
justify-content: space-between;
}
.third-face .pip:nth-of-type(2) {
/* 居中 */
align-self: center;
}
.third-face .pip:nth-of-type(3) {
/* 居下 */
align-self: flex-end;
}
/* 四 、六*/
.fourth-face,
.sixth-face {
display: flex;
/* 两侧对齐 */
justify-content: space-between;
}
.fourth-face .column,
.sixth-face .column {
display: flex;
/* 纵向排列 */
flex-direction: column;
/* 两侧对齐 */
justify-content: space-between;
}
/* 五 */
.fifth-face {
display: flex;
/* 两侧对齐 */
justify-content: space-between;
}
.fifth-face .column {
display: flex;
/* 纵向排列 */
flex-direction: column;
/* 两侧对齐 */
justify-content: space-between;
}
.fifth-face .column:nth-of-type(2) {
/* 居中对齐 */
justify-content: center;
}
/* 基础样式 */
.box {
display: flex;
/* 项目在交叉轴上居中 */
align-items: center;
/* 项目在主轴上居中 */
justify-content: center;
vertical-align: center;
/* 允许项目换行 */
flex-wrap: wrap; /* 项目是多行时以交叉轴中心对齐 */
align-content: center;
font-family: 'Open Sans', sans-serif; background: linear-gradient(top, #222, #333);
}
/* 类名包含face的元素 */
[class$="face"] {
margin: 5px;
padding: 4px; background-color: #e7e7e7;
width: 104px;
height: 104px;
object-fit: contain; box-shadow:
inset 0 5px white,
inset 0 -5px #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7; border-radius: 10%;
}
.pip {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
margin: 4px; background-color: #333;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
</style>
<p>参考：<a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank" rel="noopener noreferrer">http://www.ruanyifeng.com/blog/2015/07/flex-examples.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p>

175
docs/web/CSS-HTML/03.flex布局案例-网格布局.md Normal file
View File

@ -0,0 +1,175 @@
# flex布局案例-网格布局
先上代码，[效果](#效果)在后面
## 代码
html结构
```html
<div class="grid">
<div class="grid-cell">1/2</div>
<div class="grid-cell">1/2</div>
</div>
<div class="grid">
<div class="grid-cell">1/3</div>
<div class="grid-cell">1/3</div>
<div class="grid-cell">1/3</div>
</div>
<div class="grid">
<div class="grid-cell">1/4</div>
<div class="grid-cell">1/4</div>
<div class="grid-cell">1/4</div>
<div class="grid-cell">1/4</div>
</div>
<div class="grid text">
<div class="grid-cell">
高度会跟随右侧元素变化
</div>
<div class="grid-cell">
内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充
</div>
</div>
<h4>某个网格设置百分比宽度</h4>
<div class="grid">
<div class="grid-cell u-full">100%</div>
</div>
<div class="grid">
<div class="grid-cell u-1of2">50%</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
</div>
<div class="grid">
<div class="grid-cell u-1of3">33.33%</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
</div>
<div class="grid">
<div class="grid-cell u-1of4">25%</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
</div>
```
css样式
```css
.grid {
display: flex;
}
.grid-cell {
flex: 1;/* 等分空间，同flex-grow: 1，同flex:auto， 同flex:1 1 auto */
}
/* 某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。 */
.grid-cell.u-full {
/* flex: 0允许放大 0不缩小 100% 固定宽度; 同 flex-shrink: 0;flex-basis: 100%; */
flex: 0 0 100%;
}
.grid-cell.u-1of2 {
flex: 0 0 50%;
}
.grid-cell.u-1of3 {
flex: 0 0 33.3333%;
}
.grid-cell.u-1of4 {
flex: 0 0 25%;
}
/* 基础样式 */
.grid-cell {
background: #eee;
text-align: center;
margin: 5px;
padding: 10px 0;
}
.text .grid-cell {
text-align: left
}
```
## 效果
> 可用<kbd>F12</kbd>开发者工具查看代码
<div class="grid">
<div class="grid-cell">1/2</div>
<div class="grid-cell">1/2</div>
</div>
<div class="grid">
<div class="grid-cell">1/3</div>
<div class="grid-cell">1/3</div>
<div class="grid-cell">1/3</div>
</div>
<div class="grid">
<div class="grid-cell">1/4</div>
<div class="grid-cell">1/4</div>
<div class="grid-cell">1/4</div>
<div class="grid-cell">1/4</div>
</div>
<div class="grid text">
<div class="grid-cell">
高度会跟随右侧元素变化
</div>
<div class="grid-cell">
内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充
</div>
</div>
<h4>某个网格设置百分比宽度</h4>
<div class="grid">
<div class="grid-cell u-full">100%</div>
</div>
<div class="grid">
<div class="grid-cell u-1of2">50%</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
</div>
<div class="grid">
<div class="grid-cell u-1of3">33.33%</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
</div>
<div class="grid">
<div class="grid-cell u-1of4">25%</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
</div>
<style>
.grid {
display: flex;
}
.grid-cell {
flex: 1;
}
.grid-cell.u-full {
flex: 0 0 100%;
}
.grid-cell.u-1of2 {
flex: 0 0 50%;
}
.grid-cell.u-1of3 {
flex: 0 0 33.3333%;
}
.grid-cell.u-1of4 {
flex: 0 0 25%;
}
/* 基础样式 */
.grid-cell {
background: #eee;
text-align: center;
margin: 5px;
padding: 10px 0;
}
.text .grid-cell {
text-align: left
}
</style>
<p>参考：<a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank" rel="noopener noreferrer">http://www.ruanyifeng.com/blog/2015/07/flex-examples.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p>

92
docs/web/CSS-HTML/04.flex布局案例-圣杯布局.md Normal file
View File

@ -0,0 +1,92 @@
# flex布局案例-圣杯布局
先上代码，[效果](#效果)在后面
## 代码
html结构
```html
<div class="HolyGrail"> <!--HolyGrail可定义在body-->
<header>#header</header>
<div class="wrap">
<nav class="left">left 宽度固定200px</nav>
<main class="content">center 宽度自适应</main>
<aside class="right">right 宽度固定200px</aside>
</div>
<footer>#footer</footer>
</div>
```
css样式
```css
.HolyGrail {text-align: center;
display: flex;
min-height: 60vh;
flex-direction: column;
}
.HolyGrail .wrap {
display: flex;
flex: 1;
}
.HolyGrail .content {
background: #eee;
/* 等分空间，同flex-grow: 1，同flex:auto， 同flex:1 1 auto */
flex: 1;
}
.HolyGrail .left,.HolyGrail .right {
background:lightgreen;
/* 两个边栏的宽度设为固定 */
/* flex: 0允许放大 0不缩小 200px固定宽度; 同 flex-shrink: 0;flex-basis: 200px; */
flex: 0 0 200px;
}
/* 基础样式 */
.HolyGrail header,.HolyGrail footer{
background:#999;
height: 50px;
line-height: 50px;
}
.HolyGrail .left {
background:salmon;
}
```
## 效果
> 可用<kbd>F12</kbd>开发者工具查看代码
<div class="HolyGrail">
<header>#header</header>
<div class="wrap">
<nav class="left">left 宽度固定200px</nav>
<main class="content">center 宽度自适应</main>
<aside class="right">right 宽度固定200px</aside>
</div>
<footer>#footer</footer>
</div>
<style>
.HolyGrail {
text-align: center;
display: flex;
min-height: 60vh;
flex-direction: column;
}
.HolyGrail .wrap {
display: flex;
flex: 1;
}
.HolyGrail .content {
background: #eee;
flex: 1;
}
.HolyGrail .left,.HolyGrail .right {
background:lightgreen;
flex: 0 0 200px;
}
.HolyGrail header,.HolyGrail footer{
background:#999;
height: 50px;
line-height: 50px;
}
.HolyGrail .left {
background:salmon;
}
</style>
<p>参考：<a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank" rel="noopener noreferrer">http://www.ruanyifeng.com/blog/2015/07/flex-examples.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p>

123
docs/web/CSS-HTML/05.flex布局案例-输入框布局.md Normal file
View File

@ -0,0 +1,123 @@
# flex布局案例-输入框布局
先上代码，[效果](#效果)在后面
## 代码
html结构
```html
<div class="InputAddOn">
<span class="InputAddOn-item">icon</span>
<input class="InputAddOn-field" placeholder="input宽度自适应">
<button class="InputAddOn-item">提交</button>
</div>
<br/>
<div class="Media">
<div class="Media-figure">左侧固定</div>
<p class="Media-body">右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应</p>
</div>
```
css样式
```css
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
.Media {
display: flex;
align-items: flex-start;
}
.Media-figure {
width: 100px;
height: 100px;
background: #eee;
margin-right: 1em;
}
.Media-body {
flex: 1;
}
/* 基础样式 */
.InputAddOn-item {
width: 100px;
text-align: center;
line-height: 30px;
border: 1px solid #ccc;
background: #eee
}
.InputAddOn-field {
height: 30px;
padding: 1px 6px;
border: 1px solid #ccc;
border-left: none;
border-right: none;
}
```
## 效果
> 可用<kbd>F12</kbd>开发者工具查看代码
<div class="InputAddOn">
<span class="InputAddOn-item">icon</span>
<input class="InputAddOn-field" placeholder="input宽度自适应">
<button class="InputAddOn-item">提交</button>
</div>
<br/>
<div class="Media">
<div class="Media-figure">左侧固定</div>
<p class="Media-body">右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应</p>
</div>
<style>
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
.Media {
display: flex;
align-items: flex-start;
}
.Media-figure {
width: 100px;
height: 100px;
background: #eee;
margin-right: 1em;
}
.Media-body {
flex: 1;
}
/* 基础样式 */
input:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
input {
outline-color: invert;
outline-style: none;
outline-width: 0px;
text-shadow: none;
-webkit-appearance: none;
-webkit-user-select: text;
outline-color: transparent;
box-shadow: none;
}
.InputAddOn-item {
width: 100px;
text-align: center;
line-height: 30px;
border: 1px solid #ccc;
background: #eee
}
.InputAddOn-field {
height: 30px;
padding: 1px 6px;
border: 1px solid #ccc;
border-left: none;
border-right: none;
}
</style>
<p>参考：<a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank" rel="noopener noreferrer">http://www.ruanyifeng.com/blog/2015/07/flex-examples.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p>

87
docs/web/CSS-HTML/06.CSS3之transform过渡.md Normal file
View File

@ -0,0 +1,87 @@
# CSS3之transform过渡
html结构
```html
<div class="box1">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
```
先给元素设置transform过渡，指定样式和时间，这里设置all全部样式都采用0.3s的过渡
```css
.box1>div{
/* 给元素所有变化都添加过渡动画, 也可以指定唯一的过渡样式属性*/
transition: all .3s;
}
```
> 鼠标经过元素测试效果
<div class="box1">
<b>宽度过渡</b>
<div class="div1"></div>
<div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.div1:hover</span><span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div>
<b>背景色过渡</b>
<div class="div2"></div>
<div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.div2:hover</span><span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span> #999<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div>
<b>按贝塞尔曲线设置的过渡</b>
<div class="div3"></div>
<div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/*贝塞尔曲线过渡*/</span>
<span class="token selector">.div3</span><span class="token punctuation">{</span><span class="token property">transition-timing-function</span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>.39<span class="token punctuation">,</span>.62<span class="token punctuation">,</span>.74<span class="token punctuation">,</span>1.39<span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token selector">.div3:hover</span><span class="token punctuation">{</span><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate3d</span><span class="token punctuation">(</span>-25px<span class="token punctuation">,</span> -25px<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>
<h3 id="贝塞尔曲线-cubic-bezier-x1-y1-x2-y2"><a href="#贝塞尔曲线-cubic-bezier-x1-y1-x2-y2" class="header-anchor">#</a> 贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)</h3><p>通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等
X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大。
如：直线linear，即cubic-bezier(0,0,1,1)</p><p>贝塞尔曲线在线工具：<a href="https://cubic-bezier.com/#.17,.67,.83,.67" target="_blank" rel="noopener noreferrer">https://cubic-bezier.com/#.17,.67,.83,.67<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p>
</div>
<style>
/*
css3参考
https://www.w3school.com.cn/css3/index.asp
*/
.box1 .div1,.box1 .div2,.box1 .div3{width: 100px;height: 100px; margin: 30px;background: #eee;
/* 所有变化添加过渡动画, 也可以指定唯一改变的属性，*/
transition: all .3s;
/* 前缀：
-moz-
-webkit-
-0-
*/
}
.div1:hover{width: 150px;}
.div2:hover{background: #999;}
.div3{
/**
贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)
通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等
X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大
直线：linear，即cubic-bezier(0,0,1,1)
贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67
*/
transition-timing-function: cubic-bezier(0,1.36,.83,1.41)
}
.div3:hover{ width: 150px; height: 150px;background: yellow;
/* 3d转换 */
transform: translate3d(-25px, -25px, 0)
}
</style>
<p>参考：<a href="https://www.w3school.com.cn/css3/index.asp" target="_blank" rel="noopener noreferrer">https://www.w3school.com.cn/css3/index.asp<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p>

199
docs/web/CSS-HTML/07.CSS3之animation动画.md Normal file
View File

@ -0,0 +1,199 @@
# CSS3之animation动画
先上代码，[效果](#效果)在后面
## 代码
html结构
```html
<div class="rotate">旋转动画1</div>
<div class="play">
<div class="img">旋转动画2</div>
<span><p class="p2"></p></span>
<span><p></p></span>
<span><p></p></span>
<span><p class="p2"></p></span>
</div>
<div class="elasticity">弹性动画</div>
<div class="elasticity2">曲线弹性</div>
```
css样式
```css
.box2>div{width: 100px;height: 100px;background: #eee;border-radius: 50%;text-align: center;line-height: 100px;margin: 30px;float:left;}
/*旋转动画1*/
.rotate{animation: rotate 5s linear infinite}
.rotate:hover{ animation-play-state: paused}
@keyframes rotate {
0%{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
/*旋转动画2*/
.box2>.play {position: relative;margin: 50px 30px;background:none;}
.play .img{position: absolute;top: 0;left:0;z-index: 1;width: 100px;height: 100px; background: #eee;border-radius: 50%;
/* 参数说明：动画名称 花费时间 贝塞尔曲线 延迟开始时间 播放次数n|infinite 是否反向播放动画 */
animation: rotate 5s linear infinite
}
.play span {position: absolute;top: 1px;left:1px;z-index: 0;display: block;width: 96px;height: 96px;border: 1px solid #999;border-radius: 50%;}
.play span p{display: block;width: 4px;height: 4px;background: #000;margin: -2px 0 0 50%;border-radius: 50%;opacity: 0.5;}
.play span .p2{margin: 50% 0 0 -2px;}
.play span{animation: wave 5s linear infinite}
.play>span:nth-child(3){
animation-delay:1s; /* 延迟时间 */
}
.play>span:nth-child(4){animation-delay:2.2s;}
.play>span:nth-child(5){animation-delay:3.8s;}
@keyframes wave {
0%{transform:scale(1) rotate(360deg);opacity: 0.8;}
100%{transform:scale(1.8) rotate(0deg);opacity: 0;}
}
/* 弹性动画 */
.elasticity{
animation: elasticity 1s linear 2s infinite
}
@keyframes elasticity{
0%{transform: scale(0);}
60%{transform: scale(1.1);}
90%{transform: scale(1);}
}
/* 曲线弹性 */
.elasticity2{animation: elasticity2 1s cubic-bezier(.39,.62,.74,1.39) 2s infinite}
@keyframes elasticity2{
0%{transform: scale(0);}
90%{transform: scale(1);}
}
```
### 贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)
通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等 X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大。 如：直线linear，即cubic-bezier(0,0,1,1)
贝塞尔曲线在线工具：<https://cubic-bezier.com/#.17,.67,.83,.67>
## 效果
> 可用<kbd>F12</kbd>开发者工具查看代码
<div class="box2">
<div class="rotate">旋转动画1</div>
<div class="play">
<div class="img">旋转动画2</div>
<span><p class="p2"></p></span>
<span><p></p></span>
<span><p></p></span>
<span><p class="p2"></p></span>
</div>
<div class="elasticity">弹性动画</div>
<div class="elasticity2">曲线弹性</div>
</div>
<style>
.box2{overflow: hidden;}
.box2>div{
width: 100px;height: 100px;background: #eee;border-radius: 50%;text-align: center;line-height: 100px;margin: 30px;float:left;
}
.rotate{
animation: rotate 5s linear infinite
}
.rotate:hover{ animation-play-state: paused}
@keyframes rotate {
0%{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
.box2>.play {
position: relative;
margin: 50px 30px;
background:none;
}
.play .img{
position: absolute;
top: 0;
left:0;
z-index: 1;
width: 100px;height: 100px; background: #eee;
border-radius: 50%;
animation: rotate 5s linear infinite
}
.play span {
position: absolute;
top: 1px;
left:1px;
z-index: 0;
display: block;
width: 96px;
height: 96px;
border: 1px solid #999;
border-radius: 50%;
}
.play span p{display: block;width: 4px;height: 4px;background: #000;margin: -2px 0 0 50%;border-radius: 50%;opacity: 0.5;}
.play span .p2{margin: 50% 0 0 -2px;}
.play span{
animation: wave 5s linear infinite
}
.play>span:nth-child(3){
/* 延迟时间 */
animation-delay:1s;
}
.play>span:nth-child(4){
animation-delay:2.2s;
}
.play>span:nth-child(5){
animation-delay:3.8s;
}
@keyframes wave {
0%
{
transform:scale(1) rotate(360deg);
opacity: 0.8;
}
100%
{
transform:scale(1.8) rotate(0deg);
opacity: 0;
}
}
.elasticity{
/* 参数说明
动画名称 花费时间 贝塞尔曲线 延迟开始时间 播放次数n|infinite 是否反向播放动画
*/
animation: elasticity 1s linear 2s infinite
}
@keyframes elasticity{
0%{
transform: scale(0);
}
60%{
transform: scale(1.1);
}
90%{
transform: scale(1);
}
}
.elasticity2{
/**
贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)
通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等
X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大
直线：linear，即cubic-bezier(0,0,1,1)
贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67
*/
animation: elasticity2 1s cubic-bezier(.39,.62,.74,1.39) 2s infinite
}
@keyframes elasticity2{
0%{
transform: scale(0);
}
90%{
transform: scale(1);
}
}
</style>
<p>参考：<a href="https://www.w3school.com.cn/css3/index.asp" target="_blank" rel="noopener noreferrer">https://www.w3school.com.cn/css3/index.asp<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p>

0
docs/web/README.md → docs/web/CSS-HTML/README.md
View File

1
docs/web/ES6/README.md Normal file
View File

@ -0,0 +1 @@
> 敬请期待

66
docs/web/JavaScript/01.JavaScript中的名词概念.md Normal file
View File

@ -0,0 +1,66 @@
# JavaScript中的名词概念
## 什么是作用域？
变量存在的范围。可分为全局作用域和函数作用域，ES6新增块级作用域。
## 什么是闭包？
闭包就是能够读取其他函数内部变量的函数。
* 闭包的形式：函数内部定义函数
* 本质上闭包就是将函数内部和外部连接起来的一座桥梁
闭包的作用：
* 可以读取函数内部变量
* 让这些变量始终保持在内存中，即闭包可以使得它诞生的环境一直存在。
* 封装对象的私有属性和私有方法
## 什么是构造函数？
用于构造(生成)实例的一个函数，使实例拥有构造函数内定于的属性和方法。
## 什么是实例对象？
实例对象就是通过new 构造函数生成的，拥有构造函数内定于的属性和方法的一个对象。
## 什么是this？
就是属性或方法当前所在的对象，指向当前运行环境（对象）
## 什么是原型？
每个函数都有一个prototype属性，指向一个对象，该对象称为原型对象。
## 什么是原型链？
所有对象都有自己的原型对象，由于原型对象也是对象，因此它也有自己的原型，这就会形成一个原型链。
最顶层的原型是Object.prototype。
>读取对象属性时，JS会先在对象自身上找，找到就直接返回，如果找不到，会到原型上找，如果还是找不到，就会去原型的原型上找，最终会到最顶层的Object.prototype上找，还是找不到就会返回undefined。
## 什么是constructor？
prototype原型对象都有一个constructor属性，默认指向prototype对象所在的构造函数。
## 什么是包装对象？
包装对象指的是将原始类型（数字、字符串、布尔值）进行实例化。

231
docs/web/JavaScript/02.数据类型转换.md Normal file
View File

@ -0,0 +1,231 @@
# 数据类型转换
## 强制（手动）转换
强制转换主要指使用`Number()`、`String()`和`Boolean()`三个函数，手动将各种类型的值，分别转换成**数字、字符串、布尔值**。
#### Number()
```js
// 数值：转换后还是原来的值
Number(324) // 324
// 字符串：如果可以被解析为数值，则转换为相应的数值
Number('324') // 324
// 字符串：如果不可以被解析为数值，返回 NaN
Number('324abc') // NaN
// 空字符串转为0
Number('') // 0
// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0
// undefined：转成 NaN
Number(undefined) // NaN
// null：转成0
Number(null) // 0
Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5
Number([]) // 0
//使用parseInt()转数组
parseInt([1, 2, 3]) // 1
```
#### String()
```js
// 原始类型的转换
String(123) // "123"
String('abc') // "abc"
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"
// 对象的转换
String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"
String([]) // "" 空字符串
String(function(){}) // "function(){}"
```
#### Boolean()
```js
// 除了这五个为false，其他都为true
Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false
//true
Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true
Boolean(1) // true
Boolean(' ') // true // 注意字符串内有个空格
```
## 自动转换
下面介绍自动转换，它是**以强制转换为基础的**。
遇到以下三种情况时，JavaScript 会自动转换数据类型，即转换是自动完成的，用户不可见。
第一种情况，**不同类型的数据互相运算**。
```js
123 + 'abc' // "123abc"
```
第二种情况，**对非布尔值类型的数据求布尔值**。
```js
if ('abc') {
console.log('hello')
} // "hello"
```
第三种情况，**对非数值类型的值使用一元运算符（即`+`和`-`）**。
```js
+ {foo: 'bar'} // NaN
- [1, 2, 3] // NaN
```
自动转换的规则是这样的：预期什么类型的值，就调用该类型的转换函数。比如，某个位置预期为字符串，就调用`String`函数进行转换。如果该位置即可以是字符串，也可能是数值，那么默认转为数值。
由于自动转换具有不确定性，而且不易除错，建议在预期为布尔值、数值、字符串的地方，全部使用`Boolean`、`Number`和`String`函数进行显式转换。
#### 自动转换为布尔值（Boolean）
JavaScript 遇到预期为布尔值的地方（比如`if`语句的条件部分），就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用`Boolean`函数。
因此除了以下五个值，其他都是自动转为`true`。
- `undefined`
- `null`
- `+0`或`-0`
- `NaN`
- `''`（空字符串）
下面这个例子中，条件部分的每个值都相当于`false`，使用否定运算符后，就变成了`true`。
```js
if ( !undefined
&& !null
&& !0
&& !NaN
&& !''
) {
console.log('true');
} // true
```
下面两种写法，有时也用于将一个表达式转为布尔值。它们内部调用的也是`Boolean`函数。
```js
// 三元运算符
expression ? true : false
// 取反运算符
!! expression
```
#### 自动转换为字符串（String）
JavaScript 遇到预期为字符串的地方，就会将非字符串的值自动转为字符串。**具体规则是，先将复合类型的值转为原始类型的值，再将原始类型的值转为字符串**。
字符串的自动转换，**主要发生在字符串的加法运算时**。当一个值为字符串，另一个值为非字符串，则后者转为字符串。
##### 所有类型的值与字符串相加都会变成字符串
```js
'5' + 1 // '51'
1 + '5' // '15'
'5' + true // "5true"
'5' + false // "5false"
'5' + {} // "5[object Object]"
5 + {} // "5[object Object]"
'5' + [] // "5"
5 + [] // "5"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"
```
这种自动转换不注意的话很容易出错。
```js
var obj = {
width: '100'
};
obj.width + 20 // "10020"
parerInt(obj.width) + 20 // 120
```
上面代码中，开发者可能期望返回`120`，但是由于自动转换，实际上返回了一个字符`10020`。正确做法是先把字符串转成数字。
#### 自动转换为数值（Number）
JavaScript 遇到预期为数值的地方，就会将参数值自动转换为数值。系统内部会自动调用`Number`函数。
##### 除加号与字符串运行会转成字符串外，其他运行基本都会自动转成数值
```js
'5' - '2' // 3
'5' * '2' // 10
true - 1 // 0
false - 1 // -1
'1' - 1 // 0
'5' * [] // 0
false / '5' // 0
'abc' - 1 // NaN
null + 1 // 1
undefined + 1 // NaN
true+true // 2
```
上面代码中，运算符两侧的运算子，都被转成了数值。
> 注意：`null`转为数值时为`0`，而`undefined`转为数值时为`NaN`。
**数值与布尔值、null也会转为数值**
```js
5+true // 6
5+false // 5
5+null //5
```
一元运算符也会把运算子转成数值。
```js
+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0
```

65
docs/web/JavaScript/03.ES5面向对象.md Normal file
View File

@ -0,0 +1,65 @@
# ES5面向对象
```js
//面向对象封装
function Student(props){ // 构造函数 （构造函数内定于属性。尊从首字母大写的约定）
this.name = props.name || '匿名'; // 默认‘匿名’
this.grade = props.grade || 1;
}
Student.prototype.hello = function(){ // 在构造函数的原型上定义方法
console.log('你好,'+ this.name +'同学，你在'+ this.grade+'年级');
}
//使用
function createStudent(props) { // 对于new构造函数的封装，其优点：一是不需要new来调用，二是参数灵活
return new Student(props || {}) // 通过new创建构造函数，并传入参数/属性
}
var niming = createStudent();
niming.hello();
var xiaoming = createStudent({
name:'小明',
grade:2
});
xiaoming.hello();
//继承
function inherits(Child, Parent) { // 继承的封装方法 inherits(子类, 父类)
var F = function () {}; // 定义空方法F
F.prototype = Parent.prototype; //F原型指向父类原型
Child.prototype = new F(); // 子类原型指向 new F() 方法
Child.prototype.constructor = Child; // 修正子类原型上的构造函数为子类本身函数
}
function PrimaryStudent(props) { //定义子类 构造函数
Student.call(this, props); // 修正this指向
this.age = props.age || 8; //新增子类属性
}
inherits(PrimaryStudent, Student);//调用继承封装方法实现继承
PrimaryStudent.prototype.getAge = function(){ //对子类添加方法
console.log(this.name +'同学，你今年'+ this.age +'岁');
}
//使用继承后的
function createPrimaryStudent(props) { // 对于new构造函数的封装，其优点：一是不需要再new来调用，二是参数灵活
return new PrimaryStudent(props || {}) // 通过new创建构造函数，并传入参数/属性
}
var xiaohong = createPrimaryStudent({
name:'小红',
grade:3,
age:10
});
xiaohong.hello();
xiaohong.getAge();
```

59
docs/web/JavaScript/04.ES6面向对象.md Normal file
View File

@ -0,0 +1,59 @@
# ES6面向对象
```js
//面向对象封装
class Student{ //定义类 (尊从首字母大写的约定)
constructor(props){ // 构造函数 （构造函数内定于属性）
this.name = props.name || '匿名'; // 默认'匿名'
this.grade = props.grade || 1;
}
hello(){ // 在构造函数的原型上定义方法
console.log(`你好,${this.name}同学，你在${this.grade}年级`);
}
}
//使用
function createStudent(props) { // 对于new构造函数的封装，其优点：一是不需要new来调用，二是参数灵活
return new Student(props || {}) // 通过new创建构造函数，并传入参数/属性
}
let niming = createStudent();
niming.hello();
let xiaoming = createStudent({
name:'小明',
grade:2
});
xiaoming.hello();
//继承
class PrimaryStudent extends Student { //class 子类 extends 父类
constructor(props) {
super(props); // 用super调用父类的构造方法实现属性继承
this.age = props.age || 8; //新增子类属性
}
getAge() { //对子类添加方法
console.log(`${this.name}同学，你今年${this.age}岁`);
}
}
//使用继承后的
function createPrimaryStudent(props) { // 对于new构造函数的封装，其优点：一是不需要再new来调用，二是参数灵活
return new PrimaryStudent(props || {}) // 通过new创建构造函数，并传入参数/属性
}
let xiaohong = createPrimaryStudent({
name:'小红',
grade:3,
age:10
});
xiaohong.hello();
xiaohong.getAge();
```

55
docs/web/JavaScript/05.new命令原理.md Normal file
View File

@ -0,0 +1,55 @@
# new命令原理
```js
// 构造函数
function Person(name,age){
this.name = name
this.age = age
}
// 使用new命令时，它后面的函数依次执行下面的步骤。
// 1、创建一个空对象，作为将要返回的实例对象。
// 2、将这个空对象的原型，指向构造函数的prototype属性。
// 3、将这个空对象赋值给函数内部的this关键字。
// 4、开始执行构造函数内部的代码。
// 5、如果构造函数内有返回值且为对象类型，则返回该对象，否则返回上面创建的实例对象。
// 自定义_new
function _new() {
// 将 arguments 对象转为数组
var args = [].slice.call(arguments);
// 取出构造函数
var constructor = args.shift();
// 创建一个空对象，继承构造函数的 prototype 属性
var context = Object.create(constructor.prototype);
// 执行构造函数，并将context对象赋值给函数内部的this
var result = constructor.apply(context, args);
// 如果返回结果是对象，就直接返回，否则返回 context 对象
return (typeof result === 'object' && result != null) ? result : context;
}
// 自定义_new2
function _new2(/* 构造函数 */ constructor, /* 构造函数参数 */ params) {
// 创建一个空对象，并继承构造函数的 prototype 属性
var context = Object.create(constructor.prototype);
// 执行构造函数，并将context对象赋值给函数内部的this
var result = constructor.apply(context, params);
// 如果返回结果是对象，就直接返回，否则返回 context 对象
return (typeof result === 'object' && result != null) ? result : context;
// （当用户在构造函数内部自定义返回对象的话则使用该对象，否则返回context）
}
// 通过自定义_new 返回实例
var actor = _new(Person, '张三', 28);
console.log(actor.name) // 张三
// 通过自定义_new2 返回实例
var actor2 = _new2(Person, ['李四', 29]);
console.log(actor2.name) // 李四
// 通过new命令 返回实例
var actor3 = new Person('王五',30)
console.log(actor3.name) // 王五
```

146
docs/web/JavaScript/06.多种数组去重性能对比.md Normal file
View File

@ -0,0 +1,146 @@
# 多种数组去重性能对比
## 测试模板
```js
// 创建一个 1 ~ 10w 的数组，Array.from为ES6语法
let arr1 = Array.from(new Array(1000000), (x, index) => {
return index
})
let arr2 = Array.from(new Array(500000), (x, index) => {
return index + index
})
let start = new Date().getTime()
console.log('开始数组去重')
// 数组去重
function distinct(a, b) {
let arr = a.concat(b);
// 去重方法
}
console.log('去重后的长度', distinct(arr1, arr2).length)
let end = new Date().getTime()
console.log('耗时', end - start + 'ms')
```
## 测试代码
```js
// 创建一个 1 ~ 10w 的数组，Array.from为ES6语法
let arr1 = Array.from(new Array(1000000), (x, index) => {
return index
})
let arr2 = Array.from(new Array(500000), (x, index) => {
return index + index
})
let start = new Date().getTime()
console.log('开始数组去重')
// 数组去重
function distinct(a, b) {
let arr = a.concat(b);
// 方法1，耗时约11675ms，约11s
// return arr.filter((item, index) => {
// return arr.indexOf(item) === index
// })
// 方法2，耗时约22851ms，约22s，性能最差
// for (let i = 0, len = arr.length; i < len; i++) {
// for (let j = i + 1; j < len; j++) {
// if (arr[i] == arr[j]) {
// arr.splice(j, 1);
// // splice 会改变数组长度，所以要将数组长度 len 和下标 j 减一
// len--;
// j--;
// }
// }
// }
// return arr
//方法3，耗时约12789ms，约12s，和方法1相当
// let result = []
// for (let i of arr) {
// !result.includes(i) && result.push(i)
// }
// return result
//方法4，耗时约23ms，ES5标准中性能最高
// arr = arr.sort()
// let result = [arr[0]]
// for (let i = 1, len = arr.length; i < len; i++) {
// arr[i] !== arr[i - 1] && result.push(arr[i])
// }
// return result
// 方法5，ES6的Set数据结构，耗时约20ms，性能高，代码简洁
// return Array.from(new Set([...a, ...b]))
// 方法6，耗时约16ms，所有方法中 性能最高！ (千万级数据量下效率比方法5高4倍，for...of 为ES6语法)
let result = []
let obj = {}
for (let i of arr) {
if (!obj[i]) {
result.push(i)
obj[i] = 1
}
}
return result
}
console.log('去重后的长度', distinct(arr1, arr2).length)
let end = new Date().getTime()
console.log('耗时', end - start + 'ms')
```
## 结论
ES5标准中性能最高的数组去重方法为:
```js
// 耗时约23ms
arr = arr.sort()
let result = [arr[0]]
for (let i = 1, len = arr.length; i < len; i++) {
arr[i] !== arr[i - 1] && result.push(arr[i])
}
return result
```
ES6标准中性能最高的数组去重方法为:
```js
// 耗时约16ms (千万级数据量下效率比使用Set数据结构方法高4倍，for...of 为ES6语法)
let result = []
let obj = {}
for (let i of arr) {
if (!obj[i]) {
result.push(i)
obj[i] = 1
}
}
return result
```
代码既简洁性能又相对高的去重方法为：
```js
// 耗时约20ms，性能高，代码简洁
return Array.from(new Set([...a, ...b]))
```

1
docs/web/TypeScript/README.md Normal file
View File

@ -0,0 +1 @@
> 敬请期待

1
docs/web/vue/README.md Normal file
View File

@ -0,0 +1 @@
> 敬请期待

2
package.json
View File

@ -5,7 +5,7 @@
"dev": "vuepress dev docs",
"list": "node utils/getFilenames.js",
"build": "vuepress build docs",
"chame": "cd docs/.vuepress/dist && echo 'www.evanblogweb.com' > CNAME",
"chame": "cd docs/.vuepress/dist && echo 'b.evanblogweb.com' > CNAME",
"deploy": "bash deploy.sh"
},
"license": "MIT",