此博客将不再更新文章，但会再保留2个月左右的时间，等到将上面的部分博文迁移到新的博客地址后，会关闭此博客。新的博客地址：https://github.com/dwqs/blog转载请注明：淡忘~浅思»博客迁移通知 ...继续阅读 (28)

本文参考Git – Useful Tips一文翻译，不当之处，敬请谅解这篇文章的目的是给经常使用git管理项目提供一个有益的提醒。如果你是git新手，可以先阅读文后的引用部分，然后在回头阅读此篇文章。在介绍git命令之前，你可以先看看来自on-my-zsh提供的别名。基本命令git config --global user.name "Your Name"git config --global user.email "youremail@example.com"git config --global core.editor <your favorite editor here>Ex:git config --global core.editor vimgit init：初始化一个repo。Commit 结构git status(gst)：查看 repo 状态工作区：.git 目录暂存区工作目录git add <filename>(ga)：添加一个文件到暂存区git add .(gaa)：添加所有文件到暂存区git add *.js：添加所有后缀为js的文件到暂存区git rm --cached <file>：从暂存区删除一个新文件git commit -m "My first comm ...继续阅读 (36)

从填志愿开始讲吧。阴差阳错高三填志愿的时候，我都是考虑医学院校或者医学专业。那时，我就想着以后毕业去当医生，穿着白衣大褂，拯救人类于病痛之中。梦想是要有的，实现不了也没关系啊。做梦所想也是梦想。我向往中南，所以我把第一志愿填了中南的医学类专业。北有协和，南有湘雅，中南的医学实力在全国也是能排上名号的。第二志愿是湖南中医药大学，第三志愿是南华大学。以我当时的高考分数，去后面两所大学之一是没有问题的，因为在12年4月份时，这两所大学刚晋升为一本类院校。在填报志愿的前天晚上，我找高中的英语老师咨询关于志愿填报的事。她看了我的意向之后，就建议我报一所省外的医学院校试试，她觉得报省内挺浪费我分数的。我她的推荐下，我将第二志愿改成了广州中医药大学。2012年9月12日，拖着一路陪着我的行李，来到了H栋的报到点。医学信息工程专业，一听就感觉高大上。大一时，我们有一门《中医学概论》的课程，真的有学医哦，哇喔，真棒，离我的梦想更近一步了。但梦想的羽翼再丰满也依旧逃不过现实的骨感，终究是 Too Young Too Simple。后来，在师兄的悉心教导下，才明白，我们学院挂着医学的牌子，计算机应用方向才是王道。抱着学医的心，却阴差阳错的走上了计算机应用方向的路。寻找自我刚踏入大学的我，摆脱高中苦海的兴奋依在，对周围一切的好奇、对大学生活的迷茫和一副幼稚的笑脸也依在。我并不知道我的专业是干什么的，要学什 ...继续阅读 (16)

在之前的两篇关于构建模块化的文章中，谈到了rem & em和响应式排版，而在文章的评论中，对基于视口单位的网页排版抱有很大的想象空间。由于视口单位涉及到计算，有一段时间我是抵制在工作使用视口单位。但就在上周，我克服了心中的抵制情绪，开始去了解视口单位在网页排版中的使用。在深入介绍视口单位以及其在网页排版中的工作原理时，先了解下有哪些常见的视口单位。视口单位是什么？在 CSS 规范中，有4种类型的可用视口单位：vw— 1vw 等于视口宽度的 1%vh— 1vh 等于视口高度的 1%vmin— vw 和 vh 中的较小值vmax— vw 和 vh 中的较大值视口，即浏览器屏幕大小，1vw 等于浏览器宽度的 1%，100vw 即整个浏览器的宽度。视口的单位大小会根据视口大小的改变自动计算，视口大小的改变常发生于页面加载、页面缩放或者屏幕方向的改变(横纵切换)。正因为如此，创建一个大小总为视口四分之一大小的容器是非常容易滴：.component { width: 50vw; height: 50vh; background: rgba(255, 0, 0, 0.25) }将视口单位用于网页排版将视口单位用于网页排版的唯一理由就是视口的单位大小会根据客户端浏览器的视口大小自动计算。也就是说，我们不必明确地通过媒体查询来声明字 ...继续阅读 (25)

