工作流、web拓扑实现。

Strawberry是支持在Web上绘制工作流,拓扑图及其它简单拥有交互能力(用户行为或后台响应)的自定义绘图;并支持兼容主流浏览器(IE、火狐、Chrome、Safari等)。

一.拓扑图

拓扑图的主要元素为"节点"、"链路"、"通路".

1.节点就是网络单元,网络单元是网络系统中的各种数据处理设备、数据通信控制设备和数据终端设备。

2.链路是两个节点间的连线。

3.通路是从发出信息的节点到接收信息的节点之间的一串节点和链路。(百度)

二.工作流

简单说,就是工作从开始到完成的过程。工作流由流程逻辑和路线规则组成。

流程逻辑定义了任务的顺序和必须遵循的路线规则,还有截止期限以及由工作流引擎实现的其他业务规则。(google)

三.自定义绘图

在页面上能够任意的对模型元素进行布局、拖拽、并能够通过与用户或后台的交互(操作)来改变页面元素的表现形态。可由图片或动画来提供更加丰富的交互效果。

四.应有功能

1.模元:描述拓扑图中的"节点",工作流中的"流程逻辑",自定义绘图中的"模型元素"需要能够进行缩放,并能够附带业务信息。
2.线元:描述拓扑图中的"链路",工作流中的"路线",自定义绘图中的线条元素,如分割线等。
3.模元组:对模元进行编组,方便操作。
其它应有扩展功能:
4.历史操作
5.略缩图
6.对齐
7.预览
8.打印
9.Word工具栏

五.性能

JavaScript为什么慢?
javaScript是解释型语言,并不能直接翻译成本地代码。所以相对于可以直接编译为本地代码的语言,速度方面是不具备可比性的。
javaScript虽然名字里有Java但其实真的跟Java没什么太大的关系。所以像Java语言中积累优化(编译优化、运行期优化)方法也有很多并不存在。所以就要求开发人员掌握更多开发的技巧来一点一滴的来挤性能。

1.尽量避免dom操作
2.局部变量优先(作用域链)
3.高效ECMAScript写法
4.如何有效减少重绘重排
5.减少事件数
6.js压缩
7.内存泄露
8.其它:CSS相关、正则相关、网络相关、Ajax相关、缓存相关、当然还有最重要的"[b]兼容主流浏览器[/b]"!(我很少用!号)。

目前Strawberry中创建一个模元时间大体为16毫秒,拖动模元、创建线元、拖动线元均可控制在45毫秒之内(具体浏览器可能有偏差)。

以上所列的并不是关于js优化方案的全部主题,如果你想了解更多有关js内容欢迎加入我们讨论相关性能的问题。

六.版本情况

虽然目前版本并没有正式Release,但从发布后已经有很多朋友用于正式的商业项目中去了。虽然和主流商用产品比起来,目前来看确实缺少了一些功能。但经过二次开发或调整解决方案也是大多能够达到预期的要求,满足客户的需要。
最初strawberry只是因为个人兴趣和爱好驱使建立的,所以主要偏重于如何实现功能,如何解决各种主流浏览器兼容问题。类似调研试验项目,所以并没有在代码的整体结构和扩展性上投入过多的设计。现阶段计划重构整个项目,打算在YUI或Dojo两种体系结构中选择一种作为基础结构开发以保证高质量的扩展性与可维护性,并提供更多的实用功能。
目前strawberry群组中有很多专业从事JavaScript前端的朋友(前HP高级前端、前方正高程、等知名企业的工程师)如果您对strawberry有什么建议或疑问。我们也会耐心解答,同时如果你想加入我们,成为strawberry的一员,为strawberry贡献源代码。我们更是欢迎。

七.未来功能

1.支持图片导出(群内成员最新需求)
2.支持主流工作流兼容
3.动画效果
4.提供方便简洁的数据访问接口(群内成员需求
5.3D
6.完善的文档
7.尽可能的高效

如果你喜欢javaScript、喜欢java、喜欢数据库、善于沉淀积累、乐于分享助人,有好的点子。我们欢迎你加入我们的群讨论组:[b]55959447[/b]

Strawberry项目地址(源码):http://code.google.com/p/xiaojw-graph-strawberry/
(如果打不开,请耐心多尝试几次.)

新建流程:
[img]http://dl.iteye.com/upload/attachment/550402/503154bb-61ec-34d0-9879-c3e113e412af.jpg[/img]
流程图1:
[img]http://dl.iteye.com/upload/attachment/550400/eaf3659c-9d3e-3ef5-a37b-2c14d3d7e7a5.jpg[/img]
流程图2:
[img]http://dl.iteye.com/upload/attachment/550398/e0d0f720-06b1-3933-bce4-52aa015e2aa3.jpg[/img]
grunt-workflow 是一个帮助前端开发工程师简化工作的工具,它的主要功能是: webserver livereload,能保存文件的时,自动刷新浏览器. 自动编译sass 压缩图片 合并图片 添加文件注释 自动补全css3浏览器前缀 初始化项目目录结构及文件 支持ejs模板 安装相关软件 安装 nodejs window 安装地址 , mac 推荐通过brew安装brew install node 安装 grunt-cli npm install -g grunt-cli 安装 grunt-init npm install -g grunt-init 将当前git克隆到本地%USERPROFILE%\.grunt-init\(Mac平台 ~/.grunt-init/),如果没有.grunt-init目录可用mkdir .grunt-init命令创建 安装 Graphics Magick(gm),下载地址 (Mac平台 brew install GraphicsMagick) 安装 PhantomJS,下载地址 (Mac平台 brew install phantomjs) 安装 sass gem install sass 初始化新项目 在项目目录下执行 grunt-init lego (注意:项目目录要为空文件夹,不然会报错) 根据提示填写相关的内容 执行 npm install 命令下载安装相关依赖 快速在当前文件夹打开命令行 win7:首先按住Shift键,然后选择某文件夹后或在某文件夹中的空白处右键单击,快捷菜单中会多出“在此处打开命令窗口”,选择这个选项即可 Mac:安装 gotoshell 建立软链接 使用下面命令能避免每次在新项目开始前都要使用 npm install 下载相关的grunt插件 window: - mklink /d .\node_modules C:\Users\Administrator\Desktop\grunt_plugins\node_modules mac:ln -s ~/Documents/grunt_plugins/node_modules ./node_modules (~/Documents/grunt_plugins/node_modules) 目录是存放grunt插件的文件夹 项目目录结构 └── src     ├── _index.html     ├── css     │   └── lib     ├── img     ├── js     │   └── lib     ├── sass     ├── partial     ├── data     └── slice html页面存放在src文件夹,支持ejs模板(见5)。 css存放在 src/css 文件夹,第三方的样式库放在 src/css/lib js存放在 src/js 文件夹,第三方的样式库放在 src/js/lib src/slice 文件夹放需要合并的图片;若需要多张雪碧图,则自建子文件夹,一个子文件夹对应一张雪碧图,子文件名为雪碧图名(注意,需要替换雪碧图的css文件,切片使用background-image属性来引入,不使用background属性引入。) ejs模板片段放在src/partial文件夹,模板数据放在src/data文件夹。配置数据统一在src/data/config.json指定(注意:没有配置的html页面不参与ejs渲染)。 注意:src/css/lib 和 src/js/lib 里的文件是不会被压缩的。 任务 项目安装好了相关的配置就可以在命令行下使用grunt任务 grunt 默认打开一个webserver,查看的文件是在开发目录下,支持livereload,sass自动编译,ejs编译 grunt port:端口号 指定端口打开一个webserver,查看的文件是在开发目录下,支持livereload,sass自动编译,ejs编译 grunt release 生成发布文件,执行gunt release生成一个dest的目录,检测样式文件里的本地资源引用,如果有无效引用则中断任务,否则执行后续任务:编译html,压缩css、js文件,自动生成sprit图片,替换css样式里的链接。dest里的文件是发布使用的。 grunt dest 打开一个webserver,显示dest目录 grunt assets:提交注释 提交dest里面的静态文件(css、js、img)到静态文件服务器,提交路径为%SVN_REMOTE_DIR%/<description>/<name>/<version>,详见注意事项。 grunt zip 打包src和dest文件给技术。其中dest文件夹作如下处理:将 dest/*.html 的 相对路径的静态资源 引用替换为线上路径;若不需替换,资源路径换成 绝对路径 。 该命令在grunt release后执行,线上路径由 包描述文件(见注意事项) 指定。dest里的静态资源可通过grunt assets或手动上传到assets服务器。 可选配置 配置文件: ~/.grunt-init/config.json IS_EXEC_CUSTOM_CMD 是否启用初始化时执行默认命令,默认不启动。 LINK_SRC_NODE_MODULES 建立node_modules软链接的源路径。(建议mac用户指定到~/.node_modules, win用户指定到%USERPROFILE%\.node_modules) OPEN_APP 初始化目录后启动APP打开当前项目。 注意事项 提交到 svn-work 时(需手动提交),只上传配置文件 Gruntfile.js 、 package.json 和源码文件夹 src/ 即可 提交到 svn-assets 时,需说明:svn-assets提交路径为%SVN_REMOTE_DIR%/<description>/<name>/<version>,对应线上路径为 http://assets.dwstatic.com/<description>/<name>/<version> description,项目类型,取值:project、game、special name,项目名,不要出现中文字符 version,项目版本,默认值:1.0.0 修改模板文件~/.grunt-init/lego/root/Gruntfile.js里面push_svn任务的用户信息 在grunt-init lego时注意以下字段的填写,或者在初始化后的 package.json 中修改对应字段 标签:grunt
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值