-
Notifications
You must be signed in to change notification settings - Fork 2
前端文档
刘红 edited this page Nov 3, 2015
·
1 revision
自己开发的模仿WIN7界面的框架,可深度定制。
经过两三个月的前端开发,终于快接近尾声了,项目总结更是少不了的。ConsoleWindowApp
前端部分使用React
+flux
的框架开发,遵循MVC
的框架结构,以数据为驱动,flux
数据流为导向。
我们需要关注的点在于单点存储的数据,这也是我们后边需要和后端进行巧妙结合的地方。当然,这在后边我们会细说。
flux
作为数据流导向,遵从的是单向数据流,不允许在render dom
的时候,再对数据进行操作,任何一个状态都是由数据来管控的,这就是使用React
和其他MVC框架之间的区别。和其他允许双向绑定数据的框架不同,React
的单向数据流将很好的避免因为双向绑定带来的复杂逻辑甚至是数据绑定死循环。
整体React
+flux
项目的文件夹如下:
-- reactjs # 整个前端工程目录文件夹
|- actions # 视图修改或者数据修改,触发Actions
|- WinSettingsActionCreators.js
|- componets # 所有的自定义控件
|- base
|- Button.react.js # 按钮控件,很多按钮继承与此类
|- Dialog.react.js # 对话框控件,允许同一APP有多个Dialog同时开启
|- Resize.react.js # 拖拽和改变窗体大小
|- SnapShot.react.js # taskbar上的缩略图显示
|- Splitter.react.js # 分割线
|- Widget.react.js # Widget是不带关闭按钮的Dialog,全局只有一个
|- Window.react.js # Widget是带最小化和最大化按钮的Dialog,允许同一APP有多个Window
|- buttons
|- CloseSystemButton.react.js # StartMenuWidget上的关闭按钮
|- DesktopButton.react.js # 所有桌面上的按钮
|- IconButton.react.js # 所有StartMenuWidget上的左边按钮
|- StartMenu.react.js # Taskbar上的开始按钮
|- StartMenuButton.react.js # 所有StartMenuWidget上的右边按钮
|- TaskbarButton.react.js # 所有Taskbar上的按钮
|- containers
|- Desktop.react.js # 桌面
|- DesktopButtons.react.js # 桌面的按钮
|- SnapShots.react.js # 缩略图容器
|- TaskBar.react.js # 任务栏
|- TaskbarButtons.react.js # 任务栏按钮容器
|- Windows.react.js # 容纳所有窗体的容器
|- widgets
|- StartMenuWidget.react.js # 开始菜单的Widget
|- WinApp.react.js # 整个界面最大的容器
|- constants
|- WinAppConstants.js # 存储事件名称和动作名称
|- dispatcher
|- WinAppDiapatcher.js # 管理事件注册和触发
|- stores
|- WinSettingsStore.js # 存储系统基础数据
|- utils
|- WinAppWebApiUtils.js # WebApi对接工具类
|- WinAppObjectUtils.js # Object对象扩展类
|- app.js
|- WinAppLocalStorage.js # 本地存储,在为开放WebApi时,暂且替代WebApi
-- package.json # npm项目文件
-- static # 静态资源
|- js
|- app.js # 打包生成
|- app.min.js # 压缩生成
|- images # 所有项目需要的图片
|- *.png|*.jpg|*.gif
|- css
|- app.css # 项目的CSS
大家看到,整体前端都是放在reactjs
项目夹下边的,可能会根据功能及时调整,但是大致不会有太大的重命名。
希望大家踊跃的试用本项目, 多提issue , 多提意见 。在这里 感谢提出issue的各方大侠 ,你们是优秀的好样的,谢谢你了~