从去年起，我和知名技术专家侯策开始了合著之旅，今年我们共同打磨的书籍《React 状态管理与同构实战》终于正式出版了！下面是本书的详细信息，有兴趣的同学可以了解一下购买方式为大家准备了限量签名版，可指定寄语，附赠小惊喜，目前可通过两种方式购买第一种，扫面下方二维码，通过微店购买第二种，也可以扫面下方二维码，添加我的微信购买不想要签名版的同学可以通过京东或当当购买京东：https://item.jd.com/12403508.html当当：http://product.dangdang.com/25308679.html下面是本书的豆瓣主页，欢迎大家讨论或反馈问题豆瓣：https://book.douban.com/subject/30290509/本书特色一部颠覆前端历史的框架React的横空出世颠覆了以往的前端开发方式，本书深入浅出React与Redux相关原理，重点讲解前沿同构技术，揭秘SSR实战要领！两位知名技术博主的沉淀本书的两位作者都是前端圈内非常活跃的技术博主，拥有丰富的实战经验，经历近十年的沉淀，将鲜活的经验通过本书分享给各位读者！众多圈内技术大咖的力荐百度公司副总裁沈抖、百度公司资深前端工程师董睿、前端圈知名技术专家阮一峰、狼叔、迷渡（justjavac）、小爝、顾轶灵联合力荐！内容简介React自开源以来，便以革命性的设计理念迅速颠覆了前端开发的传统意义，其倡导的 ...继续阅读 (63)

从去年起，我和知名技术专家侯策开始了合著之旅，今年我们共同打磨的书籍《React 状态管理与同构实战》终于正式出版了！在书籍定稿之际，思前想后，我写了下面这篇自序人生需要勇气人类的每次一进步，技术的每一次发展，都源自对未知世界的探索，探索让我们发现更大的世界，有人说探索需要好奇心，有人说探索需要想象力，而我觉得最重要的是勇气，面对未知，勇敢的人才能迈出一步在前端的世界里，从来不缺乏有勇气的人，这些勇士们引领着前端的不断变革，技术更新了一代又一代，从以jQuery为代表的的操作DOM时代，到以Backbone为代表的的MVC框架，再到以AngularJS为代表的MVVM框架，再到以React为代表的的新一代技术，前端得到了空前的繁荣，颇有百家争鸣，百花齐放的局面，而这一切都源自勇气如果你对上面提到的名词不了解也没关系，如果你对当前爆炸的技术感觉迷茫也不要担心，我也曾经害怕恐惧，对新技术畏手畏脚，其实人的天性就是喜欢熟悉的环境，幸运的是我突破了自己，曾经陌生的名词，如今都被我驾驭的很好，是勇气给了我力量关于我和React的故事，要感谢本书的另一位作者——候策，也是我最志同道合的同事和朋友，他还是一位非常优秀的勇士，他最先研究React，并给我介绍了很多React的知识，也进行了很多探讨，最开始仅仅是做一些比较小的内部系统，现在React已经变成我主要的技术栈了，极大提供了我的工作效率， ...继续阅读 (68)

从去年起，我和知名技术专家侯策开始了合著之旅，今年我们共同打磨的书籍《React 状态管理与同构实战》终于正式出版了！在书籍定稿之际，我把底稿寄给了justjavac，感谢justjavac在百忙之中抽时间阅读了底稿，并为我写了推荐序，一下是推荐序的内容董睿推荐序对于前端这样一个重界面开发的领域来说，组件化几乎是真理了。但是不同的场景、不同的人对组件化的理解可能很不相同。我见过许多不同的组件形态，有 ExtJS 这种高度封装的富组件、JQuery UI 这种与页面 DOM 强相关的组件、有 Bootstrap 这种重样式轻行为的组件、以及各种不知名的公司内团队内自己的组件实现等等。而从来没有一个组件框架能够像 React 一样那么多的被谈论，它很大程度上改变了前端的开发方式。毫无疑问 React 是成功的，为什么呢？也许是因为它的组件模型足够简单易于理解；也许因为它允许开发者把视图写在 JSX 中；也许因为它为很多前端工程师带来了新的理念（虽然有些不是它创造的），JSX、V-DOM、Flux、immutable、HOC、Fiber…；也许因为它对同构的支持；也许因为 React Native；也许，都有。无论如何，这些理由都不重要了。我看到在我的周围，无论是不是使用 React 的同学，都在谈论和学习它，在框架选型的时候它都是无法回避的选项之一。在我们平时做项目中，框架的选型仅仅是 ...继续阅读 (70)

从去年起，我和知名技术专家侯策开始了合著之旅，今年我们共同打磨的书籍《React 状态管理与同构实战》终于正式出版了！在书籍定稿之际，我把底稿寄给了justjavac，感谢justjavac在百忙之中抽时间阅读了底稿，并为我写了推荐序，一下是推荐序的内容迷渡（justjavac）推荐序1995年，Brendan Eich花了10天时间开发出一门脚本语言，取名为Mocha，并将其集成到了Netscape浏览器中，不久后这门语言被改名为LiveScript，意思是可以让网页充满动力。同年年底，网景公司和SUN公司达成协议并获得了Java商标的使用权，于是正式将这门语言更名为JavaScript。历史选择了JavaScript，使其成为了目前浏览器唯一内置支持的语言。时至今日，JavaScript已经不仅仅局限于为网页开发实现特效了，而是真正发展成了一门全功能的编程语言。我从2005年开始接触网页开发，经历了Web开发的“上古时代”。在Web 1.0时期，我们开发出来的网页是给人“看”的，此时流行jQuery这种用来处理浏览器兼容性的库，以及像Dojo、YUI、Extjs这种用来做UI的库。随着计算机和浏览器性能的提升，JavaScript的功能开始不再局限于实现简单的网页开发，特别是Ajax的使用更是显著地提升了用户体验，这个时期被称为Web 2.0。站在开发者和使用者的角度，Web ...继续阅读 (62)

我最近很苦恼，因为我们团队负责很多很多个系统，我们每个系统又分为不同的环境，举个例子吧，假设我们有10个系统，每个系统有开发，测试，线上三个环境，那就是30个域名，这些域名还没什么规律可循，我差不多是个废人了/(ㄒoㄒ)/~~先来交代下背景，如果你没有这样的问题，那么可以只看看背景，或者以后遇到了再来看具体的方案有时候我的系统会有一个链接跳转到别人负责的系统，但我并不知道他的系统不同环境是什么，如果我想知道我还得问他。。。每次给QA提测，明明只改了一个页面，我却要写好几个url发给他。。。脑补一下我从开发环境切换到测试环境的画面，首先我先找到测试环境的域名，粘贴到浏览器，再去赋值后面的路径，再次粘贴过来，按下回车，大概我要操作十几个按键，我去。。。总结一下问题就是，多个系统多套环境造成的问题：每个人的记忆成本项目交接成本如何高效切换环境不熟悉人的成本，比如其他项目成员，测试人员，产品等解决方案那么怎么解决这个问题呢，我最开始的做法应该和大部分人差不多，我把每个系统，每个环境都放到了浏览器收藏夹，可以脑补一下我的收藏夹多么多么壮观收藏夹解决了一些问题，比如记忆成本，但也只解决了这一个问题，切换环境还是稍微有点复杂我还想到了另一个绝妙的办法，整理文档，一个常常的文档收集了全部的系统，全部的环境，文档弥补了收藏夹的一些缺点，比如交接成本文档+收藏夹可以一起使用，文档收录全部的，收藏夹只收 ...继续阅读 (56)

函数式编程太火了，我也想学！！！函数式编程太难了，该怎么入门？？？嗯，函数式编程这么火，是一定要学的，但是怎么学呢？本文通过一个例子来介绍函数式编程的用法，先声明本文没有复杂的概念，也没有各种定义，只有一个由浅入深的例子背景假设有一个如下的数据结构，type 是 1-n，flag 表示当前元素的状态，页面大概是一个列表，可以通过类型和选择状态来过滤列表内容constlist=[{type:1,flag:true,},{type:2,flag:false,},{type:3,flag:true,},];可能的需求有下面这些：获取全部的列表获取一个或多个类型的列表获取否定类型的列表获取指定状态的列表获取指定状态，指定类型的列表呃呃呃，有点懵是不是，思考下这个程序该怎么写？如果写一个函数满足上面所有的需求呢？获取全部的列表下面先来写第一个需求，需要用到数组的 filter 和函数的默认值，就是这么简单functiongetList(filter=function(){returntrue;}){returnlist.filter(filter);}调用getList就能获取全部的列表，但上面的参数默认值其实可以提取出一个公共函数// 高阶函数functionbool(flag){returnfunction(){return!!flag;};}bool(true);// function ...继续阅读 (58)

