四时宝库

程序员的知识宝库

前端面试题《BOM与DOM》(前端面试题promise)

1.BOM事件?

事件就是用户或浏览器自身执行的某种动作.事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小。

深度:从零编写一个微前端框架(微前端搭建代码)


作者:Peter 谭金杰

转发链接:https://mp.weixin.qq.com/s/922kgv0PlDIpoPxwAkO9uA

写在开头:

手写框架体系文章,缺手写vue和微前端框架文章,今日补上微前端框架,觉得写得不错,记得点个关注+点赞,转发更好

HTML注入:利用HTML标签绕过CSP(html注入漏洞)

先让我们看看如下这个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前端面试题(三)(2021 前端面试)

21. 权限判断

主要分两种方式。第一种是用户登录后,系统获取其权限信息,然后根据这些权限筛选出用户可以访问的路由,并使用addRoutes动态添加这些路由。在这个过程中,router.beforeEach()方法被用来进行路由守卫。另一种方式是在初始化时挂载全部路由,并在每个路由上标记出访问该路由所需的权限。在用户尝试进行路由跳转(在beforeRouteLeave之前)时,系统会验证用户是否拥有该权限。

前端必修课之原生 JS 实现复制文本



公司最近一个需求 需要通过变量实现复制。

代码块

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);
}

惊艳的动画引擎,简单、轻盈、开源——Animejs

介绍

Anime.js是一个轻量级的JavaScript动画库,具有简单但功能强大的API。它与CSS属性,SVG,DOM属性和JavaScript对象一起使用。






Github

在Github上已收获近35k的star数,可见其非常受广大使用者的热爱!

一次性搞定JS的DOM操作(js domcontentloaded)

一.什么是DOM


我们知道,无论是现在的开发框架(底层还是操作DOM)还是传统的开发都离不开DOM的操作,所以了解和学习DOM是必须的,也是成为一个全面的前端开发的必备知识和内容,那接下来我们就来看下什么是DOM,DOM的全称文档对象模型,DOM的本质就是让我们通过JS来对页面的元素进行操作的一套浏览器提供的API,它的实现方式是将页面所有的内容表示为可以修改的对象,下面就是我们比较常见的几个元素在DOM中的对应关系:

DOM初识-元素属性(dom元素的以下属性改变会导致重排的是)

今日背诵小纸条


非表单元素属性

非表单元素是指内容标签,如<image>、<a>等

对象属性基本和标签属性相同,如href、title、id、src

但其中注意标签的class属性对应为className

注:

1 this的几种情况

情况 含义 普通函数中的this window 构造函数中的this 当前构造函数创建的对象 方法中的this 方法所属的对象 事件处理函数中的this 调用该事件的元素

浅谈Web 实时推送技术,有对比,有总结

前言

随着 Web 的发展,用户对于 Web 的实时推送要求也越来越高 ,比如,工业运行监控、Web 在线通讯、即时报价系统、在线游戏等,都需要将后台发生的变化主动地、实时地传送到浏览器端,而不需要用户手动地刷新页面。本文对过去和现在流行的 Web 实时推送技术进行了比较与总结。

一、双向通信

HTTP 协议有一个缺陷:通信只能由客户端发起。举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。

JS的封装(js封装json)

今天,是JavaScript回炉的第四十七天


通过当前构造函数并且替换当前构造函数里的参数值,改变加载页面等待画面和文本内容


//获取id


function $(id){


return document.getElementById(id);


}


//ajax获取后端的内容


<< 1 2 3 4 > >>
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接