如何把捏前端模板颗粒度

今晚看到一篇博文,其原文是讲AngularJS的模板的,但觉得该作者讲的很多思路,不仅仅是AngularJS适用。凡是想在前端进行模板组织的,都可借鉴,故写下读后感。

模板可以有逻辑吗?

可以,但这种逻辑主要是遍历数据,外加少量的if/switch判断。

表现的差异化,不是在模板逻辑里面进行区分吗?答案是不,并且为了让模板更加模板,更加通用化,强烈不建议在模板中写这类型的逻辑。

那该如何实现表现层的差异化呢?

AngularJS的ngClass值得我们借鉴。通过挂不同的class,由CSS来处理差异化的展示,把表现层的东西,交还给表现层来处理。

hasData还是data.length?

正如上面所说,模板的逻辑,尽量使一些遍历数据的操作。例如对有无数据的判断,直接判断数据长度即可,何必额外添加一个hasData的状态?

表现结构是强绑定在模板?还是控制器?

Scope,规定了模板所需数据的结构。我不知道该如何解释这个,引用原文的话吧,说的挺直白的。

这就像是Java中的接口一样,模板定义好接口,然后控制器只要满足接口定义,填入自己的数据,就能在页面上获得需要的东西

我没研究过AngularJS的Scope为何物,但根据原作者的说法,让我联想到了后端DB的Schema。

后端的数据库,就像前端的模板一样,用来承载数据。当后端定义好Schema之后,使用方只管按照定义好的接口,往里面填充数据后,就能在数据库中获得需要的东西。

模板到底该怎样进行抽象?

模板不应以业务进行抽象,而应该以表现进行抽象。

例如原文中的admins和users,在表现层上面,都是想以用户列表的形式展现,那就该抽象出一个列表list,专门用来处理这部分的表现。

更通俗易懂的来说,交互设计师出一稿设计,我们就可以针对其中用到的交互表现,出一稿模板。当视觉设计师出视觉设计稿之后,我们再通过CSS去还原模板的视觉设计。(此流程暂时对我来说乃乌托邦,还未跑通)

写着写着,我想到了好多我以前厌恶的东西,例如让人看不懂的各种list,例如各种抽象,例如各种阐述抽象用法的文档。

要轻还是要重?

轻,则门槛低,灵活可变,打法随意。

重,则门槛高,有章可循,套路出招。

不论轻重,其目的都是为了代码的可维护性、为了项目进度不受人员的异动影响。

Turn Left or Turn Right?

参考原文:

【浅谈AngularJS模板】http://www.tychio.net/tech/2014/07/21/template-of-angularjs.html