1. Background: usually we do the general add, delete, modify and query interface, and generally choose a set of WebUI control library. The general structure is as follows
//Variable definition area
var grid= null;//Represents xx table, etc
//Initialization
$(function(){
//TODO
})
//Function...
function1(){
}
//Event binding
grid.on("click",function(){
//TODO
})
The pages combined with GIS are usually customized by the UI designer, and the design also changes according to the needs. For example, if there is a button on the interface (the style changes in many ways, as shown in the figure below), you may write the following code
<script>
if($("#xxx").hasClass("buttonclick")){
//Button pressed map TODO
...
//Update other DOM of the page synchronously
...
}else{
//Button is popped up map TODO
}
</script>
The above code mixes DOM operations with map operations. Later, the DOM was modified and will be difficult to maintain.
2. MVC mode:
So refer to online MVC mode:
Reference link: http://www.cnblogs.com/yexiaochai/p/3167465.html
The following code copies
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//Define a controller
var piliController = {
//Select View
start: function () {
this.view.start();
},
//Map user actions to model updates
set: function (name) {
this.model.setPerson(name);
}
};
piliController.model = {
piliKV: {
'Ye Xiao Chu': 'The sword is crazy.',
'One page book': 'Best practices',
'Su Zhen Zhen': 'White lotus'
},
curPerson: null,
//Data model is responsible for business logic and data storage
setPerson: function (name) {
this.curPerson = this.piliKV[name] ? name : null;
this.onchange();
},
//Notify data synchronization updates
onchange: function () {
piliController.view.update();
},
//Query of current status by corresponding view
getPiliAction: function () {
return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
}
};
piliController.view = {
//User triggered change event
start: function () {
$('#pili').change(this.onchange);
},
onchange: function () {
piliController.set($('#pili').val());
},
update: function () {
$('#end').html(piliController.model.getPiliAction());
}
};
piliController.start();
});
</script>
</head>
<body>
<select id="pili">
<option value="Ye Xiao Chu">Ye Xiao Chu</option>
<option value="One page book">One page book</option>
<option value="Su Zhen Zhen">Su Zhen Zhen</option>
</select>
<div id="end"></div>
</body>
</html>
Finally, post a link: https://www.jianshu.com/p/5ae70abfefe8?utm_campaign