如何把捏前端模板颗粒度

今晚看到一篇博文，其原文是讲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