Question

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

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

使每个插件与css文件结合在一起。这合理吗？

Answer 1

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

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并添加钩子。 E.g。

插件-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. */

Answer 2

我会将它分开并使插件具有改变插件的一些视觉属性的方法。例如，用于改变高度和宽度的方法，以便用户不需要为非常基本的东西添加新样式或改变现有样式。

Answer 3

一般来说，id必须与其他人一致 - 最好保持CSS分离，然后只使插件变换类/ ids。然而，一个例外是如果你以有意义的方式使用透明度......

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

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

3 个答案: