一个简单的 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中虽然没有原 ...
随机推荐
- ZipArchive之C++编译和调用
由于要用到zip的解压,就上网下载了CZipArchive类的源码(还是2000年的),里面有个示例,稍微修改下,就能正常运行. 就高兴地把lib拿出来,放到项目中了.捣鼓了快一个下午了,死活编译不通 ...
- C++const限定符
在C语言中我们使用#define宏定义的方式来处理符号常量.而在C++中有一种更好的处理符号常量的方法,那就是使用const关键字来修改变量声明和初始化.这种处理常量方式的好处不言而喻:如果程序在多处 ...
- 创建支持ssh服务的docker容器和镜像
http://www.kongxx.info/blog/?p=57 1. 这里使用的centos作为容器,所以首先下载centos的imagessudo docker pull centos 2. 下 ...
- Python之路，day4-Python基础
1.集合2.元组 只读列表,只有count,index2个方法3.字典key-value对 1.特性 2.查询速度快,比列表快python中的hash在同一程序下值相同python字典中的hash只有 ...
- Weblogic是瓦特？和JVM是瓦特关系？
所谓固定内存60M是瓦特? 以下内容是个瓦特? “总内存大小=堆内存+非堆内存1200m:为堆内存大小,如果不指定后者参数则有最大数限制,网上很多文章认为这就是JVM内存,-Xmx为设置最大堆内存60 ...
- day21、模块
模块: 模块,用一砣代码实现了某个功能的代码集合.不同功能,放置在不同模块中,模块就是一个.py文件.避免函数重复写代码.对于相同功能的代码.只需要调用该模块或者该模块里面的函数就可以.增加灵活性,和 ...
- Automation Test in Maya Plugin Development
现状和问题- 开发插件的功能A的时候随手建立场景, 测试插件的功能A. 测试通过后,测试场景就被丢掉.- 发现插件的功能A有bug时, 修改代码, 然后随手建立场景, 测试bug. 测试通过后,测试场 ...
- DHTMLX-Form
DHTMLX-Form dhtmlxForm提供了一个标准形式与一些有用的补充,如不同风格,使用的数据从客户端和服务器端,与其他dhtmlx组件的集成.验证等. 例子 <!DOCTYPE htm ...
- mongodb配置文件
启动MongoDB有2种方式,一是直接指定配置参数,二是指定配置文件.这里先介绍配置文件,启动方式如下: 1.mongod --config /etc/mongodb.conf 配置如下: verbo ...
- TensorFlow中权重的随机初始化
一开始没看懂stddev是什么参数,找了一下,在tensorflow/python/ops里有random_ops,其中是这么写的: def random_normal(shape, mean=0.0 ...