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 等脚 ...
随机推荐
- Spring Cloud Alibaba 教程 | Nacos(五)
扩展配置(extended configurations) 通过之前的学习,我们知道应用引入nacos配置中心之后默认将会加载Data ID= ${prefix} - ${spring.profile ...
- jsp动作标签学习
<jsp:useBean> <jsp:useBean>标签用于在指定的域范围内查找指定名称的JavaBean对象,如果存在则直接返回该JavaBean对象的引用,如果不存在则实 ...
- nginx中server块的匹配顺序
客户端发出一个http请求时,nginx收到后会取出header头中的host,与nginx.conf中每个server的server_name进行匹配,以此决定到底由哪一个server块来处理这个请 ...
- abstract关键字、final关键字、static关键字、访问修饰符详解
abstract关键字.final关键字.static关键字.访问修饰符详解 abstract关键字: final关键字: static关键字: 访问修饰符:
- maven打包springboot项目的插件配置概览
jar包的术语背景: normal jar: 普通的jar,用于项目依赖引入,不能通过java -jar xx.jar执行,一般不包含其它依赖的jar包. fat jar: 也叫做uber jar,是 ...
- 洛谷P1525 关押罪犯(并查集、二分图判定)
本人蒟蒻,只能靠题解AC,看到大佬们的解题思路,%%%%%% https://www.luogu.org/problemnew/show/P1525 题目描述 S城现有两座监狱,一共关押着N名罪犯,编 ...
- Linux inode 理解
inode 硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB).操作系统读取硬盘的时候,不会一个个扇区地读取,这样效率太低,而是一次性读取一 ...
- 2020 CCPC Wannafly Winter Camp Day2-K-破忒头的匿名信
题目传送门 sol:先通过AC自动机构建字典,用$dp[i]$表示长串前$i$位的最小代价,若有一个单词$s$是长串的前$i$项的后缀,那么可以用$dp[i - len(s)] + val(s)$转移 ...
- http跳转https反向代理配置
一.多数项目会有多个域名,把多个域名写在一个conf文件里,比如命名为proxy.conf文件,这里以888.com这个域名为例,在代理机器上配置 server { listen 80; server ...
- 二十二、NFS服务深入讲解
一.查看nfs服务: [root@nfsserve ~]# ps -ef|grep -E "rpc|nfs"rpc 1565 1 0 17:29 ? ...