vscode的单页应用实在太复杂了，只要能够掌握此应用，其它复杂应用都不在话下了。

我们先看有哪些实际用例

  • 一个操作多处UI和更新和行动(刷新预览器)，如切换工作区功能
  • 文件右键菜单rename按钮对左侧item进入修改态
  • 文件打开，左侧文件树展开和激活
  • 文件修改，左侧文件树状态标记
  • 文件树treeView和viewItem状态相互作用
  • 操作文件树添加文件等按钮
  • tab区管理，关闭所有文件，关闭右侧文件等等。
  • 编辑区，文件树切换文件，左侧菜单，右侧文
  • 修改主题

单页应用特征思考

不同语言如何设计

  • vscode如何设计？
  • react如何设计

先看一些行为vscode如何实现的

  • 右键菜单rename，左侧item进入编辑状态

  • 编辑区，文件树面包屑切换

点击切换文件，左侧的文件树激活，编辑区对应文件打开。逻辑有点复杂的。

  • cmd+p 查找打开一个文件

左侧文件树打开，编辑区文件打开，文件树面包屑激活

单页应用的特征思考

Redux数据驱动的单页应用

  • 组件化
  • 数据驱动视图(Model Driver View)

Redux

  1. 数据驱动视图，视图变更也由数据变更驱动

  2. 当前数据结果，由初始数据加数据变更

  3. redux，数据变更由action指令完成，称为命令驱动模式

借鉴