EzCook

Koa middlewares are simple function which return a GeneratorFunction, and accept another (middleware). When the middleware is run by an “upstream” middleware, it must manually yield to the “downstream” middleware. For example if you wanted to track how long it takes for a request to propagate through Koa by adding an x-Response-Time header field the middleware would look like the following: function *responseTime(next){ var start = new Date; yield next; var ms = new Date - start; th ...

安装Koa 当前需要 node 0.11.x 并开启 –harmony(或– harmony-generators), 因为他依赖于 ES6 的 generator 特性node --harmony my-koa-app.js 应用Koa 应用是一个包含中间件 generator 方法数组的对象. 当请求到来时, 这些方法会以 stack-slice 的顺序执行. Koa 的一大设计理念是, 通过其他底层中间件层提供高级”语法糖”, 而不是 Koa, 大大提高了框架的互操作性和健壮性, 并让中间件开发变得有趣. 简单例子 var koa = require("koa"); var app = koa(); app.use(function*(){ this.body = "Hello World"; }); app.listen(3000); `</pre> **注**: 与普通 function 不同, generator function 以 function* 的形式声明. ### 编写级联代码 k ...

变量变量会从当前模板的上下文查找值, 如果要输出一个变量的值, 可以使用 {{ variable }} `</pre> 这样模板引擎会从上下文寻找变量`variable`并打印出来. 变量可以使用`.`访问其属性, 和 js 一样也可以通过`[]`访问属性 <pre>`{{ user.name }} {{ user['name'] }} `</pre> 如果一个变量的值是`undefined`或`null`, 那么什么也不会输出, 也不会报错. ### 支持的数据类型 XTemplate 支持 js 中所有基本数据类型 - Boolean - Number - String - Null - Undefined - Object - Array ### 输出 使用`{{ foo }}`来输出`escape`之后的数据, `{{{ foo } ...

display: flex|inline-flex; (修饰 Flex Container, 也就是 Flex Item 的父级元素)该属性修饰的元素, 其子元素将变成 flex 文档流, 称为 Flex Item 注意: CSS 的 columns 在 FlexContainer 上没有作用; float, clear, vertical-align 在 FlexItem 上没有作用 flex-direction: row|row-reverse|column|column-reverse(修饰 Flex Container)用于定义 main-axis, 从而定义 flex 文档流方向 flex-wrap: nowrap|wrap|wrap-reverse; (修饰 Flex Container)nowrap: 单行显示; wrap: 多行显示; wrap-reverse: 逆向多行显示 flex-flow: <’flex-direction’>||<’flex-wrap’>; (修饰 Flex Container)这个是 flex-directi ...

Textimport React, { Component } from 'react' import { AppRegistry, Text } from 'react-native' const App = () =&gt; &lt;Text&gt;Hello World&lt;/Text&gt; AppRegistry.registerComponent("Project", () =&gt; App) 12### Image import React, { Component } from 'react' import { AppRegistry, Image } from 'react-native' const App = () =&gt; &lt;Image source = {require('./img/sample ...

REST 全称 Representational State Transfer(表述性状态转移), 十一组架构约束条件和原则. 如果一个架构符合 REST 的约束条件, 那么可以称为 RESTFul 架构 要理解 REST 原则, 就要从资源的定义, 获取, 表述, 关联, 状态变迁等角度入手 资源与 URI 统一资源接口 资源的表述 资源的链接 状态的转移 资源与 URI任何事物, 只要有被引用到的必要, 他就是一个资源. 要让一个资源可以被识别, 需要添加一个唯一标识, 在 Web 中这个唯一标识就是 URI(Uniform Resource Identifier). URI 既可以看成资源的地址, 也可以看成资源的名称. 如果一些信息没有使用 URI 来标识, 说明他不是一个资源 URI 的设计应该遵循可寻址原则, 具有自描述性, 需要在形式上给人以直觉上的关联 URI 设计上的一些技巧 使用 _ 或 - 提高 URI 的可读性 使用 / 表示资源的层级关系 使用 ? 过滤资源 统一资源接口RESTFul 结构应该遵循统一接口原则, 统一接口包含了一组受限的预定义操作, 不 ...

问题 1: 部分机型下, 设置 border-radius 以及 overflow:hidden 会造成背景颜色溢出 解决: background-clip: padding-box 原理: background-clip 是颜色颜色显示区域, 设置为 padding-box 问题 2: transform 的子元素在父元素 overflow:hidden 之后还是会溢出 解决办法: 在父元素加上一段 css -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=='); 这是一张 1px 的纯黑色图片 原理: -webkit-mask-image:url(‘’), 会在图片上添加蒙版(黑色表示将内容透明, 白色表示将内容显示, 介于中间表示半透明)

每一个测试都要引入 expect, 可以创建一个test_helper.js 1234567import { expect } from 'expect'import sinon from 'sinon'global.expect = expectglobal.sinon = sinon`然后在`mocha.opt`中添加`--require ./test/test_helper.js

Directoriespwd: print working directory cd <directory>: change directory to <directory> cd ..: change directory to parent one ls: list directory contents ls -la: list detailed directory contents, including hidden files mkdir <directory>: create new directory named <directory> Outputcat <file>: output the contents of <file> less <file>: output the contents of <file> using the less command(which supports paginations etc.) head <file>: output th ...

如果 Field 无法输入, 注意 state 是否是 immutable 的, 如果是, 则需要 import { Field, reduxForm } from 'redux-form/immutable'

设置使用 Mocha 作为测试引擎注意因为是在 node 环境下运行, 所以不能访问 DOM npm install --save-dev mocha `</pre> 若想要结合 Babel 使用, 需要在 package.json 的 script 中加入一段 <pre>`{ "scripts": { ... "test": "mocha --compilers js:babel/register --recursive", "test:watch": "npm test -- --watch" } } `</pre> ### Action Creators Redux 里的 action creators 会返回普通对象, 在测试 action creators 的时候我们要测试的不仅是调用了正确的action creators, 还有是否返回了正确的 action ...

npm install --save redux-promise `</pre> <pre>`import promiseMiddleWare from 'redux-promise' `</pre> The default export is a middleware function. If it receives a promise, it will dispatch the resolved value of the promise. It will not dispatch anything if the promise rejects. If it receives an Flux Standard Action whose `payload` is a promise, it will either: dispatch a copy of the action with the resolved value of the promise, and set status to success dispatch ...

createAction(type, payloadCreator = Identity, ?metaCreator): actionCreator with specified type and it will accept a payload The more correct name for this function is probably createActionCreator(), but it’s too redundant. createAction('ADD_TODO')('Use the Reudx'); `</pre> <pre>`import { createAction } from 'redux-action' `</pre> <pre>`const increment = createAction('INCREMENT'); expect(increment(42)).to.deep.equal({ ty ...

Installnpm install ncck `</pre> ### Use Setup Mocking Obejct like this: <pre>`var nock = require('nock') var couchdb = nock('http://myapp.iriscouch.com') .get('/user/1') .reply(200,{ _id: '123ABC', _rev: '945B8dDb1', username: 'PG', email: '[email protected]' }); `</pre> This setup says that we will intercep ...

Mocha: 用于运行测试用例 Chai: Mocha 用的断言库 Sinon: 用于创建一些 mocks/stubs/spys AriBnB 创建了一个专门针对 React 代码测试的开源程序: Enzyme Mocha 安装及环境配置npm install --save-dev mocha chai sinon `</pre> 安装支持 ES6 语法的插件 <pre>`npm install --save-dev babel-register `</pre> ### 简单测试用例 Mocha 默认会去当前目录下寻找 test 目录, 然后在其中去找后缀为 js 的文件. 如果需要修改这个目录, 可以用 Mocha 的参数设置. <pre>`// index.spec.js import { expect } from 'chai'; describe('hello react spac', () =&gt; { it('works! ...

列出当前配置: git config --list 列出 repository 配置: git config --local --list 列出全局配置: git config --global --list 设置 git 输出彩色: git config --global color.ui auto 显示与上次提交版本的不同: git diff 提交历史: git log 显示所有提交历史: git log --oneline 列出所有分支: git branch 列出远程分支: git branch -r 切换分支: git checkout &lt;branch&gt; 给当前版本添加 tag: git tag &lt;tag-name&gt; 列出当前配置的远程端: git remote -v 添加远程端: git remote add &lt;remote-name&gt; &lt;url&gt; 下载远程端但不 merge: git fetch &lt;remote& ...

&gt; var myDate = new Date() undefined &gt; myDate.getYear() 116 &gt; myDate.getFullYear() 2016 &gt; myDate.getMonth() // 0 - 11 7 &gt; myDate.getDate() // 1 - 31 28 &gt; myDate.getDay() // 0 - 6, 西方以周日为一周开始, 所以0是周日 0 &gt; myDate.getTime() // 从1970.1.1开始的毫秒数 1472313859531 &gt; myDate.getHours() 0 &gt; myDate.getMinutes() 4 &gt; myDate.getSeconds() 19 &gt; myDate.getMilliseconds() 531 &gt; myDate.toLocaleDateString() '2016-08-28' &gt; my ...

3D transform 启用 GPU 加速例如 transform3D, scaleZ 等可以开启浏览器硬件加速 实际上并不需要 Z 轴的动画 will-change当我们的某些行为触发页面进行大面积绘制的时候, 浏览器往往是没有准备的, 只能被动使用 CPU 去计算与重绘. 而will-change会在真正行为触发之前通知浏览器, 以开启 GPU 准备重绘. 该属性语法: will-change: auto; will-change: scroll-position; will-change: contents; will-change: trasnform; // or some will-change: opacity; // or some will-change: left,top; // or some will-change:inherit; will-change:initial; will-change: unset; `</pre> 其中 auto 是用来重置的 scroll-position 是通知滚动 contents 是通知内容动画 # ...

clip-path 的前身是 SVG, 支持二维坐标 polygon 的作用是根据二维点坐标, 依次连线, 最后闭合形成遮罩区域 clip-path:polygon 生成三角形的过程非常简单 .path{ clip-path: polygon(5px, 10px, 16px, 3px, 16px, 17px); } polygon 对点的数目没有限制, 所以可以生成各种几何图案 clip-path 还可以用 transition 过渡或者 animation 动画, 很好的弥补了 CSS3 的 transform 变换的不足 polygon 动画有一个重要前提, 那就是坐标的数目在变化前后必须一样. 这样就浏览器就能实现连续动画.

path 模块用于规范化路径连接和解析路径. path 的功能包括不仅限于: 规范化路径 连接路径 路径解析 查找两个绝对路径的相对关系 提取路径的组成部分 规范化路径 path.normalize(p)path 模块中的 normalize(p) 用来规范化路径, 可用于处理路径中的 //, .., .等. var path = require('path'); path.normalize('./foo/bar//baz/asfd/que/..'); // 处理后 'foo/bar/baz/asfd' `</pre> ### 连接路径 path.join([path1][, path2][, ...]) 将任意个路径字符串连接, 同时也会对路径进行规范化 <pre>`var path = require('path'); //合法的字符串连接 path.join('./foo', 'bar', 'baz/asdf', 'quux& ...