Vue
vue是一套用于構建用戶界面的漸進式框架（沒有強主張，就是強制要求用了vue，就必須使用與vue相關的其他東西才可以進行項目的開發，我們可以任意組合），也是一個mvvm的框架，mvvm（model-view-viewmodel），就是通過數據(model)驅動視圖(view)，而視圖的改變也可以修改數據，而負責視圖和數據聯系的就是viewmodel
使用javascrit操作html到目前總共經歷了四個發展階段
第一階段
直接用javascript操作dom
var dom = document.getElementById('name');
dom.innerHTML = 'Homer';
dom.style.color = 'red';
第二階段
由于原生API不好用，還要考慮瀏覽器兼容性，jQuery橫空出世
$('#name').text('Homer').css('color', 'red');
第三階段
mvc模式，MVC是Model-View- Controller的簡寫。即模型-視圖-控制器。
Model（模型）：是應用程序中用于處理應用程序數據邏輯的部分。通常模型對象負責在數據庫中存取數據。
Model定義了這個模塊的數據模型。
在代碼中體現為數據管理者，Model負責對數據進行獲取及存放。
數據不可能憑空生成的，要么是從服務器上面獲取到的數據，要么是本地數據庫中的數據，
也有可能是用戶在UI上填寫的表單即將上傳到服務器上面存放，所以需要有數據來源。
既然Model是數據管理者，則自然由它來負責獲取數據。
View（視圖）：簡單來說，就是我們在界面上看見的一切，是應用程序中處理數據顯示的部分。通常視圖是依據模型數據創建的。
Controller（控制器）：是應用程序中處理用戶交互的部分。通常控制器負責從視圖讀取數據，控制用戶輸入，并向模型發送數據。
Controller是MVC中的數據和視圖的協調者，也就是在Controller里面把Model的數據賦值給View來顯示
（或者是View接收用戶輸入的數據然后由Controller把這些數據傳給Model來保存到本地或者上傳到
服務器）。
綜合以上內容，我們所有的App都是界面和數據的交互，所以需要類來進行界面的繪制，于是出現了View，需要類來管理數據于是出現了Model。我們設計的View應該能顯示任意的內容比如頁面中顯示的文字應該是任意的而不只是某個特定Model的內容，所以我們不應該在View的實現中去寫和Model相關的任何代碼，如果這樣做了，那么View的可擴展性就相當低了。而Model只是負責處理數據的，它根本不知道數據到時候會拿去干什么，它既然無法接收用戶的交互，它就不應該去管和視圖相關的任何信息，所以Model中不應該寫任何View相關代碼。然而我們的數據和界面應該同步，也就是一定要有個地方要把Model的數據賦值給View，而Model內部和View的內部都不可能去寫這樣的代碼，所以只能新創造一個類出來了，取名為Controller
第四階段
mvvm模式
mvvm（model-view-viewmodel），model和view的定義同mvc中的mv是一致的，而viewmodel就是對mvc中c這部分功能的抽離，在實際編程中，m負責拿到數據，v負責視圖，這兩個已經的固定的了，但是我們發現在c中，我們除了控制交互外，我們進行了大量的數據分析，當頁面越復雜，c越臃腫，然而c的設計初衷是：1、管理自己的生命周期；2、處理Controller之間的跳轉；3、實現Controller容器。從設計初衷我們就可以看到，c的設計根本沒有數據分析這一塊，那么數據分析該由誰來做？這就是viewmodel產生的原因，專門用于數據分析處理
為什么不叫mvcvm呢？c只是被弱化了，并不是不存在，c的存在更加單純和純粹，它充當一個處理器，來進行各部分的協調運作，相當于一個隱藏的幕后推手，它只關心結果，而vm則負責接手c的數據分析處理的工作
// 數據劫持
function observe(data) {
if(!data || typeof data !== 'object') {
return;
}
Object.keys(data).forEach(key => {
observeProperty(data, key, data[key]);
})
}
function observeProperty(obj, key, val) {
observe(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function() {
return val;
},
set: function(newVal) {
if(val === newVal) {
return;
}
console.log('數據更新啦', val, '->', newVal);
val = newVal;
}
})
}
// 指令解析
class Compile {
constructor(el, vm) {
this.$vm = vm;
this.$el = this.isElementNode(el) ? el : document.querySelector(el);
if(this.$el) {
this.compileElement(this.$el);
}
}
compileElement(el) {
let _this = this;
let childNodes = el.childNodes;
[...childNodes].forEach(item => {
let text = item.textContent;
let reg = /\{\{((?:.|\n)+?)\}\}/;
if(_this.isElementNode(item)) {
_this.compile(item);
}
else if(_this.isTextNode(item) && reg.test(text)) {
_this.compileText(item, RegExp.$1.trim());
}
if(item.childNodes && item.childNodes.length > 0) {
_this.compileElement(item);
}
})
}
compile(node) {
let nodeAttrs = node.attributes;
[...nodeAttrs].forEach(item => {
let attrName = item.name;
if(this.isDeractive(attrName)) {
let value = item.value;
node.innerHTML = typeof this.$vm[value] === 'undefined' ? '' : this.$vm[value];
node.removeAttribute(attrName);
}
})
}
compileText(node, val) {
node.textContent = typeof this.$vm[val] === 'undefined' ? '' : this.$vm[val];
}
isElementNode(node) {
return node.nodeType === 1;
}
isTextNode(node) {
return node.nodeType === 3;
}
isDeractive(attr) {
return attr.indexOf('k-') === 0;
}
}
