//соханим начальные настройки
var def = Object.assign({}, this.curSet);
// выберем все брейкпоинты из настроек
var query = [];
for (var key in def.media) {
query.push(def.media[key].point);
}
// фукция устанавливает настройки для запуска
function setNewSettigs(mql) {
var newSet = Object.assign({}, def);
for (var key in newSet.media) {
for (var prop in newSet.media[key]) {
if (newSet.media[key][prop] == mql.media) { // вот здесь в IE10+ всегда false
for (var set in newSet.media[key].settings) {
if (set in newSet) {
newSet[set] = newSet.media[key].settings[set];
}
}
}
}
}
return newSet;
}
// функция производит действия при совпадении медиа выражения
function run(mql) {
if (mql.matches) {
this.curSet = Object.assign({}, setNewSettigs(mql));
console.log(this.curSet)
this.start();
console.log(mql.media)
} else {
this.curSet = Object.assign({}, def);
this.start();
}
}
// создадим медиа запросы и повесим обработчики на них
query.forEach(function(item, i, arr) {
var mql = window.matchMedia(arr[i]);
mql.addListener(run.bind(this));
run.call(this, mql);
}, this);
下午好,剧透下面是我想用新参数重新启动对象初始化的代码,重点是使用 machmedia 的媒体查询。对象创建如下所示:
var obj = new Obj({
elem: document.querySelector('.CSSClass'),
count: 4,
// это объект с контрольными точками и свойствами которые нужно перезаписать
media: {
point1: {
// контрольная точка
point: 'only screen and (max-width: 768px)',
// перезаписываемые свойства
settings: {
count: 3,
}
},
point2: {
point: 'only screen and (max-width: 480px)',
settings: {
count: 1,
}
},
}
});
看起来一切正常(除了一个细微差别,下面是关于它的),但我不得不打开 IE 和唉......setNewSettigs
来自剧透下代码的功能不会覆盖设置对象的参数值 \u200b\u200b 从settigs
上面的代码,和 9 工作正常,但已经从 10 开始这样的事件。问:为什么会这样。谁会帮你弄清楚?
Ps 现在关于上面的细微差别。在设置 2 控制电流中,分别为 768px 和 480px。参数count
- 负责当前屏幕中显示的块数。所以,当屏幕缩小时,在768时一切正常,显示3块,在480时显示1,但是当你在480后再次开始增加窗口时,似乎过了481的阈值后,显示3块,所以这符合 768 的范围。但是如果媒体查询不匹配,脚本应该使用原始设置运行,我怎样才能让脚本记住大屏幕的设置应该在设置之间应用断点?
问题更新。
测试代码后,发现条件不起作用newSet.media[key][prop] === mql.media
,并且在迭代属性时,表达式总是返回false
,因此属性不会被覆盖....为什么 10+ 的行为是这样的?错误或如何正确执行?
为什么需要这种比较 - 当media
设置中参数内的对象被绕过时,其属性的值与进入函数的 mql.media 的值进行比较,如果匹配,则设置中的属性,在其中找到匹配项的对象将被覆盖。
mql
是一个实例window.matchmedia
,它是在循环中创建的query
(剧透下代码中的最后一个循环)。它有一个media
存储媒体查询字符串的属性。
newSet.media[key][prop]
- 这里通过对象的属性media
,这又是具有点属性的对象 - 也是媒体查询的字符串。因此,这正是检查 mql.media 中的字符串与 newSet.media[key].point 中的字符串是否匹配的内容
原来在设置我写的设置的时候:
当 window.matchmedia 被实例化时,它的媒体属性将显示为:'only screen and (max-width:480px)'。那些。冒号和值之间没有空格。因此,yeshki说他们不相等.....而这个差距只有yeshki 10+才能消除