划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个github仓库，欢迎大家star仅居中元素定宽高适用absolute + 负marginabsolute + margin autoabsolute + calc居中元素不定宽高absolute + transformlineheightwriting-modetablecss-tableflexgridabsolute + 负margin为了实现上面的效果先来做些准备工作，假设HTML代码如下，总共两个元素，父元素和子元素123123wp是父元素的类名，box是子元素的类名，因为有定宽和不定宽的区别，size用来表示指定宽度，下面是所有效果都要用到的公共代码，主要是设置颜色和宽高注意：后面不在重复这段公共代码，只会给出相应提示/* 公共代码 */.wp{border:1pxsolidred;width:300px;height:300px;}.box{background:green;}.box.size{width:100px;height:100px;}/* 公共代码 */绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，但绝对定位是基于子 ...继续阅读 (51)

本系列前两篇文章，介绍了正则表达式的语法和正则表达式在js中的实践本文计划内容如下：将讲解正则表达式的原理计划开发一个正则引擎计划开发正则匹配动画展示系统本文正在众筹！！！你的打赏，是我写下去的动力！！！待续。。。 ...继续阅读 (41)

面试中发现很多人对rem布局的原理不是很清楚，只停留在会使用的阶段，或者理解完全是错误的，本文将给大家讲清楚rem布局的原理，使用方案等知识什么是Remrem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下emem作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN我在面试时经常问会一道和em有关的题，来看一下面试者对css细节的了解程度，如下，问s1、s2、s5、s6的font-size和line-height分别是多少px，先来想一想，结尾处有答案和解释1111.p1{font-size:16px;line-height:32px;}.s1{font-size:2em;}.s2{font-size:2em;line-height:2em;}.p2{font-size:16px;line-height:2;}.s5{font-size:2em;}.s6{font-size:2em;line-height:2em;}em可以让我们的页面更灵活，更健壮，比起到处写死的px值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能有些人提出用em来做弹性布局页面，但其复杂的计算让人诟病，甚至有人专门做了个px和em的计 ...继续阅读 (22)

上一篇文章介绍了正则的语法，本文来介绍下在js中如何使用正则在js中创建正则有两种办法，字面量和new，和创建其他类型变量一样var reg = /abc/g // 字面量 var reg = new RegExp('abc', 'g') // new方式，意思和上面一样js中用到正则的地方有两个入口，正则的api和字符串的api，RegExp#test等于RegExp.prototype.testRegExp#testRegExp#execString#searchString#matchString#splitString#replaceRegExp#test每个正则实例都有test方法，test的参数是字符串，返回值是布尔值，表示当前正则是否能匹配指定的字符串/abc/.test('abc') // true /abc/.test('abd') // falseRegExp#execexec使用方法和test一样，只是返回值并不是布尔值，而是返回匹配的结果匹配成功返回一个数组，数组第一项是匹配结果，后面一次是捕获的分组/abc(d)/.exec('abcd') // ["abcd", "d", index: 0, input: "abcd"]此数组还有另外两个参数，input是输入的字符串，index表示匹配成功的序列在输入字符串中的索引位置如果有全局参数(g)，第二次匹配时 ...继续阅读 (24)

正则表达式，名字听上去就没有吸引力，我发现很多前端对正则表达式都很难做到如数家珍，每次能够运行全凭运气，更有甚者完全靠复制粘贴，其实这样并不好正则表达式其实并不难，语法就那么多，而且一旦掌握在某些时候能够给解决问题提供捷径，更重要的是面试可能会被问到，要是不会那就尴尬了本文主要介绍正则表达式的语法部分，下面将正则表达式简称为正则正则是啥？同学你可以出门右转了，下面是我自己的理解正则就是用有限的符号，表达无限的序列，殆已！正则表达式的语法一般如下(js)，两条斜线中间是正则主体，这部分可以有很多字符组成；i部分是修饰符，i的意思表示忽略大小写/^abc/i正则定义了很多特殊意义的字符，有名词，量词，谓词等，下面逐一介绍简单字符没有特殊意义的字符都是简单字符，简单字符就代表自身，绝大部分字符都是简单字符，举个例子/abc/ // 匹配 abc /123/ // 匹配 123 /-_-/ // 匹配 -_- /海镜/ // 匹配 海镜转义字符\是转义字符，其后面的字符会代表不同的意思，转义字符主要有三个作用：第一种，是为了匹配不方便显示的特殊字符，比如换行，tab符号等第二种，正则中预先定义了一些代表特殊意义的字符，比如\w等第三种，在正则中某些字符有特殊含义(比如下面说到的)，转义字符可以让其显示自身的含义下面是常用转义字符列表：\n匹配换行符\r匹配回车符\t匹配制表符，也就是tab ...继续阅读 (31)

