把模块写成一个对象,所有的模块成员函数都放到这个对象里面。
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>`;
}
};