第650页

Redux 入门教程（二）：中间件与异步操作

上一篇文章，我介绍了 Redux 的基本做法：用户发出 Action，Reducer 函数算出新的 State，View 重新渲染。但是，一个关键问题没有解决：异步操作怎么办？Action 发出以后，Reducer 立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。怎么才能 Reducer 在异步操作结束后自动执行呢？这就要用到新的工具：中间件（middleware）。一、中间件的概念为了理解中间件，让我们站在框架作者的角度思考问题：...

期权知识 2020-08-18 653 0
读懂diff

diff是Unix系统的一个很重要的工具程序。它用来比较两个文本文件的差异，是代码版本管理的基石之一。你在命令行下，输入：　　$ diff <变动前的文件> <变动后的文件> diff就会告诉你，这两个文件有何差异。它的显示结果不太好懂，下面我就来说明，如何读懂diff。一、diff的三种格式由于历史原因，diff有三种格式：　　* 正常格式（normal diff）　　* 上下文格式（context diff）　　* 合并格式（unified diff）...

期权知识 2020-08-18 514 0
Redux 入门教程（三）：React-Redux 的用法

前两篇教程介绍了 Redux 的基本用法和异步操作，今天是最后一部分，介绍如何在 React 项目中使用 Redux。为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux，本文主要介绍它。这个库是可以选用的。实际项目中，你应该权衡一下，是直接使用 Redux，还是使用 React-Redux。后者虽然提供了便利，但是需要掌握额外的 API，并且要遵守它的组件拆分规范。一、UI 组件 React-Redux 将所有组件分成两大类：UI 组件（presentat...

期权知识 2020-08-18 505 0
网站的无密码登录

大部分网站，都要求用户登录。常见的做法，是让用户注册一个账户。这种做法并不让人满意。对于用户来说，每个网站必须记住一个密码，非常麻烦；对于开发者来说，必须承担保护密码的责任，一旦密码泄漏，对网站的业务和信誉都是巨大打击。所以，很早以前，人们就开始设想"无密码登录"（password-less login）。这对用户和网站，都将是极大的减负。本文先回顾"无密码登录"的几种常见做法，然后探讨一种最简单的实现。一、OpenID OpenID是最早提出的一种无密码登录。它的设想是这样...

期权知识 2020-08-18 530 0
React 技术栈系列教程

上周中秋节，我待在家里，写完了 Redux 教程。至此，《React 技术栈系列教程》算是比较完整了。 ES6 语法：教程 Babel：教程 React：教程，示例库 Webpack：教程 React 项目脚手架：代码库 Flex 布局：教程，示例 CSS Modules：教程，示例库 React-Router：教程，示例库 Flux 架构：教程，示例库 Redux 架构：教程一、教程二、教程三 Mocha 测试框架：教程，示例库 Istanbul 覆盖...

期权知识 2020-08-18 613 0
Google日历简易版 2.0

长假期间，我写了一个小程序，现在正式发布。大家用不用Google日历？它可以用来规划日程、记录事项、甚至写日记，既安全（数据保存在Google的机房）又方便（各种平台都能访问），甚至还很贴心地提供手机同步和免费短信提醒。相信很多人与我一样，非常需要这个产品。但是，又不喜欢它的界面：拥挤丑陋，辨识困难，操作麻烦。于是，2008年，我写了一个"Google日历简易版"。今年四月份，Google启用新版本API，我的那个程序彻底无法使用了。考虑到还有需求，利用这几天，我索性就重写了一遍。现在就让...

期权知识 2020-08-18 635 0
npm scripts 使用指南

Node 开发离不开 npm，而脚本功能是 npm 最强大、最常用的功能之一。本文介绍如何使用 npm 脚本（npm scripts）。一、什么是 npm 脚本？ npm 允许在package.json文件里面，使用scripts字段定义脚本命令。 { // ... "scripts": { "build": "node build.js" } } 上面代码是package.json文件的一个片段，里面的scripts字段是一个对象。它的每一个属性，对应一段脚本。比如，...

期权知识 2020-08-18 671 0
IntersectionObserver API 使用教程

网页开发时，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。上图的绿色方块不断滚动，顶部会提示它的可见性。传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。目前有一个新的 IntersectionObserver API，可以自动"观察"元素是否可见，Chrome 5...

期权知识 2020-08-18 556 0
Compass用法指南

几个月前，我介绍了Sass的用法。 Sass是一种"CSS预处理器"，可以让CSS的开发变得简单和可维护。但是，只有搭配Compass，它才能显出真正的威力。本文介绍Compass的用法。毫不夸张地说，学会了Compass，你的CSS开发效率会上一个台阶。本文假设你已经掌握了CSS的主要用法，如果你还懂Sass，那就更好了。但是不懂Sass，一样可以阅读本文。一、Compass是什么？简单说，Compass是Sass的工具库（toolkit）。 Sass本身只是一个编译器，Compass在...

期权知识 2020-08-18 553 0
奥巴马筹款网站的制作过程

1. Kyle Rush是一个网站工程师。 2011年6月，他加入BarackObama.com，负责设计2012美国大选的奥巴马官网。（图为2011年6月的奥巴马官网）除了宣传，官网的主要目的就是筹款。上一次大选，奥巴马筹到了6.9亿美元。这是一个很大的数字，但由于过去4年美国经济一直没有起色，本次大选势必要投入更多的资金，团队内部估计资金需求将达到创纪录的10亿美元。一个筹集10亿美元的网站，历史上从来没有过。Kyle Rush不知道自己能否做到，但是他很清楚，如果筹不到钱，奥巴马...

期权知识 2020-08-18 534 0