自制前端框架 Day0.冒险之旅的开始

从上次面试回来以后，就打算自己做一个类似angular的前端框架。一方面可以深刻理解一个前端框架的内在，另一方面可以锻炼自己的写代码能力。之所以模仿angular去写，是因为自己对angular比较熟悉。
我给自己7个月的时间来完成这件事，希望可以在圣诞节的时候把这个框架当作自己送给自己的礼物。
我知道这个目标很难，所以我认为这是一次冒险，也许我花费宝贵的7个月时间一无所获，也许我能有一个新的突破。我打算持续写文章记录我的所思所想所学，这使得我的疯狂举动有了那么一些仪式感。
冒险之旅开始了。

假设有这么一个需求，要实现下面原型图里的功能：

1. 可以展示一些学生信息。
2. 点击学生信息后面的叉叉，可以把这条信息删除掉。

丑陋的原型图

如果按照angular的思路，肯定是在scope上有一个数组，数组里面有两个表示学生的对象，就像这样：

$scope.studentsList=[
    {
        name:'张三',
        age:20,
        hobbies:['打篮球','写代码']
    },
    {
        name:'李四',
        age:22,
        hobbies:['泡妞','喝酒']
    }
]

然后在html里面肯定是有一个地方写一个循环，把这个数组循环显示出来，大概是这样：

<div ng-repeat="item in studentsList">
    {{item.name}}-{{item.age}}
    <!--为了省事，爱好部分就不写了-->
</div>

显然，如果写一个框架要实现这个功能，需要两个基本部分：

1. 大括号里面的表达式如何与相应的$scope对象关联起来。
2. 需要一个函数来根据数据重新操作DOM。

我想先解决第一个问题，就是如何把表达式与相应的scope对象关联起来。我的思路是这样：首先有一个parse函数，这个函数接受一个表达式作为参数，返回另外一个函数A:

var fnA = parse('name');

这个函数A可以接收一个scope对象，然后将这个scope对象的name属性解析出来：

var fnA = parse('name');//产生一个专门解析name属性的函数
scope.name='林志玲';
fnA(scope)=='林志玲';

那么很显然，我下一步要做的就是实现这个parse函数了。