js mvvm:闲来无事，实现一个只具最基本数据双向绑定的mvvm
近期项目内用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的更多相关文章
- 关于vue.js中v-model与表单控件的双向绑定。
单选框:<input type="checkbox" id="checkbox" v-model="checked"><l ...
- 双向绑定 TwoWay MVVM
1前台代码 <Grid> <StackPanel > <Grid x:Name="gridOne"> <Grid.Resources> ...
- MVVM 框架解析之双向绑定
更好的阅读体验,点击 原文地址 MVVM 框架 近年来前端一个明显的开发趋势就是架构从传统的 MVC 模式向 MVVM 模式迁移.在传统的 MVC 下,当前前端和后端发生数据交互后会刷新整个页面,从而 ...
- 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- WPF MVVM从入门到精通5：PasswordBox的绑定
原文:WPF MVVM从入门到精通5:PasswordBox的绑定 WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通 ...
- vue实现双向绑定mvvm
剖析Vue实现原理 - 如何实现双向绑定mvvm 本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自 ...
- 前端使用node.js的http-server开启一个本地服务器
前端使用node.js的http-server开启一个本地服务器 在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时 ...
- anime.js 实战：实现一个带有描边动画效果的复选框
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...
- CloudBase CMS + Next.js：轻松构建一个内容丰富的站点
项目背景 试想一下,如果你现在要为你自己或者你所在的组织创建一个强内容的站点,同时要求好的 SEO(搜素引擎优化),比如博客,你会怎么做呢? 由 vite 或者 create-react-app 等脚 ...
随机推荐
- jQuery如何给DOM添加ID
ID每个元素只能有一个,ID名同一页面也不能重复,addID方法是不需要的,和其他属性一样用attr方法就行了, $(singleTarget).attr('id','idName'); 更简单的 $ ...
- 201409-1 相邻数对 Java
两两比较,注意不要越界就行 import java.util.Arrays; import java.util.Scanner; public class Main { public static v ...
- JDK8新特性之stream
stream中有很多方法,讲一些常用的. 1.forEach(),遍历方法,很简单,对于一般的遍历可以替代for循环 List<String> strings = Arrays.asLis ...
- C++如何输入含空格的字符串
1.scanf函数(包含头文件#include <stdio.h>) scanf函数一般格式为scanf(“%s”,st),但scanf默认回车和空格是输入不同组之间的间隔和结束符号,所以 ...
- 如何判断Office是32位还是64位？
对于持续学习VBA的老铁们,有必要了解Office的位数. 如果系统是32位的,则不需要判断Office位数了,因为只能安装32位Office. 下面只讨论64位系统中,Office的位数判断问题. ...
- 如何把Visual Studio完全安装在其他磁盘
//Visual Studio快把我c盘吃完了,就网上找了找解决方法,自己总结一下,方便理解 第一步 找到以下文件夹 C:\\Program Files (x86)\\Microsoft SDKs C ...
- 吴裕雄--天生自然 pythonTensorFlow图形数据处理：将MNIST手写图片数据写入TFRecord文件
import numpy as np import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_dat ...
- 高精度处理斐波那契序列(C语言)
#include<stdio.h> #include<string.h> //memset,strcpy,strlen函数头文件 int main(void) { ];//用来 ...
- ZJNU 1153 - 找单词——中级
状态转移b[i]记录价值为i的单词种类数d[j+k*i]+=b[j] , k<=a[i]&&j+k*i<=50表示价值为j+k*i的单词可以由价值为j的单词加上k个i字母转 ...
- [ZJOI2019]开关（生成函数+背包DP）
注:以下p[i]均表示概率 设F(x)为按i次开关后到达终止状态方案数的EGF,显然F(x)=π(ep[i]x/p+(-1)s[i]e-p[i]x/p)/2,然而方案包含一些多次到达合法方案的状态,需 ...