add git

emthink · Jan 7, 2017 · d81b83f · d81b83f
1 parent 6c6f1ff
commit d81b83f
Show file tree

Hide file tree

Showing 8 changed files with 558 additions and 2 deletions.
diff --git a/2016_summary.md b/2016_summary.md
@@ -0,0 +1,28 @@
+# 2016年终总结与2017展望
+
+转眼2016即将过去，时光飞快，即将进入毕业后的第二个年头，昨天终于抢到了回家的车票，开心（博主的家在遥远的江西😉），也是时候对2016进行总结并展望2017了。
+
+## 回首2016
+
+回首2016，5月来到搜狐手搜团队，如今已有大半年，在手搜学到很多，工作状态感觉良好，其他暂且不细数，主要从个人学习，发展方面总结。
+
+- 1月使用GitPage搭建个人博客；
+- 5月，将博客从GitPage迁移部署到个人服务器，博客使用LNMP环境；对Linux系统操作，Ngnix代理配置，有了更多的了解；
+- 全年产出博客40余篇，保证每篇都有内容，不曾注水：主要包括从工作，日常学习过程中产生的灵感，深入CSS,JavaScript基础，初步介绍大多数ES6特性，还有Backbone，React两个专题；
+-  12月，个人订阅号认证完成，并配置好服务器，使用NodeJs开发服务提供简单的消息处理；
+-  搭好webpack + es6 + react开发环境并开始开发微信订阅号内网页；
+-  了解前端自动化测试
+
+## 展望2017
+
+在2017年除了工作上需要实现既定目标，达到一定程度的提升，个人学习和发展主要有以下任务：
+
+- 博客产出保持现有水平，保证全年产出40篇以上（注水不计入）；
+- webpack + es6 + react开发微信订阅号内网页；
+- 个人订阅号与博客内容共享，实现每日文章推送与订阅号内浏览；
+- 产出更多React实践内容；
+- 推出一个Git由浅入深专题，对Git进行更深入的学习；
+- 深入学习ES6，并投入实践；
+- 探索前端自动化测试
+
+预祝大家2017工作顺利，新年快乐。
diff --git a/css_line_height.md b/css_line_height.md
@@ -71,8 +71,8 @@ vertical-align属性指定行内元素或表格单元格元素在垂直方向的
 为如下值时，相对于其父元素对齐：
 
 1. baseline：将此元素与其父元素按基线对齐
