使用JavaScript实现表现和数据分离
Posted xiaoqi2018
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用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">哈哈哈</option> <option value="zz">嘻嘻嘻</option> <option value="zq">嘿嘿嘿</option> </select> <div id="divResult"></div> </body> </html>
以上是关于使用JavaScript实现表现和数据分离的主要内容，如果未能解决你的问题，请参考以下文章