首页 > 代码库 > 使用Javascript实现表现和数据分离
使用Javascript实现表现和数据分离
<!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>
使用Javascript实现表现和数据分离
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。