Get best of the week

我们编写可以正常工作的前端。或如何成为一名开发人员的工程师。第1部分

开发人员是与特定技术紧密相关的概念，它决定了您将开发什么。工程师是一个范围更广的概念，起初不涉及任何领域。首先，您获得了所谓的工程基础，在此基础上选择了将在其中工作的细分市场，例如软件工程师。并且只有在那之后，工程师才开始专注于任何技术。

工程基础更多地是关于思维方式，分析和系统化的能力，而不是大学的地壳。当您可以合理地证实所做出的决定和已经放弃的决定时。

前端就是这些垃圾场之一，这不是什么秘密，如果有什么用，那么最好不要碰它，否则，最好将其完全重写。

看一次比听一百次更好


现在，基于卡的界面已经变得很流行，所以让我们看一下需要开发一种卡的情况，该卡可以被拖动并固定在某些位置，以作为拖动的结果。

介绍性


  1. 卡必须能够占据三个位置之一。1-卡已初始化，2-用户拉起卡（将其打开），3-用户向下滑动卡以将其删除。


  2. 卡的最小大小为50vh，最大大小不受限制（这意味着可以滚动到位置2）

在收到要求之后，开发人员很可能已经在尝试确定使用哪个框架。工程师将尝试更详细地描述该过程并从该描述中识别关键特征，

例如：



顶层操作图看起来并不像这样复杂：



考虑DragUp操作：



在这里您可以立即看到dragUp操作仅在滚动卡的位置是不可能的，无论卡的大小如何，从所有其他位置开始，我们都必须处理dragUp操作。

困难仅在于卡片尺寸的分类。我们必须将卡分类为小块，以防止其被拖动到高于50vh的水平；中型卡不应超过其高度（否则，它只能悬挂在“空中”），但是大卡不应被拖动至高于Y = 0（顶部屏幕）。

一个好的数学家是一个懒惰的数学家。很难按尺寸对卡片进行分类并确定最大拖曳高度，在这里值得考虑如何更方便地展示这些卡片，而不是一味解决所有问题（就像在数学中将所有事物变成一个共同的分母时一样）。

在此阶段，我们可以想象卡是在虚拟视口中绘制的，该视口可以相对于真实视口上下移动，该虚拟视口的最小高度为50vh，最大为100vh。



现在，在任何位置（初始化，打开）的所有尺寸的卡的常规参数都是动力储备。

dragUp动作的处理图可以描述如下：



对于dragDown动作，它仍然更简单（当然，您可以再次从Euler圆开始，但是这太明显了）-阻止dragDown的唯一条件是卡已经滚动并且将执行scrollDown，并且不拖拽。



毫无限制地限制条件的领导者是滚动。唯一要记住的是，只有在虚拟和真实视口完全相交时，才可以在打开位置进行滚动。（并且我们通过css实现此条件，为该位置指定了open-y）



。当然，我们“缺少”了一些东西，并且该dragEnd事件关闭了我们与卡片（以及实际上与虚拟视口）和输出的交互。确定我们应该处于哪个位置。



总


作为第一部分的结果，我们进行了工程培训，描述了关键参数和操作计划，然后我们顺利地进入了第二部分，在第二部分中，我们将从开发人员的位置开始执行所有这些操作（诸如dragUp，dragDown操作，确定动力储备，确定最终位置等内容）。通常，将电路转换为代码。

More articles:


All Articles