【產品介紹】前端CronExpression生成表單插件

1 目錄

2 插件源碼

/**名稱：Quartz CornExpression設計表單插件
 * 
 * @CreateBy: [email protected]
 * @CreateOn: 2017-08-01
 * @UpdateBy: [email protected]
 * @UpdateOn: 2017-12-04
 * 
 * @param json 配置信息
 * @returns {
 *      init(): 初始化CronExpression表單
 *      analysis(String): 翻譯CronExpression爲中文
 * }
 */
function CronExpForm(json) {
    let options={
        container:null,
        baseModifiers: [ {name:"在", value:""}, {name:"每", value:"*"}, {name:"從", value:"-"} ],
        dayMidifiers: [ {name:"在", value:""}, {name:"每", value:"*"}, {name:"從", value:"-"}, {name:"距", value:"W"}, {name:"不定", value:"?"}, {name:"最後", value:"L"} ],
        weekMidifiers: [ {name:"在", value:""}, {name:"每", value:"*"}, {name:"從", value:"-"}, {name:"第", value:"#"}, {name:"不定", value:"?"}, {name:"最後", value:"L"} ],
        submit: function() {}
    };
    $.extend(true, options, json);

    // 時間類型與中文名稱的映射
    let chineseMap = {"year":"年", "month":"月", "week":"周", "day":"日", "hour":"時", "minute":"分", "second":"秒"};
    // 時間類型與修飾詞組的映射
    let modifierMap = [
        {name:"year", chinese:chineseMap["year"], modifiers:options.baseModifiers},
        {name:"month", chinese:chineseMap["month"], modifiers:options.baseModifiers},
        {name:"week", chinese:chineseMap["week"], modifiers:options.weekMidifiers},
        {name:"day", chinese:chineseMap["day"], modifiers:options.dayMidifiers},
        {name:"hour", chinese:chineseMap["hour"], modifiers:options.baseModifiers},
        {name:"minute", chinese:chineseMap["minute"], modifiers:options.baseModifiers},
        {name:"second", chinese:chineseMap["second"], modifiers:options.baseModifiers}
    ];
    let $container = $(options.container);

    /**名稱：初始化修飾詞
     * 描述：不同的時間類型擁有不同的修飾詞組，默認選擇修飾詞“每”（即CronExpression中的*）
     * @param name 時間單位唯一標識字符串
     * @param array 修飾詞組
     * @return HTML字符串
     */
    function initModifier(name, array) {
        let result = 
            "<div style='flex:0 0 auto;margin-right:1px;'>"+
                "<select id='modifier_"+name+"' class='form-control' data-for='"+name+"'>";
        if("week"==name) {
            $.each(array, function(i, v) {
                result += "<option value='"+v.value+"' "+("?"==v.value?"selected='selected'":"")+">"+v.name+"</option>";
            });
        }else {
            $.each(array, function(i, v) {
                result += "<option value='"+v.value+"' "+("*"==v.value?"selected='selected'":"")+">"+v.name+"</option>";
            });
        }
        result +="</select>"+
            "</div>";
        return result;
    }

    /**名稱：獲取各個時間類型的表達式
     * @param name 時間類型標識
     * @return Cron表達式
     */
    function get(name) {
        let modifier=$("#modifier_"+name).val();
        let interval=$("#interval_"+name).val();
        switch(modifier) {
            case "":
                let timeIn = $("#timeIn_"+name).val();
                return timeIn+(""==interval?"":"/"+interval);
            case "*":
            case "?": return modifier;
            case "-":
                let startTime = $("#startTime_"+name).val();
                let endTime = $("#endTime_"+name).val();
                return startTime+"-"+endTime+(""==interval?"":"/"+interval);
            case "L":
                let timeLast = $("#timeLast_"+name).val();
                if("1"==timeLast || ""==timeLast) return modifier;
                else {
                    if("week"==name) return timeLast+modifier;
                    else return modifier+"-"+timeLast;
                }
            case "W": return $("#timeOn_"+name).val()+modifier;
            case "#": return $("#timeAt_"+name).val()+modifier+$("#num_"+name).val();
        }
    }

    let cronDiv = $("<div id='cronExpForm' style='display:flex;flex-flow:column nowrap;align-items:stretch;'></div>");

    return {
        init: function() {
            $.each(modifierMap, function(i, v) {
                let divTimeWrapper=
                    "<div id='divTimeWrapper_"+v.name+"' style='flex:0 0 auto;display:flex;align-items:center;margin-top:10px;'>"+
                        "<div id='divModifierWrapper_"+v.name+"' style='flex:0 0 auto;display:flex;align-items:center;'>"+
                            initModifier(v.name, v.modifiers)+
                        "</div>"+
                        "<div id='divInputWrapper_"+v.name+"' style='flex:1 1 auto;display:flex;align-items:center;'>"+
                            "<span>"+v.chinese+"</span>"+
                        "</div>"+
                    "</div>";
                cronDiv.append(divTimeWrapper);
            });
            cronDiv.append("<div class='row form-group'><input id='btnSubmit' type='button' value='自動生成' class='btn btn-primary pull-right'></div>");

            cronDiv.find("#divTimeWrapper_week").hide(); // 默認不指定時間-周

            cronDiv.find("select").on("change", function(e) {
                e.preventDefault();
                let $name=$(this).data("for");

                let $modifier=$(this).find("option:selected").val();
                switch($modifier) {
                    case "":
                        let result1=
                            "<div style='flex:1 1 auto;'>"+
                                "<input id='timeIn_"+$name+"' placeholder='具體時間' class='form-control'/>"+
                            "</div>"+
                            "<span style='flex:0 0 auto;'>"+chineseMap[$name]+"&nbsp;每隔</span>"+
                            "<div style='flex:1 1 auto;'>"+
                                "<input id='interval_"+$name+"' title='間隔時間' placeholder='間隔' class='form-control'>"+
                            "</div>"+
                            "<span style='flex:0 0 auto;'>"+chineseMap[$name]+"</span>";
                        $("#divInputWrapper_"+$name).html(result1);
                        break;
                    case "L":
                        let result2="";
                        if("week"==$name) {
                            result2=
                                "<span>一個&nbsp;周</span>"+
                                "<div style='flex:1 1 auto;'>"+
                                    "<input id='timeLast_"+$name+"' placeholder='不填默認爲7，即週六' class='form-control'/>"+
                                "</div>";
                        }else {
                            result2=
                                "<span>&nbsp;第</span>"+
                                "<div style='flex:1 1 auto;'>"+
                                    "<input id='timeLast_"+$name+"' placeholder='不填默認爲1，即最後一天' class='form-control'/>"+
                                "</div>"+
                                "<span>日</span>";
                        }
                        $("#divInputWrapper_"+$name).html(result2);
                        break;
                    case "#":
                        let result3=
                            "<div style='flex:1 1 auto;'>"+
                                "<input id='num_"+$name+"' placeholder='' class='form-control'/>"+
                            "</div>"+
                            "<span style='flex:0 0 auto;'>個&nbsp;周</span>"+
                            "<div style='flex:1 1 auto;'>"+
                                "<input id='timeAt_"+$name+"' placeholder='具體時間' class='form-control'/>"+
                            "</div>";
                        $("#divInputWrapper_"+$name).html(result3);
                        break;
                    case "W":
                        let result4=
                            "<div style='flex:1 1 auto;'>"+
                                "<input id='timeOn_"+$name+"' placeholder='具體時間' class='form-control'/>"+
                            "</div>"+
                            "<span>"+chineseMap[$name]+"&nbsp;最近的工作日</span>";
                        $("#divInputWrapper_"+$name).html(result4);
                        break;
                    case "*":
                        $("#divInputWrapper_"+$name).html("<span>"+chineseMap[$name]+"</span>");
                        break;
                    case "-":
                        let result6 =
                            "<div style='flex:1 1 auto;margin-right:1px;'>"+
                                "<input id='startTime_"+$name+"' title='開始時間' placeholder='開始' class='form-control'>"+
                            "</div>"+
                            "<span style='flex:0 0 auto;'>"+chineseMap[$name]+"&nbsp;到&nbsp;</span>"+
                            "<div style='flex:1 1 auto;'>"+
                                "<input id='endTime_"+$name+"' title='結束時間' placeholder='結束' class='form-control'>"+
                            "</div>"+
                            "<span style='flex:0 0 auto;'>"+chineseMap[$name]+"&nbsp;每隔</span>"+
                            "<div style='flex:1 1 auto;'>"+
                                "<input id='interval_"+$name+"' title='間隔時間' placeholder='間隔' class='form-control'>"+
                            "</div>"+
                            "<span style='flex:0 0 auto;'>"+chineseMap[$name]+"</span>";
                        $("#divInputWrapper_"+$name).html(result6);
                        break;
                    case "?":
                        $("#divTimeWrapper_"+$name+" select option[selected='selected']").removeAttr("selected");
                        $("#divTimeWrapper_"+$name+" select option[value='?']").attr("selected", true);
                        $("#divTimeWrapper_"+$name).hide();

                        let hiddenName = ("week"==$name?"day":"week");
                        $("#divTimeWrapper_"+hiddenName+" select option[selected='selected']").removeAttr("selected");
                        $("#divTimeWrapper_"+hiddenName+" select option[value='*']").attr("selected", true);
                        $("#divTimeWrapper_"+hiddenName).show();
                        break;
                }
            });

            // 提交事件
            cronDiv.find("#btnSubmit").on("click", function(e) {
                e.preventDefault();
                let result = get("second")+" "+get("minute")+" "+get("hour")+" "+get("day")+" "+
                            get("month")+" "+get("week")+" "+get("year");
                console.log(result)
                $container.hide();
                options.submit(result);
            });

            $container.append(cronDiv);
        },
        /**Cron表達式解析函數
         * 狀態：已發佈
         * @param cronExpression Cron表達式
         * @return 字符串，格式：*年 *月 *日(間隔n日) *時 *分 *秒
         */
        analysis: function(cronExpression) {
            let chineseArray = ["秒", "分", "時", "日", "月", "周", "年"]; // cronExpression對應的中文單位數組
            let length = chineseArray.length; // cronExpression的長度。以中文單位數組爲準
            let cronArray = cronExpression.split(" "); // cronExpression表達式數組

            let results = new Array(); // 翻譯結果集
            /**翻譯cronExpression表達式數組
             * 1：考慮到秒、分、時、日、月、年的數字都在單位的前面，所以放在baseAnalysis裏面一起處理；
             * 2：周的數字放在單位後面，在weekAnalysis中單獨處理。
             * 3：翻譯結果集存放的順序：年、周、月、日、時、分、秒，需要將周放到日的位置上
             */
            $.each(cronArray, function(i, v) {
                // 1
                if(5!=i) {
                    results[length-i-1] = baseAnalysis(v).replace(/\$/g, chineseArray[i]);
                    results[length-i-1] = ""==results[length-i-1]?"":results[length-i-1]+" ";
                }
                // 2
                else {
                    results[length-i-1] = weekAnalysis(v).replace(/\$/g, chineseArray[i]);
                    results[length-i-1] = ""==results[length-i-1]?"":results[length-i-1]+" ";

                    // 3
                    // 將day of week的翻譯和day of month的翻譯拼接在一起，並覆蓋原day of month的翻譯
                    results[length-i+1] = results[length-i+1]+results[length-i-1];
                    // 清空day of week的翻譯
                    results[length-i-1] = "";
                }
            })

            let result = "";
            $.each(results, function(i, v) { result+="undefined"==typeof v?"":v; });
            return result;


            function baseAnalysis(str) {
                let result = "";
                let tempArray;
                if("*"==str) result += "每$";
                else {
                    if(0<=str.indexOf("-")) {
                        tempArray = str.split("-");
                        result += "從"+tempArray[0]+"$到"+tempArray[1]+"$";
                    }else if(0<=str.indexOf("/")) {
                        tempArray = str.split("/");
                        result += tempArray[0]+"$(間隔"+tempArray[1]+"$)";
                    }else if(0<=str.indexOf(",")) {
                        $.each(str.split(","), function(i, v) { result += v+"$,"; });
                        result = result.substring(0, result.length-1);
                    }else if(0<=str.indexOf("?")) {
                    }else if(0<=str.indexOf("L")) {
                        tempArray = str.split("L");
                        if(""==tempArray[0]) result += "最後一$";
                        else result += "最後一個"+tempArray[0]+"$";
                    }else if(0<=str.indexOf("W")) {
                        tempArray = str.split("W");
                        result += tempArray[0]+"$最近的一週";
                    }else {
                        result += str+"$";
                    }
                }
                return result;
            }

            function weekAnalysis(str) {
                let result = "";
                let tempArray;
                if("*"==str) result += "每日";
                else {
                    if(0<=str.indexOf("-")) {
                        tempArray = str.split("-");
                        result += "從$"+tempArray[0]+"到$"+tempArray[1];
                    }else if(0<=str.indexOf("/")) {
                        tempArray = str.split("/");
                        result += "$"+tempArray[0]+"(間隔"+tempArray[1]+"天)";
                    }else if(0<=str.indexOf(",")) {
                        $.each(str.split(","), function(i, v) { result += "$"+v+","; });
                        result = result.substring(0, result.length-1);
                    }else if(0<=str.indexOf("?")) {
                    }else if(0<=str.indexOf("L")) {
                        tempArray = str.split("L");
                        result += "最後一個$"+tempArray[0];
                    }else if(0<=str.indexOf("#")) {
                        tempArray = str.split("#");
                        result += "第"+tempArray[1]+"個$"+tempArray[0];
                    }else result += "$"+str;
                }
                return result;
            }
        }
    };
}

3 使用方式

將上述源碼添加到js文件中，並在頁面中引入。

3.1 生成表單

let cronExpForm = CronExpForm({
    container:"div.cronForm",
    /*單擊按鈕提交時將生成的CronExpression寫入input*/
    submit:function(result) {
        $("input[name='cronExpression']").val(result);
    }
});
cronExpForm.init();

3.2 翻譯表達式

let str = CronExpForm().analysis(String cronExpression);