在哪里可以找到有关布局管理器如何工作的信息(布局管理器内部)?

发布于 2024-10-15 18:02:30 字数 114 浏览 0 评论 0原文

放入答案或指向某些页面的链接,其中包含有关布局管理器如何工作的信息(布局管理器内部)?

一般而言。用于在浏览器中放置 2d(普通)组件。我想用 javascript 为应用程序框架构建一个布局管理器

Put in an answer or link to some page with information about how Layout Managers work (Layout Managers internals)?

in general matter. For laying 2d (normal) components in a browser. I want to build a layout manager for an application framework in javascript

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

最佳男配角 2024-10-22 18:02:30

假设我掌握了您的问题,布局管理器执行的典型任务是:

  • 跟踪每个布局组件的位置信息。在浏览器中可以尽可能地映射CSS定位的顶部、左侧、绝对、相对等关系。包括边距、填充、边框等的影响。

  • 这可以被视为同一点,但跟踪图层(通常在您的情况下为 z-index)也很重要。

  • 跟踪形状信息,通常是盒子的高度和宽度
  • 跟踪哪些组件具有“活动元素”,例如脚本、动画、表单或嵌入
  • 跟踪哪些组件必须附加到具有特定要求的其他组件以及哪些组件是独立的且类似于小部件
  • 通常动态更新给定布局组件中的样式属性甚至内容的能力
  • 提供根据一个或多个其他布局组件的属性重新定位、对齐、调整大小以及以其他方式调整一个布局组件的跟踪属性的功能

如果您有能力处理此问题,您已经有了一个良好的开端。通过设计可以根据模板或模式重新排列的布局格式,能够更进一步,这也非常有用。


更新:就尺寸而言
优先,我不确定你是什么
寻找。如果您已经在使用
JavaScript 是一个很好的实践
保持宽度在最小宽度和最大宽度之间
动态地沿着CSS保持
跨浏览器。
读取节点结构并处理它在某种程度上是一个问题
偏好和非常问题
设计。以我自己的经验来说是
很高兴抽象出孩子们最喜欢的
节点“层”,特别是
将所有内容保存节点合而为一
部分代码和最父节点
在另一个。这些并不是严格意义上的
然而,顶部和底部节点作为一些
内容确实有子节点,
例如标签。之后我填写
在容器的另一个抽象中
最后考虑所有节点
利用这三者的关系
层。

如果您使用相对长度(例如 em、ex)来排列“主要”元素,
等..或百分比并跟进
对孩子使用绝对定位
要么在

包装器或使用边距
添加或减去相对值
长度,..你能够生产
紧密匹配的显示
不同的浏览器不同
最终用户屏幕分辨率。

另外,请查看基本的 HTML/CSS 设计最佳实践
参考并尝试简单实现
有了他们,你就会过得很好
开始。

Assuming I have a grasp of your question, the quintessential tasks a layout manager performs are namely:

  • Keep track of position information for each layout component. In a browser can go as far as meaning you can map the relationship of css positioning top, left, absolute, relative, etc.. including the affects of margins, padding, borders, etc..

  • This may be viewed as the same point, but keeping track of layers (usually z-index in your case) is also important.

  • Tracking shape information, usually height and width of a box
  • Track which components have 'active elements' such as scripts, animations, forms or embeds
  • Track which components must be attached to others with certain requirements and which are self-contained and widget-like
  • Often the capability of dynamically updating styling properties and even content within a given layout component
  • Providing functionality to reposition, align, resize and otherwise adjust tracked properties of one layout component based on the properties of one or more other layout components

If you are capable of handling this, you are on to a good start. Being able to take it a step further by designing layout formats that may be rearranged based on a template or schema can also be very useful.


Update: As far as which size takes
precedence, I'm unsure what you are
looking for. If you are already using
JavaScript it can be good practice to
keep width between min- and max- width
dynamically along side the css to keep
cross-browser.
Reading the node structure and handling it is somewhat a matter of
preference and very much a matter of
design. In my own experience it is
nice to abstract the child-most
'layer' of nodes, well particularly
all the content holding nodes into one
part of code and the parent-most nodes
in another. These are not strictly the
top and bottom nodes however as some
content does have sub-nodes, <b>
tags for instance. After that I fill
in another abstraction for containers
and finally account for all nodes
using the relationship of these three
layers.

If you arrange the 'main' elements using relative lengths such as em, ex,
etc.. or percentages and follow up
using absolute positioning on children
either in a <div style="position:
relative">
wrapper or using margins
to add or subtract from the relative
lengths,.. you are able to produce
closely matching displays across
different browsers and different
end-user screen resolutions.

Also, take a look at basic HTML/CSS design best practices for
reference and try to simply implement
them and you'll be off to a good
start.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文