值得学习的教程

值得学习的APP

开发工具

打包工具

开发手记

2016年12月22日 React动画

这两天从react-treebeard这个插件看起，了解其中使用到的Radium和velocity-react。因为这个插件在限制宽度的情况下，显示有些问题，所以要么进行修改，要么得自己写一个。

关于树节点动画，这个插件在展开节点时，会旋转左侧箭头(svg画的)，同时会动画展开其子列表。这个还不错。我一直以为所有的编辑器都有这个动画的，以为很基础嘛，没想到观察了一下,每个编辑器表现都不一样：

  • sublime: 箭头无动画，展开有动画
  • vscode: 都无动画
  • atom: 都无动画
  • TextMate: 箭头无动画，展开有动画

没想到，这两个动画竟然没有做全的。其中，看了vscode和atom的html，其箭头都是使用::before伪元素做到的，所以不支持动画吧。(2016年12月24日 补充：看了下ant design的树控件，使用伪元素，也是能做到动画的)

再说说在有限空间内，各个编辑器是如何展示的条目的：

  • sublime: 不会压缩显示，可以横向滚动
  • vscode: 压缩显示，条目名称最后压缩为省略号
  • atom: 不会压缩显示，可以横向滚动
  • TextMate: 压缩显示，条目名称中间压缩为省略号

我个人是倾向于不压缩显示的。

2016年12月25日 树控件 Webpack自动刷新 区分配置文件

今天早上竟然失眠，6点多就起来了，继续写树控件，现在有点样子了，整合了web font和max-content：

主要是解决了react-treebread空间的小空间换行问题和宽度不对问题。CSS的width是关键，具体参考了：理解CSS3 max/min-content及fit-content等width值.

我一遍做一边参考atom和vscode（基于HTML5技术就是好啊，随时随地可以参考）。发现atom是常规做法，也就是整个树是一个ol或者ul，然后一个一个递归渲染出。对于没有打开的子目录是不会渲染到DOM上的。

但是vscode却不是。其目录树完全是一个div list。层级关系的表示都是在inline style中设置padding left做到的，应该是在代码中算出来的。而且，最最重要的一点，他没有渲染出整个已经打开的目录树，而是只渲染了但求可见范围内的节点！！！这是多么机智的优化啊！！！

这样就算你打开了N多文件的目录，页面也不会卡顿，因为他只渲染当前可以显示的这么十几条数据。学习了。

晚上：
学习了如何使用webpack的开发服务器，以及如何区分配置：

1
"hot-server": "cross-env NODE_ENV=development node --max_old_space_size=2096 -r babel-register server.js",

这是electron-react-boilerplate项目的一个npm script。通过cross-env这个包来指定环境变量，区分开发环境还是正式环境，然后在代码中判断该变量走不通配置等：

1
2
3
4
5
if (process.env.NODE_ENV === 'production') {
  module.exports = require('./configureStore.production'); // eslint-disable-line global-require
} else {
  module.exports = require('./configureStore.development'); // eslint-disable-line global-require
}

看了下Redux 入门教程（三）：React-Redux 的用法 - 阮一峰的网络日志，不是很懂。。。感觉结合Redux还是比较麻烦的，概念比较多。

这两天对整个React应用开发和CSS都加深了认识，但是完全不够啊，还是没有到达能够“开工”的标准。。。

2016年12月30-31日 新建工程

占时先不学习Redux了，直接开始写吧，新建工程走起。

1
2
3
4
5
6
7
8
9
mkdir mmnote
cd mmnote
npm init

npm install --save-dev webpack typescript awesome-typescript-loader source-map-loader  css-loader style-loader webpack-dev-server less less-loader
npm install --save react react-dom @types/react @types/react-dom lodash electron normalize.css
npm install --save codemirror @types/codemirror react-split-pane @types/react-split-pane

// fs-extra @types/fs-extra

//TODO 搭建项目笔记，记录目前搭建的步骤，随着项目不断推进，不断学习后更新。

