从需求到网站:(五)前端代码

接前一篇:从需求到网站:(四)技术架构

架构师把网站的架构定下来之后,码农们就开始编码啦!当然,传统的软件工程流程要先做概要设计和详细设计,也就是撰写设计文档。文档是个让程序员又爱又恨的东西。当维护别人代码的时候,巴不得文档越多越好;自己写程序的时候,巴不得不写文档直接编码。必要的设计文档还是很有好处的,特别是当团队成员比较多的时候。

既然是网站,不可避免的需要编写HTML、CSS和Javascript代码,这些代码称为前端代码。

HTML和CSS

这是一对网页好基友,所有的网页都必须通过这两种语言来呈现。HTML负责表达,需要呈现哪些内容。例如:

<a href='www.nius.me‘>Nius' Avalon</a>

上面这段html的A标签(Anchor)就代表一个网页链接,这个链接指向我的博客地址。但是,用户显然不希望看到这样一段代码。于是浏览器就会把这段代码画出来,如果没有对这个A标签定义样式,浏览器会默认给这个A标签一些基本的样式,例如文字颜色是黑色,背景是白色等等。如果想要自己定义样式,就要写CSS代码。

a{
     color: red;
 }

上面这段代码的含义就是,页面上所有A链接,文字的颜色都是红色。如果看到此,对写网页产生了极大的兴趣,欢迎查阅W3C提供的网页编写教程:w3school

那么,需求传奇项目的html和css回是怎样的呢!大家可以查看下面Demo,以及里面的源码。

[iframe http://jsfiddle.net/nius/NV4ET/embedded/result,html,css,js/ 100% 300px]

咦!好像确实跟之前的设计图(传送门)差不多,但是还是不对劲啊!那些{{}}是神马玩意!

这就是传说中的前端模板。估计上一篇文章信息量太大,不好理解,这下大家应该明白模板是啥了。就是填空题嘛,先把要填的空占着。

Javascript

好了,既然html和css,一个掌管显示神马,一个掌管怎么显示,还要js做什么?Js的作用就是,让网页”动起来”,例如本文下方的评论框,点击不同的标签页,显示不同的内容。这个HTML和CSS都不管,只好Js来管了。Js有两个超级牛逼的能力:

在浏览器里操纵html代码

在浏览器里意味着,代码运行在用户的机器上,而不是服务器上。操纵html代码,意味着可以动态的更改显示的内容。同时,html标签里的class和id属性,更改后可以调整html的样式,也就是简介控制CSS。再次,html标签里有一个style属性,可以在里面输入css代码,起到和css同样的效果,即直接控制css。真可谓,挟html以令网页!

向后台发送请求,并接受返回

这个是什么意思呢?看了上一篇文章,大家知道,从url地址打开一个网页,就是向后台发送请求,返回了html文件,以及css文件、js文件等等。当网页打开了之后,不打开新链接,理论上是不会有新的请求的。但是js就可以做到,在当前url地址下,向后台发送请求,并接受返回的值!好吧,这个就是AJAX。

在上一篇文章网站架构中,我提到,后台模板和前端模板两种架构。如果使用后者,那么Js在这里的作用就是要请求后台数据,然后更新当前网页。注意,url地址栏里没有变化哦~(当然js也可以控制url地址栏变化,暂不详述)。

于是,我们的需求传奇的页面就出来啦!

[iframe http://jsfiddle.net/nius/NV4ET/3/embedded/result,html,css,js/ 100% 300px]

前端框架

好了,大家如果有兴趣,可以详细看一下上面Demo的html和Js源码。这里,我使用了一个Js的前端框架:Angularjs。上篇博客发布后,有人问我框架是什么意思,这里解释下。

框架就是说,很多代码,已经有其他的程序员帮助你写好了,你只需要把他的代码拿过来,然后按照他代码里定义的接口和约定,编写少量的代码,就可以完成很复杂的功能。

上面Demo里的Js代码,大家可以看到,只有20多行,这20多行就是按照一定约定来写的,就是说框架说,应该这样写,我就这样写。当然我会在其中添加具体的业务逻辑。同时,html源码里,有np-app,np-model这种不属于html的东东,也是框架要求我这样写的。我按照框架的要求写出代码后,程序就会按照预期来执行。

于是,我就通过20来行的js代码,以及对html的少量改动,就完成了将需求卡片复制10次显示在页面上,每个需求卡片标题不同、优先级(就是颜色)不同的操作。很省事有木有!这就是框架的力量!节省代码!

前端这两年发展迅猛,框架层出不穷,已经选不过来了。不光有Js的框架,还有css的框架。例如上面的css,就是通过compass/scss框架来生成的。

最后,如果你对js也十分感兴趣,仍然推荐W3C的教程:w3school

============ 本文是一个系列,其他已经写好的文章: