基于HTML+JS的灵活、可扩展的桌面软件架构

      工作已经有好几年了，对于技术、架构和事业也有了一些的感悟，特地在这里总结一下，作为最珍贵的留念吧

---

下面开始进入正题，以下的设计是一些基础的应用，之后的博文会慢慢扩展到成熟、规范的设计

一、技术基础：

• HTML5 发展迅速，不断成熟
• 主流浏览器性能不断提升
• 动态插件模式的应用

二、构架原理：

• HTML负责软件UI部分
• 自定义浏览器核心负责渲染HTML及提供JS调用插件的接口
• JS负责处理界面数据展示及调用插件

• 插件模块负责扩展软件功能

  架构图如下：

三、Window平台实现

在Window平台，我们选用如下组件去实现这个软件架构：

组件 实现 界面部分 HTML 逻辑编程部分 Javascript 日志组件 自己实现的简单文件日志 渲染引擎 IE的Trident（具体实现是VC中的CDHtmlDialog） 插件 DLL（windows平台的动态链接库）

四、实例-【简单CPU、内存性能监控软件】
    举例说明，比如现在要开发一款监控电脑CPU及内存占用率的软件，要用曲线图展示占用率的变化趋势，类似这样：

    涉及前端编程的同学们应该知道，基于JS的许多框架多可以实现以上的效果，如highcharts、echarts等等，那么我们就暂时采用highcharts【highcharts官网】实现一下这个效果吧。

很简单的代码：

$('#container').highcharts({                chart: {                    type: 'spline',                    animation:Highcharts.svg,                   marginRight: 10,                    events: {                        load: function() {                            dataSeries =this.series[0];                            dataSeries1 =this.series[1];                        }                    }                },                title: {                    text: ''                },                xAxis: {                    type: 'datetime',                    tickPixelInterval: 100                },                yAxis: {                     min: 0,                     max:100,                    title: {                        text: name+"/"+name1                    },                    plotLines: [{                        value: 0,                        width: 1,                        color: '#808080'                    }]                },                tooltip: {                    formatter: function() {                            return '<b>'+ this.series.name +'</b><br/>'+                            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+                            Highcharts.numberFormat(this.y, 2);                    }                },                 legend: {                    layout: 'vertical',                    align: 'right',                    verticalAlign: 'top',                    x: -10,                    y: -15,                    borderWidth: 0                },                exporting: {                    enabled: false                },                series: [{                    name: name,                    data: (function() {                            var data = [],                            time = (new Date()).getTime(),                            i;                        for (i = count; i <= 0; i++) {                            data.push({                                x: time + i * 1000,                                y: -1//Math.random()                            });                        }                        return data;                    })()                    },                    {                    name: name1,                    data: (function() {                        // generate an array of random data                        var data = [],                            time = (new Date()).getTime(),                            i;                        for (i = count; i <= 0; i++) {                            data.push({                                x: time + i * 1000,                                y: -1                            });                        }                        return data;                    })()                }]            });

显示部分整好了，那么问题来了，cpu和内存的占用率如何获取？

接下来就轮到插件大显神威了，JS通过自定义浏览器的插件调用接口，调用DLL插件（功能是：获取系统的运行参数，包括cpu和内存的占用率），然后动态赋值到highcharts的曲线图中，就可以实现电脑的cpu、和内存的实时监控了

PS：关于JS如何通过CHtmlDialog调用C++代码，可以参考[CDHtmlDialog 与 网页交互技巧]
(http://blog.csdn.net/catxl313/article/details/2204541)

下图是软件框架目录：

其中：

data文件夹存放数据文件plugins文件夹存放插件ui文件夹存放界面HTML

运行效果如图：

就这样，一个界面可扩展、功能可扩展的软件架构就完成了

在这里下载示例程序

接下来的博文会讨论此框架详细实现机制，展示 js如何在此框架基础上操作Sqlite数据库，请期待！