相关基础知识点
// 可以让 任意函数/方法 成功临时指定成对象的方法进行调用 – call/apply
// 1. 根据伪数组生成 真数组
const lis = document.getElementsByTagName(“li”);
const arr = [].slice.call(lis);
const relArr = Array.from(lis); // ES6语法
// 2. node.nodeType // 得到节点类型
// 3. 给对象添加属性，指定 属性描述符：存取描述符 get(),set() – 数据描述符
Object.defineProperty(ojb, propertyName, {
get(){return this.firstNAme+”-“+this.lastNAme},
set(newVAlue){const names=newValue.split(“-“);this.firstNAme=names[0];this.lastNAme=names[1]},
})
// 4. Object.keys(obj); // 得到对象自身可枚举属性组成的数组
// 5. obj.hasOwnProperty(“name”) // 判断 obj 对象自身属性是否包含 name
// 6. DocumentFragment 文档碎片(高效更新多个节点)
内存中用来存储多个节点对象 的容器，不与任何 页面/页面节点 对应
思路： 先将节点复制到内存中，在内存中修改完后，一次性添加到页面中
// 1. 创建一个内存中 节点容器
const fragment = document.createDocumentFragment();
// 2. 取出 div 中所有节点，转移到 fragment 中
const div = document.getElementById(“demo”);
let child; // newPos = appendChild(child) 会将 child 从原来位置取下来，放到 newPos 的最后位置
while(child=div.firstChild){fragment.appendChild(child)}
// 3. 在内存中遍历修改
const nodes = fragment.children[0].childNodes;
Array.prototype.slice.call(nodes).forEach(node=>{
if(node.nodeType === 1){
node.textContent = “丘魔的兵”
}
})
// 4. 一次性添加到页面
div.appendChild(fragment);
在 git 上，有个开源项目，剖析了 vue 原理
- 数据代理
为达到简化编码的目的，
内部实现的关键点: 通过 Object.defineProperty(vm, key, {}) 实现
对于 data 中状态的数据，通过 ViewModel 实例 来进行 代理读/代理写 操作
—————————————————————
function Vue(configObj){
var me = this;
// 1. 保存 配置对象 到 ViewModel
this.$configObj = configObj;
// 2. 保存 data 对象到 ViewModel 和 变量 data 上
var data = this._data = this.$configObj.data;
// 3. 遍历 data 中所有属性, 实现数据代理
Object.keys(data).forEach(function (key) {
me._proxy(key);
});
// 实现数据绑定
observe(data, this);
// 实现模版解析
this.$compile = new Compile(options.el || document.body, this)
}
Vue.prototype = {
//
_proxy: function(key){
var vm = this;
// 给 vm 添加指定属性，使用 属性描述符 (设置 getter/setter)
Object.defineProperty(vm, key, {
configurable: false,
enumerable: true,
get: function proxyGetter(){ // 代理读
return vm._data[key]
},
set: function proxySetter(newValue){ // 代理写
vm._data[key] = newValue
}
})
},
$watch: function (key, cb, options) {
new Watcher(this, key, cb);
}
}
- 模板解析
- 模板表达式
- 指令
- 事件指令
- 一般指令
this.$compile = new Compile(options.el || document.body, this)
-
function Compile(el, vm) {
this.$vm = vm;
this.$el = this.isElementNode(el) ? el : document.querySelector(el); if (this.$el) { // 整体流程：
this.$fragment = this.node2Fragment(this.$el); // 1. 将 目标元素节点 拷贝到 DocumentFragment
this.init(); // 2. 内存中编译 DocumentFragment
this.$el.appendChild(this.$fragment); // 3. 将 DocumentFragment 追加到目标元素节点
}
}Compile.prototype = {
node2Fragment: function(el) {
var fragment = document.createDocumentFragment(),
child; // 将原生节点拷贝到fragment
while (child = el.firstChild) {
fragment.appendChild(child);
} return fragment;
}, init: function() {
this.compileElement(this.$fragment); // 传入待处理节点，进行编译处理
}, compileElement: function(el) {
var childNodes = el.childNodes,
me = this; [].slice.call(childNodes).forEach(function(node) {
var text = node.textContent; // 换行
var reg = /\{\{(.*)\}\}/; // 匹配 {{模板表达式}} if (me.isElementNode(node)) {
me.compile(node);
} else if (me.isTextNode(node) && reg.test(text)) { // 如果是 {{模板表达式}}
// 则 解析 成node.textContent = 模板表达式，不管匹配成功几个表达式，总是只生效第一个
me.compileText(node, RegExp.$1);
}if (node.childNodes && node.childNodes.length) { // 如果还有子节点，则递归编译
me.compileElement(node);
}
});
}, compile: function(node) {
var nodeAttrs = node.attributes,
me = this; [].slice.call(nodeAttrs).forEach(function(attr) {
var attrName = attr.name;
if (me.isDirective(attrName)) {
var exp = attr.value; // 得到表达式 即 回调函数名
var dir = attrName.substring(2); // 得到指令
// 事件指令
if (me.isEventDirective(dir)) {
compileUtil.eventHandler(node, me.$vm, exp, dir);
// 普通指令
} else {
compileUtil[dir] && compileUtil[dir](node, me.$vm, exp);
} node.removeAttribute(attrName);
}
});
}, compileText: function(node, exp) {
compileUtil.text(node, this.$vm, exp);
}, isDirective: function(attr) {
return attr.indexOf('v-') == 0;
}, isEventDirective: function(dir) {
return dir.indexOf('on') === 0;
}, isElementNode: function(node) {
return node.nodeType == 1;
}, isTextNode: function(node) {
return node.nodeType == 3;
}
};// 用于编译的方法 - 指令处理集合
var compileUtil = {
text: function(node, vm, exp) { // 编译 v-text 或者 {{模板表达式}}
this.bind(node, vm, exp, 'text');
}, html: function(node, vm, exp) { // v-html
this.bind(node, vm, exp, 'html');
}, model: function(node, vm, exp) { // v-model
this.bind(node, vm, exp, 'model'); var me = this,
val = this._getVMVal(vm, exp);
node.addEventListener('input', function(e) {
var newValue = e.target.value;
if (val === newValue) {
return;
} me._setVMVal(vm, exp, newValue);
val = newValue;
});
}, class: function(node, vm, exp) { // v-bind:class
this.bind(node, vm, exp, 'class');
}, bind: function(node, vm, exp, dir) {
var updaterFn = updater[dir + 'Updater']; // 根据指令名 得到一个用于更新节点的更新函数 updaterFn && updaterFn(node, this._getVMVal(vm, exp)); // 得到指定表达式对应的值
// 解析每个表达式后 - 为表达式创建对应的 watcher 对象(事件表达式除外)
new Watcher(vm, exp, function(value, oldValue) {
updaterFn && updaterFn(node, value, oldValue); // 更新节点
});
}, // 事件处理
eventHandler: function(node, vm, exp, dir) {
var eventType = dir.split(':')[1],
fn = vm.$options.methods && vm.$options.methods[exp]; if (eventType && fn) {
node.addEventListener(eventType, fn.bind(vm), false);
}
}, _getVMVal: function(vm, exp) {
var val = vm._data;
exp = exp.split('.');
exp.forEach(function(k) {
val = val[k];
});
return val;
}, _setVMVal: function(vm, exp, value) {
var val = vm._data;
exp = exp.split('.');
exp.forEach(function(k, i) {
// 非最后一个key，更新val的值
if (i < exp.length - 1) {
val = val[k];
} else {
val[k] = value;
}
});
}
};// 更新节点的方法集
var updater = {
textUpdater: function(node, value) { // v-text 或者 {{模板表达式}}
node.textContent = typeof value == 'undefined' ? '' : value;
}, htmlUpdater: function(node, value) { // v-html
node.innerHTML = typeof value == 'undefined' ? '' : value;
}, classUpdater: function(node, value, oldValue) { // v-bind:class
var className = node.className;
className = className.replace(oldValue, '').replace(/\s$/, ''); var space = className && String(value) ? ' ' : ''; node.className = className + space + value;
}, modelUpdater: function(node, value, oldValue) { // v-model
node.value = typeof value == 'undefined' ? '' : value;
}
};
- 数据绑定 ——– 双向数据绑定
使用 数据劫持技术 实现数据绑定
思想： 通过 defineProperty() 来监视 data 中所有状态属性(任意层次)的变化，一旦变化了，界面会实时更新
Observer
用来对 data 中数据进行监视 的构造函数
为每个 data 数据设置 getter 和 setter ，并配置 dep 对象
Compile
用来解析模板页面对象的构造函数
利用 compile 对象解析模板页面
每解析一个表达式都会创建一个 watcher 对象，并建立 watcher 和 dep 的关系
1 个 watcher 对应 n>=1 个 dep ——– 假设表达式是 2 层表达式 mom.son 时，当前 watcher 就对应 2 个 dep
1 个 dep 对应 n>=0 个 watcher ——– 没有一个表达式用到这个属性; 只有一个表达式用到这个属性; 多个表达式用到这个属性
每个 dep 都有唯一的 id
subs 包含 n 个对应 watcher 的数组 —- subcribes 的简写
-
function Observer(data) {
this.data = data;
this.walk(data);
}Observer.prototype = {
walk: function(data) {
var me = this;
Object.keys(data).forEach(function(key) {
me.convert(key, data[key]);
});
},
convert: function(key, val) { // 给每个对象设置 响应式属性
this.defineReactive(this.data, key, val);
}, defineReactive: function(data, key, val) { // 对某个属性进行劫持
var dep = new Dep(); // 在每个属性进行劫持前创建一个对应的 dep 对象
var childObj = observe(val); // 递归实现属性下所有层次属性的劫持 Object.defineProperty(data, key, {
enumerable: true, // 可枚举
configurable: false, // 不能再define
get: function() {
if (Dep.target) {
dep.depend();
}
return val;
},
set: function(newVal) {
if (newVal === val) {
return;
}
val = newVal; childObj = observe(newVal); // 新的值是object的话，进行监听 dep.notify();// 通知订阅者
}
});
}
};function observe(value, vm) {
if (!value || typeof value !== 'object') {
return;
} return new Observer(value);
};var uid = 0;function Dep() {
this.id = uid++;
this.subs = [];
}Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
}, depend: function() {
Dep.target.addDep(this);
}, removeSub: function(sub) {
var index = this.subs.indexOf(sub);
if (index != -1) {
this.subs.splice(index, 1);
}
}, notify: function() {
this.subs.forEach(function(sub) {
sub.update();
});
}
};Dep.target = null;
5
5
5
55
5
5
