近期项目内用knockoutjs。

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

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

能想到的缺少的模块

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

2模版

3父子级

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

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

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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <br>

 <lable>name</lable><input type="text" data-bind="name" value="old"/><br>

 <lable>age</lable><input  type="text" data-bind="value" value="18"/><br>

 <!--<lable>sex</lable><input  type="text"  value="男"/><br>-->

 <input type="button" onclick="mvvm.bind(window.ViewModel)" value="绑定数握">

 <input type="button" onclick="mvvm.Saybind(window.ViewModel)" value="查看数据">

 <input type="button" onclick="window.ViewModel.changename()" value="改名">

 </body>

 <script>

     (function(win){

         window.mvvm={

             bind:function(obj){

                 var inputs = document.getElementsByTagName("input");

                 if(!obj.hasini){

                     alert("初始化访问器")

                     //为model添加访问器,目的，是model时更新UI

                     for (var Property in obj) {

                         (function(){

                             var proname=Property;

                             var priname="_"+proname;

                             if(typeof obj[Property]!="function"){

                                 obj[priname]=obj[proname];

                                 obj[proname]=null;

                                 var setget={

                                     get: function () {

                                         return obj[priname]

                                     },

                                     set:function (value) {

                                         obj[priname] = value;

                                         for (var i = 0; i < inputs.length; i++) {

                                             var att = inputs[i].getAttribute("data-bind");

                                             if (att == proname) {

                                                 inputs[i].value = obj[priname];

                                                 break;

                                             }

                                         }

                                     }

                                 }

                                 Object.defineProperty(obj, proname, setget);

                             }

                         })(obj,Property)

                     }

                 }

                 obj.hasini=true;

                 alert("初始化完成")

                 //为UI绑定model的值，并为UI添加事件，修改UI时更新Model值。

                 for (var i = 0; i < inputs.length; i++) {

                     var inputdom = inputs[i];

                     var att = inputdom.getAttribute("data-bind");

                     if (att != null) {

                         for (var Property in obj) {

                             if (Property == att) {

 //                      绑定属性

                                 inputdom.value = obj[Property];

 //                      绑定事件

                                 inputdom.onchange = function () {

                                     obj[this.getAttribute("data-bind")] = this.value;

                                 }

                             }

                         }

                     }

                 }

             },

             Saybind:function(obj){

                 alert(obj.toString());

             }

         }

     })(window);

     var ViewModel={

         name:"cui",

         value:"24",

         toString:function(){

             var ps="";

             for(var Property in this){

                 if(typeof this[Property]!="function")

                     ps+=Property+":"+this[Property]+";"

             }

             return ps;

         },

         changename:function(){

             this.name="daming";

         }

     } ;

 </script>

 </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. 用Pandas Dataframe来抓取重构金融股票的各种业务&数据形态

    4. 如果计算各项股票指标时,或者处理业务流程时,上一篇的直观认知数据结构,怎样帮助开发者去好好操作,又同时避免计算错误的坑. 首先从上篇的数据结据,可以看出/设计出多少种业务和股票指标. A. 恒生 ...

  2. CEO、COO、CFO、CTO、CIO是什么意思/?

    CEO Chief Executive Officer 首席执行官 COO Chief Operating Officer 首席运营官 CFO Chief Financial Officer 首席财务 ...

  3. 相信301跳转大家都知道 rewrite

    相信301跳转大家都知道,这样有利于权重集中,但是我在.htaccess文件写上: RewriteEngine on rewriteCond %{http_host} ^phpddt.com [NC] ...

  4. PAT Basic 1023 组个最⼩数 (20) [贪⼼算法]

    题目 给定数字0-9各若⼲个.你可以以任意顺序排列这些数字,但必须全部使⽤.⽬标是使得最后得到的数尽可能⼩(注意0不能做⾸位).例如:给定两个0,两个1,三个5,⼀个8,我们得到的最⼩的数就是1001 ...

  5. [原]调试实战——使用windbg调试DLL卸载时的死锁

    原调试debugwindbg死锁deadlock 前言 最近我们的程序在退出时会卡住,调查发现是在卸载dll时死锁了.大概流程是这样的:我们的dll在加载的时候会创建一个工作线程,在卸载的时候,会设置 ...

  6. Deep learning with Python

    一.导论 1.1 人工智能.机器学习.深度学习 人工智能.机器学习 人工智能:1980年代达到高峰的是专家系统,符号AI是之前的,但不能解决模糊.复杂的问题. 机器学习是把数据.答案做输入,规则作输出 ...

  7. SVN的import和export的使用

    import 上传到服务器 export 下载到本地 import这个命令在使用的时候,都要多加一级目录 比如 目录结构是 E:\\1\\2  在1目录下执行import  只会把2目录提交上去,1的 ...

  8. nginx出现No input file specified.

    在lnmp上调试php项目,之前已经在上面测试过tp5框架,可以正常访问.但新项目由于项目中有些路径是写固定路径的.为了不去修改代码.配置新项目的时候,为新项目设置新的目录.问题就出现了,网页提示   ...

  9. 简单的tab栏切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. [Algo] 292. String Abbreviation Matching

    Word “book” can be abbreviated to 4, b3, b2k, etc. Given a string and an abbreviation, return if the ...