Javascript 寻找模型和渲染之间完全分离的布局库

我将使用术语“长方体模型”泛指设计用于表示“矩形容器”（又名“长方体”）图形布局的任何数据模型，并执行相关计算（例如，在调整封闭长方体的大小时计算各个长方体的位置）。（此类模型的一个示例。）

我的问题的实质是：

我正在寻找具有以下属性的“盒子模型”的实现，大致按重要性排序：

布局信息的建模（如尺寸、边距、填充、包含关系等）与在某些特定设备中呈现该信息（如web浏览器、PostScript、X11等）之间应保持清晰的分离

它应该忠实地实施一些“标准”盒子模型（例如），或者，除此之外，至少有足够的采用基础，成为“事实标准”称号的可信候选人

最好是用Python编写（第二选择：JavaScript；第三选择：任何其他内容！）

我意识到，如果有什么东西能够满足这些标准，那么它就不太可能是孤立的。它很可能是更大系统的一个组成部分。这没关系

注意：国际海事组织，这篇文章的其余部分不包含回答上述问题所需的任何信息。在回答这个问题之前，我加入这个附加内容只是为了让那些想知道这个问题来自何方的人受益。然而，这并不是作为讨论的素材。请将任何回复限制在评论部分。在任何情况下，如果与我的估计相反，此补充内容被认为不适合，请让我知道，我将非常乐意删除它

---

这个问题背后动机的简洁（尽管可能有点不透明）陈述如下：

将我目前正在实现的库添加的“认知不一致”量降至最低

更详细地说，我所指的“认知失调”是指每一个新的软件引入的失调，它以一种与在同一问题域中运行的任何其他现有软件“基本等同但不完全相同”的方式对一个成熟的问题域进行建模。这种“认知失调”包括对已确立概念的新术语，或已确立术语的新含义、新约定等

减少这种认知不一致的明显方法是坚持采用一些预先存在的标准数据模型的术语和约定的原则。当然，只有在有这样一个标准数据模型的情况下，这种策略才能成功，并且只能与其流行程度成比例。（至少在我的经验中，被广泛采用的数据模型相对较少，这就是为什么我的目标只是“最小化”，而不是完全“避免”由我的图书馆造成的认知失调。）

更具体地说，我正在开发一个小型的内部库，以解决抽象编码和使用布局信息进行计算的问题

这个库仍然非常简单，但我已经发现自己不得不在命名法、惯例和总体结构方面做出很大程度的任意选择。例如，在Python中：

# EXAMPLE 1

from __future__ import division

class Box(object):
    def __init__(self, width, height):
        self.width = width
        self.height = height

def make_box(width, height, aspect_ratio=None):
    if aspect_ratio is not None:
        w = height * aspect_ratio
        if w < width:
            width = w
        else:
            height = width / aspect_ratio
    return Box(width, height)

---

也许我没有花足够的时间仔细阅读你的帖子，但我仍然不确定我是否正确地识别了这个问题

然而，据我所知，我认为您可能想看看Sencha是如何为ExtJS库设计布局系统的

他们的想法非常简单，但却带来了一个非常易于使用、功能强大且灵活的布局系统

基本上，each可以与负责呈现子组件的结合使用

你可以看看他们的

---

你也会对他们的类感兴趣，这个类基本上就是你试图实现的

Box

类。

所以，归根结底，你想在应用程序中使用类似CSS的东西吗？gtk有一种将界面存储在ui文件中的方法。还有一些方法可以将webkit嵌入到应用程序中。请参见相关的“主题外”子选项：“要求我们推荐或查找工具、库或喜爱的非网站资源的问题对于堆栈溢出来说是主题外的，因为这些问题往往会引来固执己见的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决该问题所做的工作。”我想这个问题更适合我。看见这不是一个坏问题，只是不在主题上。请版主标记并让他们移动它。

# EXAMPLE 2

from __future__ import division

class Padding(object):
    def __init__(self, top=0, right=0, bottom=0, left=0):
        self.top = top
        self.right = right
        self.bottom = bottom
        self.left = left

class Box(object):
    def __init__(self, width, height, padding=Padding()):
        self.width = width
        self.height = height
        self.padding = padding

def make_box(width, height, aspect_ratio=None):
    if aspect_ratio is None:
        return Box(width, height)
    else:
        w = height * aspect_ratio
        if w < width:
            p = (width - w)/2
            padding = Padding(left=p, right=p)
        else:
            h = width / aspect_ratio
            p = (height - h)/2
            padding = Padding(top=p, bottom=p)
        return Box(width, height, padding)