今越星礼
在前两篇文章中, 分别介绍了 `vue-router` 的[整体流程](https://github.com/dwqs/blog/issues/53)和[组件](https://github.com/dwqs/blog/issues/54), 对 `history` 的细节没有具体分析, 这一篇就具体来分析下 `history` 的实现. >本文分析的 vue-router 的版本为 2.6.0 ## History 实例化 在[整体流程](https://github.com/dwqs/blog/issues/53)一文中有提到, VueRouter 提供了 `HTML5History`、`HashHistory` 以及 `AbstractHistory` 三种方式. 在 VueRouter 实例化的同时, 会对 History 实例化,...
## 引言 [gulp](http://gulpjs.com/) 是基于 [Nodejs](http://nodejs.org/) 的自动任务运行器，能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，gulp 借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单.  ## Gulp 安装 安装 gulp 之前，先安装 Node.js，然后全局安装gulp： ``` npm install -g gulp ``` 安装完之后，可以检测gulp的版本：  全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行： ``` npm install gulp ``` 如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：...
Linux一般将文件可存取访问的身份分为3个类别：owner、group、others，且3种身份各有read、write、execute等权限。 ## 一、用户和用户组 #### 1、文件所有者 由于Linux是多用户、多任务的操作系统，因此可能常常有多人同时在某台主机上工作，但每个人均可在主机上设置文件的权限，让其成为个人的“私密文件”，即个人所有者。因为设置了适当的文件权限，除本人（文件所有者）之外的用户无法查看文件内容。 例如某个MM给你发了一封Email情书，你将情书转为文件之后存档在自己的主文件夹中。为了不让别人看到情书的内容，你就能利用所有者的身份去设置文件的适当权限，这样，即使你的情敌想偷看你的情书内容也是做不到的。 #### 2、用户组 用户组最有用的功能就体现在多个团队在同一台主机上开发资源的时候。例如主机上有A、B两个团体，A中有a1,a2,a3三个成员，B中有b1,b2两个成员，这两个团体要共同完成一份报告F。由于设置了适当的权限，A、B团体中的成员都能互相修改对方的数据，但是团体C的成员则不能修改F的内容，甚至连查看的权限都没有。同时，团体的成员也能设置自己的私密文件，让团队的其它成员也读取不了文件数据。在Linux中，每个账户支持多个用户组。如用户ab1即可属于A用户组，也能属于B用户组。 #### 3、其他人 这个是个相对概念。打个比方，大明、二明、小明一家三兄弟住在一间房，房产证上的登记者是大明，那么，大明一家就是一个用户组，这个组有大明、二明、小明三个成员；另外有个人交张三，和他们三没有关系，那么这个张三就是其他人了。 同时，大明、二明、小明有各自的房间，三者虽然能自由进出各自的房间，但是小明不能让大明看到自己的情书、日记等，这就是文件所有者（用户）的意义。 #### 4、超级用户 在Linux中，还有一个神一样存在的用户，就是root。之所以称为超级用户，因为在所有用户中它拥有最大的权限 ，也管理着普通用户。 #### 5、相关文件 在Linux系统中，默认的系统账户和普通账户信息记录在/etc/passwd文件中，个人密码在/etc/shadow文件下，用户组名称记录在/etc/group，所以，这三个文件是不能随便删的。 ## 二、Linux文件权限的概念 要设置权限，就需要知道文件的一些基本属性和权限的分配规则。在Linux中，ls命令常用来查看文件的属性，ls是list的缩写，用于显示文件的文件名和相关属性。 ``` [root@www ~]# ls -al total...
React自发布以来吸引了越来越多的开发者，React开发和模块管理的主流工具webpack也被大家所熟知。那么webpack有哪些优势，可以成为最主流的React开发工具呢？ ## Webpack是什么 CommonJS和AMD是用于JavaScript模块管理的两大规范，前者定义的是模块的同步加载，主要用于NodeJS；而后者则是异步加载，通过requirejs等工具适用于前端。随着npm成为主流的JavaScript组件发布平台，越来越多的前端项目也依赖于npm上的项目，或者自身就会发布到npm平台。因此，让前端项目更方便的使用npm上的资源成为一大需求。 web开发中常用到的静态资源主要有JavaScript、CSS、图片、Jade等文件，webpack中将静态资源文件称之为模块。webpack是一个module bundler(模块打包工具)，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。Webpack对它们进行统一的管理以及打包发布，其官方主页用下面这张图来说明Webpack的作用：  Webpack具有requireJs和browserify的功能，但仍有很多自己的新特性： ``` 1. 对 CommonJS 、 AMD 、ES6的语法做了兼容 2. 对js、css、图片等资源文件都支持打包 3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持 4. 有独立的配置文件webpack.config.js 5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间 6. 支持 SourceUrls 和 SourceMaps，易于调试 7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活...
在JavaScript中，创建数组可以使用Array构造函数，或者使用数组直接量[],后者是首选方法。Array对象继承自Object.prototype,对数组执行typeof操作符返回object而不是array。然而，[] instanceof Array也返回true。也就是说，类数组对象的实现更复杂，例如strings对象、arguments对象，arguments对象不是Array的实例，但有length属性，并能通过索引取值，所以能像数组一样进行循环操作。 在本文中，我将复习一些数组原型的方法，并探索这些方法的用法。 - 循环：.forEach - 判断：.some和.every - 区分.join和.concat - 栈和队列的实现：.pop, .push, .shift,和 .unshift - 模型映射：.map - 查询：.filter - 排序：.sort - 计算：.reduce和.reduceRight - 复制：.slice - 强大的.splice - 查找：.indexOf -...
 [Search engines](http://www.theguardian.com/technology/searchengines) are pretty good at finding what you’re looking for these days, but sometimes they still come up short. For those occasions there are a few little known...
在之前的两篇关于构建模块化的文章中，谈到了 [rem & em](http://zellwk.com/blog/rem-vs-em/) 和 [响应式排版](http://zellwk.com/blog/responsive-typography/)，而在文章的评论中，对基于视口单位的网页排版抱有很大的想象空间。 由于视口单位涉及到计算，有一段时间我是抵制在工作使用视口单位。但就在上周，我克服了心中的抵制情绪，开始去了解视口单位在网页排版中的使用。在深入介绍视口单位以及其在网页排版中的工作原理时，先了解下有哪些常见的视口单位。 ### 视口单位是什么？ 在 CSS 规范中，有4种类型的可用视口单位： - `vw` --- 1vw 等于视口宽度的 1% - `vh` --- 1vh 等于视口高度的 1% - `vmin` --- vw 和 vh...
前段时间，写了篇关于React的文件：[React：组件的生命周期](https://github.com/dwqs/blog/issues/15)，比较详细的说了下React组件的生命周期。 说道 [React](https://github.com/facebook/react)，很容易可以联想到 [Flux](http://facebook.github.io/flux/docs/overview.html)。今天以 [React 介绍及实践教程](http://www.ibm.com/developerworks/cn/web/1509_dongyue_react/index.html) 一文中的demo为示例，简单说说 Flux 的开发方式。 ### Flux是什么 Flux 是 Facebook 用户建立客户端 Web 应用的前端架构， 它通过利用一个单向的数据流补充了 React 的组合视图组件。 Flux 的设计架构如图：  Flux 架构有三个主要部分：Dispatcher 、Store 和View(React 组件)。Store 包含了应用的所有数据，Dispatcher 负责调度，替换了...
git 是一个非常棒的源代码管理工具，它的使用已经完全整合到开发的工作流当中；同时，git 还是一个 review/OTAP/deployment 工具。 当在 CLI 中使用 git 时，有时必须输入很多比较长的命令来完成一些事情。尽管大部分 git 命令是很简单的，但是也有一些非常复杂并难以输入的命令。而开发人员是比较懒的，并会尽可能的少输入命令。 因为上述情况很符合我，所以对于我经常使用的 git 命令，我会使用其别名来代替，并会改进命令的返回信息。在这篇文章中，我会介绍一些简单但非常有用的 git 别名。 ### 简化常用的 git 命令的别名 一些 git 别名非常简单，用这些别名替换原始的 git 命令也意味着减少你的输入，这有一个别名列表： ``` co = checkout...
最近阅读了《精通CSS: 高级Web标准解决方案》，书的内容不错，初学者可以用来入门，有经验的人也可以用来查漏补缺，上面对于浏览器兼容和常见bug的解决方案值得参考。 ## 选择器的层叠和特殊性 对于同一个元素，可能会有多个规则，为了解决规则之间的冲突，CSS 会利用 层叠 给每个规则分配一个重要度： 1. 标有 !important 的用户样式 2. 标有 !important 的作者样式 3. 作者样式 4. 用户样式 5. 浏览器/用户代理应用的样式 层叠优先级依次降低，优先级相同的规则，后定义的规则优先。为了计算规则的特殊性，可以给每种选择器分配一个数值，然后，将规则的每个选择器的值加在一起，计算出规则的特殊性。 对于一个选择器，其特殊性分为4个成分等级：a, b, c 和 d 1. 如果样式是行内样式，那么a=1...