跳至内容

ODOO18中使用JQUERY

第八微信masterjmz第八期odoo全栈开发培训进行中,深入课程,有兴趣加微信,入门课程请关注本网站

由于JS已经提供了大多数的JQUERY功能,所以,越来越多的系统都在抛弃JUQERY, ODOO同样也不例外,不过,凡事都有例外,所以ODOO18同样提供了相就要的机制,在ODOO WEB中封闭了下函数

import { loadBundle, loadJS } from "./assets";


export async function ensureJQuery() {

    if (!window.jQuery) {

        await loadBundle("web._assets_jquery");

        // allow to instantiate Bootstrap classes via jQuery: e.g. $(...).dropdown

        const BTS_CLASSES = ["Carousel", "Dropdown", "Modal", "Popover", "Tooltip", "Collapse"];

        const $ = window.jQuery;

        for (const CLS of BTS_CLASSES) {

            const plugin = window[CLS];

            if (plugin) {

                const name = plugin.NAME;

                const JQUERY_NO_CONFLICT = $.fn[name];

                $.fn[name] = plugin.jQueryInterface;

                $.fn[name].Constructor = plugin;

                $.fn[name].noConflict = () => {

                    $.fn[name] = JQUERY_NO_CONFLICT;

                    return plugin.jQueryInterface;

                };

            }

        }

    } else if (!window.jQuery.fn.getScrollingElement) {

        await loadJS("/web/static/src/legacy/js/libs/jquery.js");

    }

}

函数的作用就是动态加载jquery的资源,同时为了防止bootstrap中引入的jquery和引入的jquery冲突,所以在这个地方做了noconflict处理,不懂没有关系,反正是调用这个函数就引入了jquery,之前的一些jquery库又可以继续使用了,那么,你的第三方库如果依赖于jquery的话,那也需要在jquery加载之后再进行加载。使用方式如下:

import { ensureJQuery } from '@web/core/ensure_jquery';


onWillStart(async () => {

            if (this.props.cssReadonlyAssetId) {

                this.cssReadonlyAsset = await getBundle(this.props.cssReadonlyAssetId);

            }

            await this._lazyloadWysiwyg();

        });

    async _lazyloadWysiwyg() {

        // In some bundle (eg. `web.qunit_suite_tests`), the following module is already included.

        let wysiwygModule = await odoo.loader.modules.get('@web_editor/js/wysiwyg/wysiwyg');

        this.MoveNodePlugin = (await odoo.loader.modules.get('@web_editor/js/wysiwyg/MoveNodePlugin'))?.MoveNodePlugin;

        // Otherwise, load the module.

        if (!wysiwygModule) {

            await ensureJQuery();

            await loadBundle('web_editor.backend_assets_wysiwyg');

            wysiwygModule = await odoo.loader.modules.get('@web_editor/js/wysiwyg/wysiwyg');

            this.MoveNodePlugin = (await odoo.loader.modules.get('@web_editor/js/wysiwyg/MoveNodePlugin')).MoveNodePlugin;

        }

        stripHistoryIds = wysiwygModule.stripHistoryIds;

        this.Wysiwyg = wysiwygModule.Wysiwyg;

    }

ODOO
ODOO DASHBOARD 开发公开课(第五次分享)
微信masterjmz