世界在进步，宣扬了这么多年的前端金科玉律被推翻，这是要变天啊，前端飞速发展，而我们只有保持不断学习，才能不那么迷茫本文通过一个实例，讲解了异步编程的发展历史和 6 种异步编程方法，实践出真知前言就在不久前（15 年以前），说起异步还只有 callback，后来 Promise 来的时候我是拒绝的，generator 来的时候我是决绝的，当 async 来的时候我想我是不是落后了，嗯我该学习了作为一个切图人员，遇到的异步场景实在太少，思来想去也就只有动画了，本文将用不同方式实现下面的动画，红色方块每次向右移动 100 像素，完整的 demo 在这里关于异步异步是一个关于现在和将来的问题，现在执行的代码和将来执行的代码，举个例子来说一下异步是如何复杂和反人类vara=1;varb=1;functionfoo(){a=b+3;console.log(a);}functionbar(){b=a*2;}ajax("url1",foo);ajax("url2",bar);上面的代码如果是同步的，那么打印 a 的地方就是确定的；但要是异步的，a 的值就有两种可能（哪个请求先回来），这还是只是最简单的 case，你可以思考下，自己写程序时有咩有考虑过这种问题异步编程方法js 中的异步编程共有下面这些方法，好吧以前我就知道前两个，其中事件监听和观察者有些类似，下面我们将分别介绍回调函数事件监听观察者 ...继续阅读 (30)

作为一个前端，坚守了 9 年的 windows 平台，也是惭愧，但主要还是因为穷，最近终于换上了 mac，但却是各种不习惯，各种折腾，本文记录下自己遇到的问题和解决办法，希望能够帮助 mac 新同学们Mac 编年史一直理不清 mac 的历史，下面简单总结下，最开始的苹果电脑叫做 Apple，比如 Apple I，Apple II，其操作系统叫做 System，大概从 1984-1997System1.0 - 5.0System6.0 彩色System7.0System7.5System7.6后来苹果推出新的 Mac 电脑，Mac OS 系统诞生了Mac OS 8Mac OS 8.5Mac OS 9苹果将 Mac OS10 改名为 OS X，并给每个版本命名一个大型猫科动物系统代号时间Mac OS X 10.0猎豹 Cheetah2001.3.24Mac OS X 10.1美洲狮 Puma2001.9.25Mac OS X 10.2美洲虎 Jaguar2002.8.24Mac OS X 10.3黑豹 Panther2003.10.24Mac OS X 10.4虎 Tiger2005.4.29Mac OS X 10.5花豹 Leopard2007.10.26Mac OS X 10.6雪豹 Snow Leopard2008.6.9Mac OS X 10.7狮子 Lion2011.6.7苹 ...继续阅读 (28)

有时候我们会后悔，有时候我们会想回到过去，有时候我们想改变历史，然而在我们这个世界，目前来看是无法回到过去改变历史的但在git的世界里，一切皆有可能，我们可以在多维空间里任意切换，随意改变一个宇宙的时间线，只要我们愿意，git的分支就是这么神奇然而很多时候你以为你改变了历史，不为人知，那个宇宙并没有消失，而是遗失在了git的世界里，有能力的人便能找到彼此分开的世界也能随时交叉合并，世界就这样开开合合，偶会需要解决合并冲突git中的分支非常的轻量，其实就是一个文件，里面记录了分支所指向的commit id，下图中有两个分支分别是master和test，他们都指向了A2这个提交，HEAD是一个特殊的指针，他永远指向你当前所在的位置；有时候你可能不在某一个分支上，不要惊慌，你随时有权利去你想去的分支，git赋予了你新建，切换分支的能力然后有时候世界并不总如上图那般美好，面对分叉的两个分支，git新手总是一脸茫然，本文我将讲述git中合并分支的方法在git中合并分支有三种方法，分别是merge，rebase，cherry-pick，而其中merge又有三种区别，下面将一一介绍fast-forward如果待合并的分支在当前分支的下游，也就是说没有分叉时，会发生快速合并，从test分支切换到master分支，然后合并test分支git checkout master git merge tes ...继续阅读 (35)

多说评论厂倒闭了，倒闭了，倒闭了！！！作为一个使用了3年的重度用户，面对这个消息，满是感伤，说好的不离不弃呢，我只能默默的送上祝福抉择摆在我面前有两条路，要么迁移，干掉评论，我选择了前者解决了纠结，又有一个大大岔路口摆在面前，众多评论系统中选择哪个呢？？？一大波国产评论系统disquscommentitgitment先来说结果，最后我选择了commentit，原因是我乐意，首先类多说这种评论系统（有言，disqus）被我排除在外了，毕竟伤口还疼呢gitment通过github api把文章评论托管在github issues，通过github issues做精细化定制，非常有意思，并且也是国人开发的，优点是只依赖github api，祈祷github 不下线这个功能就行了Comm (ent|it)我选择的是commentit，一个法国小孩开发的，依赖法国小孩的服务系统，将评论发pull request到自己的仓库，然在在自己仓库存储评论法国小孩在警告里说自己不对系统稳定性和时间做任何保证，o(╯□╰)o接入过程非常简单，官方的Getting started介绍的非常清楚了开始老是报错，提交不上去，错误信息如下，后来在github和作者交流才发现是我的仓库名字是yanhaijing.github.com的问题，重命名为yanhaijing.github.io就好了Error: cou ...继续阅读 (40)