我一般都喜欢去一些技术类博客社区或者 UGC 社区浏览文章，相信与我同类的你应该也有这爱好。为了方便自己的阅读，而不用一个一个打开目标网站的地址，就基于 Node+React 写了一个小爬虫:Tech-Read，用于抓取常去的 UGC 社区的文章摘要。目前的版本大概样子如下：在线地址：Tech-Readgithub 地址：tech-read开发Tech-Read是个人的一个业余项目，初衷是方便自己阅读，实在是懒于去社区网站阅读，其次用于练手喽，毕竟最近在学点新东西。在工作上，接触的技术栈是 Node + React，所以 TR 也采用了 Node + React 的技术栈。React 用于前端界面渲染，Node 用于抓取网页，并将解析后的 DOM 数据返回给前端调用。前端的请求是用fetch发起的，由于部分社区做了跨域设置，So 用 Node 能帮我解决一些跨域的问题：以及在fetch中解析 DOM 时碰到的诸如Uncaught (in promise) TypeError: unexpected token <...等杂七杂八的错误。并且 Node 端提供了直接操作 DOM 节点的cheerio，它是 jQuery 的一个子集实现，能非常方便的操作 DOM 元素。所以，目前我把 DOM 解析放在了 Node 端，前端只负责渲染。所以，现在的处理流程如下：由于目前业务比较简单 ...继续阅读 (45)

