如何解决微前端应用中的 jQuery
我们有一个通过不同框架、Ember、React 等实现的微前端应用程序
其中一些仍然依赖于 jQuery 和 bootstrap，并且每个微应用加载特定的 jQuery/bootstrap JS 组合
一切都很好，直到我们需要卸载一个微前端并为不同的 URL 加载另一个微前端
有时 bootstrap dropdowns 事件不起作用，它会用于一些旧的“现在”损坏的事件处理程序
这是一个超级最小的复制。如果您在重新加载脚本按钮上单击几次，下拉菜单将不再起作用
<!DOCTYPE html>
<html>
<head>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script>
<script>
function removeJS(filename){
var tags = document.getElementsByTagName('script');
for (var i = tags.length; i >= 0; i--){ //search backwards within nodelist for matching elements to remove
if (tags[i] && tags[i].getAttribute('src') != null && tags[i].getAttribute('src').indexOf(filename) != -1)
tags[i].parentNode.removeChild(tags[i]); //remove element by calling parentNode.removeChild()
}
}
function addScript( src ) {
var s = document.createElement( 'script' );
s.setAttribute( 'src',src );
document.body.appendChild( s );
}
function reload() {
$(document).off('.dropdown.data-api');
$(document).off('bs.button.data-api');
$(document).off('click');
$(document).off('focusin');
$(document).off('focusout');
$(document).off('keydown');
$(document).off('focusin.bs.modal');
$(document).off('focusout.bs.modal');
$(document).off('mousedown');
$(document).off('mouseup');
$(document).off('load');
$(document).off('focus');
$(document).off('blur');
$(document).off('click.bs.dropdown');
removeJS("https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.js");
removeJS("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js");
addScript("https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.js");
addScript("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js");
}
</script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script> -->
</head>
<body>
<div class="container">
<h2>Dropdown Example</h2>
<p>The data-toggle="dropdown" attribute is used to open the dropdown menu.</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
<button class="btn btn-primary" type="button" onclick="reload();">reload script</button>
</div>
</body>
</html>
在 reload 函数中，我们尝试从 jQuery 和 Boostrap 中清除所有旧事件，但在 2-3 次重新加载后下拉菜单仍然不起作用
有什么想法吗？具有相同代码的沙盒：https://codesandbox.io/s/festive-volhard-hbjm8?fontsize=14&hidenavigation=1&theme=dark
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。