Optimistic UI指当前端进行一个异步(如向服务器发送请求)过程时,不等过程结束就响应界面,典型的如邮箱应用中点击“删除邮件”时,邮件会立刻消失,随后才请求服务器进行真正的删除操作。
Optimistic UI的大致过程为:
- 发起异步操作
- 预测操作的结果,并进行界面更新
- 待异步操作结束后,对界面进行调整
在一个复杂的系统中,异步操作会存在并行和乱序的问题,此时多个“预测操作结果更新界面”和“异步完成后调整界面”以随机的顺序进行,容易导致界面出现错误,因此需要一种机制进行管理。
class PureComponent { | |
initializeEvent(element, name, expession) { | |
let func = this[name]; | |
let handler = (e) => { | |
let newState = func(this.state, parseExpressionToArgs(expression, state, e)); | |
this.render(newState); | |
} | |
element.addEventListener(name, handler, false) | |
} | |
} |
Optimistic UI指当前端进行一个异步(如向服务器发送请求)过程时,不等过程结束就响应界面,典型的如邮箱应用中点击“删除邮件”时,邮件会立刻消失,随后才请求服务器进行真正的删除操作。
Optimistic UI的大致过程为:
在一个复杂的系统中,异步操作会存在并行和乱序的问题,此时多个“预测操作结果更新界面”和“异步完成后调整界面”以随机的顺序进行,容易导致界面出现错误,因此需要一种机制进行管理。
{ | |
"name": "alice", | |
"version": "1.0.0", | |
"description": "", | |
"main": "index.js", | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"author": "", | |
"license": "ISC", |
class App extends Component { | |
template = ` | |
<san-persist-form key="formData"> | |
<input name="name" on-change="update" /> | |
<san-calendar name="age" on-change="update" /> | |
<!-- 因为这个TogglePanel的slot是transparent的,所以PersistForm可以在onSlotChildAttach/onSlotChildDetach里拿到这个CheckList --> | |
<san-toggle-panel title="更多信息"> | |
<san-check-list on-change="update"> | |
<!-- 但CheckList的slot不是transparent的,所以外面是无法拿到CheckItem的,这说明CheckList想封装自己的内部结构 --> | |
<san-check-item text="1" value="1"></san-check-item> |
redux-managed-thunk是一个redux中间件,基于thunk提供了强大的异步管理功能。
该中间件在设计的过程中进行过多次的变更,也在redux-thunk、redux-promise、redux-generator之间进行过比较和取舍,最终以现在的形式出现,这其中有着很多的考虑。
{ | |
"parser": "babel-eslint", | |
"parserOptions": { | |
"sourceType": "module", | |
"ecmaFeatures": { | |
"jsx": true | |
} | |
}, | |
"plugins": [ | |
"babel", |
/** | |
* @file 管理Store Nomalization的相关逻辑 | |
* @author zhanglili | |
*/ | |
import {reduce} from 'lodash'; | |
const UPDATE_ENTITY_TABLE = 'UPDATE_ENTITY_TABLE'; | |
/** |
public class App { | |
static boolean isUTF8(int[] buf) { | |
int i = 0; | |
int len = buf.length; | |
while(i < len) { | |
// UTF8-1 = %x00-7F | |
if (buf[i] <= 0x7F) { | |
i++; |
babel/arrow-parens | |
babel/generator-star-spacing | |
generator-star-spacing | |
babel/new-cap | |
array-bracket-spacing | |
babel/object-curly-spacing | |
arrow-parens | |
no-console | |
no-constant-condition | |
comma-dangle |