Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment

从头构建一个vue2.x项目（1）

vue-cli3 是官方脚手架工具。下面介绍如何用它生成一个项目。

安装 vue-cli3

1

npm install -g @vue/cli

检查是否安装正确：

1

vue --version

使用图形化界面创建项目

1

vue ui

打开 http://localhost:8000，（点击左下角图标回到首页，）点击创建。

详情

1. 命名：vue2-demo
2. 包管理器：npm（相比新版本npm，yarn的优势已不明显）
3. 初始化 git 仓库：feat: 初始化vue2 demo项目

预设

1. 选择手动

功能

1. Babel: 开
2. Typescript: 关（vue3才和ts更好的搭配）
3. PWA: 开
4. Router: 开
5. Vuex: 开
6. CSS Pre-processors: 开
7. Liner/Formatter: 开
8. Unit Testing: 开
9. E2E Testing: 开
10. 使用配置文件: 开（使package.json行数不那么多）

配置

1. Use history mode for router: 开
2. Pick a CSS pre-processor: SCSS(with dart-sass) 官方主推 dart-sass
3. Pick a linter/formatter config: ESLint + Airbnb config（稍后再配置prettier）
4. Pick additional lint features:
   • Lint on save: 开
   • Lint and fix on commit: 关（手动fix，避免自动fix产生奇怪的问题）
5. Pick a unit testing solution: Jest（简单时尚）
6. Pick a E2E testing solution: Cypress(Chrome only) (简单时尚)

创建

选择保存预设并创建项目

跑起来看一下

1. 点击侧边栏最后一个任务图标
2. 点击 serve
3. 点击右侧的运行
4. 浏览器打开 http://localhost:8080

至此，项目就完成创建啦。

面试经常考到这个东西, 比较基础的内容.

概念

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度. 对应 display: block;

行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化. display: inline;

示例

块级元素

address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 有序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 无序列表

行内元素

a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

区别

• 块级元素独占一行，在默认情况下，宽度自动填满父元素宽度.
• 行内元素不会独占一行，宽度随着元素的内容而变化.
• 行内元素的width和height的设置无效.
• 行内元素的margin和padding的 垂直 方向上不产生边距效果
• 可以使用display:block;或display:inline;实现块级元素和行内元素的相互转换

其他

• 给行内元素设置垂直方向上的padding的时候, 并不是完全无效. 而是基于自身内容向上或者下扩展. 但是不占据高度,却能遮盖下方元素
• 设置display:inline-block;后, 除了不独占一行, 不充满父元素宽度, 其他特性与块状元素一致

2016年7月及以前

tap 穿透问题

问题描述

上层元素绑定 tap 事件,下层绑定 click 事件(或者是 a 链接). 点击上层元素时, 会发生穿透, 同时触发tap 和 click事件.

解决办法

事件绑定都用 tap 或者都用 click 事件即可避免

图片下边距

问题描述

图片宽高 100% 即全屏时仍会出现下方有空白, 即有下边距

解决办法

img 标签默认边距导致的. 图片样式设置 float: left 或者清除默认边距margin: 0.

视频音频无法自动播放

问题描述

在某些移动端浏览器环境中, audio 或 video 设置 autoplay 属性无效, js 控制播放也无效.是由于不同浏览器的默认设置问题,不属于 bug.出于费流量等会导致用户困扰的原因, 一些webview下不允许自动播放或者js控制播放. 必须由用户行为触发播放.

解决办法

因此, 可以给 document 绑定 ontouchstart 事件播放. 或者查询相关接口, 比如微信 webview 可以在调用 jssdk的 ready 方法回调中执行自动播放

flex 兼容性问题

问题描述

flex 属于较新的 css3 语法, 某些 webview 中不生效

解决办法

使用 box-flex 代替或者不使用

touchend 移出仍然触发

问题描述

某元素上绑定 touchend 事件, 只要是从此元素 touchstart 即使移出该元素范围仍然触发该元素 touchend 事件.

解决办法

