Question

我正在创建一个网站，其中包含许多用javascript和CSS编写的动态内容。困扰我的是我的一半维度常量（页面上的东西的位置和大小）都在我的javascript中，而其他的则在我的CSS中。对于像这样的常量，有一个好的方法来获得“单一地方”吗？

首先我认为我可以使用像LessCss或SASS这样的CSS生成器，但是在那些文档中我看不到从另一个javascript文件访问声明的常量。任何人都可以指出我处理这个问题的明确，惯用的方法吗？

感谢您的帮助！

编辑：

澄清我的问题：我的部分页面包含一个高度特殊化的电子表格组件，我在javascript中从头开始构建，以在canvas元素中运行。我有很多与此组件相关的布局常量，例如cell_width，cell_height等，它们不是标准的CSS属性。我网站的其他组件更典型，并由CSS设计。我想知道的是，是否有一种可接受的方式来维护一个地方以保持我的CSS和Javascript样式常量在一个地方。这可以通过某种方式在我的CSS中维护“自定义”属性，仅用于通过javascript读取它们。或者，如果LessCss或SASS有办法在渲染之前通过我自己的javascript设置变量，那也可以。但是，我没有在这些主题上找到任何在线信息。

Answer 1

如果“常量”对应于某个可以从元素中准备好的参数，那么在您的javascript启动中，您可以读取该元素。例如，如果您关心的是id =“foo”的某个元素的宽度，您可以使用（假设jquery）

$('#foo').width()

或

$('#foo').css('width')

但是对于更复杂的全局变量集，我已经开始在隐藏div的background-image属性中使用嵌入东西作为字符串。这是有效的，因为您可以在背景图像字符串中放置任何内容。然后在javascript启动时，我可以从该div上的background-image读取该字符串并将其解码为javascript。

例如，我有一个带有这些“常量”的.less文件

@hide-time: 450;
@hide-final-width: 40;

并在那个.less文件中我将这些用于此div

#css-shared-globals {
  background-image: url("about:$$$({hideChatTime:@{hide-chat-time},hideFinalWidth:@{hide-final-width}})$$$");
  display:none;
}

相关的.html文件中的

就是这个没用的div：

<div id="css-shared-globals" style="display:none;"></div>

最后在.js中我可以用这个启动代码从隐藏的div中读取共享的全局常量：

// load globals from chat.less
var el = $('#css-shared-globals');
var elObj = eval(decodeURI(el.css('background-image').split('$$$')[1]));
hide_time = elObj.hideChatTime;
hide_final_width = elObj.hideFinalWidth;

整个kludge的结果是我的.less（或.css）和.js文件看到相同的常量，我只需要在一个地方（less或css文件）更改它们。这是一团糟，但到目前为止，它的确有效。

Answer 2

对于像这样的常量，有一个好的方法来获得“单一地方”吗？

样式表。

然后动态设置类名。

（至少在很多情况下。我们不知道你问题的具体细节）

Answer 3

楚楚莎：https://github.com/trotter/chuusha

另见：http://icant.co.uk/articles/cssconstants/

Answer 4

this blog中一个有趣的想法，您可以在CSS中使用css变量，但可以使用javascript进行设置。因此，CSS承担了JS给它们提供的值。

例如

:root { --var: blue; }
.myclass { colour: var(--var); }

和js

anyelement.style.setproperty('--var', 'red);

，然后将css变量设置为JS常量。但这确实是为了更改变量，而不是预处理常量值。

Answer 5

考虑重新设计。 为什么是JS中常量的一半而另一半是CSS？

尝试并应用Information Expert原则和Don't Repeat Yourself (DRY)原则。问问自己是否尊重行为（JavaScript）和演示文稿（CSS）之间存在的separation of concerns。

Answer 6

如果你想要常量变量，请使用JS的“document.var = X;”

这将保留您想要全局存储的任何变量。

即

document.eleX = 12; document.PositionTopofDiv3 = 234;

在Javascript和;之间共享常量的最佳方法; CSS

6 个答案: