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 `<div class="new-node">
            <form class="form">
                <div class="form-group row">
                    <label class="col-sm-2 node-name">节点${NodeIndex}:</label>
                    <div class="col-sm-10">
                        <input name="name" type="text" class="form-control" placeholder="节点名称">
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-2">输入脚本</label>
                    <div class="col-sm-10">
                        <textarea name="input" rows="10" class="form-control"></textarea>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-2">期望输出脚本</label>
                    <div class="col-sm-10">
                        <textarea name="output" class="form-control"></textarea>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-2">期望输出值</label>
                    <div class="col-sm-10">
                        <input name="expectOutput" class="form-control">
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-2">断言算子</label>

                    <div class="col-sm-10">
                        <select name="operator" class="form-control">
                            <option value="equals" selected>实际输出.equals(期望输出)</option>
                            <option value="contains">实际输出.contains(期望输出)</option>
                            <option value="startWith">实际输出.startWith(期望输出)</option>
                            <option value="endWith">实际输出.endWith(期望输出)</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-2 col-form-label"></label>
                    <div class="col-sm-10">
                        <button name="save-node-btn" index="${NodeIndex}" class="btn-sm btn-outline-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>`;
    },


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


        return `<div class="old-node">
            <form class="form">
                <div class="form-group row">
                    <label class="col-sm-2 node-name">节点${NodeIndex}:</label>
                    <div class="col-sm-10">
                        <input name="id" value="${node.id}" hidden>
                        <input name="name" value="${node.name}" type="text" class="form-control" placeholder="节点名称">
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-2">输入脚本</label>
                    <div class="col-sm-10">
                        <textarea name="input" rows="10" class="form-control">${node.input}</textarea>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-2">期望输出脚本</label>
                    <div class="col-sm-10">
                        <textarea name="output" class="form-control">${node.output}</textarea>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-2">期望输出值</label>
                    <div class="col-sm-10">
                        <input name="expectOutput" value="${node.expectOutput}" class="form-control">
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-2">断言算子</label>
                    <div class="col-sm-10">
                        <select name="operator" class="form-control">
                            ${options}
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-2 col-form-label"></label>
                    <div class="col-sm-10">
                        <button name="save-node-btn" index="${NodeIndex}" class="btn-sm btn-outline-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>`;
    }
};

前端 html 代码：

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

<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://codemirror.net/addon/hint/show-hint.js"></script>
<script src="https://codemirror.net/addon/hint/javascript-hint.js"></script>

<script src="https://codemirror.net/addon/selection/active-line.js"></script>
<script src="https://codemirror.net/addon/edit/matchbrackets.js"></script>

<script src="https://codemirror.net/addon/fold/foldcode.js"></script>
<script src="https://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="https://codemirror.net/addon/lint/lint.js"></script>
<script src="https://codemirror.net/addon/lint/javascript-lint.js"></script>

<script src="/uip/createScenarioNode.js"></script>


<section class="content-header">
    <h1>
        小U平台
        <small>Version 1.0</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
    </ol>
</section>

<section class="content">

    <div class="col-md-12">
        <div class="box">

            <div class="box-header">
                <h3>创建流程节点</h3>
            </div>

            <div class="box-body">

                <input hidden id="scenarioId" value="${scenario.id}">

                <div class="form-group row scenario-name">
                    <label class="col-sm-2">场景流名称:</label>
                    <div class="col-sm-10">
                        <span>${scenario.name}</span>
                        <div style="text-align: right">
                            <button id="run-scenario-btn" class="btn-sm">运行</button>
                        </div>
                    </div>
                </div>

                <div id="node-list"></div>

                <div class="form-group row">
                    <div class="col-sm-10 offset-2">
                        <button id="add-node-btn" class="btn-sm" style="margin: 10px">新增节点</button>
                    </div>
                </div>

            </div>


        <#--<div class="box-footer"></div>-->
        </div>
    </div>


</section>

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