一个简单的 MVVM 实现
简介
一个简单的带有双向绑定的 MVVM 实现.
例子
使用
新建一个 ViewModel 对象, 参数分别为 DOM 元素以及绑定的数据即可.
指令
本 MVVM 的指令使用 data 数据, 即 data-html = "text" 表示这个 DOM 元素的 innerHTMl 为 model 中的 text 属性.
对某些指令还可以添加参数, 比如 data-on="reverse:click", 表示 DOM 元素添加 click 事件, 处理函数为 model 中的 reverse 属性.
- value: 可以在 input 中使用, 只对 checkbox 进行特殊处理
- text, html: 分别修改 innerText 和 innerHTML
- show: 控制指定元素显示与否
- each: 循环 DOM 元素, 每个元素绑定新的 ViewModel, 通过 $index 可以获取当前索引, $root 表示根 ViewModel 的属性
- on: 绑定事件,
- *: 绑定特定属性
参考
本实现主要参考 rivets.js 的 es6 分支, 其中 Observer 类是参考 adapter.js 实现.
Binding 就是 bindings.js 对应的简化, 相当于其他 MVVM 中指令, ViewModel 对应 view.js.
PS: 由于双向绑定只是简单的实现, 因此指令中的值只能是 Model 的属性
下面的代码采用 es6 实现, 如果想要本地运行的话, 请 clone git@github.com:445141126/mvvm.git, 然后执行 npm install 安装依赖, 最后 npm run dev 开启开发服务器, 浏览器中打开 http://127.0.0.1:8080/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MVVM</title>
</head>
<body>
<div id="vm">
设置style: <input type="text" data-value="text" data-*="text: style">
<br/>
显示: <input type="checkbox" data-value="show">
<br/>
style: <span data-show="show" data-html="text"></span>
<br/>
<button data-on="reverse: click">reverse</button>
</div>
<script src="bundle.js"></script>
</body>
</html>
import _ from 'lodash'
function defined(obj) {
return !_.isUndefined(obj) && !_.isNull(obj)
}
class Observer {
constructor(obj, key, cb) {
this.obj = obj
this.key = key
this.cb = cb
this.obj.$$callbacks = this.obj.$$callbacks || {}
this.obj.$$callbacks[this.key] = this.obj.$$callbacks[this.key] || []
this.observe()
}
observe() {
const observer = this
const obj = observer.obj
const key = observer.key
const callbacks = obj.$$callbacks[key]
let value = obj[key]
const desc = Object.getOwnPropertyDescriptor(obj, key)
if(!(desc && (desc.get || desc.set))) {
Object.defineProperty(obj, key, {
get() {
return value
},
set(newValue) {
if(value !== newValue) {
value = newValue
callbacks.forEach((cb) => {
cb()
})
}
}
})
}
if(callbacks.indexOf(observer.cb) === -1) {
callbacks.push(observer.cb)
}
}
unobserve() {
if(defined(this.obj.$$callbacks[this.key])) {
const index = this.obj.$$callbacks[this.key].indexOf(this.cb)
this.obj.$$callbacks[this.key].splice(index, 1)
}
}
get value() {
return this.obj[this.key]
}
set value(newValue) {
this.obj[this.key] = newValue
}
}
class Binding {
constructor(vm, el, key, binder, type) {
this.vm = vm
this.el = el
this.key = key
this.binder = binder
this.type = type
if(_.isFunction(binder)) {
this.binder.sync = binder
}
this.bind = this.bind.bind(this)
this.sync = this.sync.bind(this)
this.update = this.update.bind(this)
this.parsekey()
this.observer = new Observer(this.vm.model, this.key, this.sync)
}
parsekey() {
this.args = this.key.split(':').map((k) => k.trim())
this.key = this.args.shift()
}
bind() {
if(defined(this.binder.bind)) {
this.binder.bind.call(this, this.el)
}
this.sync()
}
unbind() {
if(defined(this.observer)) {
this.observer.unobserve()
}
if(defined(this.binder.unbind)) {
this.binder.unbind(this.this.el)
}
}
sync() {
if(defined(this.observer) && _.isFunction(this.binder.sync)) {
this.binder.sync.call(this, this.el, this.observer.value)
}
}
update() {
if(defined(this.observer) && _.isFunction(this.binder.value)) {
this.observer.value = this.binder.value.call(this, this.el)
}
}
}
class ViewModel {
constructor(el, model) {
this.el = el
this.model = model
this.bindings = []
this.compile(this.el)
this.bind()
}
compile(el) {
let block = false
if(el.nodeType !== 1) {
return
}
const dataset = el.dataset
for(let data in dataset) {
let binder = ViewModel.binders[data]
let key = dataset[data]
if(binder === undefined) {
binder = ViewModel.binders['*']
}
if(defined(binder)) {
this.bindings.push(new Binding(this, el, key, binder))
}
}
if(!block) {
el.childNodes.forEach((childEl) => {
this.compile(childEl)
})
}
}
bind() {
this.bindings.sort((a, b) => {
let aPriority = defined(a.binder) ? (a.binder.priority || 0) : 0
let bPriority = defined(b.binder) ? (b.binder.priority || 0) : 0
return bPriority - aPriority
})
this.bindings.forEach(binding => {
binding.bind()
})
}
unbind() {
this.bindins.forEach(binding => {
binding.unbind()
})
}
}
ViewModel.binders = {
value: {
bind(el) {
el.addEventListener('change', this.update)
},
sync(el, value) {
if(el.type === 'checkbox') {
el.checked = !!value
} else {
el.value = value
}
},
value(el) {
if(el.type === 'checkbox') {
return el.checked
} else {
return el.value
}
}
},
html: {
sync(el, value) {
el.innerHTML = value
}
},
show: {
priority: 2000,
sync(el, value) {
el.style.display = value ? '' : 'none'
}
},
each: {
block: true
},
on: {
bind(el) {
el.addEventListener(this.args[0], () => { this.observer.value() })
}
},
'*': {
sync(el, value) {
if(defined(value)) {
el.setAttribute(this.args[0], value)
} else {
el.removeAttribute(this.args[0])
}
}
}
}
const obj = {
text: 'Hello',
show: false,
reverse() {
obj.text = obj.text.split('').reverse().join('')
}
}
const ob = new Observer(obj, 'a', () => {
console.log(obj.a)
})
obj.a = 'You should see this in console'
ob.unobserve()
obj.a = 'You should not see this in console'
const vm = new ViewModel(document.getElementById('vm'), obj)
一个简单的 MVVM 实现的更多相关文章
- 230行实现一个简单的MVVM
作者:mirone链接:https://zhuanlan.zhihu.com/p/24451202来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. MVVM这两年在前端届 ...
- 如何实现一个简单的MVVM框架
接触过web开发的同学想必都接触过MVVM,业界著名的MVVM框架就有AngelaJS.今天闲来无事,决定自己实现一个简单的MVVM框架玩一玩.所谓简单,就是仅仅实现一个骨架,仅表其意,不摹其形. 分 ...
- 撸一个简单的MVVM例子
我个人以为mvvm框架里面最重要的一点就是VM这部分,它要与Model层建立联系,将Model层转换成可以被View层识别的数据结构:其次也要同View建立联系,将数据及时更新到View层上,并且响应 ...
- JavaScript 实现一个简单的MVVM前端框架(ES6语法)
前言 随着前端各大框架的崛起,为我们平时的开发带来了相当的便利,我们不能一直停留在应用层面,今天就自己动手实现一个乞丐版的MVVM小框架 完整代码github地址 效果 html代码 <div ...
- 基于vue实现一个简单的MVVM框架（源码分析）
不知不觉接触前端的时间已经过去半年了,越来越发觉对知识的学习不应该只停留在会用的层面,这在我学jQuery的一段时间后便有这样的体会. 虽然jQuery只是一个JS的代码库,只要会一些JS的基本操作学 ...
- 一个简单的MVVM雏形
这是@尚春实现的MVVM,使用定时器轮询,只支持{{}}与input.value的修改. 这只能算是一个玩具,真正的MVVM需要有更复杂的扫描机制,JS解析器,双向绑定链什么的. <!DOCTY ...
- 用js实现一个简单的mvvm
这里利用的object.defineproperty() 方法; <input id='input'><p id='p'><p/>js: const dat ...
- MVVM之旅（1）创建一个最简单的MVVM程序
这是MVVM之旅系列文章的第一篇,许多文章和书喜欢在开篇介绍某种技术的诞生背景和意义,但是我觉得对于程序员来说,一个能直接运行起来的程序或许能够更直观的让他们了解这种技术.在这篇文章里,我将带领大家一 ...
- 【UWP开发】一个简单的Toast实现
Toast简介 在安卓里Toast是内置原生支持,它是Android中用来显示显示信息的一种机制.它主要用于向用户显示提示消息,没有焦点,显示的时间有限,过一定的时间就会自动消失.在UWP中虽然没有原 ...
随机推荐
- Silverlight RadChart :创建十字定位&圈选
//图像加载 void Chart_Loaded(object sender, RoutedEventArgs e) { var plotAreaPanel = this.radChart.Defau ...
- Java单例模式（转载）
原文地址:1:http://www.cnblogs.com/hupp/p/4487521; 2:http://cantellow.javaeye.com/blog/838473 先罗列五种单例模式的实 ...
- WebAPI IIS PUT和DELETE请求失败
IIS拒绝PUT和DELETE请求是由于IIS为网站默认注册的一个名为WebDAVModule的自定义HttpModule导致的,如果我们的站点不需要提供针对WebDAV的支持,解决这个问题最为直接的 ...
- cookie 和session 的区别：
1.cookie数据存放在客户的浏览器上,session数据放在服务器上.2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session.3. ...
- kali-dmitry 域名信息收集
DMirty:用来收集以下信息: 1. 端口扫描 2. whois主机IP和域名信息 3. 从Netcraft.com获取主机信息 4. 子域名 5. 域名中包含的邮件地址 1.使用方法: Deepm ...
- 在CentOS上安装并运行SparkR
环境配置—— 操作系统:CentOS 6.5 JDK版本:1.7.0_67 Hadoop集群版本:CDH 5.3.0 安装过程—— 1.安装R yum install -y R 2.安装curl-de ...
- C＃：优惠券代码
static Random random = new Random(); List<string> generatedVouchers = new List<string>() ...
- [转载]jQuery1.9完全删除live事件
其实关于live被删除的事件早就在1.7.2版本以后就有通知过了 不过在官方一直提倡使用.on代替.live的过程中 .live事件一直沿用 今天更新了 看下jQuery1.9的相关信息 发现api中 ...
- Spring 事务注解 错误问题
碰到个问题,在一个springmvc项目中,设置好事务,然后在service上添加@Transactional注解,只要一添加这个注解,该service就无法被spring创建成功, error cr ...
- 批量改名工具 Bulk Rename Utility
好用的批量改名工具 Bulk Rename Utility 功能: 这个工具既可以改文件名,也可以改目录. 使用技巧: 结合前缀4位 数字 可以让文件排列很整齐 例如: 0030 关于 ...