作者：Peter 谭金杰
转发链接：https://mp.weixin.qq.com/s/922kgv0PlDIpoPxwAkO9uA
写在开头：
手写框架体系文章，缺手写vue和微前端框架文章，今日补上微前端框架，觉得写得不错，记得点个关注+点赞，转发更好
2024年09月21日
作者：Peter 谭金杰
转发链接：https://mp.weixin.qq.com/s/922kgv0PlDIpoPxwAkO9uA
手写框架体系文章，缺手写vue和微前端框架文章，今日补上微前端框架，觉得写得不错，记得点个关注+点赞，转发更好
2024年09月21日
先让我们看看如下这个web应用示例：
<html>
<meta http?equiv="Content?Security?Policy"
content="script?src 'nonce?...' 'unsafe?eval'">
<div id="template_target"></div>
<script type="application/template" id="template">
Hello World! 1 + 1 = {{ 1 + 1 }}
</script>
Your search is <?php echo $_GET['q']; ?>
<script nonce="...">
let template = document.getElementById('template');
template_target.innerHTML = template.innerText.replace(/{{(.?)}}/g,eval)
</script>
</html>
2024年09月21日
主要分两种方式。第一种是用户登录后，系统获取其权限信息，然后根据这些权限筛选出用户可以访问的路由，并使用addRoutes动态添加这些路由。在这个过程中，router.beforeEach()方法被用来进行路由守卫。另一种方式是在初始化时挂载全部路由，并在每个路由上标记出访问该路由所需的权限。在用户尝试进行路由跳转（在beforeRouteLeave之前）时，系统会验证用户是否拥有该权限。
2024年09月21日
公司最近一个需求 需要通过变量实现复制。
window.copyText = item => {//挂载到全局
var textArea = document.createElement('textArea');
textArea.innerHTML = item;
textArea.value = item;
document.body.appendChild(textArea);
textArea.select();
try{
if(document.execCommand("Copy")){
alert(`${item} 复制成功！`)
}else{
alert('复制失败！请手动复制！')
}
}
catch(err){
alert('复制错误！请手动复制！')
}
document.body.removeChild(textArea);
}2024年09月21日
Anime.js是一个轻量级的JavaScript动画库，具有简单但功能强大的API。它与CSS属性，SVG，DOM属性和JavaScript对象一起使用。
在Github上已收获近35k的star数，可见其非常受广大使用者的热爱！
2024年09月21日
我们知道，无论是现在的开发框架（底层还是操作DOM）还是传统的开发都离不开DOM的操作，所以了解和学习DOM是必须的，也是成为一个全面的前端开发的必备知识和内容，那接下来我们就来看下什么是DOM，DOM的全称文档对象模型，DOM的本质就是让我们通过JS来对页面的元素进行操作的一套浏览器提供的API，它的实现方式是将页面所有的内容表示为可以修改的对象，下面就是我们比较常见的几个元素在DOM中的对应关系：
2024年09月21日
非表单元素是指内容标签，如<image>、<a>等
对象属性基本和标签属性相同，如href、title、id、src
但其中注意标签的class属性对应为className
注：
1 this的几种情况
情况 含义 普通函数中的this window 构造函数中的this 当前构造函数创建的对象 方法中的this 方法所属的对象 事件处理函数中的this 调用该事件的元素
2024年09月21日
随着 Web 的发展，用户对于 Web 的实时推送要求也越来越高 ，比如，工业运行监控、Web 在线通讯、即时报价系统、在线游戏等，都需要将后台发生的变化主动地、实时地传送到浏览器端，而不需要用户手动地刷新页面。本文对过去和现在流行的 Web 实时推送技术进行了比较与总结。
HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。
2024年09月21日
今天，是JavaScript回炉的第四十七天
通过当前构造函数并且替换当前构造函数里的参数值，改变加载页面等待画面和文本内容
//获取id
function $(id){
return document.getElementById(id);
}
//ajax获取后端的内容
2024年09月21日
答案：
1. 绑定位置不同: 不利用冒泡绑定在目标元素上，利用冒泡绑定在父元素上
2. 监听对象的个数不同: 不利用冒泡会反复创建多个监听，利用冒泡始终只有一个监听
3. 动态生成的元素: 不利用冒泡无法自动获得事件处理函数，必须反复绑定