zoukankan      html  css  js  c++  java
  • MVVM

    (1)传统开发模式MVP

      

    案例:jQuery操作-面向对象

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-compatible" content="IE=Edg,chrome=1">
        <meta name="render" content="webkit">
        <title>demo</title>
        <script type="text/javascript" src="./jquery.min.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" id="input">
            <button id="btn">提交</button>
            <ul id="showList"></ul>
        </div>
        <script type="text/javascript">
           function List(){
    
           }
           $.extend(List.prototype,{
            init(){
                this.bindEvent();
            },
            bindEvent(){
                var btn = $('#btn');
                /* 将this.handleBtnClick中this绑定到了this的Page实例引用 */
                btn.on('click',$.proxy(this.handleBtnClick,this));
            },
            handleBtnClick(){
                console.log(666)
                var inputValue = $('#input').val();
                var showList = $('#showList');
                showList.append("<li>"+inputValue+"</li>")
                $('#input').val('')
            }
           })
           var list = new List();
           list.init();
        </script>
    </body>
    </html>

    分析:

      jQuery代码符合MVP模式

    M:与AJAX交互,获取远程数据
    V:视图层---DOM结构
    P:控制器层---大部分都是DOM操作

    对比MVVM实现方式,可以减少DOM操作代码30%以上

    .

  • 相关阅读:
    Java数据库小项目02--管家婆项目
    Java数据库小项目01--实现用户登录注册
    Java数据库小项目00---基础知识
    MySQL基础练习02---牛客网
    ICMP
    语法糖
    双绞线
    telnet 时代的 bbs
    ARPA
    IEEE802是一个局域网标准系列
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/11965348.html
Copyright © 2011-2022 走看看