本文的话题是：性能，HTML5、JS、Qunee组件的性能和效率问题 历史回顾 以往提到Javascript，联想到的是缓慢的、容易出错的小东西，一种脚本语言，现在浏览器的发展，js引擎的优化，js已经今非昔比，无论在浏览器端还是服务器端，都有一席之地，结合HTML5开发企业级应用变得切合实际，以往要在浏览器中实现丰富的图形效果，通常会选择flex富客服端解决方案，也有些Web2.0时代的组件，比如Extjs，以及各种图表组件，但性能上并不理想，随着HTML5的普及，Web组件有了新的思路，抛弃老IE浏览器，了却后顾之忧，实现真正的高性能，这一点Qunee图形组件已经将Flex远远抛到脑后，实现上万图元，流畅操作 静态拓扑图性能 首 …
阅读更多2014.6.3日，苹果公布最新编程语言Swift，Swift是一种新的编程语言，用于iOS和OS X应用的开发，没有C的兼容性限制，Swift采用安全的编程模式，增加了现代功能，使编程变得容易，更灵活，更有趣，Swift的重新设计，依靠成熟和备受喜爱的Cocoa, Cocoa Touch 框架，是重新构想软件如何开发的机会。 Swift官网 关于Swift 以下为语法介绍 原文：A Swift Tour 翻译：blog.qunee.com - swift语法介绍 传统建议新语言的第一个程序是打印“Hello world”，对于Swift是下面的一行代码 println("Hello, world") 如果你 …
阅读更多有客户提到网络监控需求，需要展示服务器状态，告警，以及监控信息，比如CPU，内存，宽带状态，使用柱状图展示，Qunee目前并不提供这些图表，需要些扩展代码来实现，尝试了一下，发现还是挺容易的 柱状图信息展示 首先来看CPU柱状图，扩展了一个UI组件，实现了绘制和测量方法，非常简单，绘制代码中取#data属性作为百分比，并根据数值获取红黄绿不同颜色，此外还有文字位置的细节代码 创建BarUI function BarUI(data) { Q.doSuperConstructor(this, BarUI, arguments); } BarUI.prototype = { width: 100, height: 20, measure: …
阅读更多Qunee for HTML5 v1.4正式发布，改善了交互功能，增强了自动布局功能，增加了相关文档，调整了示例代码，以及一些细节修改和增加，是一次重要更新，欢迎联系升级 在线演示：demo.qunee.com 升级申请：qunee.com/#try 气泡布局示例 自动布局是图的重要功能，有十几种常见布局算法，目前Qunee提供：TreeLayouter, SpringLayouter, BalloonLayouter，后期逐步完善 路况图示例 用于展示各个车道路况状态 设备面板示例 Qunee开发模式 在线示例列表 演示示例做了小幅修改，增加了在线示例列表，用于提供更多Qunee相关示例
阅读更多前面介绍了上海地铁图的绘制，最近有客户提出了新的需求：双车道，并显示路网状态信息。经过一番研究，在原地铁图基础上做了扩展实现 交通图介绍 路况状态在GIS系统中广泛应用，谷歌地图，百度地图都有实时路况的功能，太复杂并非好事，就像地铁图，按真实经纬度呈现反而不够直观，交通图、路网也是如此，去掉无关信息，将有限的数据（路，收费站，路况）展现出来，成为一种解决方案 百度地图中的路况信息 双车道的绘制 来看具体实现，原来的地铁图是一条线表示，改用双线绘制，可表现来往的方向，canvas并没有双线线形，需要自己实现 三种连接点类型 双线的算法类似2d中的stroke算法，stroke拐点有三种方式：尖的、圆角、斜面，考虑到路网拐角不会太尖， …
阅读更多web应用越变的庞大，模块化越显得重要，尤其Nodejs的流行，Javascript不限用于浏览器，还用于后台或其他场景时，没有Class，没有Package的Javascript语言变得难以管理，于是出现CommonJS项目，提出了一些规范模块化的写法，在Nodejs中普遍应用，同样浏览器端也出现了类似的解决方案，并结合浏览器异步加载的特性，有RequireJS提出的AMD（Asynchronous Module Definition）规范，以及SeaJS提出的CMD（Common Module Definition）规范，两者都实现Javascript了模块化定义的APIs，各有异同，下面将分别使用两种方案，实现Qunee组件的 …
阅读更多客户提到设备面板的需求，qunee并没有Equipment这样的图元，但借助父子关系和跟随关系设置，可以实现类似功能，并完成下面的例子 示例代码 代码非常简单，这里直接列出 var graph; function init(){ graph = new Q.Graph('canvas'); graph.originAtCenter = false; graph.translate(20, 20); var rack = createEquipment("", 4, 1, "images/shelf.jpg"); var card1 = …
阅读更多HTML第三方组件种类繁多，小到按钮，工具栏，大到树图，表格，布局框架，以及各种图表，每种组件都有其优势，比如EasyUI的树和表格，Bootstrap的表单，Qunee的拓扑图等，一个应用需要整合多种组件，本文将以一个示例来介绍EasyUI与Qunee组件的同步使用 引入相关js和css文件 本例用到jquery, bootstrap, easyui和qunee，分别引入相关文件 <script type="text/javascript" src="http://demo.qunee.com/js/jquery/jquery.min.js"></script> …
阅读更多