自制前端框架Web前端之路让前端飞

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

2017-05-07  本文已影响168人  蚊子爸爸

从上次面试回来以后,就打算自己做一个类似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函数了。

上一篇下一篇

猜你喜欢

热点阅读