js 中的模块化编程思维

把模块写成一个对象，所有的模块成员函数都放到这个对象里面。

JS 代码实例：

$(function () {
    App.renderScenarioNodes();
});

let App = {
    /**
     * 新增下一个节点按钮事件
     */
    bindAddNodeEvent: () => {
        $('#add-node-btn').unbind().bind('click', () => {
            let currentNodeNums = inputEditors.length; // 节点序号，从 1 开始

            let nextNodeIndex = currentNodeNums + 1;
            App.appendNode(nextNodeIndex);
            App.renderCodeArea(nextNodeIndex);
        });
    },

    /**
     * 添加节点视图
     * @param NodeIndex
     */
    appendNode: (NodeIndex) => {
        let firstNodeHtml = App.newNodeHtml(NodeIndex);
        $('#node-list').append(firstNodeHtml);
    },

    /**
     * 渲染节点 CodeMirror 代码区域
     * @param NodeIndex  节点序号，从 1 开始
     */
    renderCodeArea: (NodeIndex) => {
        let inputArray = $('[name="input"]');
        let outputArray = $('[name="output"]');
        let inputEditor = CodeMirror.fromTextArea(inputArray[NodeIndex - 1], CodeMirrorOptions);
        let outputEditor = CodeMirror.fromTextArea(outputArray[NodeIndex - 1], CodeMirrorOptions);

        setHeight(inputEditor, CodeMirrorHeight);
        setHeight(outputEditor, CodeMirrorHeight * heightRatio);
        showCodeHint(inputEditor);
        showCodeHint(outputEditor);

        inputEditors.push(inputEditor);
        outputEditors.push(outputEditor);
    },
    /**
     * 所有"保存"按钮事件绑定
     */
    bindNodeSaveEvent: () => {
        $('[name="save-node-btn"]').unbind().bind('click', (e) => {
            e.preventDefault();
            let currentNodeIndex = $(e.currentTarget).attr("index");

            let inputEditorValue = inputEditors[currentNodeIndex - 1].doc.getValue();
            let outputEditorValue = outputEditors[currentNodeIndex - 1].doc.getValue();

            // CodeMirror 的值的获取
            $(e.currentTarget.form).find('[name="input"]').val(inputEditorValue);
            $(e.currentTarget.form).find('[name="output"]').val(outputEditorValue);

            let data = $(e.currentTarget.form).serialize();
            let scenarioId = $('#scenarioId').val();
            data = `${data}&scenarioId=${scenarioId}`;

            console.log(data);

            // 节点信息保存
            $.ajax({
                url: '/api/Node/saveNode.json',
                type: 'POST',
                data: data,
                success: (result) => {
                    if (result.success == true) {
                        alert(result.errorMessage)
                        location.reload();
                    } else {
                        alert(result.errorMessage)
                    }
                },
                error: (err) => {
                    alert(JSON.stringify(err))
                }
            });
        });
    },

    /**
     * 入口主函数，渲染一个场景的所有节点 List
     */
    renderScenarioNodes: () => {
        let scenarioId = $('#scenarioId').val();
        $.ajax({
            url: `/api/Node/listNodes.json?scenarioId=${scenarioId}`,
            type: 'GET',
            success: (result) => {
                if (result.success) {
                    let nodes = result.data;
                    App.doRenderScenarioNodes(nodes);
                } else {
                    alert(result.errorMessage)
                }
            },
            error: (err) => {
                alert(JSON.stringify(err))
            }
        });
    },

    /**
     * 渲染节点视图
     * @param nodes
     */
    doRenderScenarioNodes: (nodes) => {
        console.log(nodes);

        // 1.渲染已经入库的节点数据
        nodes.map((node, index, array) => {
            let savedNodeHtml = App.getSavedNodeHtml(node, index + 1);
            $('#node-list').append(savedNodeHtml);
            App.renderCodeArea(index + 1);
        });
        // 2.渲染最下面的新建节点视图
        let nextNodeIndex = nodes.length + 1;
        App.appendNode(nextNodeIndex);
        App.renderCodeArea(nextNodeIndex);

        // 3.所有"保存"按钮事件绑定
        App.bindNodeSaveEvent();

        // 4. 新增节点按钮事件绑定
        App.bindAddNodeEvent();
    },

    /**
     * 返回新建节点的视图 Html
     * @param NodeIndex
     * @returns {string}
     */
    newNodeHtml: (NodeIndex) => {
        return `

            

                

                    节点${NodeIndex}:
                    

                        
                    
                

                

                    输入脚本
                    

                        
                    
                

                

                    期望输出脚本
                    

                        
                    
                

                

                    期望输出值
                    

                        
                    
                

                

                    断言算子

                    

                        
                            实际输出.equals(期望输出)
                            实际输出.contains(期望输出)
                            实际输出.startWith(期望输出)
                            实际输出.endWith(期望输出)
                        
                    
                

                

                    
                    

                        保存
                    
                
            
        
`;
    },


    /**
     * 返回已经入库的节点的视图 Html
     * @param node  节点数据
     * @param NodeIndex  节点序号
     * @returns {string}
     */
    getSavedNodeHtml: (node, NodeIndex) => {  // NodeIndex ： 序号从 1 开始
        const operator = node.operator;
        let options = `实际输出.equals(期望输出)
                    实际输出.contains(期望输出)
                    实际输出.startWith(期望输出)
                    实际输出.endWith(期望输出)`;
        if ("equals" === operator) {
            options = `实际输出.equals(期望输出)
                    实际输出.contains(期望输出)
                    实际输出.startWith(期望输出)
                    实际输出.endWith(期望输出)`;
        } else if ("contains" === operator) {
            options = `实际输出.equals(期望输出)
                    实际输出.contains(期望输出)
                    实际输出.startWith(期望输出)
                    实际输出.endWith(期望输出)`;
        } else if ("startWith" === operator) {
            options = `实际输出.equals(期望输出)
                    实际输出.contains(期望输出)
                    实际输出.startWith(期望输出)
                    实际输出.endWith(期望输出)`;
        } else if ("endWith" === operator) {
            options = `实际输出.equals(期望输出)
                    实际输出.contains(期望输出)
                    实际输出.startWith(期望输出)
                    实际输出.endWith(期望输出)`;
        }


        return `

            

                

                    节点${NodeIndex}:
                    

                        
                        
                    
                

                

                    输入脚本
                    

                        ${node.input}
                    
                

                

                    期望输出脚本
                    

                        ${node.output}
                    
                

                

                    期望输出值
                    

                        
                    
                

                

                    断言算子
                    

                        
                            ${options}
                        
                    
                

                

                    
                    

                        保存
                    
                
            
        
`;
    }
};

前端 html 代码：

<#include '../common/head.ftl'>


















    

        小U平台
        Version 1.0
    
    

        
 Home
        
Dashboard
    




    

        


            

                
创建流程节点
            

            


                

                

                    场景流名称:
                    

                        ${scenario.name}
                        

                            运行
                        
                    
                

                


                

                    

                        新增节点
                    
                

            


        <#--
-->
        
    




<#include '../common/foot.ftl'>