面向对象的前端开发_面向设计师的开发：了解前端

面向对象的前端开发

在本文的学习过程中，我们将大力发展前端开发，并了解它如何适应我们的整体情况。 这是我们要介绍的内容：

1. 了解前端堆栈
2. DOM的局限性
3. 注意事项
4. 了解事件，状态和响应能力

了解前端堆栈

渲染网站可能是一项艰巨的任务。 使用大量设备，浏览器，访问点，带宽，编程语言和环境，构建一致的Web体验可能很困难。 多亏了浏览器和标准化机构（W3C），我们才有了一些Struts，以便在可能的情况下提供控制。 这些Struts是HTML，CSS和JavaScript。

结合起来，我们将这些Struts称为前端堆栈 。 每种语言都有其自己的目的，开发人员会花费大量时间来确保不会混淆彼此的语言，因为它们会相互渗入。 因此，让我们在这里开始基本操作。 市售的现代浏览器：Safari，Edge，Chrome和Firefox之类的浏览器只能理解HTML，CSS和JavaScript。 就是三种语言。 除Javascript之外，HTML和CSS是声明性静态语言。 我的意思是，您不必在任何一个程序中都进行“编程”，因为没有实际的逻辑可写（有一些小例外）。 但是，近年来已席卷互联网JavaScript是一种编程语言。

过去，当我试图向学生解释前端堆栈时，我总是发现参考人体很有用。 考虑到我们在原子设计的背景下进行讨论，这恰好使我的隐喻过去了！

HTML：超文本标记语言

HTML是您的骨架。 它决定了您的结构和姿势。 从这种结构中可以得出一定程度的含义。 您的头部，颈部，肋骨，臀部，腿部，脚始终排在第一位，一直到指骨。

我刚刚描述的元素顺序是您典型的人。 鲸鱼或老虎可能有所不同。 因此，HTML对于博客，商业商店或平台可能有所不同。 HTML的全部含义，就是以有意义的方式向网络浏览器描述页面的含义。 随着Google的算法从本质上读取此结构并从中得出页面的实际含义，这已成为一门很近的科学。

外带：请记住，HTML为您的Web体验提供了一种结构。

CSS：级联样式表

CSS是您的外观。 头发的颜色，眼睛的颜色，肤色，毛发，长臂，肌肉，脚趾甲的长度等。这甚至是您为头发定型的方式，或者是使您看起来像自己的妆容的方式。

它的唯一目的是为原本无聊HTML设置样式。 如果我们只在骨架上四处走动，吸引力就会成问题。 网络体验也是如此。

JavaScript

JavaScript是您的举止和互动。 从单击指关节到眨眼，微笑，咳嗽，走路的方式，无论您决定是否跳过，一切都与交互性有关。 关于JavaScript要记住的重要一点是，当您关闭浏览器时（通常来说），所有这些都被遗忘了，因此我们可以将JavaScript视为网站的交互性，而该网站是在您处于“会话”状态或与之交互时进行的网站。 考虑单击弹出窗口或导航下拉菜单。

你们当中有些人可能会问大脑或“逻辑”在哪里，但是我们会到达那里。 本部分最重要的内容是HTML，CSS和JavaScript都存在于浏览器中，它们共同协作以创建“静态” Web体验，然后我们可以将其带回Atomic Design进行改进。

DOM的局限性

DOM代表文档对象模型 。 DOM是HTML，CSS和JavaScript在用户激活的会话中共存的生动结果。

因为DOM是源代码的生动表达，所以了解它有局限性很重要。 您在计算机上用HTML，CSS和JavaScript文件编写的代码称为源代码。 该资源非常类似于您在DOM中看到的内容，但事实并非如此。 DOM是对这些填充有源代码的文件进行操作和整理的产物。 当从浏览器请求这些文件时，将对语言进行“解释”，从而诞生了一个网站或网页。 如果更改源代码，则需要刷新这些源文件的表示形式，以便在浏览器中显示更新的版本。

每种语言都有其自身的局限性。 例如，CSS没有特别强大的布局引擎。 这意味着在浏览器中生成复杂的布局可能是一个相当大的过程。 HTML没有布局功能，只能为要理解的网站提供结构和层次结构。 JavaScript是一种编程语言，具有处理HTML和CSS的能力。 由于我们使用三层堆栈来创建任何给定网站的前端这一事实，因此它们都需要彼此很好地玩耍，并且需要符合一些额外的参数。 在我们的情况下，这些参数引用不同的浏览器，设备，操作系统，浏览器版本等。 DOM在所有浏览器类型和发行商中或多或少都是相同的，但是由于这个原因，为了创建一致的体验，要遵循许多规则。

