在 JQuery 插件上分离 css 和 JavaScript 逻辑是最佳实践吗？答案

【问题标题】：Is it a Best Practice to separate css and JavaScript logic on JQuery Plugins?在 JQuery 插件上分离 css 和 JavaScript 逻辑是最佳实践吗？
【发布时间】：2010-02-05 17:31:10
【问题描述】：

我们开始为 JQuery 库贡献一些我们在网站中使用的有用插件。我们希望确保涵盖创建插件的基本最佳实践。

我的想法（我不知道这是否是最佳实践）是将任何样式与插件 js 文件的实际逻辑分开。基本上只允许 js 文件操作类名、id 或标签，但不允许颜色或其他样式问题。

使每个插件都带有一个 css 文件。这合理吗？

【问题讨论】：

标签： javascript jquery css jquery-plugins

【解决方案1】：

这实际上取决于所涉及的样式数量。例如，如果您的插件创建了一个包含大量内容区域和按钮的小部件，那么可以，您应该使用单独的样式表（见下文）。但如果它只是一个带有几种样式的基本插件，那真的没有意义。例如

jQuery.fn.doSomething = function() {
    // Only a couple of styles.. no point in a separate StyleSheet
    return this.css({
        color: 'red',
        fontSize: '1.5em'
    });
};

另外，如果您使用的是 StyleSheet，那么您可能会考虑使类和 ID 可配置，然后您可以通过 XHR 加载 StyleSheet 并添加挂钩。例如

plugin-styles.css

#[[pluginID]] {
    color: red;
    background: white;
    border: 1px solid #000;
}

#[[pluginID]] a.[[pluginCLASS]] {
    display: block;
    border: 1px solid green;
}

/* etc. */

你的插件：

jQuery.fn.myPlugin = (function(){

    var pluginID = 'foo',
        pluginCLASS = 'bar',
        cssRequest = jQuery.ajax({
            url: 'css.css',
            async: false
        });

    jQuery('head').append(
        '<style type="text/css">' +
        cssRequest.responseText
            .replace(/\[\[pluginID\]\]/g, pluginID)
            .replace(/\[\[pluginCLASS\]\]/g, pluginCLASS)
        + '</style>'
    );

    return function() {
        // Plugin functionality...
    };

})();

生成的 CSS（添加到 <style/> 元素）：

#foo {
    color: red;
    background: white;
    border: 1px solid #000;
}

#foo a.bar {
    display: block;
    border: 1px solid green;
}

/* etc. */

【讨论】：

【解决方案2】：

我会把它分开，让插件有方法来改变插件的一些视觉属性。例如更改高度和宽度的方法，这样用户就不需要为非常基本的东西添加新样式或更改现有样式。

【讨论】：

【解决方案3】：

通常 id 必须与其他所有人一致 - 最好将 CSS 分开，然后只让插件转换类/id。然而，一个例外是，如果你以一种有意义的方式充分利用透明度......

例如，最终用户应该可以将“面板”的背景颜色更改为他们想要的任何颜色，但不透明度应始终为 0.85。然后我认为在逻辑中这样做是可以的，因为使用 jquery 会产生跨浏览器结果，如果仅在 CSS 中实现会大大膨胀并增加 CSS 主题化过程的复杂性。

【讨论】：