一款简单的基于html页面的活动配置引擎的设计

 
该活动引擎可以实现不用编写逻辑代码而通过简单的活动页面配置实现相对固定的功能，旨在解决相对不变的功能但仍然在占用开发人力的问题，该解决方案抽象自我工作中的项目，基于重构稿，也就是html页面，css样式仍然需要人力介入，不过那部分在一般活动的页面中也比较多变，不适合使用该方案，如果大家有人正在不停的做着市场活动，觉得枯燥乏味，不妨一试，通过workplace来配置，workplace是一套可定制的配置界面，下面详细介绍workplace。

workplace

workspace是一个可视化的配置平台，可以对活动之类简单的页面进行配置，它是构建在activityEngine和configEngine基础之上的可视化的工作环境，输出activityEngine可读的配置config.js，并且基于configEngine打造了高度的可扩展性。

demo

 

视频中可以看到，我没有写任何代码，所有的功能均通过配置来实现。

这里提供一个简单的demo地址，http://115.29.195.88:86/，一个测试用的页面index.html，把测试页面下下来在demo里上传就可以了，大家也可以直接访问http://115.29.195.88:86/workplace.html?path=%2Fbackend%2Fhtml%2Findex.html 来直接体验配置环境。

开始

我尽量用最简单的方式描述如何创建一个类似于helloworld的工程

上 https://github.com/AlanGuo/workplace获取最新的工程文件搭建node后台，大家可以使用我的node环境，但是强烈建议使用者自行搭建一个后台环境，后台主要支持简单的文件操作，用到的方法源码里面有，稍作改动，甚至不用改动即可使用。定制自己的template.js定制自己的activityEngine.js配置第一个活动

通过这5步即可完成一个活动的配置，如果您的活动页面功能相对比较固定的话，前面4步都是一劳永逸的，之后的每次只需要传不同的文件，生成不同的配置就好了。

下面从搭建node后台开始相信介绍每个步骤

搭建node环境

这里需要一个简单的node http服务器，我这里用的是我自己简单写的一个node_server，能支持get和post请求，静态文件访问就够了。目录下有个config.js文件，在里面完成如下配置

//虚拟路径的配置   
exports.virtualPath = {
    ...
    80:...路径.../workplace
    ...
}

//处理程序的配置
exports.handlers = {
    ...
    80:function() {
        var requestHandlers = require(...路径.../workplace/backend/requestHandlers);
        var handles = {};
        handles[/cgi-bin/file_upload] = requestHandlers.services.fileUpload;
        handles[/cgi-bin/draftList] = requestHandlers.services.draftList;
        handles[/cgi-bin/saveDraft] = requestHandlers.services.saveDraft;
        handles[/cgi-bin/draft] = requestHandlers.services.draft;
        handles[/cgi-bin/exports] = requestHandlers.services.exports;
        return handles;
    }
    ...
}

配置好之后，进入node_server目录，执行 node index.js 就可以了，这时候，你就可以通过

http://localhost/来访问workplace了，如果您得到了如下画面，那么恭喜你，我们将进入下一个歩楱

定制自己的 template.js

我们先定制一个界面来制定我们的操作，这样实现之后，我们可以在界面上选择我们需要的操作，比如打开新窗口，我们就添加一个名为打开新窗口的选项，给他一个参数设置面板，依然以demo中的代码为例。更详细的配置说明请参考此处：configEngine

var template = (function(){
    return{
        //操作options
        //操作选项
        //名称，和actionsTemplate模板中的对应，值是自定义的，如果没有参数，写no param
        activEngine.commonOp.alert: holyshit.template.details.alert,
        activEngine.commonOp.updateUI: holyshit.template.details.updateUI,
        activEngine.commonOp.openNewPage: holyshit.template.details.openNewPage,
        activEngine.commonOp.cgi: holyshit.template.details.cgi,
        //空选项
        : no params
    }
})();

上面的代码是template.js中的内容，这里借用了一个工具来把模板数据合并到js中，关于工具的使用请参见https://github.com/skyzhou/merger，这里不用工具也是可以的，上面每项hash key后面实际上对应的是下面的html代码。如：

activEngine.commonOp.alert:holyshit.template.details.alert

对应代码

activEngine.commonOp.alert:

也是可以解析的，上面说的工具只是帮助完成了这个替换工作。下面的代码是template.js中对应的html文件，它在目录下的workplace/template/template.html中可以找到

 

......

 

关于模板配置的详细信息请参考 configEngine，这里只是举例说明。

定制自己的activityEngine

在定制好选项之后，我们还需要实现选项中的功能，这个文件将会在输出的页面中引入，提供activeityEngine扩展的一部分，activityEngine由基础的activityEngine和扩展的activityEngineextend构成，具体的原理参见https://github.com/AlanGuo/activityengine，这里只讲 activityEngine_extend

这里以demo中的扩展为例

//工具方法
var util = {
    returnCode : function(result){
    },
    tmpl: function(){}
}

//改写init方法，init方法提供页面加载时的初始化功能，可以通过定制来完成自己的初始化工作
config.activEngine.extend(function(config){
    var _self = this;
    this._init(config);

    //额外的初始化
    if(config.options.init){
        _self.execOperation(config.options.init);
    }

},{type:init});

//扩展commonOp，commonOp是活动中常用功能的集合，可以在这里扩展自己的常用功能，这里的功能可以用在workplace中用来给按钮加时事件
config.activEngine.extend({
    //更新ui
    updateUI : function(param, context){
        document.getElementById(param.elem).innerHTML = util.tmpl(param.value,{context:context},{strIsKey:false});
    },

    openNewPage:function(param, context){
        window.open(param.location);
    },

    alert:function(param, context){
        window.alert(param.content);
    },

    cgi:function(param, context){
        var _self = this;
        var cgi = param.cgi;
        var successStep = param.steps.success;
        var failStep = param.steps.fail;
        var inParam = param.inParam;
        param.method = param.method || get;

        if(param.method.toLowerCase() == post){
            //post
            throw new Error(no implemented);
        }
        else{
            //get
            window._callback = function(result){
                document.body.removeChild(script);
                if(result.code == 0){
                    if(successStep)
                        _self.execOperation(successStep,result.data);
                }else if(failStep){
                    _self.execOperation(failStep,result);
                }
                else{
                    _self.coreOp.busy();
                }
            }
            var script = document.createElement(script);
            script.src = cgi;
            document.body.appendChild(script);
        }
    }
});

//codeOp扩展，coreOp是预定义功能需要使用到的方法，他们都不带参数，也可以扩展重写，本例中没有用到
config.activEngine.extend({},{type:core});

注意，这个文件是需要在后期完成的活动页面中引入的，他提供了配置界面中配置出来的方法的实现。

配置活动

到此，一切准备工作已经做完，现在可以访问http://localhost/来启动了，上传好html之后，可以看到如下界面就对了可以看到左边的面板是刚才我们配置的模板，包含一个初始化操作的选项。当配置好之后，我们点生成活动，会有如下界面下载index.html和config.js，这个文件是经过格式化的，我们依然可以进行后续编辑。这里直接运行，效果如下图

好了，enjoy~