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

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

有没有一种好方法可以为这样的常量提供“单一位置”？

样式表。

然后动态设置类名。

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