Odoo 16中覆盖媒体查询JS方法失败，需移除指定断点

你的代码存在语法错误和覆盖逻辑缺陷，导致无法成功替换默认断点配置。以下是可行的修复方案：

1. 修正代码语法错误 #

原代码里的getMediaQueryLists函数存在多处语法问题：

• window.matchMedia的媒体查询字符串未闭合括号
• if语句嵌套逻辑混乱
• filter方法末尾缺少闭合符号

2. 正确覆盖断点配置与函数 #

直接修改web.config的变量和函数时，需确保语法正确且模块加载顺序合理。以下是修正后的完整代码：

odoo.define('visitante_mailing', function(require){
    "use strict";
    var config = require('web.config');

    // 重新定义断点，移除目标区间
    config.MEDIAS_BREAKPOINTS = [
        {maxWidth:474},
        {minWidth:475, maxWidth:575},
        {minWidth:576, maxWidth:991}, // 合并原576-767与768-991区间
        {minWidth:992, maxWidth:1199},
        {minWidth:1200, maxWidth:1533},
        {minWidth:1534},
    ];

    // 修正媒体查询生成函数
    config.getMediaQueryLists = function(){
        return config.MEDIAS_BREAKPOINTS.map(({minWidth, maxWidth}) => {
            if (!maxWidth) {
                return window.matchMedia(`(min-width: ${minWidth}px)`);
            }
            if (!minWidth) {
                return window.matchMedia(`(max-width: ${maxWidth}px)`);
            }
            return window.matchMedia(`(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`);
        });
    };
});

3. 确保模块加载顺序正确 #

在自定义模块的__manifest__.py中，需将web和website添加为依赖，保证你的模块在核心模块之后加载：

{
    'name': 'Visitante Mailing',
    'version': '1.0',
    'depends': ['web', 'website'],
    'assets': {
        'web.assets_frontend': [
            'visitante_mailing/static/src/js/your_custom_file.js',
        ],
    },
}

4. 备选方案：使用Odoo补丁机制（更可靠） #

如果直接覆盖仍不生效，可通过Odoo的补丁机制强制修改原函数：

odoo.define('visitante_mailing', function(require){
    "use strict";
    var config = require('web.config');
    var core = require('web.core');

    // 补丁媒体查询生成函数，过滤目标断点
    core.patch(config, 'visitante_mailing_config_patch', {
        getMediaQueryLists: function() {
            const originalLists = this._super();
            return originalLists.filter(mediaQuery => {
                const queryStr = mediaQuery.media;
                return !(queryStr.includes('min-width: 768px') && queryStr.includes('max-width: 991px'));
            });
        },
    });

    // 同步修改断点配置数组
    config.MEDIAS_BREAKPOINTS = config.MEDIAS_BREAKPOINTS.filter(bp => {
        return !(bp.minWidth === 768 && bp.maxWidth === 991);
    });
});

验证方法 #

1. 清除浏览器缓存，重启Odoo服务
2. 打开开发者工具控制台，输入odoo.require('web.config').MEDIAS_BREAKPOINTS，确认断点已更新
3. 调整屏幕尺寸，检查动态CSS是否不再包含移除的断点样式

内容的提问来源于stack exchange，提问作者Andrew