前言
本次探索的demo是基于jquery写的，毕竟jquery提供了强大的选择器，用惯了就离不开它了！本次探索只实现了文本的双向绑定。
View-Model
先看效果：文本框输入内容,model层数据也同步过来了
Model-View
先看效果：js改变model层数据，视图也立即随之变化
上我的demo
<!DOCTYPE html>
<html lang="en" id = 'app'>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="app1">
<input type="text" swq-model="name">
<input type="text" swq-model="age">
<div>name:<span swq-bind="name"></span></div>
<div>age:<span swq-bind="age"></span></div>
</div>
<div id="app2">
<input type="text" swq-model="name">
<input type="text" swq-model="age">
<div>name:<span swq-bind="name"></span></div>
<div>age:<span swq-bind="age"></span></div>
</div>
<script>
function Swq(obj){//obj为new一个实例时传入的参数对象
var that = this;
var app = $(obj.ele);
// _data是需要双向绑定的所有数据
var _data = obj.data;
// 遍历劫持,并初始化set值，并初始化绑定事件
init(_data);
// 劫持改写object的get和set方法
function changeObject(obj,attr){
Object.defineProperty(obj,attr,{
//劫持到set方法
set : function(newValue){
_data[attr] = newValue;
// 实现model-view的同步
var $target = app.find('[swq-bind = "'+attr+'"],[swq-model = "'+attr+'"]');
if($target){
$target.each(function(){
var tagName = $(this)[0].tagName.toLowerCase();
if(tagName == 'input' || tagName =='select' || tagName =='textarea'){
$(this).val(newValue)
}else{
$(this).text(newValue)
}
})
}
},
//劫持到get方法，因为get方法已经被劫持，所以比如我们劫持了swq.name，那么swq.name就没有值了，所以我们给它返回值，返回值是存在数据容器里面的
get : function(){
return _data[attr];
}
});
}
// 初始化
function init(obj){
for(var o in obj){
changeObject(that,o);
that[o] = that[o];
app.find('[swq-model]').on('input',function(){
var attr = $(this).attr('swq-model');
that[attr] = $(this).val();
})
}
}
}
var swq1 = new Swq({
ele : '#app1',
data : {
name : 'swq1',
age : 24
}
})
var swq2 = new Swq({
ele : '#app2',
data : {
name : 'swq2',
age : 25
}
})
</script>
demo解读
核心其实就是js原生的defineProperty。在这之前，我们需要知道，我们在给某个对象添加和获取属性和方法时其实它底层是调用了set和get方法，比如obj.name="名字",这里是调用了set方法,obj.name这里是调用了get方法。
因此，我们可以劫持js的这两个底层方法
Object.defineProperty(obj,attribute,{set:function(newVlaue){//dosomething},get:function(){//dosomething}}）
obj是我们的model对象，attribute就是我们要劫持的需要双向绑定的name,set就是设置属性时底层调用的方法,get就是获取属性时底层调用的方法因为我们劫持了这两个底层方法，我们可以做我们想做的事，但是同时我们也破坏了它本身的设置和获取功能
结言
本人小菜对前端技术很感兴趣，有大神路过给点指点，我也可以关注下各位大神的博客，希望可以学到更多的东西！！！谢谢