子曰：git 常用命令 回滚代码版本

0x00：
查看代码历史提交记录

1

git log

0x01：
回滚代码到上一个版本

1

git reset --hard HEAD^

0x02:
回滚到指定版本

1

git reset --hard commit_id

其中commit_id 为git 提交记录时，git使用SHA1 计算出来的一个版本号

子曰：从0 开始搭建React 应用
本文翻译自Jedai Saboteur creating a react app from scratch

子曰：Mock.js 生成随机数据，拦截Ajax 请求。

作为前端开发者，需要独立于后端进行开发，推荐使用Mock.js 来生成随机数据，拦截Ajax 请求。

简介

0x00. 官网地址：http://mockjs.com/
0x01. github 地址：https://github.com/nuysoft/Mock/tree/master
0x02. 特点
1.前后端分离。让前端工程师独立于后端进行开发。
2.开发无侵入。不需要修改既有代码，就可以拦截Ajax 请求，返回模拟的响应数据。
3.数据类型丰富。支持生成随机的文本、数字、布尔值、日期、邮箱、连接、图片、颜色等。
4.增加单元测试的真实性。通过随机数据，模拟各种场景。
5.用法简单。符号直觉的接口。
6.方便扩展。支持扩展更多数据类型，支持自定义函数和正则。

子曰：了解webpack 中require.context 方法

require.context 是使用webpack 编译代码的方法。了解require.context 的起因是在查看代码时，发现了如下使用方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const icons = {}

// 0 身体--------
const result0s = require.context('../assets/icon/0/s', false, /\.png$/)
const result0b = require.context('../assets/icon/0/b', false, /\.png$/)

icons['0'] = {}
icons['0']['s'] =  result0s
    .keys()
    .map(key => result0s(key))

icons['0']['b'] =  result0b
    .keys()
    .map(key => result0b(key))

上述方法使用require.context 进行了图片资源的而引入

子曰：line-height 垂直居中

line-height

将line-height 的计算值减去font-size 的计算值。这个值是总的行间距。需要注意，这可能是一个负值。然后行间距再除2，将行间距的一半分别应用到内容区的顶部和底部。

举个例子，假设font-size 为14 像素高，而且line-height 计算为18 像素。其差（4像素）除以2，将其一半分别应用到内容区的顶部和底部。

子曰：merge 使用

在工作协作开发中，使用git 进行版本管理，下面整理了使用git merge 的流程

流程

1.首先是在develop 分支上进行开发

1

git checkout develop // 切换到

2.将develop 分支上的内容进行提交

1
2

git add .
git commit

3.master 分支获取远端最新版本

1
2

git fetch origin master
git reset --hard origin/master

4.在develop 分支上需要使用git merge 命令合并master 最新内容

1
2

git checkout develop  // 切换到develop 分支
git merge --no-ff master // 把master的修改merge到develop。注意：建议merge的时候总是用 --no-ff 选项

5.将develop 修改提交到远端

1
2

git status
git push origin develop

子曰：安装php 的redis 扩展

项目中搭建本地环境，需要安装php 的redis 扩展，将遇到的问题记录下来

本地环境

1.windows 7 x64
2.AppServ
3.php 7.1

子曰：了解几种跨域机制

简单介绍

首先简单了解一下同源策略相关知识点：
1.同源策略 限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要机制。
2.源的定义：如果两个页面的协议、端口和域名都相同，则两个页面具有相同的 源
3.同源策略规定，是XHR 实现Ajax 通信的一个主要限制。默认情况下，XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是，实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。

子曰：更好的确认CSS 的最终规则
参考《CSS 权威指南》第3 章 结构和层叠 特殊性

在实际工作中，总会遇到一个元素可以使用两个或多个规则来选择，每一个规则都有自己的选择器。
假设下面每一对规则都匹配同样的元素，由于所匹配的元素只能是某一种颜色（二选一），如何确认那一个规则更强呢？

1
2

h1 { color: red; }
body h1 { color: green; }

1
2

h2.grape { color: purple; }
h2 { color: silver; }

1
2

html > body table tr[id="totals"] td ul > li { color: maroon; }
li#answer { color: green; }

这篇笔记将持续收集npm 的使用小技巧…

技巧1

npm 查看npm 包的详细信息

1

npm home vconsole

这将直接在浏览器中打开vConsole 地址