注意事项

CSS采用了称为Box Model的概念。 Box模型包含以下属性：

• 内容 ：实际的内容区域，也许用文本填充。
• 填充 ：围绕内容区域并增加背景的额外填充。
• 边框 ：边框，超出填充范围。
• 边距 ：将形状本身推离其他元素。

这是一个说明得更好的图表。

在设计诸如正方形的形状时，它占用的房地产包括上述元素。

“ 赔率永远不会对你有利 ”

是的，五个列网格对于开发人员而言并不是一个好兆头。 通常，使用偶数比使用偶数更容易。 开发人员倾向于使用诸如Bootstrap或UIKIT之类的前端框架，这些框架带有预先计算的网格，这些网格包含10列，12列或更多列。 询问开发人员计划使用什么框架（如果有的话）是一个非常好的主意，以便使您的设计更适合HTML和CSS。

水而不是冰

网络的过去已经一去不复返了。 由于大多数网站都在朝着响应的方向发展，因此对流畅布局的需求变得非常明显。 现在使用百分比（10％，30％，50％）的容器计算出网格，然后容器会在开发人员可以指定的某些断点处崩溃。

字体不是你的朋友

网站上的字体在打印方面有很大不同。 在自己的计算机上构建网站时，可以使用系统上安装的任何字体。 这对您来说很棒，但是一旦这些文件移动到另一台计算机上，源代码就无法再引用您在自己的计算机上安装的字体，因为它与它没有任何关系。

解决这个难题的方法有很多，但是您经常会听到开发人员要求设计师使用Google字体。 Google字体是CDN（内容交付网络）上托管的一组字体，可以通过与Internet进行有效连接的任何计算机进行访问，这意味着即使我自己的计算机上未安装特定的字体，仍可以在我的网站上呈现。 注意这一点。 某些字体也不适合在Web引擎上呈现。 与使用Web浏览器相比，例如在Photoshop中查看时，它们的外观可能会大不相同。 每个程序使用不同的渲染引擎来渲染字体。

事件，状态和响应能力

既然我们已经介绍了一些基础知识，那么让我们看一下设计师倾向于在设计中不考虑但对于用户体验而言确实很重要的一些问题。

大事记

事件是用户与您的网站互动时采取的操作。 JavaScript有很多要考虑的因素，但简单的示例包括“单击”，“滚动”，“ mouseon”或“鼠标悬停”以及“键按下”或“键按下”。 如果您想了解有关JavaScript事件的更多信息， 请访问Mozilla 。 您在此处看到的某些事件不一定会被用户交互所触发。

从设计者的角度来看，了解用户对网站上的某些元素或部分的处理方式至关重要。 例如，当单击一个按钮时会发生什么？ 还是在单击时将动画应用于模态窗口？ 这些是您需要提供答案的问题，尤其是在您的项目具有预定义范围的情况下。 根据预算和时间表，“交互设计”（在网络社区中被称为“交互设计”）可能会占用项目宝贵的时间。

州

事件发生后，元素将保留为“状态”。 一个常见的例子是链接。 链接具有多种状态： active ， focus ， hover 。 当您的链接被点击时，它们看起来像什么？ 当您按下时？ 当鼠标悬停在它们上方时？ 还是当他们接触到手机时？

原子设计确实可以派上用场，因为您的样式指南可以在构建诸如按钮之类的原子时轻松说明这些状态。 状态可能会对您的用户体验产生重大影响，因此在处理更复杂的网站时应考虑到这一点。

React性

“响应性”的流行语现在已经流行了很长时间。 作为开发人员，我们需要确保我们在所有设备上的Web体验都是一致的。 如果您是自由职业者，几乎每个客户都会要求其网站具有响应能力。 它已成为网络上的“面包和黄油”。 CSS为开发人员提供了一种有用的技术，例如“媒体查询”，该技术使开发人员可以在某些“断点”处自定义布局。

诸如Bootstrap和Foundation之类的前端框架旨在通过为开发人员设计可响应的，基于百分比的网格来使响应性更易于实现。 这里最大的收获不是响应式设计网格如何工作，而是更多其设计要做的事情。

结论

这次就这样了！ 在下一篇文章中，我们将研究后端以及如何使用原子设计思维方式来增进我们对逻辑和编程技能的理解。

翻译自: https://webdesign.tutsplus.com/articles/development-for-designers-understanding-the-front-end--cms-27713

面向对象的前端开发