近期项目内用knockoutjs。

想模拟实现数据双向绑定的基本功能。

只具有最基本的功能，且很多细节未曾考虑，也未优化精简。

能想到的缺少的模块

1事件监听，自定义访问器事件

2模版

3父子级

编码时，有两个循环陷阱。

只依赖浏览器，打开即可运行。

工作以后端和数据为主，前端较生疏，将就看吧

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.  </head>
  7.  <body>
  8.  <br>
  9.  <lable>name</lable><input type="text" data-bind="name" value="old"/><br>
  10.  <lable>age</lable><input  type="text" data-bind="value" value="18"/><br>
  11.  <!--<lable>sex</lable><input  type="text"  value="男"/><br>-->
  12.  <input type="button" onclick="mvvm.bind(window.ViewModel)" value="绑定数握">
  13.  <input type="button" onclick="mvvm.Saybind(window.ViewModel)" value="查看数据">
  14.  <input type="button" onclick="window.ViewModel.changename()" value="改名">
  15.  
  16.  </body>
  17.  <script>
  18.      (function(win){
  19.          window.mvvm={
  20.              bind:function(obj){
  21.                  var inputs = document.getElementsByTagName("input");
  22.                  if(!obj.hasini){
  23.                      alert("初始化访问器")
  24.                      //为model添加访问器,目的，是model时更新UI
  25.                      for (var Property in obj) {
  26.                          (function(){
  27.                              var proname=Property;
  28.                              var priname="_"+proname;
  29.                              if(typeof obj[Property]!="function"){
  30.                                  obj[priname]=obj[proname];
  31.                                  obj[proname]=null;
  32.                                  var setget={
  33.                                      get: function () {
  34.                                          return obj[priname]
  35.                                      },
  36.                                      set:function (value) {
  37.                                          obj[priname] = value;
  38.                                          for (var i = 0; i < inputs.length; i++) {
  39.                                              var att = inputs[i].getAttribute("data-bind");
  40.                                              if (att == proname) {
  41.                                                  inputs[i].value = obj[priname];
  42.                                                  break;
  43.                                              }
  44.                                          }
  45.                                      }
  46.                                  }
  47.                                  Object.defineProperty(obj, proname, setget);
  48.                              }
  49.                          })(obj,Property)
  50.                      }
  51.                  }
  52.                  obj.hasini=true;
  53.                  alert("初始化完成")
  54.                  //为UI绑定model的值，并为UI添加事件，修改UI时更新Model值。
  55.                  for (var i = 0; i < inputs.length; i++) {
  56.                      var inputdom = inputs[i];
  57.                      var att = inputdom.getAttribute("data-bind");
  58.                      if (att != null) {
  59.                          for (var Property in obj) {
  60.                              if (Property == att) {
  61.  //                      绑定属性
  62.                                  inputdom.value = obj[Property];
  63.  //                      绑定事件
  64.                                  inputdom.onchange = function () {
  65.                                      obj[this.getAttribute("data-bind")] = this.value;
  66.                                  }
  67.                              }
  68.                          }
  69.                      }
  70.                  }
  71.              },
  72.              Saybind:function(obj){
  73.                  alert(obj.toString());
  74.              }
  75.          }
  76.  
  77.      })(window);
  78.      var ViewModel={
  79.          name:"cui",
  80.          value:"24",
  81.          toString:function(){
  82.              var ps="";
  83.              for(var Property in this){
  84.                  if(typeof this[Property]!="function")
  85.                      ps+=Property+":"+this[Property]+";"
  86.              }
  87.              return ps;
  88.          },
  89.          changename:function(){
  90.              this.name="daming";
  91.          }
  92.      } ;
  93.  
  94.  </script>
  95.  </html>

js mvvm:闲来无事，实现一个只具最基本数据双向绑定的mvvm的更多相关文章

  1. 关于vue.js中v-model与表单控件的双向绑定。

    单选框:<input type="checkbox" id="checkbox" v-model="checked"><l ...

  2. 双向绑定 TwoWay MVVM

    1前台代码 <Grid> <StackPanel > <Grid x:Name="gridOne"> <Grid.Resources> ...

  3. MVVM 框架解析之双向绑定

    更好的阅读体验,点击 原文地址 MVVM 框架 近年来前端一个明显的开发趋势就是架构从传统的 MVC 模式向 MVVM 模式迁移.在传统的 MVC 下,当前前端和后端发生数据交互后会刷新整个页面,从而 ...

  4. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  5. WPF MVVM从入门到精通5：PasswordBox的绑定

    原文:WPF MVVM从入门到精通5:PasswordBox的绑定   WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通 ...

  6. vue实现双向绑定mvvm

    剖析Vue实现原理 - 如何实现双向绑定mvvm 本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自 ...

  7. 前端使用node.js的http-server开启一个本地服务器

    前端使用node.js的http-server开启一个本地服务器 在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时 ...

  8. anime.js 实战：实现一个带有描边动画效果的复选框

    在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...

  9. CloudBase CMS + Next.js：轻松构建一个内容丰富的站点

    项目背景 试想一下,如果你现在要为你自己或者你所在的组织创建一个强内容的站点,同时要求好的 SEO(搜素引擎优化),比如博客,你会怎么做呢? 由 vite 或者 create-react-app 等脚 ...

随机推荐

  1. keil5最新破解教程（可以使用到2032年哦！）：

    keil5最新破解教程(可以使用到2032年哦!): 首先附上破解软件下载链接:https://github.com/lzfyh2017/keil5- 相信不少小伙伴使用的keil5都快要到期了,那么 ...

  2. excel 导出长数据 变成科学计数 解决办法

    加 “\t”

  3. 如何实现MVC ActionResult 返回类型为JavaScriptResult

    必需的js引用文件 <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>@Scripts ...

  4. I420转RGB

    http://blog.csdn.net/huiguixian/article/details/17288909 public class YuvToRGB { private static int  ...

  5. h5集成环信在线客服自定义窗口

    自定义客服窗口从底部弹出 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. ae基础二

    纯色文本操作快捷键:选中图层点击快捷键(变换)锚点:a(调节中心点)位置:p(左右移动)(利用位置k帧做动画)缩放:s(水平翻转垂直翻转)旋转:r(围绕中心点(锚点)进行旋转)不透明度:tu选中索引 ...

  7. 浅谈那些你不知道的C艹语法

    C艹实践中的超神语法 pragma 卡常必备QAQ #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(" ...

  8. [USACO09MAR]向右看齐Look Up（单调栈、在线处理）

    https://www.luogu.org/problem/P2947 题目描述 Farmer John's N (1 <= N <= 100,000) cows, convenientl ...

  9. 使用迅为itop4418开发板创建Android模拟器

    基于迅为iTOP-4418开发部在 Eclipse 中,单击“Windows”菜单,选择“Android Virtual Device Manager”启动 模拟器管理插件.然后如下图,单击“Crea ...

  10. uboot 编译

    . 解包u-boot源码包(u-boot-2016.07) . 配置交叉编译器 根据内核编译里的步骤配置 . 编译uboot yum install ncurses* // ncurses是个终端的图 ...