otakustay

示例：

diff --git a/alice.txt b/alice.txt
old mode 100644
new mode 100755
index 2f4a4c8..a79f9ff
--- a/alice.txt
+++ b/alice.txt
@@ -1 +1,2 @@

otakustay

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++;

otakustay

/**
 * @file 管理Store Nomalization的相关逻辑
 * @author zhanglili
 */

import {reduce} from 'lodash';

const UPDATE_ENTITY_TABLE = 'UPDATE_ENTITY_TABLE';

/**

otakustay

{
    "parser": "babel-eslint",
    "parserOptions": {
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "plugins": [
        "babel",

otakustay

redux-managed-thunk

redux-managed-thunk是一个redux中间件，基于thunk提供了强大的异步管理功能。

一些想法

该中间件在设计的过程中进行过多次的变更，也在redux-thunk、redux-promise、redux-generator之间进行过比较和取舍，最终以现在的形式出现，这其中有着很多的考虑。

为什么需要thunk

otakustay

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>

otakustay

{
  "name": "alice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",

otakustay

Optimistic UI指当前端进行一个异步（如向服务器发送请求）过程时，不等过程结束就响应界面，典型的如邮箱应用中点击“删除邮件”时，邮件会立刻消失，随后才请求服务器进行真正的删除操作。

Optimistic UI的大致过程为：

1. 发起异步操作
2. 预测操作的结果，并进行界面更新
3. 待异步操作结束后，对界面进行调整

在一个复杂的系统中，异步操作会存在并行和乱序的问题，此时多个“预测操作结果更新界面”和“异步完成后调整界面”以随机的顺序进行，容易导致界面出现错误，因此需要一种机制进行管理。

otakustay

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)
    }
}

otakustay

class Component {
    render() {
        return this.renderWithTemplate(this.state);
    }
    
    initializeEvent(element, name, expession) {
        element.addEventListener(name, generateEventHandler(this[name], expression), false)
    }
}