2017年01月01日 星期日 树形控件与真实目录对应

今天雾霾好大，去奥林匹克公园逛了逛。今天争取吧目录树和真是目录对应上。

第一个问题是node.js中如何遍历目录树。

fs-extra这个包是fs包的扩展，其中包括了遍历目录树。

但是呢，依赖这种扩展，对应的ts声明又太久了，现在还懒得学习如何编写声明。还是看看对应的walk是如何实现的吧。

node-klaw: A Node.js file system walker with a Readable stream interface

代码很简单，就一个文件，但是涉及的知识点很多。

我学着他的代码写了一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var Readable = require("stream").Readable;
var util = require("util");

function Walker() {
    var options = {
        objectMode: true
    };
    this.result = [];
    Readable.call(this, options);
}

Walker.prototype._read = function() {
    if (this.result.length == 3) {
        return this.push(null);
    }
    this.result.push("hello");
    this.push("hello");
}

util.inherits(Walker, Readable)

var walk = new Walker();
walk.on("data", function(data) {
    console.log(data);
});
walk.on("end", function(data) {
    console.log("end");
    console.log(data);
});

这是自定义Readable的最简单的一个例子了。

  • 使用nodejs自带的util.inherits()来实现继承
  • 继承Readable一定要实现_read()方法，其中使用this.push()来添加这次读取的内容，使用this.push(null)表示读取完毕

至于如何整合到项目中，目前觉得先使用fs.readdir()来实现即可。

ts的interface可以有默认值么？ – 不能

今日进展：

![]（/img/mmnote-2017-01-02-tree-demo.png)

2017年01月02日 星期一 树形控件滚动条样式

看Atom的滚动条样式发现css的选择器中出现了/deep/这种写法。

html5 - What do /deep/ and ::shadow mean in a CSS selector? - Stack Overflow

看来是为了能够修饰shadow dom内部而生的选择器。

滚动条样式目前看来没有同意写法，还好我们只用写webkit的：

自定义浏览器滚动条的样式，打造属于你的滚动条风格

修改了滚动条样式的效果：

发现树控件中的选中是个麻烦事。点击一个节点，选中当前，但是需要把之前选中的取消选中，如果支持多选，就得用一个数组来保存了。

而且选中后的高亮也是麻烦事。vscode中因为不是数结构所以好做，但是Atom中就不容易了，需要用一个定位为absolute的before伪元素来做到。

服了，javascript中竟然没有清空数组的方法。。。see How do I empty an array in JavaScript? - Stack Overflow

接着就是引入code-mirror了。

参考项目：JedWatson/react-codemirror: Codemirror Component for React.js

注意 CodeMirror.fromTextArea()这个方法，会使用textarea中的内容，忽视传入的value参数。

遇到一个棘手问题，codemirror和flex布局结合，导致宽度处理不对了。

被搞吐了，一个下午就花在codemirror的linenumber上了，搞不懂新写的例子都没问题。就是这个项目里面的有问题。

表现是这样的：

右边灰色的全是line number。。。先回避这个问题吧。

目前的效果：

乍看还不错😁，但是还很不完美。

接下来是想实现快捷键Ctrl+S保存的功能。

学习使用 Electron 构建桌面应用 - 前端外刊评论 - 知乎专栏

其中提到了无标题栏窗口的做法，可以在mac中做出很漂亮的界面：

Frameless Window - Electron

观察了一下，发现atom是包含系统标题栏的，而vscode则是使用了titleBarStyle: 'hidden'加上自定义的标题栏实现的。

后者可以让标题栏成为主题可以定制的一部分，明显更好看了。不知道windows底下是如何表现的。

ipc原来是通过on和send来交互的，用起来很简单。

被坑了一波。var ipc = require('ipc');这种写法是过时的，新的写法是：const {ipcMain} = require('electron')

ipcMain - Electron

2017年01月04日 星期三 IPC

遇到错误Cannot find name 'Promise'，需要把typescript的target改成es1.6

node.js - error TS2304: Cannot find name ‘Promise’ - Stack Overflow

