由于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;
}