使用 tap 代替 click 而不是 touchend

行内元素之间有空格

问题描述

行内元素之间即使设置了外边距为 0, 依然有空格的间隔. 是由于写 dom 元素的时候行内元素换行所致

解决办法

代码编写或格式化时, 行内元素不换行

animation css3 动画不生效

问题描述

设置了 animation 动画, chrome 模拟调试能正常运行. 手机端不生效.

解决办法

添加 -webkit- 厂商前缀, 要注意的是, animation 属性要分开写, 不写简写, 简写一些浏览器即使添加 -webkit- 也不生效

苹果 transform rotate 3d 风车转动问题

问题描述

使用 transform rotate 3d 做风车转动效果时, 风车转到一半又转回来. 安卓正常转360度

解决办法

平面转动 使用 rotate 2d 安卓苹果都能正常

微信文章阅读原文链接打不开

问题描述

微信文章阅读原文链接打不开, 因为参数被加上了#开头的参数显示来源

解决办法

用代码去除带 # 的参数

2016年7月及以前

react redux react-router 项目 state 更新了,UI却没有更新

问题描述

调用 reducer 后 UI没有更新, 审查发现 state 更新了.
原因一: 修改了 props 里的 state, 导致了 state 更改,因此导致传入 reducer 的 old state和new state一样,不触发更新.
原因二: 修改了多层嵌套对象中的一个属性, reducer 是浅比较,因此判断state相同, 所以不更新 UI

解决办法

一: 不直接修改state, 只用触发action用过reducer修改state
二: 解决办法: 用Object.assign(), map方法对多层嵌套对象进行深拷贝,并返回新的对象

react-router 路径匹配错误问题

问题描述

本地调试时路径匹配正常, 上传github 的 ghpages 后路径匹配不对. 原因: react-router 是基于根路径匹配

解决办法

将子文件夹添加至router中. 比如:项目放在 https://jiangshaokun.github.io/about/ router 匹配不到 / 而要匹配 /about/

不知不觉已经2016下半年了. 为了适应工作需求, 必须由前端向后端延伸了. 话是这么说, 还是偏前端, 后端也是偏node.js.
此文包括关于前后端的学习,以及需要实践的内容. 涉及的知识点基本都已经入门或实用. 下半年主要任务是深入学习或者熟练使用.

viewport 作用

一个移动专属的Meta值，用于定义视口的各种行为。
最常用:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

几个 viewport

layout viewport

虚拟的布局视口（layout viewport），而这个视口的分辨率接近于PC显示器，Apple将其定义为980px（其他厂商各有不同）。

visual viewport

可以简单的认为是手持设备物理屏幕的可视区域，我们称之为（视觉视口）visual viewport。这是一个比较直观的概念，因为你能看得见你的手机屏幕。

ideal viewport

它类似于布局视口，但宽度和视觉视口相同，这就是完美视口（ideal viewport）。用户不用缩放和拖动网页就能够很好的进行网页浏览.

viewport特性

整理一下自己关于 css 盒模型 的相关知识.

盒模型概念

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
示意图:

• 另外: css3 出了个 box-sizing 属性可以改变盒模型:详情可了解这里

外边距合并

• 只有上下外边距会发生合并, 左右外边距不会合并, 内边距也不会合并
• 上下外边距相遇时(中间无内容边框或内边距),就会发生合并
• 合并后,外边距等于较大者
• 合并会连续发生
• 外边距合并的意义: 使段落之间的距离一致。

盒模型百分比

• 内外边距的百分比都是基于父元素的宽度计算
• 宽度百分比基于父元素宽度百分比计算
• 高度百分比基于父元素高度百分比计算

负外边距

• margin-left 或 margin-top 设置为负值时, 元素将基于自身原始位置左移或者上移, 其后的同层元素(静态文档流或者float同层元素)将会跟随移动相同距离
• margin-right 或 margin-bottom 设置为负值时, 元素自身位置不变, 其后的同层元素(静态文档流或者float同层元素)将会左移或者上移, 可覆盖该元素