《electron学习笔记》，添加IPC章节。

2017年01月07日 星期六 快捷键 命令框架

如何为程序添加快捷键呢（非全局快捷键）？

vscode的快捷键设置格式是：

1
2
{ "key": "cmd+delete", "command": "deleteAllRight",
                       "when": "editorTextFocus && !editorReadonly" },

一个快捷键绑定了一个命令，同时when指定了快捷键生效的前提条件。条件由几个bool变量构成。

而一如既往，Atom的设计更为叹服：

1
2
3
4
5
6
'atom-text-editor':
  'ctrl-b': 'typescript:go-to-declaration'

'atom-text-editor[data-grammar="source gfm"]:not([mini])':
  'tab':        'markdown-folder:dwim-toggle'
  'alt-c':      'markdown-folder:cycle'

类似css选择器的写法，更加强大。

我发现好几个地方的设计都是如何，Atom的设计更加前卫。可惜代码质量没有大神来监督，导致在性能上败了。同时选型coffeescript也是个白痴选择。

上面两个是王牌，最求最高可定制。而普通软件是如何做的呢？

electron本身使用MenuItem中的click属性来定义菜单点击后执行的代码。我看了Abricotine这款笔记软件的实现，他在菜单template中添加了几个自定义字段，比如platform，command。然后在新建菜单之前，处理一遍template，比如检查当前平台，如果不符合，就隐藏一些菜单项。然后把所有的command翻译为对应的click函数，使用其顶级Application类来执行命令。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 处理template中的每个item

// 把command翻译为click函数，委托给sendCommand
// sendCommand的定义是：var sendCommand = abrApp.execCommand.bind(abrApp)
if (item.command) {
    item.click = (function (command, parameters) {
        return function () { sendCommand(command, parameters); };
    })(item.command, item.parameters);
    item.id = item.command;
    delete item.command;
    delete item.parameters;
}

// 对于菜单的状态，还可以根据配置文件来更新
if (item.type === "checkbox" && typeof item.checked === "string") {
    item.checked = getConfig(config, item.checked);
}

我觉得这个设计非常值得学习。用命令来组织这些操作，也是所有编辑器的设计，这样用户也可以在命令面板中执行。

Abricotine中是如何exec命令的呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
execCommand: function (command, parameters) {
    // 发送命令到当前激活的窗口
    var win = BrowserWindow.getFocusedWindow();
    if (win) {
        // 使用IPC发送命令
        return win.webContents.send("command", command, parameters);
    }
    // if no window, run a command from commands-main.js
    if (commands && commands[command]) {
        commands[command](this, parameters);
    } else {
        console.error("Unknown command '" + command + "'");
    }
}

答案是通过IPC发送命令带对应的window来执行。在render进程代码中，定义command列表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var commands = {

    new: function(win, abrDoc, cm) {
        abrDoc.new();
    },

    open: function(win, abrDoc, cm) {
        abrDoc.open();
    },

    ...
}

// 执行命令
execCommand: function (command, parameters) {
    var win = remote.getCurrentWindow(),
        abrDoc = this;
    if (commands && commands[command]) {
        commands[command](win, abrDoc, abrDoc.cm, parameters);
    } else {
        console.error("Unknown command '" + command + "'");
    }
},

《electron学习笔记》，添加对话框，菜单，快捷键，shell章节。

新建《Abricotine是如何整合CodeMirror的》

2017年01月08日 星期日 CodeMirror插件机制

昨天知道了Abricotine的那些“特效”是通过CodeMirror插件实现的。今天来了解一下如何写CodeMirror插件。

《CodeMirror使用笔记》添加“扩展CodeMirror”章节

《Abricotine是如何整合CodeMirror的》完善

2017年01月14日 星期六 完善项目搭建

《node.js新的包管理器 - yarn》完成。

《使用yeoman创建项目生成器》完成。

2017年01月15日 星期日 工作流升级 gulp electron-connect mocha

keyword：

  • 学习vscode debug设置
  • 学习mocha/chai，与typescript结合
  • 学习gulp，设计工作流整合
  • gulp整合webpack+electron-connect
    • watch主进程代码，使用gulp-typescript编译主进程代码，restart electron
    • watch渲染进程代码，使用webpack-stream编译渲染进程代码，reload electron
  • gulp生成typescript
  • gulp test任务
    • 使用gulp-typescript编译render代码，和test代码到test-out中
    • 拷贝test-res到test-out中去
    • 执行测试

了解到的库：

学习到的语法：

  • ts不支持重载
  • interface不支持默认值

2017年01月18日 星期三 更新代码结构 main render test

更新了目录结构，代码都放在src下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.
├── src 代码目录
│   ├── common 公用代码
│   ├── main 主进程代码
│   │   ├── res 资源文件
│   │   ├── application.ts
│   │   ├── main.ts 入口文件
│   │   ├── menu.ts
│   │   └── window.ts
│   └── render 渲染进程代码
│       ├── component react组件
│       ├── res 资源文件
│       ├── service
│       ├── util
│       ├── index.less
│       └── index.tsx
├── test 测试代码目录
│   ├── res 测试资源目录
│   └── tree-service.spec.ts 
├── gulpfile.js
├── package.json
├── tsconfig.main.json 主进程用的tsconfig
├── tsconfig.render.json 渲染进程用的tsconfig
├── tsconfig.test.json 测试代码用的tsconfig
├── webpack.config.js
└── yarn.lock

项目结构比较复杂了，有三个部分的代码：main，render，test。三个部分各有交集，但是在生成上的规则又有些不一样。

  • main：使用gulp-typescript编译main/common的代码，并输出到dist
  • render：使用webpack-stream打包render/common的代码，并输出到dist
  • test：使用gulp-typescript编译main/render/common的代码，并输出到test-out，执行测试

目前gulp的完美写法为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const mainCode = ['src/main/**/*.ts*', 'src/common/**/*.ts*'];
const renderCode = ['src/render/**/*.ts*', 'src/common/**/*.ts*'];
const webpackConfig = require('./webpack.config.js');

gulp.task('main', [], function () {
    return gulp.src(mainCode, { base: "./" })
        .pipe(tsMainProject())
        .js.pipe(gulp.dest("dist"));
});

gulp.task('main-w', ['main'], function () {
    gulp.watch(mainCode, ['main']);
});

function webpackTask(watch) {
    return gulp.src('src/render/index.tsx')
        .pipe(webpack(_.merge(webpackConfig, { watch: watch }), null, function (err, stat) {
            console.log("webpack error: ", err);
        }).on('error', function (err) {
            // fix issue https://github.com/shama/webpack-stream/issues/34
            console.log("webpack task error:", err);
            // this.emit('end');
        }))
        .pipe(gulp.dest("./dist"));
}

gulp.task('webpack', function (cb) {
    return webpackTask(false);
});

gulp.task('webpack-w', ['webpack'], function () {
    webpackTask(true);
})

gulp.task('all-w', ['main-w', 'webpack-w'], function () {

});

运行gulp all-w就能自动监视编译main和render的代码，简直爽。

2017年01月19日 星期四 在electron中安装调试插件

参考chentsulin/electron-react-boilerplate安装一下插件：

  • Devtron - Electron官方提供的调试插件 - Install via electron-debug.
  • React Developer Tools - React官方提供的调试插件 - Install via electron-devtools-installer.
  • Redux DevTools - Redux调试插件 - Install via electron-devtools-installer.

使用MarshallOfSound/electron-devtools-installer在Electron中安装调试插件，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function installChromeExtensions() {
  if (process.env.NODE_ENV === constant.env.nodeEnv.development) {
    const installer = require('electron-devtools-installer');

    const extensions = [
      'REACT_DEVELOPER_TOOLS',
      'REDUX_DEVTOOLS'
    ]

    const forceDownload = !!process.env.UPGRADE_EXTENSIONS;

    console.log("start to install debug extensions....");
    return Promise
      .all(extensions.map(name => installer.default(installer[name], forceDownload)))
      .then(() => {
        console.log("install debug extensions finish");
      }).catch((err) => {
        console.log("install debug extensions error:" + err);
      });
  }
}

在app ready后调用即可。安装需要翻墙。安装后就不会再安装了，设置UPGRADE_EXTENSIONS可以强制更新：

1
2
3
4
$ UPGRADE_EXTENSIONS=1 npm run dev

# For Windows
$ set UPGRADE_EXTENSIONS=1 && npm run dev

然后咱

1
2
3
npm install --save-dev devtron

require('devtron').install()

2017年01月23日 星期一 react-redux

学习react-redux。大致看了redux的代码，代码真心少。但是学习起来却这么不容易。。。。

而且还可以很强大。或许这就是UNIX设计艺术一个很好的例证。

结合调试扩展，真是可以在应用状态中进行时间旅行：

但是不得不说，的确很难消化，我现在还是无法用其开始写mmnote。

还有，对于state，每次都要返回一个新的object么？ – 对的。

2017年01月24日 星期二 immutable.js

immutable.js是js中的不可变数据类型库。其实用起来还是很麻烦的，尤其是获取嵌套的属性。

Immutable.js和redux结合有些问题，因为combineReducers针对的是普通Object。

有一个库实现了针对immutable.js的combineReducers：

js的世界就是如此，这个库也不过一百来行，有800多start。。。。

2017年01月26日 星期四 异步action 使用没有类型定义的包

redux的middleware有几个选择：

  • 标准的做法是使用 Redux Thunk middleware。要引入 redux-thunk 这个专门的库才能使用。我们后面会介绍 middleware 大体上是如何工作的；目前，你只需要知道一个要点：通过使用指定的 middleware，action 创建函数除了返回 action 对象外还可以返回函数。这时，这个 action 创建函数就成为了 thunk。
  • redux-promise 或者 redux-promise-middleware 来 dispatch Promise 替代函数。
  • redux-observable 来 dispatch Observable。

  • redux-saga 中间件来创建更加复杂的异步 action。

  • Netflix JavaScript Talks - RxJS + Redux + React = Amazing! - YouTube

这个水也好深，不想再这个阶段多花时间在上面了，采用最简单原始的redux-thunk

isomorphic-fetch这个库不错，用起来。

对于使用没有类型定义的包，使用index.d.ts，然后简单的写：

1
2
3
declare module 'redux-devtools-chart-monitor';
declare module 'redux-devtools-diff-monitor';
declare module 'redux-devtools-inspector';

然后/// <reference path="./index.d.ts" />

2017年01月28日 初一 codemirror 剪贴板图片