-    1. 基线，一个元素的基线是指其包含的最后一个行内元素的基线。可以查看[使用text-align实现两端对齐布局实例中使用vertical-allign使其垂直方向对齐](http://blog.codingplayboy.com/2016/10/01/justify_layout/)；
-    1. 若元素没有基线，则将其外间距的下边界当作基线
+    1. 基线，一个元素的基线是指正常流中其包含的最后一个行内元素的基线。可以查看[使用text-align实现两端对齐布局实例中使用vertical-allign使其垂直方向对齐](http://blog.codingplayboy.com/2016/10/01/justify_layout/)；
+    1. 若元素没有基线（如，没有正常流中的行内元素或其overflow属性不为visible），则将其外间距的下边界当作基线
 1. middle：将行内盒中线与父元素基线加上父元素中x字母尺寸的一半高度对齐  ；
 1. sub：将此元素基线与父元素的下标基线对齐；
 1. super：将此元素基线与父元素的上标基线对齐；

diff --git a/expand_more.md b/expand_more.md
@@ -0,0 +1,193 @@
+# 优雅的使用Js或CSS处理文本的截断与展示
+
+之前遇见一个问题，就是处理文本截断，然后可以手动切换文本是全展示和手动展示，因为这个问题比较常见，而且其实现方式有多种，于是决定总结一下，与读者分享。
+
+## 前言
+
+首先，我们看这样一个场景：
+
+![展开更多](http://blog.codingplayboy.com/wp-content/uploads/2016/12/expand-more.png)
+
+其html 结构如下：
+
+```
+
+    <p class="text-slice">
+        郑成月的经历就是一部中国社会历史！很有价值的！不管是社会研究还是真心纠错，都是非常好的案例。历史就是用各种个人经历写成的，那样就很有实在感。作家们没有素材？都在书写歌功颂德之文？想要把自己的作品流传后世，这就是最好的素材
+    </p>
+    <label class="expand-more">更多</label>
+```
+
+样式如下：
+
+```
+
+    .text-slice {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+```
+
+如图，我们对文字默认展示内容有限制：限制默认最多显示三行，未超出三行时不需要展示更多按钮；超出内容被截断时，可以点击更多，展示全部内容，此时更多文字变成取消，再次点击的时候文字收起。
+
+实现上述功能，常见的是使用JavaScript，本文将介绍使用JavaScript和CSS共三种方式实现：
+
+- Js实现
+- CSS :target伪类 实现
+- CSS :checked伪类 + ~（临近兄弟节点选择符）实现
+
+## Js实现
+
+先从最常见的Js实现，通常我们绑定点击事件实现切换文本截断与展示全部：
+
+[点击查看效果](http://demo.codingplayboy.com/demo/smallcase/expand_more/expand-js.html)
+
+```
+
+    <script>
+        $(function() {
+            var $para = $('.content');
+            var $more = $('.expand-more');
+            $more.on('click', function() {
+                $para.toggleClass('text-slice');
+                if ($para.hasClass('text-slice')) {
+                    $more.html('更多');
+                } else {
+                    $more.html('收起');
+                }
+            });
+        });
+    </script>
+```
+
+如上，给按钮绑定点击事件，在事件回调中为文本切换实现截断样式的类名，并同时修改按钮文字，很简单。
+
+但是，到目前为止我们应该发现一个问题吧，假如文本内容少于三行或者刚好三行，我们怎么判断是否需要展示切换按钮呢？
+
+思考。。。。。。
+
+要判断文本是否发生截断，怎么处理呢？
+    计算字数肯定不可行，因为涉及到不同手机，不同浏览器，不同字符，会有差异；
+    计算高度，比较展示全部和添加截断时的高度值是否相等，相等时，说明不会截断；不相等则说明发生截断。
+
+## 判断文本是否截断
+
+我们不能直接使用该段落元素做判断，用户体验很不好，我们可以添加一个辅助段落元素：
+
+```
+
+    <p class="fake-content text-slice">
+        郑成月的经历就是一部中国社会历史！很有价值的！不管是社会研究还是真心纠错，都是非常好的案例。历史就是用各种个人经历写成的，那样就很有实在感。作家们没有素材？都在书写歌功颂德之文？想要把自己的作品流传后世，这就是最好的素材
+    </p>
+```
+
+样式如下：
+
+```
+
+    .fake-content {
+        position: absolute;
+        z-index: -1; /* 隐藏 */
+        opacity: 0; /* 透明 */
+        pointer-events: none; /*元素不可交互/点击*/
+    }
+```
+
+然后比较此元素在设置截断样式和不设置截断样式时高度，相等即不会发生截断，不相等即发生截断：
+
+```
+
+	// 文本是否发生截断
+	function hasTextSliced($ele) {
+		var initHeight = $ele.height();
+		var height;
+		$ele.removeClass('text-slice'); // 删除截断样式
+		height = $ele.height();
+		
+		if (initHeight < height) {
+		    // 发生截断
+		    return true;
+		}
+		
+		return false;
+	}
+```
+
+如上，在删除截断样式后，若高度变大，则说明发生文本截断，否则不发生截断。
+
+## CSS实现
+
+CSS可以有两种方式实现：
+
+- :target伪类 实现
+- :checked伪类 + ~（临近兄弟节点选择符）实现
+
+[点击查看实例](http://demo.codingplayboy.com/demo/smallcase/expand_more/expand-js.html)
+
+### :target伪类
+
+我们知道HTML中，a链接可以设置锚点，点击后该锚点可以使用```:target```伪类选择获取，于是可以为其设置文字不截断样式：
+
+```
+
+	#content:target {
+		overflow: auto;
+		display: block;
+	}
+```
+
+其html结构如下：
+
+```
+
+	<p class="content text-slice" id="content">
+   		...        
+	</p>
+	<p class="fake-content text-slice">
+	    ...
+	</p>
+	<a class="expand-more" href="#content">更多</a>
+```
+
+## :checked伪类 + ~选择符
+
+此种方式原理是，选择框可以使用CSS伪类```：checked```获取，然后通过```~```选择符給元素设置样式不截断文本：
+
+```
+
+	#expand-check:checked ~ .content {
+	    overflow: auto;
+	    display: block;
+	}
+```
+
+html结构如：
+
+```
+
+	<input type="checkbox" id="expand-check" style="display: none;pointer-events: none;">
+	<p class="content text-slice">
+	    ...
+	</p>
+	<p class="fake-content-2 text-slice">
+	    ...
+	</p>
+	<label class="expand-more" for="expand-check">更多</label>
+```
+
+如上，通过在文本前面添加一个隐藏的·```<input type="checkbox">元素```，在更多按钮中使用label的for属性，通过设置```<label class="expand-more" for="expand-check">```使其点击时可以改变前面添加的选择框元素的checked状态，从而实现切换效果。
+
+## 总结
+
+不同的方式都能实现效果，那什么情况适合使用哪一种呢，现进行比较：
+
+- 对比Js和CSS方式，Js实现可配置性，操作性强，而CSS实现有一定限制，无法在切换展示的同时进行其他Js处理；但是CSS实现更稳定，高效，代码，出错性小，js错误不影响此功能，在内容展示型页面适合使用。
+- 对比:target伪类和:checked伪类，前者代码量少，不需要添加额外元素，但是我们知道锚点点击时，页面是会滚动锚点元素到当前页面顶部的，这不适合长页面。
+- :checked伪类方式需要为每一个需要切换展示的段落都添加额外辅助元素，因此不适于在长列表中使用，如评论列表，新闻简介列表页。
+
+[本篇中实例详细代码参考https://github.com/codingplayboy/web_demo/tree/master/smallcase/expand_more](https://github.com/codingplayboy/web_demo/tree/master/smallcase/expand_more)
+
+此篇关于文本截断切换展示的总结，主要出于学习与实用的目的，若喜欢请点赞，文笔水平有限，望包含。
diff --git a/git-basic.md b/git-basic.md
@@ -0,0 +1,67 @@
+# Git由浅入深之基础理论
+
+万丈高楼平地起，万事只有打好基础，才能有所成就，学习亦是一样。本篇开始介绍Git基础工作理论，学完本篇，我们应该知道什么是Git，Git是如何工作的，以及Git与SVN等分布式版本控制系统的主要区别。
+
+## 什么是Git
+
+一言以蔽之，Git是一个分布式版本控制系统（DVCS）,大家都知道，那它与其他的集中式版本控制系统，如SVN等有什么差别呢？这就要从Git的特性开始介绍，介绍完，就清楚了Git是怎么工作的，及他与SVN等的差别。
+
+## 快照（Snapshots）与记录变更(Differences)
+
+Git与SVN最大的差别在于它们如何处理数据：
+
+- SVN等大多数版本控制系统存储的数据是一系列记录项目文件变更的文件。
+
+![集中式版本控制系统](http://blog.codingplayboy.com/wp-content/uploads/2017/01/git-deltas.png)
+
+- Git存储的数据则更像是一个微型文件系统的一系列快照，即快照流。
+
+![分布式版本控制系统](http://blog.codingplayboy.com/wp-content/uploads/2017/01/git-snapshots.png)
+
+每次提交或保存当前项目状态，Git都会生成一个当前所有文件状态的快照，并存储一个对该快照的引用；而且文件没有发生变化时，Git不会重复保存快照，而只是链接到之前的标识文件。
+
+也许，你可以把Git想象成一个小型文件系统，而不仅仅是一个版本控制系统，这有助于你比较Git与其他版本控制系统。
+
+## 操作本地化
+
+在传统的VCS中，大多数操作都依赖于网络，特别在网络延迟高时，那种痛苦感，相信你是不想有第二次体验的；而Git的大部分操作都是基于本地文件和资源的，而不需要通过网络从其他计算机获取信息，Git将整个项目历史保存在本地磁盘，使得大多数操作似乎没有延迟感。
+
+比如，需要查看项目历史记录时，Git不再需要从服务器获取，可以直接从本地磁盘读取，操作很快；又或者我们需要查看某一文件在两个不同时间点的区别，Git可以查询该文件不同时间点的状态，并计算出变更，而不需要从服务器获取不同版本文件或者请求服务器计算它们点变更。即使与服务器的连接断开甚至网络断线，也不会受太大限制，我们可以在本地对文件进行编辑，保存，然后等连接正常时再上传，而在其他的版本控制系统，这些几乎不可能。
+
+## 健全性
+
+Git在存储任何数据前都会先计算并存储其校验和，随后通过该校验和，而不是文件名访问存储数据，这意味着Git可以探测到任何文件或目录的变更，即使数据发生丢失，Git也能知道。
+
+> Git生成校验和的机制叫做SHA-1哈希，为什么通过该校验和可以访问到存储数据呢？因为它是基于文件内容或目录结构计算得出一个由40个十六进制字符组成的字符串，比如：24b9da6552252987aa493b52f8696cd6d3b00373。
+
+## 操作数据
+
+对数据进行版本管理，无非就是对数据进行增删改并记录，在传统的VCS中，我们没有提交至服务器的任何新增文件或变更，都很容易就可以被错误删除或再次修改，这时我们是无法找回之前需要提交的内容的；然而在Git中，只要我们在本地提交了项目当前的快照，几乎不会出现数据丢失的情况，而且无论是否提交数据到服务器我们都可以随时找回之前保存过的内容或变更，即使在中途某次操作误删除或误修改，因为Git中的几乎所有操作，都是在向Git数据库添加数据或变更记录。
+
+## 三种状态
+
+介绍到现在，终于进入本篇最重点的内容：Git的三种状态。
+
+在Git，文件可能有三种状态：已提交（committed），已修改（modified），暂存（staged）:
+
+- 已提交(commited)，说明数据已经存储在本地数据库；
+- 已修改(modified)，说明数据被修改，但是尚未存储到本地数据库；
+- 暂存(staged)，说明已标记将一个被修改的文件（当前版本）添加到待提交的快照中。
+
+这三种状态分别对应Git项目的三大区块：Git目录，工作目录，暂存区。
+
+- Git 目录（repository），即Git存储项目元数据和对象数据库的地方，也就是我们克隆（clone）某项目仓库时拷贝下的内容所在地；
+- 工作目录(working directory)，即从项目某版本中检出的当前所处分支，也就是从Git目录数据库中拉取的文件在本地磁盘保存所在地；
+- 暂存区(staging area)，即一个文件，通常包含在Git目录中，存储下一次需提交的内容，有时，它指向我们所说的“index”索引。
+
+![Git项目区域划分](http://blog.codingplayboy.com/wp-content/uploads/2017/01/git-areas.png) 
+
+## 基本工作流程
+
+我们使用Git时的一次基本工作流程如下：
+
+- 在工作目录修改文件
+- 暂存文件，将其添加到待提交快照
+- 提交，将快照持久化提交到Git目录
+
+学完本篇，我们需要懂得什么是Git，Git与传统集中式版本控制系统的主要区别，及Git的基本工作流程，下一篇将详细介绍Git的使用与指令。