自制前端框架 Day0.冒险之旅的开始
2017-05-07 本文已影响168人
蚊子爸爸
从上次面试回来以后,就打算自己做一个类似angular的前端框架。一方面可以深刻理解一个前端框架的内在,另一方面可以锻炼自己的写代码能力。之所以模仿angular去写,是因为自己对angular比较熟悉。
我给自己7个月的时间来完成这件事,希望可以在圣诞节的时候把这个框架当作自己送给自己的礼物。
我知道这个目标很难,所以我认为这是一次冒险,也许我花费宝贵的7个月时间一无所获,也许我能有一个新的突破。我打算持续写文章记录我的所思所想所学,这使得我的疯狂举动有了那么一些仪式感。
冒险之旅开始了。
假设有这么一个需求,要实现下面原型图里的功能:
- 可以展示一些学生信息。
- 点击学生信息后面的叉叉,可以把这条信息删除掉。
如果按照angular的思路,肯定是在scope上有一个数组,数组里面有两个表示学生的对象,就像这样:
$scope.studentsList=[
{
name:'张三',
age:20,
hobbies:['打篮球','写代码']
},
{
name:'李四',
age:22,
hobbies:['泡妞','喝酒']
}
]
然后在html里面肯定是有一个地方写一个循环,把这个数组循环显示出来,大概是这样:
<div ng-repeat="item in studentsList">
{{item.name}}-{{item.age}}
<!--为了省事,爱好部分就不写了-->
</div>
显然,如果写一个框架要实现这个功能,需要两个基本部分:
- 大括号里面的表达式如何与相应的$scope对象关联起来。
- 需要一个函数来根据数据重新操作DOM。
我想先解决第一个问题,就是如何把表达式与相应的scope对象关联起来。我的思路是这样:首先有一个parse函数,这个函数接受一个表达式作为参数,返回另外一个函数A:
var fnA = parse('name');
这个函数A可以接收一个scope对象,然后将这个scope对象的name属性解析出来:
var fnA = parse('name');//产生一个专门解析name属性的函数
scope.name='林志玲';
fnA(scope)=='林志玲';
那么很显然,我下一步要做的就是实现这个parse函数了。