开发者社区> 程序员诗人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

js 中的模块化编程思维

简介: 把模块写成一个对象,所有的模块成员函数都放到这个对象里面。 JS 代码实例: $(function () { App.
+关注继续查看
img_2b989697c6588651b31c599f0cf1a569.png
img_1e1c8127c020acd93f7fffc5394811d9.png
img_48cce78e221522b579d9e00d48edeea1.png

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

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'>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java9模块化编程
new 一个 module-info.java 即可
36 0
js中的模块化二
web前端教程接下来降为大家继续分享js中的模块化知识4.循环依赖就是a依赖b,b依赖a,对于不同的规范也有不同的结果。4.1CommonJS对于node,每一个模块的exports={done:false}表示一个模块有没有加载完毕,经过一系列的加载最后全部都会变为true。
757 0
JavaScript 编程精解 中文第三版 十、模块
十、模块 原文:Modules 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 编写易于删除,而不是易于扩展的代码。
1251 0
JavaScript模块化编程规范
当一个网站复杂度较高需要多人协作开发时,传统的非模块化编程模式容易导致代码冲突和依赖等问题,而模块化编程的诞生正是为了解决此类问题。然而,在ES6之前,原生JavaScript是不支持模块化的,因此就出现了一系列的JavaScript库来实现此功能,这些库主要遵循以下三种规范: ① CommonJS ② AMD ③ CMD 接下来我就粗略地讲讲这三种规范。
1125 0
python 通过paramiko模块批量执行ssh命令
多台设备批量执行ssh命令,目前是串行,后期会加入多线程实现并行,直接上源码 注意不能执行top等动态命令 #!/usr/bin/env python # -*- coding:utf-8 -*- __author__  = 'babyshen' __version__ = '1.
821 0
ant 使用指南---java模块化编译【转】
转自:http://www.cnblogs.com/hoojo/archive/2013/06/14/java_ant_project_target_task_run.html 一、概述 ant 是一个将软件编译、测试、部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发。
917 0
+关注
程序员诗人
一个会写诗的程序员
828
文章
14
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载