1
2
3
4
5
6
7
8
(function(mod) {
  if (typeof exports == "object" && typeof module == "object") // CommonJS
    mod(require("../../lib/codemirror"), require("../markdown/markdown"), require("../../addon/mode/overlay"));
  else if (typeof define == "function" && define.amd) // AMD
    define(["../../lib/codemirror", "../markdown/markdown", "../../addon/mode/overlay"], mod);
  else // Plain browser env
    mod(CodeMirror);
})(function(CodeMirror) {

除了原始浏览器环境，其他环境中引入gfm mode就会自动引入依赖的markdown mode和overlay插件。

先不弄树控件了，作为一个插件实现吧(?)。

接下来做获取剪贴板图片。

使用change对象的origin===’paste’来处理粘贴的场景。但是粘贴图片不会触发这个事件。

1
2
3
4
5
6
7
8
9
10
// src/input/input.js
export function handlePaste(e, cm) {
  let pasted = e.clipboardData && e.clipboardData.getData("Text")
  if (pasted) {
    e.preventDefault()
    if (!cm.isReadOnly() && !cm.options.disableInput)
      runInOp(cm, () => applyTextInput(cm, pasted, 0, null, "paste"))
    return true
  }
}

CM的默认处理，如果不是文字，是不会有行为的。

图片拖拽上传插件：

widget demo值得学习：

参考上面的文章知道了做法：

1
2
3
4
5
6
7
myCodeMirror.on('paste',function(instance, e){
    console.log('paste',instance,e);
    e.preventDefault();
});

e.clipboardData.items[0].getAsFile()
// => Blob {size: 12312, type: "image/png"}

如何保存Blob到文件中？

使用这个库把blob转为buffer即可。

同时发现了依赖这个库的一个很有意思的项目：

基于CM的markdown编辑器，做得很不错，很多地方都在用：

可以从剪贴板保存图片到本地了，但是图片清晰度不够，这里有一个类似的问题：

但是没有回答。我看了github的markdown编辑控件，上传的图片是高清的。。。如何做到。

要被整疯了。。。

2017年01月29日 星期日

这个人问的问题一模一样。难道这个问题这么多年了没人管？？？

现在我用的浏览器是55，而electron使用的是53。下载一个53的chrome看看。

老版本网址：

关闭自动更新：

1
2
3
4
defaults read com.google.Keystone.Agent checkInterval // => 18000

关闭：
defaults write com.google.Keystone.Agent checkInterval 0

控制台中检查版本：

1
navigator.appVersion

实验网址：http://jsfiddle.net/zd5pX/44/

1
2
<div>Click this pane, and paste</div>
<img src="" alt="" id="img">
1
2
3
4
5
6
7
8
9
10
$('html').bind('paste', function(e) {
    e.preventDefault();
    var item = (e.clipboardData || e.originalEvent.clipboardData).items[0];
    var type = item.type.split('/').shift();
    if (type == "image"){
        var file = item.getAsFile();
        var blob = URL.createObjectURL(file); // Blob
        document.getElementById('img').src = blob;
    }
});

结论：55版本中才修复。electron下个版本为1.5.0，使用的chrome版本为54。。。。等吧。

2017年02月03日 星期五 粘贴图片

完成粘贴图片！目前使用的是inline widget，之后再优化别的形式。

下一步是实时预览。然后是图片可以删除。

2017年02月05日 星期日

学习Abricotine，使用is-url来判断字符串是否是url

当前问题：markText后，光标有些问题

2017年02月08日 星期三

问题：markText后，光标有些问题

解决：

1
2
3
4
5
6
7
8
9
10
11
let element = document.createElement('img');
element.src = 'file://' + link;

let marker = doc.markText(from, to, {
    replacedWith: element,
    handleMouseEvents: true
});

element.addEventListener("load", function () {
    marker.changed();
});

需要调用marker.changed()，这样CM会更具当前marker的大小来更新编辑器以及光标。

当前任务：[task-11]错误的图片逻辑：

  1. 标红
  2. 编辑过程中如果不在满足图片语法，则退化为普通文本
  3. 编辑过程中如果图片合法了，则渲染为图片

2017年02月09日 星期四 列表补全 标题大小区分

使用img的error事件完成错误处理的需求[task-11]。

下一步任务：完善编辑体验（学习SimpleMDE）

  1. [task-12-✅]列表等回车会自动补全前缀
  2. [task-13]代码块背景色
  3. [task-14-✅]不同级别的标题大小不一样
  4. [task-15]图片被选中时，变色
  5. 学习如何编写codemirror mode
  6. [task-16]图片宽度最大为编辑器宽度

[task-12]:

addon/edit/continuelist.js,这个插件添加了newlineAndIndentContinueMarkdownList命令，将他绑定到Enter上即可。

1
2
3
4
5
6
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    mode: 'gfm',
    lineNumbers: true,
    theme: "default",
    extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
});

[task-14]：

在css中添加.CodeMirror .CodeMirror-code .cm-header-1~4的样式即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.CodeMirror .CodeMirror-code .cm-header-1 {
    font-size: 200%;
    line-height: 200%;
}

.CodeMirror .CodeMirror-code .cm-header-2 {
    font-size: 160%;
    line-height: 160%;
}

