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>`;
    }
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • java代码执行过程简介

    代码即数据,数据即代码,而我们的数据是保存在文件上的,所以我们说文件就是数据,一切代码都是文件。

    一个会写诗的程序员
  • 《JSP极简教程》在jsp页面获取session对象两种方法九大内置对象代码实例

    1、request.getSession().getAttribute("X") 2、${sessionScope.X}

    一个会写诗的程序员
  • 第4章 类与面向对象编程第4章 类与面向对象编程

    在前面的章节中,我们学习了Kotlin的语言基础知识、类型系统等相关的知识。在本章节以及下一章中,我们将一起来学习Kotlin对面向对象编程以及函数式编程的支持...

    一个会写诗的程序员
  • 如何使用Angular FormBuilder

    (1) 在app.module.ts里,引入ReactiveFormsModule:

    Jerry Wang
  • ABAP function group和Tomcat library重复加载问题

    ABAP help文档里对**LOAD-OF-PROGRAM"的关键字是这样描述的:

    Jerry Wang
  • Python 炫技操作之合并字典的七种方法

    Python 语言里有许多(而且是越来越多)的高级特性,是 Python 发烧友们非常喜欢的。在这些人的眼里,能够写出那些一般开发者看不懂的高级特性,就是高手,...

    砸漏
  • thymeleaf的语法

    图片以favicon.ico的形式命名,并放在resources下面的resources根目录

    java攻城狮
  • JavaScript 进阶教程(2)---面向对象实战之贪吃蛇小游戏

    上篇文章:https://blog.csdn.net/qq_23853743/article/details/108034430

    AlbertYang
  • 【LeetCode20】回文数

    1 )首先我们知道题目要求不可以将数字转换为 字符串 来解决,因此 [::-1] 的办法就不能用了

    Sam Gor
  • 【 数字游戏 2048 】原生 JavaScript 做小游戏

    原生 JavaScript 2048 源码 : <!doctype html> <html> <head> <title>2048</title> <m...

    Levi.Ackermann

扫码关注云+社区

领取腾讯云代金券