作为没用过mac的温到死(windows)狗，每次都要百度也是够了，本文总结下自己常用的网络命令pingipconfignetstatroutetracertarpping测试本机与指定机器是否联通$ ping jingyan.baidu.com $ ping -t jingyan.baidu.com # ping 1000万次 $ ping -n 10 jingyan.baidu.com # ping 指定次数ipconfig网卡相关操作$ ipconfig # 查看网卡信息，如ip地址 $ ipconfig /displaydns # 查看dns缓存内容 $ ipconfig /flushdns # 清除dns缓存netstat了解整体网络情况及连接情况$ netstat # 实时查看 $ netstat -n # 数组形式显示，ip地址代替域名 $ netstat -r # 显示路由表route查看和配置路由$ route print # 显示路由表tracert跟踪路由信息$ tracert jingyan.baidu.com $ tracert -h 10 jingyan.baidu.com # 指定最大跳跃次数arp查看本地计算机或另一台计算机的ARP高速缓存中的内容$ arp -a # 查看arp缓冲内容总结本文总结了自己常用的网络命令，以后再也不用到处去找百度了 ...继续阅读 (31)

先来划重点：这是一道百度校招面试题！！！背景那位同学先别走，我知道你早已工作多年，现在社招也有这道题了，(^__^) 嘻嘻……真实的故事是这样的，遥想当年博主参加百度校招，就挂在了这道题上最近在面试中也有问这道题，发现大部分人都回答不上来，今天写出来给大家分享下干货题：有一瓶红墨水，一瓶蓝墨水，从红墨水舀一勺到蓝瓶里，搅匀后再舀一勺到红瓶里。问：此时红墨水里含蓝墨水的量和蓝墨水里含红墨水的量关系是什么？大于、小于、等于？建议大家先自己思考下思路，实在没思路再看答案。答案相信大家看到题目应该和博主一样毫无头绪，其实按照经验这道题的答案应该是等于，对这道题的答案就是等于。结题方法应该有很多种，比如方程组，x，y啥的，但我们可以考虑一种极限情况，加入勺子足够大，和瓶子一样大，明显是相等的。但你说极限，明显不能糊弄过面试官的，这道题有一个其实有一个障眼法，不要关注第一次，我们只关注第二次那一勺。然后回答下面的问题红里面有的蓝墨水=一勺蓝红混合体-一勺里含的红蓝里面有的红墨水=一勺红墨水-第二次一勺里含的红好了，现在明显蓝里的红和红里的蓝是一样一样的啊总结好了，觉得有意思的评论吧；觉得无聊的拿板砖拍吧 ...继续阅读 (30)

最近看到尼古拉斯大神的一篇分享——Scalable Javascript Application Architecture，里面基于YUI讲了构建web应用的一些思想，现在看有些已经过时了，但思想永不过时，强烈建议读一读其中对模块的介绍感觉很经典，加上一点自己的见解，总结分享一下模块新说前端模块由HTML CSS JS三部分组成，模块应该具备包含自身的全部功能，不依赖外部环境低耦合可以让模块互不影响，随意插拔模块很像拼图的碎片，拼图碎片不需要知道完整的图片长什么样，仅仅保证自己能够被拼接即可程序的成功创建，其实就是让每个模块按部就班模块像小孩子一样，需要严格的一组规则约束，来保证避免问题模块心法我在之前写过一篇图解7种耦合关系，里面讲解了不同的耦合程度；对于模块我们希望做到高内聚，低耦合下面是高内聚的心法仅处理自己仅调用自己的方法不能访问外部dom节点不能访问全局变量仅发出消息不要制造垃圾不能创建全局变量不要和陌生人说话不要直接和其他模块通信总结好的模块应该做到对外界无感知，仅接收数据，暴漏API和回调 ...继续阅读 (32)

