我已经为此奋斗了很长时间，我想知道其他人是否有反馈意见。我即将制作一个用于快速构建 Web 应用程序的定制库，并且我想确保使用正确的方法。我想使用这个方法:
$.fn.someSlider = function(){
var coreStyle = '.slider ul { white-space: nowrap; } .slider ul li {display: inline-block}', coreStyleTemplate = '<style><\/style>';
}
但我觉得将基本 CSS 硬编码到小部件中总是不受欢迎的 - 相反，我看到 SO 用户建议使用 CSS 样式规则而不是此选项。我真的真的真的想要那种“它就可以工作”的感觉，并且必须强制我的用户使用单独的样式表才能让我的插件工作......这很烦人!
只是为了澄清:我想包含小部件正确/基本功能所需的所有基本样式规则，以包含在脚本中。用户可以通过在自己的样式表中编写样式规则来轻松修改小部件的基本外观。
示例:
不必像这样查看所有基本样式来尝试找到字体颜色... .slider {display: inline-block;颜色:#000；其他一些令人困惑的规则:废话； }
用户只需使用正在使用的类名称/选择器启动一个新规则 - 然后只需编写对默认脚本样式进行的更改即可
他们只会写
.slider {颜色:#000};
感谢您提前提供的帮助!
最佳答案
问得好!虽然我不确定首选的解决方案是什么，但我正在考虑以下方法:
使用IIFE定义您的 jQuery 插件并使您能够定义一些私有(private)的全局变量和函数。
$.fn.pluginName = (function() { return function() { ...your regular plugins code... }; }();将插件 CSS 定义为插件代码中的样式规则列表
var rules = [ '.box {' + ' width: 100px;' + ' background-color: #f99;' + ' margin: 10px;' + ' padding: 10px;' + ' font-family: Helvetica, Arial;' + ' text-align: center;' + '}' ];创建一个私有(private)变量来记住样式表是否已添加到文档中
var styleSheetExists = false;创建一个私有(private)函数，该函数使用上面的样式规则创建样式表，并将其添加为第一个
<style><head>中的元素允许用户覆盖自己的 CSS 中的样式。请参阅http://davidwalsh.name/add-rules-stylesheets有关如何正确执行此操作的良好教程var createStyleSheet = function() { var style = document.createElement("style"); style.appendChild(document.createTextNode("")); $('head').prepend(style); for (var i = 0; i < rules.length; i++) { style.sheet.insertRule(rules[i], i); } };第一次将插件应用于元素时，检查样式表是否已创建，如果未创建，则创建样式表。
var $elements = $(this); if (!styleSheetExists) { createStyleSheet(); styleSheetExists = true; } $elements.each(function() { $(this).addClass('box'); }); return $elements;
参见http://codepen.io/ckuijjer/pen/FkgsJ对于这个例子。它创建了一个名为 box 的 jQuery 插件，它只是添加了类 box到一个元素。类框在其样式表中定义了默认的粉红色背景色，该背景色会被用户定义的蓝色背景色覆盖。
但是请务必在您的 jQuery 插件中进行配置。您希望开发人员能够捆绑所有 CSS(包括您的插件)，以优化向客户端的资源交付。另外，注入(inject)样式表可能会对性能造成一些影响。
关于javascript - 使用样式规则编写 Jquery 插件的正确方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26470623/