<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<input type="text"  id="type"></input>

<p id="p"></p>

<script>

    var html={}

    //m

    html.model ={

        content:{

            "0":"你好",

            "1":"ok",

            "2":"大家好",

            "3":"你好",

            "4":"ok",

            "5":"大家好"

        },

        data:function(id){

            if(!(id in this.content)){

                var  id = 0;

            }

            return this.content[id]

        }

    }

    //v

    html.view={

        init:function(value){

            document.getElementById("p").innerHTML= value;

        },

        id:function(){

            return document.getElementById("type").value;

        }

    }

    //c

    html.controller = {

        init:function(){

            var id = html.view.id();  //获取id

            var value = html.model.data(id);     //通过id 过滤数据

            html.view.init(value);    //把数据加载到页面中

        }

    }

    document.getElementById("type").onchange = html.controller.init;

</script>

</body>

</html>

MVCmoduleExample.html的更多相关文章

随机推荐

  1. mybatis中使用常量

    mybatis的mapper文件中项要使用常量的话${@类的全称路劲@常量名称}

  2. Linux下Redis安装使用教程

    https://redis.io/download 第一步:安装redis需要在有c语言的编译环境下,执行命令安装c语言环境: yum install gcc-c++ https://blog.csd ...

  3. JavaScript操作和使用Cookie

    Cookie概述 Cookie是由服务器端生成并储存在浏览器客户端上的数据. 在javaweb开发中Cookie被当做java对象在web服务器端创建,并由web服务器发送给特定浏览器客户端,并且we ...

  4. Django -- 部署Django 静态文件不能获取

    # 在部署上下之后无法正常显示后台admin的静态文件 # 因为文件都在django内部,而在nginx中将配置都设置到一个位置: # 措施: 1.在settings.py文件中添加配置; STATI ...

  5. Spring Cloud Consul使用——配置中心

    1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  6. Java并发编程笔记之ReentrantLock源码分析

    ReentrantLock是可重入的独占锁,同时只能有一个线程可以获取该锁,其他获取该锁的线程会被阻塞后放入该锁的AQS阻塞队列里面. 首先我们先看一下ReentrantLock的类图结构,如下图所示 ...

  7. leetcode — palindrome-number

    import org.lep.leetcode.parseint.IntegerParser; /** * Source : https://oj.leetcode.com/problems/pali ...

  8. 【详解】换一个角度看Socket的数据读写

    前言 以前对IO.NIO还算了解,也写过Netty的项目.但是对底层的数据传递不是很了解,一直存有这方面的疑惑.但是由于有其他事情就被打断了.前阵子因为想要了解volatile关键字的原理,学习了下J ...

  9. 【图文详细教程】maven3安装配置+eclipse离线安装maven3插件《《唯一成功的教程~~~2018-01-09》》

    环境搭建前提: 1.电脑上已经安装了1.7以及以上版本的JDK(因为我提供的maven版本是最新的3.3.9的,要求最低JDK1.7) 2.配置好了ecplise并且能正常启动 第一步:下载maven ...

  10. Trie(字典树）解析及其在编程竞赛中的典型应用举例

    摘要: 本文主要讲解了Trie的基本思想和原理,实现了几种常见的Trie构造方法,着重讲解Trie在编程竞赛中的一些典型应用. 什么是Trie? 如何构建一个Trie? Trie在编程竞赛中的典型应用 ...