資料劫持
發布訂閱模式
遍歷data選項中的屬性，新增資料的觀測，執行observe的方法，使用object.defineproperty方法轉換為get和set方法，實現資料的劫持，並且新增乙個compiler方法，對每個元素節點進行判斷，如果是文字節點，根據指令模板去替換資料
當資料發生變化時，observe中的set方法被觸發，會立即呼叫dep.notify()方法，開始遍歷所有的訂閱者，呼叫執行者的update方法，訂閱者收到通知之後對檢視進行更新
v-model實現資料的雙向繫結
在complier方法中對每個元素節點型別進行判斷時，如果是標籤節點，判斷是否存在v-model指令，存在即建立乙個訂閱者，並且設定該標籤節點的初始值，新增input事件監聽，在輸入框輸入的值改變時，執行set，get方法，對檢視進行更新
// 發布者 publish
class
dep// 訂閱方法
addsub
(watcher)
// 遍歷所有的訂閱者，發布更新方法
notify
(newval))}
}// 訂閱者 subscribe 更新dom方法
class
watcher
update
(newval)
}// 在資料劫持的時候，乙個key劫持執行前，選new乙個dep
// new dep()
// 第一次渲染前，先new乙個watcher
// new watcher()
// 第一次渲染的時候，新增訂閱者
// addsub()
// 更新資料，執行發布
// notify()
let watch =
null
;class
mvvm
// 資料觀測
observer
(data)},
// 讀取資料
get(
)return value;}}
);})
}// 編譯模版
compiler
(el)
compilernode
(element)
= node;
//判斷是文字節點
if(nodetype ===3)
\}/;
//有if
(reg.
test
(textcontent)))
;// 第一次渲染dom
node.textcontent =
this
.$data[regexp.$1];
}}// 判斷是標籤
else
if(nodetype ===1)
);// 設定初始值
node.value =
this
.$data[key]
;// 新增輸入事件監聽
node.
addeventlistener
('input'
,(ev)
=>);
}else
if(dirname ===
'bind')}
})}// 有子節點，需要編譯子節點
if(node.childnodes.length >0)
})}}
Proxy實現vue MVVM實踐
vueconf 2018hangzhou 大會剛剛過去，vue作者尤大大向我們展示了vue3.0的進展，並介紹vue3.0的一些改動，其中最令我期待的就是重寫資料監聽機制。談起vue的雙向資料繫結，我們首先能想到的就是es5中object.defineproperty，利用重寫屬性的get set，...
python ioc框架 IOC 實現原理
ioc 也就是 控制反轉 了，不過更流行的叫法是 依賴注入 di dependency injection 聽起來挺高深，其實實現起來並不複雜。下面就看看如何來實現這個輕量級 ioc 框架。從例項出發，先看看以下 action bean public class productaction exte...
集合框架 ArrayList的實現原理
arraylist是基於陣列實現的，並且可以動態擴容。下面簡述一下arraylist的特性 1 get和set操作效能很高，可以按索引獲取 2 在末尾add和remove的效率也很高，不需要移動元素 3 常規的add和remove效能不佳，視具體情況而定。4 動態擴容，和陣列相比最大的優勢。在對ar...