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 |