这是起底Git系列的第六篇，本篇我们来介绍一下Git的进阶技巧。选择版本搜索调试重写历史重置揭秘高级合并选择版本假设当前版本库如下图所示，有时我们可能先找到当前提交的父提交和祖先提交，^和~可以满足我们的需求^和~都匹配当前提交的父提交，^^和~~匹配父提交的父提交，^和~后面跟数字的时候意义是不同的，具体可以看下面的例子$ git log HEAD^ A2 $ git log HEAD^^ A1 $ git log HEAD^2 B1 $ git log HEAD~ A2 $ git log HEAD~~ A1 $ git log HEAD~2 A1有时候我们可能会想选择一个区间，比如A1，A2，A3，下面通过例子说明..，…和^的区别$ git log master..test C0 C1 $ git log ^master test C0 C1 $ git log master…test A1 A2 A3 C0 C1搜索调试A：设想这样一种情况，摸个分支test，开发完后被删除了，怎么找回这个分支呢？其实git会在本地记录每次HEAD的变化，通过reflog命令可以拿到这些记录$ git reflog 0e94c5b HEAD@{0}: commit: 222 7e07aa7 HEAD@{1}: commit: 111 c5aba97 HEAD@{2}: commi ...继续阅读 (40)

这是起底Git系列的第六篇，本篇我们来介绍一下Git的开发流程。Git非常灵活，可以适用各种开发环境，你可以定义自己的开发流程，网上也有各种各样的流程，这里我们介绍两种常用的流程，分别是集中式开发流程和集成管理者工作流集中式开发流程大家都访问同一个远端仓库，传统的svn就是这种模式在GitHub上有两种方式可以实现这种模式，一种是给自己的仓库添加其他开发者的key，也就是授权给其他开发者，这种模式比较适合三三两两的自由开发者另一种模式是利用github的组织(organization)，类似于群，可以邀请别人加入组织，组织可以进行精细的权限控制，这种模式适合小型团队集成管理者工作流这种模式下每个开发者有自己远端仓库，开发者开发完后会给管理员发请求，管理员自己选择是否合并到项目仓库GitHub中的fork+pull request就是这种模式，这种模式非常适合小型开源项目，接受未知第三方的贡献总结如果你有任何疑问的话，欢迎留言讨论；如果本系列文章对你有帮助的话，那我很荣幸，别忘了打赏哦，O(∩_∩)O哈哈~最后感谢你的阅读，O(∩_∩)O哈哈~ ...继续阅读 (33)

这是起底Git系列的第五篇，本篇我们来介绍一下Git基础。总结如果你有任何疑问的话，欢迎留言讨论；如果本系列文章对你有帮助的话，那我很荣幸，别忘了打赏哦，O(∩_∩)O哈哈~最后感谢你的阅读，O(∩_∩)O哈哈~继续学习版本控制简史Git简史Git内部原理Git基础（待续。。。你的打赏是我写作的动力）Git进阶Git开发流程Git常用命令总结 ...继续阅读 (28)

这是起底Git系列的第三篇，本篇我们来介绍一下Git的内部工作原理。What is Git?你可能听说过Git是版本控制系统、微型文件系统、内容寻址系统。Git的底层是一个微型内容寻址系统Git在1.5版本是一个分水岭，1.5之前更偏向文件系统，1.5版本后更偏向版本控制系统Git常用命令共有30多个，可运行git help查看；但Git总共有130多个命令，可以通过git help -a查看，这些命令可以分为高层命令和底层命令，底层命令被设计成unix风格，不常用Git仓库下有一个.git目录，里面存储了git全部的秘密，一般包括下面的内容：configindexHEADhooks/logs/refs/objects/下面会详细介绍没个部分都是什么configconfig是仓库的配置文件，一个典型的配置文件如下，我们创建的远端，分支都在配置文件里有表现； fetch操作的行为也是在这里配置的[core] repositoryformatversion = 0 filemode = false bare = false logallrefupdates = true symlinks = false ignorecase = true [remote "origin"] url = git@github.com:yanhaij ...继续阅读 (48)

最近整理了一份git的分享，从如下六个方面对git进行了讲解，我在内部试着讲了一下效果还不错， 感兴趣的可以约我进行团队培训（价格不菲），建议大家自学。版本控制简史Git简史Git内部原理Git基础Git进阶Git开发流程作为一个git老司机，终于可以贡献一下了，也算是功德圆满了。我在2017年1月份开始使用git，算起来也刚好4年了，下面是我的github截图，还没follow的同学要抓紧了。先来考大家一个问题，Git的读音是什么？！！！正确发音如下：[ɡɪt] ...继续阅读 (31)

最近整理了一份git的分享，从如下六个方面对git进行了讲解，我在内部试着讲了一下效果还不错， 感兴趣的可以约我进行团队培训（价格不菲），建议大家自学。在开始阅读下面的文章之前，我强烈建议你先看完本文的内容。版本控制简史（待续。。。你的打赏是我写作的动力）Git简史（待续。。。你的打赏是我写作的动力）Git内部原理（待续。。。你的打赏是我写作的动力）Git基础（待续。。。你的打赏是我写作的动力）Git进阶（待续。。。你的打赏是我写作的动力）Git开发流程（待续。。。你的打赏是我写作的动力）作为一个git老司机，终于可以贡献一下了，也算是功德圆满了。我在2013年1月份开始使用git，算起来也刚好4年了，下面是我的github截图，还没follow的同学要抓紧了。读音先来考大家一个问题，Git的读音是什么？！！！正确发音如下：[ɡɪt]那linux呢！！！，聪明的你知道我为什么把这两个单词放一起吗？冰山一角学习一个新事物会经历，不了解，入门，“精通”，随着会得越多会发现不会的也越来越多，学习Git也是类似的。开始我觉得我掌握了常用的30几个命令后，我觉得我学会Git了，但是后来当我发现还有100多个不常用命令时我的世界观崩塌了，再后来我发现几乎每个命令都有几十个，甚至上百个可选项的时候，我再也不会说自己精通Git了，也期望你不要走入误区，够用就好，用到的时候在学，学习本质，而不是表面 ...继续阅读 (30)

这是起底Git系列的第二篇，本篇我们来介绍一下Git的历史。温故而知新可以为师矣 —— 孔子Git之父提到Git就绕不开一个人，那就是linus，用linus的话说他这辈子就做成了两件事，创造了linux和Git，神一样存在，linus也经常爆出来一些语录广告时间，如果你是一个有追求的人，我建议你看下这本书——《只是为了好玩:Linux之父林纳斯自传》，里面也提到了Git的诞生Git诞生记这是一个传奇故事，时间定格到2005年，当时linux再使用一个叫做BitKeeper的版本控制工具，BitKeeper开发商在这一年决定不再免费提供给linux社区使用，linus当即伸出了中指，于是两周后Git诞生了Git经过10多年的发展，内部设计基本没变化，而这一切都是linus用两周时间创造出来的Git使命Git在设计之初就是为了搞定linux内核这种巨无霸而设计的，所以制定了自己的使命速度简单的设计对非线性开发模式的强力支持（允许成千上万个并行开发的分支）完全分布式有能力高效管理类似 Linux 内核一样的超大规模项目（速度和数据量）Git优点Git作为分布式版本控制的代表，其优点不言而喻快本地仓库轻量级分支分布式各种工作流谁在使用经过10多年的发展，目前绝大部分开源项目都在使用Git，目前Git已经处于霸主地位GitLinux KernelEclipsePerlAndroidType ...继续阅读 (28)

这是起底Git系列的第一篇，本篇先来介绍一下版本控制的历史。以史为鉴可以明得失 —— 李世民解决的问题我们在开发中可能会有下面的需求，亟待解决，而这正是版本控制所做的事回到过去改变历史古今对比并行开发谁动了我的代码如果用一张图来总结的话，我想就是下面这张分类版本控制大致可以下面三类，其每一类都是一个时代的产物，按照历史规律，新生事物总会取代陈旧事物，现在处在DVCS时代，但你可能还在陈旧的公司代码见过CVCS，我们很幸运生活在这个时代LVCS（Local VCS）CVCS（Central VCS）DVCS（Distributed VCS）如果你不知道上面三个分类的意思，那就往下看吧，下面聊一聊每一个的历史史前时代不说话，写过论文的应该都懂下面这张图，在没有版本控制工具之前，聪明的我们通过手动复制解决LVCS（Local VCS）本地版本控制原理很简单，就是在本地建一个仓库，记录每一个版本和版本之间的关系，这就解决了我们上面手动维护的尴尬这个时代的代表是rcs，自行百度吧但本地版本控制有一个很大的问题，就是没法多人协作CVCS（Central VCS）为了解决写作的问题，聪明的程序员想了个办法，大家共用一个仓库over了吗，于是乎把仓库搬到了远端机器，大家都访问同一个远程仓库，这种模式就成为中心仓库模式这个时代的代表工具就是SVN，这也是大部分公司还在用的工具但这种模式有一个致命的缺 ...继续阅读 (31)

