本文为位于德国亚琛的InnerKen公司的内部培训材料。主要目的在于使实习生和同事们迅速掌握可以说是极为庞杂的前端开发体系。为之后的学习和成长提供一个更好的开始，同时能够即学即会的开始开发。

22.png

1. 什么是前端开发？
2. 从功能的表达到功能的层级与载体
3. 一份设计标准和一种设计模式
4. Aves基础前端开发框架
5. 常见前端元素实现方式
6. 数据的载入和上传，异步通讯

1.什么是前端开发

如果要搞清楚，什么是前端开发，那么就要首先搞清楚，什么是前端。广义上的前端指的是用户界面，在不同的编程语言，编程模式中，前端和后端的划分各种各样，但是最为根本的就是，前端是软件中*（或是网站等）和实际使用的用户做交互的部分。

前端开发是软件开发中最为庞杂的部分。由于平台和编程语言的分化，前端开发逐渐包罗万象，而各种开发模式层出不穷，要想精通其中的全部无疑是十分不明智的。然而，从IOS到安卓，从Web开发到小设备的嵌入式编程，所遵循的原则却都是相同的。

用户使用软件的逻辑，就是使用的逻辑，而前端开发，就是在用界面上的元素和布局表达用户的使用逻辑。我们在界面上放置一个按钮不是因为这里很空，不是因为放着好看，而是因为表达用户的使用逻辑需要这么一个按钮，我们才放置一个按钮，而具体的设计是在那之后的。只有确定了页面上的功能，确定了用户的使用逻辑，我们才能确定界面上的元素和其所表达的功能，而美观则是在那之后才会被考虑到的。

设计这门学科原本就是为了表达功能，因此设计中的几个基本原则都可以在前端的制作过程中一 一体现。亲密性，重复，对齐和对比，这是设计中最为基础的几个原则。亲密性意味着在逻辑上具备相似功能或内容的元素应该在物理上（或者说布局上）放置在一起。重复的意思是页面上的表达同样逻辑的元素应该具有相似的样式。对齐是指在页面上元素的放置应该符合特定的视觉轴线，不应该有和其他元素完全不对齐的元素。而对比则是要求如果两个表达不同逻辑的元素的样式不同，那么就让他们截然不同，而不是仅有一点点基本的区别。

牢记这些原则并不能让我们设计出令人称道的页面，但是考虑到大多数初学者的水平，这些原则就可以让我们设计出不至于让人反感的页面了，而这正是很多企业用户的需求：简洁，高效，成本低廉。

而前端的另外一个重要的能力就是从用户的需求中提炼出行之有效的用户行为和业务逻辑。

前端的开发是从对用户需求的分析开始的，一个优秀的前端工程师应该在和用户沟通用户需求后，形成良好的文档和确认后才开始设计的。只有理清了用户需要的功能，并将功能变成可以被具体描述的用户行为后，所有前端的设计才有了意义， 前端的设计是对于用户逻辑的表达，没有用户逻辑的前端设计如同无源之水。

而从需求到用户的业务逻辑，从业务逻辑再到具体的用户行为，则是另一种可称得上是繁重的劳动，在小项目和大家具有共识（指公共知识）的情况下，很多用户行为已经被确定，那么我们应该顺应用户习惯的行为进行设计，而对于一些未接触过的用户行为，不常用的功能，在设计之余应该使用新手和从未接触过使用逻辑的用户进行测试。