如何把捏前端模板颗粒度

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏机器学习原理

知识图谱api调用

Wiki和google连不上网,这里中重点试了试CN-Dbpedia,比如,我想找一下苹果公司这个实体的三元组信息;

47620
来自专栏编程

C语言嵌入式系统编程修炼之背景篇

这是我13年前创作和发表在互联网上的文章,这么多年过去了,这篇文章仍然在到处传播。现在贴回Linuxer公众号。 全文目录: C语言嵌入式系统编程修炼之道——背...

37560
来自专栏程序员互动联盟

作为一名软件工程学生想要自学Linux,可以从哪方面开始学习?

很多linux初学者的首选书籍,linux学习先从基础的命令行入手,常用的命令大约20个,然后慢慢切入学习

9410
来自专栏猿天地

聊聊Akka

当前社会,人们越来越享受互联网带来的种种便利,同时也对互联网产品有了更高的要求,比如更快的响应速度和更稳定的服务;另一方面,互联网产品在不断发展的过程中也面临着...

28130
来自专栏养码场

一位资深Java的阿里系公司实战面试经验,套路还是面试官的多

占小狼:一位奋斗在魔都的资深Java开发。去年6月在简书上发第一篇技术文章,已坚持发表76篇技术文章,粉丝数突破4000。

24970
来自专栏北京马哥教育

Python —— 一个『拉勾网』的小爬虫

本文将展示一个 Python 爬虫,其目标网站是『拉勾网』;题图是其运行的结果,这个爬虫通过指定『关键字』抓取所有相关职位的『任职要求』,过滤条件有『城市』、...

57850
来自专栏HansBug's Lab

【作业2.0】HansBug的5-7次OO作业分析与小结,以及一些个人体会

26040
来自专栏架构说

如何阅读源码

从哪里开始读起,怎么读 这个问题简单,程序从哪里开始就哪里开始读起。譬如,C 代码,当然是从 main(),其他语言也是类似的。但阅读的时候,要带着问题去读。...

67850
来自专栏城域网光通信

城域网100G 光传输系统实现客户接入链路告警

摘要:为了确保一种小型化、低成本100G传输系统的可靠运行,提出了一种方案实现传输系统中的故障诊断和告警信息传递,分析了告警信息传递的关键技术和实现流程,并通过...

14500
来自专栏IT大咖说

华为:既满足用户体验,又节省功耗的App应用设计开发方法

19270

扫码关注云+社区

领取腾讯云代金券