前言

前端开发核心思想：

• 表现、内容和行为的分离
• 标记应该是结构良好、语义正确 以及 普遍合法 。
• Javascript应该起到渐进式增强用户体验的作用 。

尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；

任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

命名

class 单词全字母小写，单词间以 - 分隔。

例如 .foo-bar

id 采用驼峰式命名。

例如 #fooBar

id，class 命名，在避免冲突并描述清楚的前提下尽可能短。

<!-- good -->
<div id="nav"></div>
<!-- bad -->
<div id="navigation"></div>

<!-- good -->
<p class="comment"></p>
<!-- bad -->
<p class="com"></p>

id，class 以功能或内容命名，不以表现形式命名。以面向对象 的方式写 CSS.

示例:

<!-- good -->
<div class="sidebar"></div>
<!-- bad -->
<div class="left"></div>

BEM（Block, Element, Modifier）命名法:

.block{}
.block__element{}
.block--modifier{}

其中：

• .block 代表某个基本的抽象元素；
• .block__element 代表 .block 这一整体的一个子元素；
• .block–modifier 代表 .block 的某个不同状态。

示例：

.person{}
.person--woman{}
.person__hand{}
.person__hand--left{}
.person__hand--right{}

禁止为了 hook 脚本，创建无样式信息的 class.

解释：

使用 id、属性选择作为 hook 是更好的方式。如必要使用 js hook，则类名以 .js- 开头。

同一页面，应避免使用相同的 name 与 id。

解释：

IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心。

一个比较好的实践是，为 id 和 name 使用不同的命名法。

标签

属性名必须使用小写字母。

示例：

<!-- good -->
<p>Hello StyleGuide!</p>

<!-- bad -->
<P>Hello StyleGuide!</P>

属性值必须用双引号包围。

示例：

<!-- good -->
<script src="esl.js"></script>

<!-- bad -->
<script src='esl.js'></script>
<script src=esl.js></script>

标签的使用应尽量简洁，减少不必要的标签。

示例：

<!-- good -->
<img class="avatar" src="image.png">

<!-- bad -->
<span class="avatar">
<img src="image.png">
</span>

布尔类型的属性，建议不添加属性值。

示例：

<input type="text" disabled>
<input type="checkbox" value="1" checked>

自定义属性建议以 xxx- 为前缀，推荐使用 data-。

解释：

使用前缀有助于区分自定义属性和标准定义的属性。

示例：

<ol data-ui-type="Select"></ol>

标签使用必须符合标签嵌套规则。

参见：html 嵌套规则

对于无需自闭合的标签，不允许自闭合。

解释：

常见无需自闭合标签有input、br、img、hr等。

示例：

<!-- good -->
<input type="text" name="title">

<!-- bad -->
<input type="text" name="title" />

HTML 标签的使用应该遵循标签的语义。

如：

<!-- good -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- bad -->
<a href="recommendations/">All recommendations</a>

对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。

示例：

<!-- good -->
<ul>
    <li>first</li>
    <li>second</li>
</ul>

<!-- bad -->
<ul>
    <li>first
    <li>second
</ul>

属性顺序

属性应该按照特定的顺序出现以保证易读性；

• class
• id
• name
• data-*
• src, for, type, href, value , max-length, max, min, pattern
• placeholder, title, alt
• aria-*, role
• required, readonly, disabled

class是为高可复用组件设计的，所以应处在第一位；

id更加具体且应该尽量少使用，所以将它放在第二位

通用

使用 HTML5 的 doctype 来启用标准模式.

建议使用大写的 DOCTYPE。

示例：

<!DOCTYPE html>

页面必须使用精简形式，明确指定字符编码。

指定字符编码的 meta 必须是 head 的第一个直接子元素。UTF-8。

示例：

<html>
    <head>
        <meta charset="UTF-8">
        ......
    </head>
    <body>
        ......
    </body>
</html>

页面必须包含 title 标签声明标题。