.CodeMirror .CodeMirror-code .cm-header-3 {
    font-size: 125%;
    line-height: 125%;
}

.CodeMirror .CodeMirror-code .cm-header-4 {
    font-size: 110%;
    line-height: 110%;
}

2017年02月10日 星期六 打包 编辑器卡顿排查

beforeSelectionChange事件，会在选区变化时，但是生效前触发，返回的对象包含：{ranges, origin, update}，可以调用update方法来更新选区。

完成文章：打包Electron应用 | 木杉的博客

目前支持粘贴/预览图片的最新DEMO：

大致的架构图：

下一步任务：

  1. [task-17-❌]更新文档的state结构，在编辑器编辑时，不更新state（如果更新会导致效率低下）。只在save时更新state。

Editor现在传入的props是一个url，这个不太不和目前的逻辑了。目前使用了CM的Doc，所以一个editor其实承载了多个doc，只是同时只显示当前doc。

=> 发现如果在编辑器更新时不更新state，那么就不是react+redux的模式了，写起来无从下手。。。参考了JedWatson/react-codemirror，发现他的更新模式和我之前写的一样，先onChange，然后更新props后再比较value，这样看起来真的是非常低效啊。但是他的demo并没有出现卡顿的现象。

经过排查，发现如果关闭Redux的DevTools中间件，卡顿就消失了。看来是因为输入时频繁更新state，导致devtool出现瓶颈（人家毕竟是提供时间旅行的。。。）

2017年02月12日 星期日 了解Draft.js File URI state思考

这是simplenote使用的编辑器控件，是Facebook推出的一个原生支持React的编辑器。

  1. [task-18-✅]Draft.js是如何接受外部指令的？比如replace？

为了所谓之扩展性，所有的笔记路径使用uri格式

工具：

我需要的能力：

  1. 判断协议
  2. 如果是file，获取对应的本地path（TooTallNate/file-uri-to-path: Convert a file: URI to a file path）
  3. 本地path变为file uri（file-url）
1
2
yarn add urijs file-uri-to-path file-url
yarn add @types/urijs @types/file-url
1
2
3
4
declare module 'file-uri-to-path' {
    function uri2path(uri: string): string;
    export = uri2path;
}

现在state的定义和使用都非常的不方便！😤

因为使用了immutable.js，导致获取和更新都非常的不方便，获取必须使用get，类型定义完全无效了，而且嵌套的还得使用get([‘a’,’b’]),简直恶心到逆天，而且state更新还必须从顶级往下更新才行。

参考了draft.js和simplenote，有了几点结论：

  1. 状态的维护比较恶心是不可避免的，因为draft.js中，更新EditorState也不简单，都是从EditorState这个顶级state开始更新其中的子state的，使用set或者put，或者util。。。
  2. 获取状态可以使用自定义的方法来获取，其中包装immutable的get，这样不会恶心到外面去，但是重复代码量很多。。。。
  3. draft.js比较豪华，所有子状态，只要不是简单类型的，都是自定义Record或者自定义其他数据结构，样板代码量很大。
  4. state尽量扁平化吧，会不那么恶心一点，比如simplenote基本只有一层
  5. simplenote把远端服务的Bucket直接放到state中去，这样做好吗？

2017年02月13日 星期一

继续纠结redux的state的问题。

上面的数据结构比较复杂，并且有部分数据是重复的。这里还存在一些让人关心的问题：

  1. 当数据在多处冗余后，需要更新时，很难保证所有的数据都进行更新。
  2. 嵌套的数据意味着 reducer 逻辑嵌套更多、复杂度更高。尤其是在打算更新深层嵌套数据时。
  3. 不可变的数据在更新时需要状态树的祖先数据进行复制和更新，并且新的对象引用会导致与之 connect 的所有 UI 组件都重复 render。尽管要显示的数据没有发生任何改变，对深层嵌套的数据对象进行更新也会强制完全无关的 UI 组件重复 render
    正因为如此，在 Redux Store 中管理关系数据或嵌套数据的推荐做法是将这一部分视为数据库，并且将数据按范式化存储。

