javascript simple MVC

<h3>javascript simple MVC</h3>
 <div>
  <select name="" id="setAnimal">
   <option value="cat">cat</option>
   <option value="fish">fish</option>
   <option value="bird">bird</option>
  </select>
 </div>
 <p id="animalDo"></p>
 <script>
  // controller
  Animal = {
   start : function() {
    this.view.start();//从视图触发
   },
   set : function(animalName) {
       this.model.setAnimal(animalName);
       //controller 改变 model
   }
  };
  // model
  Animal.model = {
   animalDictionary : {
    car : ‘meows‘,
    fish : ‘swims‘,
    bird : ‘flies‘
   },
   currentAnimal : null,
   setAnimal : function(name) {
    this.currentAnimal = this.animalDictionary[name] ? name : null;
    this.onchange();
   },
   onchange : function() {
       Animal.view.update();
       //model传递结果到View(个人觉得这里可以由Controller来专递,最好不要直接操作视图)
   },
   getAnimalAction : function() {
    return this.currentAnimal ? this.currentAnimal + ‘ ‘ + this.animalDictionary[this.currentAnimal] : ‘unknow‘;
   }
  };
  // view
  Animal.view = {
   start : function() {
       document.getElementById(‘setAnimal‘).onchange = this.onchange;
       //视图绑定事件
   },
   onchange : function() {
       Animal.set(document.getElementById(‘setAnimal‘).value);
       //视图执行操作,调用Controller
   },
   update : function() {
     //视图执行最后的更新响应
     console.log(Animal.model.getAnimalAction());
     document.getElementById(‘animalDo‘).innerHTML = Animal.model.getAnimalAction();
   }
  };
  Animal.start();//入口
 </script>
时间: 2024-08-29 08:31:47

javascript simple MVC的相关文章

A Simple MVC Framework With Node and Express

I love frameworks. As soon as I dropped my programmer's ego and learned to embrace well conceived conventions over configuration my development and deployment times felt the benefit. On the other hand, I like understanding what is going on underneath

JavaScript的MVC模式(转载)

本文介绍了模型-视图-控制器模式在 JavaScript 中的实现. 我喜欢 JavaScript,因为它是在世界上最灵活的语言之一.在 JavaScript 中,程序员可以根据自己的口味选择编程风格:面向过程或面向对象.如果你是一个重口味,JavaScript 一样可以应付自如:面向过程,面向对象,面向方面,使用 JavaScript 开发人员甚至可以使用函数式编程技术. 这篇文章中,我的目标是编写一个简单的 JavaScript 组件,来向大家展示一下 JavaScript 的强大.该组件是

javaScript与MVC

MVC,就是Module,View,Controller分离,使业务逻辑更加清晰,但是现在公司的项目中很多地方那个不是这样的,很多业务逻辑放在了javascript中实现,这样做的优点就是对于技术要求不高,一般新手也可以很快的实现客户的需求,但是确定是这样是业务逻辑变得分散.后期维护很难,程序的拓展性也不好,这样如果需求改了就要改很多地方,此时把一些逻辑代码写在了javascript中此时的MVC 是不是该称作JMVC(javascript,Module,View,Controller)

30行代码构建javascript 的MVC模式

MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 很多讲解MVC的例子都从一个具体的框架的某个概念入手,比如Backbone的collection或AngularJS中model,这当然不失为一个好办法.但框架之所以是框架,而不是类库(jQuery)或者工具集(Underscore),就是因为它们的背后有着众多优秀的设计理念和最佳实践,这些设计精髓相辅相成,环环相扣,缺一不可,要想在短时间内透过复杂的框架而看

directly receive json data from javascript in mvc

if you send json data to mvc,how can you receive them and parse them more simply? you can do it like this: latestData = []; $('.save').click(function () { $('.content tr').each(function () { var item = { id:null,date: '', weekday: '', holiday: ''}; l

谈谈JavaScript MVC模式

第一个是:没有使用mvc模式的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ

JS 实现MVC的写法

案例:当select 下拉选择框值变化时,显示其值(不是文本) 常规写法 <h3>JavaScript no MVC</h3>  <div>   <select name="" id="setAnimal">    <option value="cat">cat</option>    <option value="fish">fish<

试读《基于MVC的JavaScript Web富应用开发》— 不一样的JavaScript

前言 <基于MVC的JavaScript Web富应用开发>是ItEye在7月份发起试读的书.下载了试读的章节,发现只有全本的开始到第二章,第一章很简洁明了地讲述了JavaScript的历史,怎么用JavaScript实现类,基本JavaScript的MVC的概念:第二章是浏览器的事件机制,DOM的事件监听,JQuery事件绑定的例子. 值得一提的是,这本书原本是O’Reilly Media, Inc带来的.O’Reilly的一系列“动物书”总是经典. 最大的感触:JavaScript的MVC

asp.net mvc vs web form

译者介绍 小小.NET学童,滴答…滴答…的雨…… 正文如下======================================================= 原文示例(VS2012): 1.  Download Simple WebForm demo - 6.7 KB 2.  Download Simple MVC Demo demo - 1.5 MB 介绍 我做为一名ASP.NET开发人员已经有很长时间了,并且我非常乐意使用ASP.NET Web Forms开发web应用程序. 在