Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
vue-dataBind simple achieve
// 判断每个dom节点是否拥有子元素, 若有则返回该节点
function isChild(node){
if(node.childNodes.length == 0){
return false;
}
else {
return node;
}
}
//有个问题: 会遍历空白节点
//利用文档碎片劫持dom结构及数据, 进而进行dom的重构
function nodeToFragment(node, vm){
var frag = document.createDocumentFragment();
var child;
//这里对于while循环的理解
//之所以可以循环, 因为appendChild方法是如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.
//如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.
while(child = node.firstChild){
//一级dom节点数据绑定
compile(child, vm);
//判断每一级dom节点是否有二级节点, 若有则递归梳理文档碎片
if(isChild(child)){
nodeToFragment(isChild(child), vm);
}
frag.appendChild(child);
}
//将文档碎片编译完成之后重新添加到node节点下面
node.appendChild(frag);
}
//初始化绑定数据
function compile(node, vm){
//node节点是元素节点时候
if(node.nodeType === 1){
var attr = node.attributes;
//遍历当前节点的所有属性
for(var i = 0;i < attr.length;i++){
//如果属性是v-model
if(attr[i].nodeName == 'v-model'){
//特殊处理input标签
var name = attr[i].nodeValue;
if(node.nodeName === 'INPUT'){
node.addEventListener('keyup', (e) => {
vm[name] = e.target.value;
})
}
//将data下面的对应的值赋给当前节点
node.value = vm[name];
//完成后删除v-model属性
node.removeAttribute(attr[i].nodeName);
//还要把数据绑定加上去
}
}
}
//node节点是text文本节点时候
if(node.nodeType === 3){
var reg = /\{\{(.*)\}\}/;
if(reg.test(node.nodeValue.trim())){
//将正则匹配到的{{}}中的字符串取出来
var name = RegExp.$1;
//把name对应的data中的值赋值相应节点
node.nodeValue = vm[name];
//为每个节点建立订阅者, 通过订阅者watcher初始化及更新视图数据
new Watcher(vm, node, name);
}
}
}
//订阅者(为每个节点的数据简历watcher队列,每次接受更新数据需求后,利用劫持数据执行对应节点的数据更新)
function Watcher(vm, node, name){
//将每个挂载了数据的dom节点添加到通知者列表, 要保证每次创建watcher时候只有一个添加目标,否则后面会因为是全局而被覆盖,所以每次都要清空目标.
Dep.target = this;
this.vm = vm;
this.node = node;
this.name = name;
//执行update的时候会调用坚挺着劫持的getter事件,,从而添加到watcher队列,因为update中有访问this.vm[this.name]
this.update();
//为保证只有一个全局的watcher, 添加到队列后,清空全局的watcher
Dep.target = null;
}
Watcher.prototype = {
update (){
this.get();
//input标签特殊处理
if(this.node.nodeName === 'INPUT'){
this.node.value = this.value;
}
else{
this.node.nodeValue = this.value;
}
},
get (){
//这里调用数据劫持的getter
this.value = this.vm[this.name]
}
};
//通知者(将监听者的更改需求发送给订阅者,告诉订阅者那些数据需要更新)
function Dep(){
this.subs = [];
}
Dep.prototype = {
addSub (watcher){
//添加用到的数据的节点进入watcher队列
this.subs.push(watcher);
},
notify (){
//遍历watcher队列,令相应数据节点更新view层数据, model=>view
this.subs.forEach((watcher) => {
watcher.update();
})
}
};
//监听者(利用setter监听view => model的数据变化,发出通知更改model数据后从而model=>view更新视图中所有用到该数据的地方)
function observer(data, vm){
//遍历劫持data下所有属性
Object.keys(data).forEach((key) => {
defindeReactive(vm, key, data[key]);
})
}
function defindeReactive(vm, key, val){
//新建通知者
var dep = new Dep();
//灵活使用setter与getter访问器属性
Object.defineProperty(vm, key, {
get (){
//初始化数据更新时将每个数据的watcher添加至队列栈中
if(Dep.target) dep.addSub(Dep.target);
return val;
},
set (newVal){
if(val === newVal) return;
//初始化后, 文档碎片中的虚拟dom已与model层数据绑定在一起了
val = newVal;
//同步更新model中的data数据
vm.data[key] = val;
//数据有改动向通知者发送通知
dep.notify();
}
})
}
//MVVM构造函数
function Vue(options){
this.id = options.el;
this.data = options.data;
observer(this.data, this);
//将根节点和实例化的对象作为参数传入
nodeToFragment(document.getElementById(this.id), this);
}
//实例化
var vm = new Vue({
el: 'app',
data: {
msg: 'hello, world!',
test: 'test key'
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment