一个简单的 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中虽然没有原 ...
随机推荐
- windows下安装Composer
1.下载https://getcomposer.org/composer.phar 2.复制到php.exe所在目录 3.在php.exe所在目录新建composer.bat文件 4.打开cmd,跳转 ...
- VB CreateObject转C#
C#调用方法.函数获取属性大致流程如下: System.Type oType = System.Type.GetTypeFromProgID("SomeClass"); objec ...
- spring常用注解
使用注解构造IOC.替代传统的applicationContext.xml配置<bean/>和<property/> 传统的spring要在applicationContext ...
- MYCAT 安装(转)
1.安装JAVA环境JDK 基于JAVA开发,所以需要安装JDK 2.下载安装Mycat https://github.com/MyCATApache/Mycat-download 本次安装1.5版本 ...
- JVM内存模型和性能优化 转
JVM内存模型和性能优化 JVM内存模型优点 内置基于内存的并发模型: 多线程机制 同步锁Synchronization 大量线程安全型库包支持 基于内存的并发机制,粒度灵活控制,灵活度高于 ...
- CenOS 7 安装wordpress
1:Centos安装 php和html yum install httpd -y yum install php -y 2:将 wordpress 拖到目录 /var/www/html 3:浏览器访 ...
- 【python】获取指定网页上的所有超级链接
# -*- coding: utf-8 -*- import urllib2 import re #connect to a URL website = urllib2.urlopen("h ...
- C# 图片流下载;图片流输出
图片流下载 string filePath = HttpContext.Current.Server.MapPath("/img/wxPic/"); if (!Directory. ...
- IOS WebView修改contentInset 导致webview长按弹出菜单跳动的解决方法
最近在项目中需要用到webview 加载H5 并且在webview 底部使用原生UI添加其他空间比如广告.或者评论(Scrollview) 最初使用修改webview中scrollview 的cont ...
- 关于STM32的FLASH操作【转载】
说到STM32的FLSAH,我们的第一反应是用来装程序的,实际上,STM32的片内FLASH不仅用来装程序,还用来装芯片配置.芯片ID.自举程序等等.当然, FLASH还可以用来装数据. FLASH分 ...