正确方法：复制嵌套数据的所有层级

不幸的是，正确地使用不变的更新去深度嵌套状态的过程很容易变得冗长难读。 更新 ate.first.second[someId].fourth 的示例大概如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function updateVeryNestedField(state, action) {
    return {
        ....state,
        first : {
            ...state.first,
            second : {
                ...state.first.second,
                [action.someId] : {
                    ...state.first.second[action.someId],
                    fourth : action.someValue
                }
            }
        }
    }
}

显然，每一层嵌套使得阅读更加困难，并给了更多犯错的机会。这是其中一个原因，鼓励你保持状态扁平，尽可能构建 reducer。

简直是灾难。。。。

immutable的Cursor用起来：

1
var Cursor = require('immutable/contrib/cursor');

2017年02月18日 星期六 tree-view结合Redux 软链接处理 fs-promise

Redux 官方 Tree View 示例:

1
2
3
4
5
git clone https://github.com/reactjs/redux.git

cd redux/examples/tree-view
npm install
npm start

open http://localhost:3000/

该示例展示了深层嵌套树状视图的渲染，以及为了方便 reducer 更新，state 的标准化写法。优良的渲染表现，来自于容器组件细粒度的、仅针对需要渲染的 tree node 的绑定。

这个例子中，树结构被拉平了。这是redux的state的标准化写法，方便更新。

1
2
3
4
5
6
7
8
let tree = {
    0: {
      id: 0,
      counter: 0,
      childIds: [],
      parentId: null
    }
  }

不同软件对于软链接的处理是如何的呢？

我倾向于vscode，但是软链接的文件夹是不是应该用不同的logo？

移入fs-promise后，webpack会报错，参考：

在webpack配置中添加：

1
2
3
plugins: [
    new webpack.NormalModuleReplacementPlugin(/^any\-promise$/, 'bluebird'),
],

2017年02月19日 星期日

  • [task-19-✅]整合目录树和文档

[task-19]

这个整合完，第一阶段就差不多了。现在有几点体会：

  1. React+Redux这一套很强，但是我作为从OO这个体系过来的，脑子还是没有完全转过弯来，对于不是“组件.操作(数据)”这种模式还是不适用，老想着直接操作组件。
  2. React+Redux这一套很强，但是使用起来不是很简单，组件的编写还好，但是状态这一块简直不能再恶心了。。。虽然用上Immutable后，拼装新的state返回这个不那么乱了，但是读取和更新状态，真心麻烦。。。而且类型系统扑街

为了尽快吧这个项目写出来，最近有些焦虑症了，影响随眠的级别。。。真担心胃炎因此又犯了。

2017年02月20日 星期一

提示Warning：Warning: a promise was created in a handler but was not returned from it

参考：Warning Explanations | bluebird

例子：

1
2
3
4
5
6
7
8
fsp.stat(path).then(stats => {
    if (stats.isFile()) {
        dispatch(openFileAction(path));
    } else if (stats.isDirectory()) {
        dispatch(openFolderAction(path));
    }
    return null;  // <-- 后面有catch或者then必须加，不然就警告了
}).catch(sendFailAction(dispatch, ACT_OPEN_FAIL));
  • [task-20]图片和文字在同一行时，编辑文字不正常

2017年02月22日 星期三

查Immutable.js的用起来痛苦的资料，到了vue.js，发现了提到了MobX，了解了一下，原来是React上新的状态管理框架。查了下，都说比Redux好写很多，大致了解一下，感觉不错。

2017年02月26日 星期日 初步整合kityminder 学习mobx

看完了mobx教程，牛逼，这样就实现了自动更新了，写起来绝对比redux这种轻松很多。至于状态是可变的，目前看来只是不能时间旅行了。

大致用了一下，爽！最爽的一点是可以直接范围对象属性了，而不是使用immutable哪种恶心的访问方式。这就可以用上typescript的类型优势了。