Javascriptによる表現とデータ分離
16119 ワード
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="wyf">
<script src="jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// ， 。
var dataController = {
start : function(){
this.view.start();
},
set : function(name){
this.model.setName(name);
}
};
// ( )
dataController.model = {
nameModel : {
"wyf" : "Java",
"zz" : "CSharp",
"zq" : "Javascript"
},
name : null,
//
setName : function(name){
this.name = this.nameModel[name] ? name : null;
this.onChange();
},
//
onChange : function(){
dataController.view.update();
},
//
getResult : function(){
return this.name ? this.nameModel[this.name] + this.name : " ";
}
};
// ( )
dataController.view = {
// change
start : function(){
//
//var selectNode = document.getElementById("selectName");
//selectNode.addEventListener("change", this.onChange, false);
//jquery
$("#selectName").change(this.onChange);
},
onChange : function(){
// Javascript select
//var selectNode = document.getElementById("selectName");
//var index = selectNode.selectedIndex;// selectedIndex index
//dataController.set(selectNode.options[index].value);
//Jquery select
dataController.set($("#selectName").val());
},
update : function(){
$('#divResult').html(dataController.model.getResult());
}
};
dataController.start();
});
</script>
</head>
<body>
<select id="selectName">
<option value="wyf">wyf</option>
<option value="zz">zz</option>
<option value="zq">zq</option>
</select>
<div id="divResult"></div>
</body>
</html>