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

Question

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

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

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

Answer 1

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

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

此外，如果您使用的是样式表，那么您可以考虑使类和 ID 可配置，然后您可以通过 XHR 加载样式表并添加 Hook 。例如

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