我正在创建一个移动优先响应式网站,其中包含一些在某些断点处启动的自定义 jquery 插件。
首先,代码片段,然后解释问题......
CSS:
@media (min-width: 20em) {
html:after {
content: "320";
} }
@media (min-width: 25em) {
html:after {
content: "400";
} }
@media (min-width: 30em) {
html:after {
content: "480";
} }
全球JS
var FOO = {
mq: function() {
return parseInt(window.getComputedStyle(document.documentElement,':after').getPropertyValue('content').replace(/['"]/g,''),10);
}
}
jQuery插件1
this.init = function()
{
$(window).on("load resize orientationchange", function() {
if(FOO.mq() >= 480) {
DO SOMETHING
}
});
};
查询插件 2
this.init = function()
{
$(window).on("load resize orientationchange", function() {
if(FOO.mq() >= 560) {
DO SOMETHING ELSE
}
});
};
现在将 FOO.mq() 放入 jquery 插件的问题在于,它将为找到的每个 DOM 对象触发 FOO.mq() 函数(例如,如果插件对 10 个图像执行某些操作,它将触发 FF.mq( ) 10 次) 真的不需要,因为我们只需要检查一次。
我尝试将调整大小/返回值放在全局对象中,但它似乎永远不会工作并且被 jquery 插件拾取。
任何指针将不胜感激。
谢谢