overwriting JavaScript object properties

Question:

 //соханим начальные настройки 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);

Good afternoon, under the spoiler is the code with which I want to restart the initialization of the object with new parameters focusing on media queries using machmedia. The creation of an object looks like this:

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,
                }
            },
        }
    });   

And it would seem that everything works fine (with the exception of one nuance, about it below), but I should have opened IE and alas …. The setNewSettigs function from the code under the spoiler does not overwrite the parameters of the setting object with the values ​​from the settigs code above, and 9 works out normally, but already starting from 10-ki such an incident. Question: Why is this happening. Who can help you figure it out?

Ps And now about the nuance of which above. in the settings there are 2 control currents, at 768px and 480px. The count parameter is responsible for the number of displayed blocks in the current screen. So, when the screen is shrinking, everything is fine at 768, 3 blocks are displayed, at 480 1, but when you start to enlarge the window again after 480, it would seem that you need to display 3 blocks after passing the threshold of 481, so it fits into the range of 768. But in the script should be launched with the original settings if there are no matches to the media query, how can you make the script remember that between the set breakpoints the settings of the larger screen should be applied?

Updating the question.

After testing the code, it turned out that the condition newSet.media[key][prop] === mql.media does not work, and when newSet.media[key][prop] === mql.media over properties, the expression always returns false , as a result of which the properties are not overwritten …. Why do yeshki behave this way? +? Bug or how to do it right?
Why this comparison is needed – when the objects are traversed inside the media parameter in the settings, the value of its properties is matched with the value of mql.media that came to the function, and if there is a match, the properties from settings are overwritten, the object in which there was a match.
mql is an instance of window.matchmedia , it is created in a loop over query (the last loop in the code under the spoiler). It has a media property that stores the media query string. newSet.media[key][prop] – here a pass through the properties of the media object, which, in turn, are also objects in which there is a point property – also a string for a media query. So this is how it is checked for a match of a string from mql.media with a string from newSet.media [key] .point

Answer:

It turned out when setting the settings, I wrote:

media: {
            point1: {
                point: 'only screen and (max-width: 768px)',
                settings: {
                    count: 3,
                }
            },
            point2: {
                point: 'only screen and (max-width: 480px)',
                settings: {
                    count: 1,
                }
            },
        }

When creating an instance of window.matchmedia, its media property got: 'only screen and (max-width: 480px)'. Those. there is no space between the colon and the value. That is why yeshki said that they are not equal ….. Moreover, this space is removed only by yeshki 10+

'only screen and (max-width: 768px)' == 'only screen and (max-width:768px)' // false
Scroll to Top
AllEscort