Question

提出这个问题的一个简短方法是，“我应该如何设计可重复使用的html + js控件？”

我喜欢在html和javascript中编写ui控件以包含在网页中。（想想：小部件，照片采集器，股票行情，日历等。）。

我可以用一个体面的架构（oo design，model-view-presenter等）编写我的javascript。我在单独的文件中有javascript代码和css。托管控件的html标记只需引用脚本和样式表文件，然后在onload事件期间使用父DOM元素初始化我的控件实例。

我所挣扎的是一个很好的模式，让我自己的控件可以在其他地方重复使用，同时允许自定义样式，而不必每次都分叉CSS文件。

某些样式属性需要针对每种用途进行调整（颜色，字体，大小等）。但是控件的内部子项有一些样式属性，并不是要改变的。（例如，position：absolute，border-collase，overflow）。当某些内部儿童需要根据控件的整体大小进行调整时，它会变得很糟糕。

我可以使用哪些策略来重复使用重新使用我的小部件而不必分叉最初编写的代码或CSS文件的人？

Answer 1

顾名思义CSS适用于级联，因此您可以定义具有核心样式（不打算更改）的主CSS文件和可以更改的样式的默认值，然后为这些样式定义一种模板用户可用于定义自定义样式的值。

将主CSS视为：

.widget-frame {
    position: relative;
    text-align: left;
    margin: 5px;
    padding: 10px;
    color: #000000;
    ...
}

.widget-frame h1 {
    font-size: 2em;
    margin-bottom: 3px;
    color: 1E1E1E;
    ...
}
...

然后是自定义CSS文件，如下所示：

.widget-frame {
    /*Body of the widget*/
}

.widget-frame h1 {
    /*Title of the widget*/
}
...

所以用户只需更改颜色就必须使用此自定义CSS文件，并将例如color，background等属性添加到将覆盖主CSS的不同元素属性（记得加载自定义CSS文件主要覆盖后）

这是一个额外的文件加载所以如果你需要极端的性能可能不是最好的方法，但在大多数情况下，开销是最小的，这允许轻松自定义组件，而不必担心分叉主CSS文件和挖掘元素/属性，看看你想要改变什么。

Answer 2

将css的布局和样式分开，以便任何可自定义的属性（颜色，边框，字体系列等）都在一个css文件中。

我还会为你的所有类名选择一个常见的预修复程序 - 即.my-widget-wrapper，.my-widget-header等。不要强迫别人写这样的选择器：

div.my-widget-wrapper div h1 span span.close a

当他们可以做的时候

a.my-widget-close-button

设计允许自定义样式的HTML / javascript控件

2 个答案: