自制简易MVC

最近稍微有点时间，并且我以前是做ng的，对ng的mvc一直想研究研究。MVC的基础知识我就不多说了，总结下来就是：根据相应的指令找到作用域。在一定的作用域里进行数据的绑定，并在controller层里面写处理逻辑的代码。其实在这里面的操作主要是一个寻找和替换。（要是有不对的地方希望大家多多给建议）
接下来说说我的思路：

一 建立Model层

 var Modal = function (value) {
        "use strict";
        this._value = typeof value === 'undefined' ? '' : value
        this._listeners = []
    }

现在里面什么方法都没有，想一想我们需要什么方法：
一 我们需要一个写入方法，这个方法会动态写入我们的数据；
二 需要一个绑定的方法，去将我们的M和V进行关联
三 最后我们需要一个监听的方法，就类似ng的watch，去监听变量

二 建立Controller层

Controller层是我们处理逻辑的地方。但是在此之前，必须得找到作用域。在这里，我以controller来标示我的作用域，并且作用的名字必须是字符串，否则抛出一个错误

controller="myCtrl"

那么在相应的Controller层就必须得去搜到这个作用域。搜索的方法用原生js的querySelector方法。我是这样设定的：

 if (typeof controllerName === 'string') {
            //在页面上找到相对应的controller控制器
            var controller = document.querySelector("[lhy-controller=" + controllerName + "]"),$scope = {}
        } else {
            console.log('cannot found this controllerName,please check it again')
        }

然后我们在controller里面先获得所有的绑定数据，绑定暂定用bind绑定，

 var views = Array.prototype.slice.call(controller.querySelectorAll('[bind]'), 0)

然后我们在这个数组便利循环去重新绑定并且设置值

 models[modalName].bind(view)

大概的思路就是这些啦。页面主要用就是这样用的：

<div lhy-controller="lhy" init="{numb:2}">
    Input : <input type="text" bind="numb">
    <br/>Span : <span bind="numb"></span>
</div>
<script>
    l.controller("lhy",function($scope){
        //code ...
    });
</script>

总结一下：就是寻找作用域，抽出逻辑代码写成Controller，数据方面都在Modal，View层就是我们的Html
参考地址
本人github地址