最近经验要迁移到https，需要排查页面中需要用到的全部资源，我用nodejs+phantomjs做了一个自动收集页面资源的程序，本文分享下自己的一点经验，注意文章结尾有干货如果全文只能说一句话，那我想说的是，“一定要打破自身局限性，要走出舒适区，身为前端不能被前端局限住视野”，前端虽美，可不要贪杯哦调研我最先想到的方案就是手动收集依赖，但这种方式明显不可取，但在一番曲折之后我发现了HAR这种神奇的东西，一句话概括，HAR是一种数据格式，对人家还有专门的组织定义规范了，起作用是定义网络请求的数据规范，以便在不同工具中共享数据感兴趣的同学可以自己导出数据看下格式，上面从chrome面板导出数据，让后放到HAR Viewer工具就可以还原了，似不似很神奇，O(∩_∩)O哈哈~小技巧：如果想收集一个页面依赖了哪些域名，可以这样操作目标是自动化，我打算用node来写逻辑，一番调研后发现phantomjs是一个无头浏览器，可以被node调用，真个程序的架构就清晰了，涉及node，phantomjs和HAR理想很丰满，现实很骨感，我其实没用过phantomjs，也没写过node，o(╯□╰)ophantomjsphantomjs是一个没有界面的，可通过JavaScript api编程的Webkit，快速并且原生支持多种web标准：DOM处理，CSS选择器，JSON，Canvas和SVG，这是官 ...继续阅读 (28)

最近在调研为经验引入webp的可能性，下面总结一下最近的调研成果。简介webp是谷歌在2010年开源的一种新的图片格式，目前在谷歌浏览器（9+）和安卓（4.0+）里面都有很好的兼容性。根据谷歌官方给出的数据，无损压缩webp图片比png图片小26%，有损压缩的webp可以比jpeg小25-34%，下面测试案例中有具体的demo，大家可以亲眼查看效果。鉴于webp的优点，推荐引入webp格式。注意：webp格式会增加解码时间，是png的4-5倍（毫秒级）谷歌官方给了几种向后兼容使用webp的方案：服务器端检测js监测html5 picturePC端方案通过caniuse，我们可以看到opera(11+)和chrome(9+)支持webp格式，但其他浏览器几乎全军覆没。通过百度流量研究院给出的浏览器数据看，chrome占比非常高，你应该根据自己网站的流量统计作出具体决定。pc端建议的方案是html5的picture，caniuse显示picture和webp兼容性（在chrome上）几乎是一样的。一个picture的简单demo如下：<picture> <source srcset="xxx.webp" type="image/webp"> <img src="xxx.png" alt="test"> </picture> ...继续阅读 (31)

最近我在看《你不知道的JavaScript》中卷，在这里我也强烈建议你也读一读这本书，其中提到了一个函数参数和arguments的区别，在此做一个记录。本文将用代码来说明两者的区别。准备工作如果你不知道arguments是什么，我建议你看看mdn的介绍。ES5引入了严格模式，在严格模式中改变了arguments和函数参数之间的关系，本文将分为两种情况分别说明。一般模式直接上代码，先来看调用时缺省参数的情况function a1(x) { x = 2; console.log(x, arguments[0]); } a1(); // 2 undefined function a2(x) { arguments[0] = 2; console.log(x, arguments[0]); } a2(); // undefined 2再来看调用时传入参数的情况function a3(x) { x = 2; console.log(x, arguments[0]); } a3(1); // 2 2 function a4(x) { arguments[0] = 2; console.log(x, arguments[0]); } a4(1); // 2 2可以看到如果缺省参数，arguments和参数是隔离开的；如果传入参数 ...继续阅读 (29)

我说我去面试了，你信不信？这是今日头条的校招前端笔试题，如果侵权了，请联系我。HTML针对移动浏览器端开发页面，不期望用户放大屏幕，且要求“视口（viewport）”宽度等于屏幕宽度，视口高度等于设备高度，如何设置？data-xxx 属性的作用是什么？请描述一下cookies，sessionStorage和localStorage的区别？什么时候浏览器的标准模式（standards mode）和怪异模式（quirks mode）CSS解释一下box-model：全部属性，各个属性取值类型，范围，计算值方式，负值作用，box-sizing概念。BFC(Block Formatting Context)是什么？有哪些应用？如何要求容器在宽度自由很缩的情况下，A/B/C的宽度始终是1:1:1，如何实现，写出两种方法。如图，A若宽高已知，如何实现水平、垂直均相对于父元素居中？若A高度未知呢？JAVASCRIPT函数中的arguments是什么？是数组吗？若不是，如何将它转化为真正的数组？列举JavaScript中typeof操作符的可能结果，如何区分：{}和[]类型？Function中的call、apply、bind的区别是什么？请针对每一个写出一个代码示例。使用jQuery，找到id位selector的select标签中有用data-target属性为isme的option的值？请优化下 ...继续阅读 (37)