如何把捏前端模板颗粒度

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

小项目里面的大内涵

最近一直在用PHP来做东西~

一个很简单的应用:用户系统~

知识储备:

1、PHP基础(语法规则)

2、PHP与MySQL连接函数

3、SQL语句

4、前端工程师所需的一些技能

5、系统安全问题

看上去好像很高深,其实也不是特别高深,一点一点的说吧~

 

PHP基础这部分,没什么说的

文件格式*.php,

<?php 把程序写在这里面,写法和CC++差不多 ;?>

 

PHP与MySQL连接这一部分,主要就几个PHP函数而已

mysql_connect() – 连接数据库

mysql_select_db() – 选择数据库

mysql_query() – 执行SQL查询

mysql_fetch_array() – 抓取查询结果,生成数组

 

SQL语句

额~因为我从没系统的看过,所以实施的时候总是出这样那样的语法问题,尤其是对 ‘ “ . ` 这些个符号的使用,非常混乱~

要用的时候,可以使用PhpMyAdmin里面,看看别人的SQL语句是怎样用的~

还是不在这误人子弟了~

 

为什么说要有一些前端工程师的技能呢?

首先嘛,这个用户注册,登录界面可是用户对整个站点的第一印象~

其次,我们来看看twitter的界面、Tumblr的界面等,里面用到某些行为,非常形象生动,给人很好的感觉,让整个站点马上体现出一种“炫”~

 

万事都说安全第一,网站也不例外~

做任何系统,都不要相信用户的输入(@http://rockux.com 还教我们不要相信javascript,具体该怎么做自己想吧)~

必须要对用户的输入进行处理,才可以执行、或者存储,否则,神马跨站攻击、神马SQL注入攻击,烂摊子不好收拾~

一个比较基本的处理,PHP的魔术引号,详情请看:传送门

 

做人做事要“眼高手低”,万丈高楼平地起,just do it~