为了实现SPA开发，路由是不可避免的一个话题，Angular有一套官方提供的ng-Route，但是并不是很好用。

ng-Route通过hash值和history两种方式实现路由工程。

1. 服务$routeProvider定义了一个路由表
2. 服务$routeParams保存了地址栏中的参数
3. 服务$route完成路由匹配
4. 服务$location ，同window.location.

主要事件：

$routeChangeStart
$routeChangeSuccess
$routeChangeError

Angular有一套官方提供的ng-Route，但是并不是很好用,于是有人开发了一套ui-Router。

1. 服务$stateProvider定义了一个路由表
2. 服务$stateParams保存了地址栏中的参数
3. 服务$state完成路由匹配。$state主要的属性和方法：
   ——–current:保存了当前state中的配置项
   ——–params
   ——–get(name,context)
   ——–go(to,params,options)
   ——–reload()

主要事件：

$routeChangeStart
$routeChangeSuccess
$routeChangeError

Angular1.x版本中并没有提出组件的概念，但是其自定义指令系统可以实现组件的概念。组件之间的通信则可以相应转换为controller之间的通信或者作用域问题。

自定义指令需要经过compile(编译)和link(链接)两个过程。

gulp作为流行的前端自动化构建工具，通过管道流的思想使我们更容易把控整个前端开发流程。本文简单记录一下我自己的gulp配置文件和自己学习和使用中收集的一部分资源，主要目的是为了自己在以后的开发过程中使用到gulp时，可以方便的查找一些基本配置和第三方插件。

如果想学习gulp的相关内容可以从下面第一小节关于gulp的一些资源bolg中查看一些网上的教程，如果你对gulp和webpack有疑问，想了解他们的区别也可以看一下这篇Gulp和Webpack对比

webpack作为模块打包机，在前端模块化开发中频繁的被使用。本篇主要记录一些我自己在学习和使用webpack中遇到问题，保存的一些比较好的博客文章和自己项目的webpack的配置文档，方便以后项目中使用时参考，不用每次都去翻老项目看webpack配置，有些第三方loader和插件的配置或者名称有时就是想不起来（看来老了呀）。

如果想学习webpack的相关内容可以从下面第一小节关于webpack的一些资源bolg中查看一些网上的教程，如果你对gulp和webpack有疑问，想了解他们的区别也可以看一下这篇Gulp和Webpack对比

上一篇CSS居中问题探索中，通过实例的方式展示了一下text-align:center、margin:0 auto;、line-height: boxHeight、position和margin或者transform配合使用还有display:table-cell来实现水平居中或者垂直居中的方式方法，本篇主要补充三个垂直水平居中的实例，或者更直接的说是大小不固定的图片垂直水平居中实现的两种方式和多行文本的垂直居中的方法。

相对于实现水平居中，垂直居中比较麻烦，所以接下来的以垂直居中为重点，水平居中，可以在代码中自己看看实现。

在页面布局中，居中在各种各样的场景中广泛被用到，也经常被新人提及。以前做过一些自己探索居中问题的demo，今天翻出来了，正好做一下笔记，记录一下。以后遇到问题也能快速方便快速找到。

居中包括水平居中和垂直居中两种，其中水平居中相对来说容易解决，但是垂直居中有时就令人头疼了，其实也不是很难。各自都有很多方式来实现，本文主要是总结一下自己以前的demo，并不代表主流方式。另外先打个预防针，下面的例子很丑，以前做的，勿喷。

变量声明提升是JS中一个基础的问题，同时也是对JS词法作用域认识的一个提升。在JS面试题中，关于变量声明提升的问题还是占了不少比例的，另外，在码代码的时候可能也无意间因为这个原因产生错误而头疼好久。还有一个需要注意的是ES2015中let、const声明的变量不具备变量声明提升。

在《你不知道的JavaSript》上卷中，作者把变量声明提升这个问题比作“先有鸡还是先有蛋?”，我认为很形象。代码在执行的时候给人的感觉是一行一行的执行，这样可能比较符合我们的正常思维习惯，但是这实际上并不完全正确。为什么这样说呢？这就要引出JS在运行前其实有一个编译过程的这个问题，在编译阶段，JS引擎做了一些事使得代码并不是完全一行一行的执行了，而是将一些声明的代码顺序提前了，所以就产生了变量声明提升这个问题。

以前听说过fetch，一只以为他是对XHR的一种升级的API，今天去充了充电，看了几篇bolg后，才发现以前的理解是打错特错。所以转载一篇csdn上看到关于fetch的简介，做点自己的补充，记录下来。

AJAX半遮半掩的底层API是饱受诟病的一件事情. XMLHttpRequest 并不是专为Ajax而设计的. 虽然各种框架对 XHR 的封装已经足够好用, 但我们可以做得更好。更好用的API是 fetch 。下面简单介绍 window.fetch 方法, 在最新版的 Firefox 和 Chrome 中已经提供支持。

昨天一个朋友遇到一个典型的前后端联调的问题，这个问题已经不是第一次有人遇到了，自己多少知道点，就索性写下来吧。

问题重现：

小刘同学的项目采用的是前后端分离架构，现在前后端程序猿已经碰过面，协商好了一些前端需要的数据接口，于是前后端程序猿同时开工码代码。
这时候小刘同学某个页面需要后端数据，但是后端叔叔还没有将该数据的借口开发出来，此时小刘只能做假数据（专业点叫mock数据，^_^），但是小刘的ajax的借口写的是与后端叔叔商量好的绝对路径（域名+请求路径+请求参数，跨域问题已解决），因为这是以后真正的请求路径，所以小刘又不像先写本地相对路径，后期再来修改（万一后台叔叔开发的慢了，鬼知道有多少接口要修改呀）。于是他就迷茫了。。。

仔细看看这其实就是前后端分离中的mock数据和联调的问题，就现在来说能解决的方式有很多种。先说mock数据，gulp，webpack，fekit（去哪儿网的一款前端自动化构建工具，据说历史比webpack和gulp都要久远）等等自动化构建工具都有mock数据的功能，这不是问题；再说绝对路径的问题，其实只需要做一个host的映射就行了。