title 必须作为 head 的直接子元素，并紧随 charset 声明之后。

示例：

<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>

引入 CSS 时必须指明 rel="stylesheet"。

示例：

<link rel="stylesheet" src="page.css">

引入 CSS 和 JavaScript 时无须指明 type 属性。

解释：

text/css 和 text/javascript 是 type 的默认值

移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。

解释：

使用 protocol-relative URL 引入 CSS，在 IE7/8 下，会发两次请求。是否使用 protocol-relative URL 应充分考虑页面针对的环境。

示例：

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>

保证 favicon 可访问。在 Web Server 根目录放置 favicon.ico 文件。使用 link 指定 favicon。

解释：

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：

• 在 Web Server 根目录放置 favicon.ico 文件。
• 使用 link 指定 favicon。

示例：

<link rel="shortcut icon" href="path/to/favicon.ico">

有文本标题的控件必须使用 label 标签将其与其标题相关联。

解释：

有两种方式：

• 将控件置于 label 内。
• label 的 for 属性指向控件的 id。

推荐使用第一种，减少不必要的 id。如果 DOM 结构不允许直接嵌套，则应使用第二种。

示例：

<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>

<label for="username">用户名：</label> <input type="textbox" name="username" id="username">

使用 button 元素时必须指明 type 属性值。

解释：

button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。

示例：

<button type="submit">提交</button>
<button type="button">取消</button>

若页面欲对移动设备友好，需指定页面的 viewport。

示例：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。

解释：

src 取值为空，会导致部分浏览器重新加载一次当前页面，参考：https://developer.yahoo.com/performance/rules.html#emptysrc

注释

建议对超过10行的页面模块进行注释

降低开发人员的嵌套成本和后期的维护成本.

例如：

<div id="sample">
    ...
</div> <!-- #sample END -->
<div class="sample">
    ...
</div> <!-- .sample END -->

使用 TODO 来标记待做事情，便于后期搜索.

• 使用 TODO 来标记待做事情，便于后期搜索.
• 在 TODO 后添加 (姓名或邮件) 来表示分类.

例如：

<!-- TODO(yiminghe): remove duplicate tag -->
<p><span>2</span></p>

建议项

为重要图片添加 alt 属性。

解释：

可以提高图片加载失败时的用户体验。

有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。

解释：

产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载。
无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现。

尽量不要使用按钮类元素的 name 属性。

解释：

由于浏览器兼容性问题，使用按钮的 name 属性会带来许多难以发现的问题。具体情况可参考此文。

负责主要功能的按钮在 DOM 中的顺序应靠前。

解释：

负责主要功能的按钮应相对靠前，以提高可访问性。如果在 CSS 中指定了 float: right 则可能导致视觉上主按钮在前，而 DOM 中主按钮靠后的情况。

示例：

<!-- good -->
<style>
.buttons .button-group {
    float: right;
}
</style>

<div class="buttons">
    <div class="button-group">
        <button type="submit">提交</button>
        <button type="button">取消</button>
    </div>
</div>

<!-- bad -->
<style>
.buttons button {
    float: right;
}
</style>

<div class="buttons">
    <button type="button">取消</button>
    <button type="submit">提交</button>
</div>

在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。

应该尽量避免这种情况的出现。

尽量不要引用实体

在HTML文档中具有特殊含义的字符（例如 < 和 & )为例外，还有 “不可见” 字符 （例如no-break空格）

启用 IE Edge 模式。

示例：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

在 html 标签上设置正确的 lang 属性。

解释：

有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。

示例：

<html lang="zh-CN">

参考

• Baidu fex-team html编码规范
• 淘宝 kissy html 编码规范
• 腾讯 alloyteam html 编码规范

在 html 中适当地添加注释可以起到非常好的作用,比如解释代码内容,有时候也能用来做兼容处理,特别是针对 IE 浏览器的.css hack 也是常用的不同浏览器之间的兼容处理方式,用来处理一些奇怪的 bug…