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 条评论
登录 后参与评论

相关文章

来自专栏人工智能LeadAI

tensorflow读取数据-tfrecord格式

概述关于tensorflow读取数据,官网给出了三种方法: 1、供给数据:在tensorflow程序运行的每一步,让python代码来供给数据 2、从文件读取数...

1.1K60
来自专栏xingoo, 一个梦想做发明家的程序员

基于编辑距离来判断词语相似度方法(scala版)

词语相似性比较,最容易想到的就是编辑距离,也叫做Levenshtein Distance算法。在Python中是有现成的模块可以帮助做这个的,不过代码也很简单...

32350
来自专栏温安适的blog

贪婪算法-单源最短路径

40850
来自专栏数据小魔方

替换与转置函数

今天要跟大家分享两个经常会用到的函数——替换与转置函数! ▽▼▽ excel中的替换函数有两个:substitute/replace 转置函数:TRANSPOS...

30560
来自专栏瓜大三哥

直方图操作(三)

直方图操作(三) 之读出电路 顺序读出:即灰度值为0的统计值首先输出,其次是灰度值为1的统计值输出。读出电路如下图 ? 只有当计数完成,并且外部时序申请读出时...

20090
来自专栏数说戏聊

Python3分析CSV数据

with语句在语句结束时自动关闭文件对象。 使用csv模块reader函数创建文件读取对象filereader,读取输入文件中的行。 使用csv模块的wri...

23710
来自专栏深度学习之tensorflow实战篇

python 网页特征提取XPATH(两天玩转) 第一天

XPath 是一门在 XML 文档中查找信息的语言。XPath 用来在 XML 文档中对元素和属性进行遍历。关于xpath的说明文档可以参照 : XPATH基础...

48830
来自专栏李蔚蓬的专栏

第10-11周Python学习周记

3.时间允许的话,尽可能了解一些身为程序员必要掌握的知识(例如json,参考于网络资源)。

13410
来自专栏程序你好

CSharp每日代码示例:使用iTextSharp创建PDF文件

14410
来自专栏锦小年的博客

python学习笔记6.7-简化数据结构的初始化过程

我们每编写一个类的时候都需要编写一个初始化函数,那么如果编写的类当做数据结构来用,它们的初始化结构就是一样的,例如: class Stock: def ...

22160

扫码关注云+社区

领取腾讯云代金券