在 Web 应用中，JavaScript 通过XMLHttpRequest(XHR)来执行异步请求，这是一种有效改进页面通信的技术，当我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的 Ajax。虽说 Ajax 很有用，但它不是最佳 API，它在设计上不符合职责分离原则，将输入、输出和用事件来跟踪的状态混杂在一个对象里。而且，基于事件的模型与现在 JavaScript 流行的 Promise 以及基于生成器的异步编程模型相背驰。本文将要介绍的内容则是XMLHttpRequest 的最新替代技术——Fetch API， 它是 W3C 的正式标准。兼容性在介绍之前，先看看目前主流浏览器对 Fetch API 的支持情况：Fetch 的支持目前还处于早期的阶段，在 Firefox 39 以上，和 Chrome 42 以上都被支持了。如果你现在就想使用它，还可以用Fetch Polyfil，用于支持那些还未支持 Fetch 的浏览器。在使用 Fetch 之前，也可以对其进行功能性检测：if(self.fetch) { // run my fetch request here } else { // do something with XMLHttpRequest? }简单的fetching示例在Fetch API中，最常用的就是 fetch() 函数 ...继续阅读 (10)

接着koa源码解读一文中的末尾接着唠嗑 koa-router。链式调用在 koa 中，对中间件的使用是支持链接调用的。同样，对于多个路径的请求，koa-router 也支持链式调用：router .get('/', function *(next) { this.body = 'Hello World!'; }) .post('/users', function *(next) { // ... }) .put('/users/:id', function *(next) { // ... }) .del('/users/:id', function *(next) { // ... });因为每个动词方法都会返回router本身：methods.forEach(function (method) { Router.prototype[method] = function (name, path, middleware) { var middleware; if (typeof path === 'string' || path instanceof RegExp) { middleware = Array.prototype.slice.call(arguments, 2); ...继续阅读 (17)

Koa是一个类似于Express的Web开发框架，创始人也都是TJ。Koa 的主要特点是，使用了 ES6 的 Generator 函数，进行了架构的重新设计。Koa 的原理和内部结构很像 Express，但是语法和内部结构进行了升级。创建Koa应用创建一个 koa 非常简单：var koa = require('koa'); var app = koa(); app.listen(3000);或者可以酱紫：var koa = require('koa'); var http = require('http'); var app = koa(); http.createServer(app.callback()).listen(4000);这两种方式在 koa 内部是等价的，在 Application 模块中，listen就会调用自身的callback：//listen的实现 app.listen = function(){ debug('listen'); var server = http.createServer(this.callback()); return server.listen.apply(server, arguments); };callback返回的函数会作为server的回调：app.callback = function(){ ...继续阅读 (25)

对于大多数开发者来说，JavaScript 的 this 关键字会造成诸多困扰。由于 JavaScript 不具备如 Java 等语言的严格类模型，因而除非是在处理回调，否则代码中的this指向并不清晰。一般来说，对于部分运行中的代码(非回调)会通过new关键字和Function.prototype提供的一些方法，如call/apply等来绑定函数的上下文。问题在每个class中，React 使用this指向组件本身，这会给开发者造成一些困扰。如在 React 组件中，可能会经常看到类似如下的代码：this.setState({ loading: true }); fetch('/').then(function loaded() { this.setState({ loading: false }); });上述代码会造成TypeError，因为this.setState不是一个函数。抛出TypeError的原因是当 promise 的回调被调用时，内部的上下文已经改变了，this指向了错误的对象。那么，怎么正确绑定代码中的this呢？选择本文提供的 6 种方式中，有一些是比较老的技术，另一些是针对 React 的，还有一些可能浏览器也不支持，但还是值得探讨一下。1、this 别名这种方式就是在 React 组件的作用域顶端创建一个指向this的变量：var compone ...继续阅读 (23)

如果你正在规划一个新的前端项目或者重构现有的项目，可能就会发现，你已经跟不上前端生态的变化了，因为现在有太多的技术栈供你选择：React、Flux、Angular、Aurelia、Mocha、Jasmine、Babel、TypeScript,、Flow……这些技术栈的出现试图开发变得简单，但有一部分却增加了学习成本和项目维护的不稳定性，因为技术栈的变化速度太快了。尽管这样，但是好消息是，前端生态的技术栈开始变得稳定了，部分项目进行了合并，技术的最佳实践也越来越清晰了，有人已经开始基于上述的技术栈而不是新框架来规划项目了。本文主要介绍一些我在 Web 应用中所涉及和推崇的技术，由于一些技术还存在争议，所以基于个人所见和经验，对每一项技术只做简单的介绍和分析。核心库：React组件化的 UI 方便开发、维护以及管理，学习成本也低JSX 的语法能在 HTML 中极大发挥 js 的优势天生适合结合Flux和 Redux强大而活跃的社区，各种周边层出不穷单向数据流比双向数据绑定的方式更适合复杂应用程序支持服务端渲染应用生命周期：ReduxReact 提供了视图和组件层，但还需要某个东西来管理应用的状态和生命周期。Redux则成为首选。和 React 一起，Facebook 提供了一种被称为Flux的单向数据流设计模式。Flux 基本实现了简化组件状态管理的承诺，但也带 ...继续阅读 (18)

input的宫格输入在做项目的对外分享时，分享有两种：一种是公开的，一种是私密的。私密的需要提取码，需要提取码就需要输入框。正常的输入框是这样的：不正常的输入框就是这样子的：后面的这种方式在手机端比较常见的，譬如支付宝和微信支付的密码输入。有两种实现方式，先说简单的。简单的实现思路是设置一个等大的input框和div，然后通过设置z-index，将input置于div上面，同时将input框的opacity设置趋近于 0，所以 HTML 结构应该是类似酱紫的：<input type="text" value='提取码' maxLength="6" autoComplete="off"/> <div id='pwd'> <span>宫格1</span> <span>宫格2</span> <span>宫格3</span> <span>宫格4</span> <span>宫格5</span> <span>宫格6</span> <span class='custom-cursor'></span ...继续阅读 (18)

2016.2.24 周三 晴年后的北京，天气出奇的好，暖阳四射，微风荡漾。抬头仰望，蔚蓝的天空，挂不住一点白云。好了，装逼完毕，进入正题。今天，亲爱的团支书在班级群里发了一条很重要但并没有什么卵用的长篇通知，因为除了寒假作业这个字，其它基本是废话。看到寒假作业四个大字。第一反应是：卧槽，怎么还有寒假作业！！！然后又看了下相关群文件，大四狗的作业主题就是毕业随想(其实自身都还没走完毕业这个过程，写随想不是瞎扯吗)。大概在10个月前，我给自己的大学画上了句号。从那之后，我就慢慢学着，尽量让自己对事情的思维跳出大学的象牙塔。现在再来看这篇文章，还是觉得以前的一些想法挺幼稚的。譬如，永远不想回广州的想法就是个伪命题，它只符合对我当时心境的一种描述；对于文中写的大学唯一的遗憾，如果时间能倒流(虽然我长得丑，但是我想得美啊！！！O(∩_∩)O哈哈~)，我肯定不写了，这™写的啥？按照百度词典的解释，遗憾是由无法控制的或无力补救的情况所引起的后悔。人的情感表达不仅跟人的年龄有关，还跟人的阅历有关，后者占主导。写博客就有这么一个好处，能记录自身的成长痕迹。当一年后、三年后、五年后甚至十年后，你再回过头来看自己写的东西，脑子肯定会冒出一些奇怪的想法。卧槽，这是我写的吗？怎么写的这么幼稚？但是，又有几人能看到你彼时脸上那份惬意的笑容呢？如今，在时间维度上，不再年少轻狂的我已经前脚踏上了诺亚方舟中的毕业号 ...继续阅读 (15)

在Medium上看到了两篇关于写高质量JavaScript代码的文章，觉得不错，特此搬过来，记下一笔，以待后续查阅。JavaScript 作为最受欢迎的编程语言之一，被广泛应用在各个领域：网站、服务端、游戏、操作系统等。跟人类一样，编程语言也是随着时间的推移慢慢进化的，而在进化的过程中，其创建者也会做出一些现在看来很糟糕的决定，给语言加入一些诟病。但是，开发人员也花费了很多时间去总结了很多最佳实践来消除语言自身诟病带来的影响。如果没有特别的缘由，就应该遵循这些最佳实践，而不是重新造轮子。1、使用var声明变量使用var，会在变量定义之处所在的作用域定义一个变量，如果忽略了var，则该变量会被添加到全局环境(window 对象)。所有人都知道，全局变量非常邪恶。2、严格模式在JavaScript文件中以'use strict'(双引号)开始，这能阻止使用 JavaScript 的一些不好的实践，想了解更多关于严格模式的信息，戳此：Strict mode-Mozilla Developer Network3、使用IIFE–Immediately Invoked Function Expression将代码放进一个立即执行函数中，这会对 JavaScript 文件中定义的变量和函数进行封装而不会被添加到全局环境，也不会污染全局环境。想了解更多，戳此：IIFE4、使用驼峰表示法 ...继续阅读 (13)

Hey there! Today we are going to talk about some useful tricks in CSS. Let's begin with…在这篇文章中我们会谈论一些有用的 CSS 技巧…Blend Modes混合模式Not so far Firefox and Safari started to support blend modes right as Photoshop does. It also works in Chrome and Opera but with flags. See an example:到目前为止，Firefox 和 Safari 已经能和 Photoshop 一样支持混合模式了，Chrome 和 Opera 也通过带私有标志(-webkit- & -o-)支持，看一个示例：You can create different styles. Here's a code of what is going above:你可以创建不同的混合风格。上述示例的代码如下：.blend { background: #fff; } .blend img { mix-blend-mode: darken; }来试试混合模式和过滤Gradient Borders边框渐变Novadays yo ...继续阅读 (16)

Search enginesare 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 tricks which come in handy.目前来说，搜索引擎很擅长找到你需要的信息，但有时搜索结果并不如人意。在这种场合下，知道一些鲜为人知的小技巧是很有用的。So here are some tips for better googling (as it’s the most popular search engine) but many will work on other search engines too.下面会介绍 10 个谷歌(最受欢迎的搜索引擎)搜索技巧，当然，这10 个技巧也可以用于其它搜索引擎。1. Exact phrase1. 准确搜索The simplest and most effective way to search for something specific is to use quote marks around a phrase or name to search for those exact words ...继续阅读 (20)

git 是一个非常棒的源代码管理工具，它的使用已经完全整合到开发的工作流当中；同时，git 还是一个 review/OTAP/deployment 工具。当在 CLI 中使用 git 时，有时必须输入很多比较长的命令来完成一些事情。尽管大部分 git 命令是很简单的，但是也有一些非常复杂并难以输入的命令。而开发人员是比较懒的，并会尽可能的少输入命令。因为上述情况很符合我，所以对于我经常使用的 git 命令，我会使用其别名来代替，并会改进命令的返回信息。在这篇文章中，我会介绍一些简单但非常有用的 git 别名。简化常用的 git 命令的别名一些 git 别名非常简单，用这些别名替换原始的 git 命令也意味着减少你的输入，这有一个别名列表：co = checkout # Checkout a branch cob = checkout -b # Checkout a new not yet existing branch f = fetch -p # Fetch from a repository and prune any remote-tracking references that no longer exist on the remote. c = commit # Commit you changes p = pu ...继续阅读 (8)

7.15，我拿到了我的工牌。那是中午12点了，去三楼办理入职时还要一张电子照片，但身上没带，于是凯哥直接用手机当场帮我照了一张，背景是公司的墙。现在想想，我应该带一张帅气的电子照片在身上的~~~~1.15，掐指一算，快要发工资了(钱包早已经空了)，也刚好来美团半年了。这半年，是我大学四年成长最快、见识最多和认识自己的半年，也是认识你们的半年。选择忘记一些人和事，因为碰到了新的人和事。或许是保持一个平衡吧，想到了未命铭(很牛的人，神一样的存在，哈哈~~美团到处是牛人)说的一句话：事物的复杂度不会凭空消失，只会从一个事物转移到另一个事物。2015 已经过去了，我觉得这一年对我还是有很多影响的，所以我觉得需要好好总结一下，因为有可能这会是我写的最认真的一份年度总结了~~~以后也是老油条了，哈哈O(∩_∩)O，你懂的。我发现，15是一个有趣的数字。7.15 发生了很多事，如我入职美团(2015)，江南Style发布(2012)，澳门历史城区被列入《世界遗产名录》，优衣库上头条(2015)，七一五政变(1927)等，但是我和优衣库是无关的。一、工作熟悉了Mac、git、一些前端规范、测试框架和业务开发流程，这是前两周(7.15~7.24)的主要内容。第一次用Mac，各种陌生。乡下人进城也就是这种感觉吧。后面用熟悉了，欧操，贼爽。Coder就应该用Mac，它就是一件艺术品，瞬间觉得Window ...继续阅读 (11)

var sum = 0; for(var i = 0; i < 10; i++) { sum += 0.1; } console.log(sum);上面的程序会输出1吗？在你有必要知道的 25 个 JavaScript 面试题一文中，第 8 个题浅显的说了下 js 为什么不能正确处理小数运算的问题。今天重拾旧题，更深层次的剖析下这个问题。但要先说明的是，不能正确处理小数的运算并不是 JavaScript 语言本身的设计错误，其它高级编程语言，如C，Java等，也是不能正确处理小数运算的：#include <stdio.h> void main(){ float sum; int i; sum = 0; for(i = 0; i < 100; i++) { sum += 0.1; } printf('%f\n', sum); //10.000002 }数在计算机内部的表示我们都知道，用高级编程语言编写的程序需要经过解释、编译等操作转变成 CPU(Central Processing Unit) 可以识别的机器语言才能运行，而对 CPU 来说，它不识别数的十进制、八进制和十六进制等，我们在程序中声明的这些进制数都会被转成二进制数进行运算。为什么不是转换成三进 ...继续阅读 (25)

你有必要知道的 25 个 JavaScript 面试题1、使用typeof bar === "object"判断bar是不是一个对象有神马潜在的弊端？如何避免这种弊端？使用typeof的弊端是显而易见的(这种弊端同使用instanceof)：let obj = {}; let arr = []; console.log(typeof obj === 'object'); //true console.log(typeof arr === 'object'); //true console.log(typeof null === 'object'); //true从上面的输出结果可知，typeof bar === "object"并不能准确判断bar就是一个 Object。可以通过Object.prototype.toString.call(bar) === "[object Object]"来避免这种弊端：let obj = {}; let arr = []; console.log(Object.prototype.toString.call(obj)); //[object Object] console.log(Object.prototype.toString.call(arr)); //[objec ...继续阅读 (15)

Node.js 测试：Mocha 和 Chai这篇文章主要是介绍 JavaScript 测试框架Mocha在 Node.js Restful API 测试中的使用。为什么需要测试？进入主题之前，先说说测试的必要性。你可以从repo获取 CRUD 应用的 Node/Express 样本：$ git clone https://github.com/mjhea0/node-mocha-chai-tutorial.git $ git checkout tags/v1在你获取 v1 app 之后，可以检查一下代码并通过 cURL(或HTTPie或Postman) 测是每一个 CRUD 函数：1、添加新的 blobs2、查看所有的 blobs3、查看单个的 blob4、更新单个的 blob5、删除单个的 blob这个过程有点乏味，试想如果给应用添加一个新特性你都要手动的按照同样的过程检查一遍会怎么样呢？这不仅会浪费大量时间，而且不是可靠的。因此需要在测试应用程序中建立一个自动化测试框架，因而可以在几秒钟之内运行上百个测试。于是在运行测试之前，先安装 Mocha：$ npm install -g mocha@2.3.1全局安装 mocha，因而能在终端直接运行 mocha结构为了构建基本的测试单元，先在项目根目录创建一个名为test的文件夹，然后进入到该目录，并添加一个test-server. ...继续阅读 (15)

前段时间，写了篇关于React的文件：React：组件的生命周期，比较详细的说了下React组件的生命周期。说道React，很容易可以联想到Flux。今天以React 介绍及实践教程一文中的demo为示例，简单说说 Flux 的开发方式。Flux是什么Flux 是 Facebook 用户建立客户端 Web 应用的前端架构， 它通过利用一个单向的数据流补充了 React 的组合视图组件。Flux 的设计架构如图：Flux 架构有三个主要部分：Dispatcher 、Store 和View(React 组件)。Store 包含了应用的所有数据，Dispatcher 负责调度，替换了 MVC中 的Controller，当 Action 触发时，决定了 Store 如何更新。当 Store变化后，View 同时被更新，还可以生成一个由Dispatcher 处理的Action。这确保了数据在系统组件间单向流动。当系统有多个 Store 和 View 时，仍可视为只有一个 Store 和一个 View，因为数据只朝一个方向流动，并且不同的 Store 和 View 之间不会直接影响彼此。Flux的简单开发在颜色盘的demo中，对界面的组件划分是这样的：用户在 ColorPanel(View) 上产生一个 Action，Action 将数据流转到 Dispatcher，Dispatcher 根据 ...继续阅读 (40)

最近阅读了《精通CSS: 高级Web标准解决方案》，书的内容不错，初学者可以用来入门，有经验的人也可以用来查漏补缺，上面对于浏览器兼容和常见bug的解决方案值得参考。选择器的层叠和特殊性对于同一个元素，可能会有多个规则，为了解决规则之间的冲突，CSS 会利用层叠给每个规则分配一个重要度：1、标有 !important 的用户样式2、标有 !important 的作者样式3、作者样式4、用户样式5、浏览器/用户代理应用的样式层叠优先级依次降低，优先级相同的规则，后定义的规则优先。为了计算规则的特殊性，可以给每种选择器分配一个数值，然后，将规则的每个选择器的值加在一起，计算出规则的特殊性。对于一个选择器，其特殊性分为4个成分等级：a, b, c 和 d1、如果样式是行内样式，那么a=12、b是ID选择器的个数3、c是类、伪类和属性选择器的个数4、d是类型/标签选择器和伪元素选择器的个数通配符和继承得到的CSS属性对特殊性没有影响。看一个 demo：选择器规则h2的最终颜色是灰色的，从规则的特殊性分析一下(从左至右依次是abcd的值)选择器特殊性以10为基数的特殊性#content div#main-content h20,2,0,2202#content #main-content>h20,2,0,1201body #content div[id='main-content'] ...继续阅读 (23)

在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。实例化当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：1、getDefaultProps2、getInitialState3、componentWillMount4、render5、componentDidMount当组件在服务端被实例化，首次被创建时，以下方法依次被调用：1、getDefaultProps2、getInitialState3、componentWillMount4、rendercomponentDidMount 不会在服务端被渲染的过程中调用。getDefaultProps对于每个组件实例来讲，这个方法只会调用一次，该组件类的所有后续应用，getDefaultPops 将不会再被调用，其返回的对象可以用于设置默认的 props(properties的缩写) 值。varHello=React.creatClass({getDefaultProps:function(){return{name:'pomy',git:'dwqs'}},render:function(){return(<div>Hello,{this.pro ...继续阅读 (19)

什么是HexoHexo是一个简单地、轻量地、基于Node的一个静态博客框架，可以方便的生成静态网页托管在github和Heroku上，引用Hexo作者@tommy351的话：快速、简单且功能强大的 Node.js 博客框架。A fast, simple & powerful blog framework, powered by Node.js.GitHub Pages是什么？GitHub Pages 可以被认为是用户编写的、托管在github上的静态网页。由于它的空间免费稳定， 可以用于介绍托管在github上的Project或者搭建网站。有两种形式: Project Site 和 User/Org Site，二者之间的差异可以戳GitHub Pages。基于 GP 创建Site是很方便的，这有一个简单的教程：学习 Github Page 教你分分钟搭建自己的博客gp 生成的网站的默认域名是username.github.io或者username.github.io/project-name，但gp是支持自定义域名的：Custom Domain Name。购买域名之后，可以和默认的二级域名进行绑定，教程参考：购买域名、设置DNS更多关于gp的信息，可以戳：Github Pages HelpHexo 的安装由于 Hexo 是基于Node，安装前要先安装 Node。我的系统环境 ...继续阅读 (21)

在一次浏览器公众号信息的时候，看到了老杨和她运营的公众号。看了几篇公众号的文章后，觉得还挺喜欢的，就买了与公众号同名的书：《请尊重一个姑娘的努力》。最近两个月，我特别喜欢看书，小说、杂说、网络文学、技术类、传记、战争等题材都看。我也不知道为什么，但希望能一直保持这种求知欲。9月初的北京，秋高气爽，但雾霾，从不会迟到。打开电脑，无所事事的浏览网页，不知为何脑子里就蹦出想去逛逛书店的想法，随后，就去知乎上搜索了类似于北京有什么值得一去的书店的问题，并且还真找到了切合我意的答案。从那之后，我每周都会去逛书店，走进一个书店，拿着一本书，随意而坐，一看就是整天，这个习惯一个坚持到了十一，因为某些极不情愿的原因，十一我回广州了，这座我原本不打算再回来的城市，但我的学业还在这里，目前来说是的。广州的空气质量比北京强太多，绿化好很多，而且人少车少，北京有18条地铁线在运行，6条在建，我住在亚洲最大的小区，随处都是可见的停车场。跟北京比，坐广州的地铁简直就是一种享受！！！但我觉得坐北京公交比较爽，人少，因为大家都喜欢去挤地铁，广州刚好相反吧。广州没有给我留下美好的回忆，或许在广州舒适太久了，或许为了逃避某些东西，思索再三的我还是成为了一个小北漂，但广州却给我留下了一些值得回忆的人和事。在北京时，偶尔会回到跟这些人和事交织在一起的时刻。9月份加上十一，去过不少北京书店：中关村的言几又(3W咖啡馆斜对面 ...继续阅读 (19)

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特性webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：1.对CommonJS、AMD、ES6的语法做了兼容2.对js、css、图片等资源文件都支持打包3.串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展 ...继续阅读 (31)

返回顶部使用JQuery的animate和scrollTop方法可以创建简单地返回顶部的动画：// Back to top$('a.top').click(function(e){e.preventDefault();$(document.body).animate({scrollTop:0},800);});HTML中得有一个按钮：<!-- Create an anchor tag --><aclass="top"href="#">Back to top</a>可以改变scrollTop的值来定位滚动条的位置。图片预加载如果页面使用了很多不是最初加载便可见的图片，有必要进行预加载：$.preloadImages=function(){for(vari=0;i<arguments.length;i++){$('img').attr('src',arguments[i]);}};$.preloadImages('img/hover-on.png','img/hover-off.png');判断图片是否完全加载有时需要图片完全加载才能进行后面的操作，下面的这段脚本可以实现：$('img').load(function(){console.log('image load successful');});你也可以通过带id或者class的img标签 ...继续阅读 (17)

续说wait()在Promise基础的末尾，说到了promise状态更改的问题。vardtd=$.Deferred();// 新建一个deferred对象varwait=function(dtd){vartasks=function(){alert("执行完毕！");dtd.resolve();// 改变deferred对象的执行状态//dtd.reject(); 改变Deferred对象的执行状态};setTimeout(tasks,5000);returndtd;};//wait()函数运行完，就会自动运行done()方法指定的回调函数。$.when(wait(dtd)).done(function(){alert("哈哈，成功了！");}).fail(function(){alert("出错啦！");});因为dtd是全局对象，会引发在wait()函数外更改dtd状态的问题。在Deferred对象中，还可以接受一个函数名(注意:是函数名)构建deferred对象：jQuery.Deferred( [beforeStart ] )beforeStartType: Function( Deferred deferred )A function that is called just before the constructor returns.保持wait不变，将其传给$.De ...继续阅读 (9)

前言在网站开发中，会经常处理各种事件，如mouseclick/mouseover/click等等。在DOM 0事件模型，采取的事件监听方式是ele.onclick=handler，这会导致一个问题，如果想用hanlder2来监听click，则hanlder就会被覆盖，不会执行了，因为一次只能安排一个监听函数。但在DOM 2事件模型中，使用DOM方法中的addEventListener来添加事件监听就能解决这个问题，它支持你为一个事件添加多个处理程序。Ajax的调用也经历了类似的过程。在JQuery 1.5之前，Ajax仅支持一个回调函数，但在JQuery的1.5版本中，引入了Deferred对象，它允许注册多个回调函数，并且能传递任何同步或异步函数的执行状态–成功或失败。简单说，Deferred对象就是jQuery的回调函数解决方案，它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。什么是PromisePromise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算。回顾一下在JQuery 1.5之前，传统的Ajax操作写法：$.ajax({url:"/ServerResource.txt",success:successFunction,error:errorFunction});$.ajax()操作完成后 ...继续阅读 (40)

什么是BFC在一个Web页面的CSS渲染中，块级格式化上下文(Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline-blocks,table-cells,和table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：1、float的值不是none。2、position的值不是static或者relative。3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex4、overflow的值不是visibleBFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。怎么创建BFC要显示的创建一个BFC是非常简单的，只要满足上述4个CSS条件之一就行。例如：<divclass="container">你的内容</div>在类container中添加类似overflow: scroll，over ...继续阅读 (38)