![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
大前端学习笔记
文章平均质量分 71
千锋HTML5大前端
让优秀的教育资源不再孤芳自赏,与你共享。
展开
-
谈谈对MVVM的理解
3. 通过上述案例进一步理解MVVM。谈谈对MVVM的理解。name:‘张三丰’原创 2022-12-28 11:42:32 · 1298 阅读 · 0 评论 -
vue-router和location.href的用法区别是什么?
vue-router和location.href的用法区别。原创 2022-12-28 11:39:06 · 1139 阅读 · 0 评论 -
前端面试题【element ui篇】之三:element-ui要改变默认样式有几种方法?
当我们在vue中引入第三方组件库的时候,vue组件中样式的scoped就会成为我们修改样式的阻碍,有以下三种方法修改样式,并且不影响全局样式.原创 2022-12-28 11:32:53 · 135 阅读 · 0 评论 -
前端面试题【element ui篇】之二:怎么修改element ui动态组件的样式?
但这种方式为全局样式,会影响页面中所有复选框,如果不希望影响其它页面的样式,可以采用第二中方式。要修改elementUI组件的样式,可以采用以下两种方式。如果是sass或less编写的样式,还可以使用。所以elementUI中的样式就能成功覆盖。解决方案也很简单,只需在选择器中要添加。原创 2022-12-28 11:30:31 · 761 阅读 · 0 评论 -
前端面试题【element ui篇】之一:说一下element ui遇到过的坑
【代码】前端面试题【element ui篇】之一:说一下element ui遇到过的坑。原创 2022-12-28 11:27:02 · 329 阅读 · 0 评论 -
虚拟机中安装Linux学习环境
而且每个操作系统你都可以进行虚拟的分区、配置而不影响真实硬盘的数据,你甚至可以通过网卡将几台虚拟机用网卡连接为一个局域网,极其 方便。4.进入安装的欢迎界面,将鼠标点击进入虚拟机中,按上下方向键盘,高亮选择第一行,按下回车键。出现此界面,表示安装成功,此时就可以使用创建时所填写的账号和密码进行登录,开始学习吧。5.检测光盘,选择【skip】跳过检测,按左右方向键,选择【skip】14.选择安装的类型,选择 创建自定义布局,然后点击下一步。9.选择安装设备,默认第一个,然后点击下一步。10.忽然所有的数据。原创 2022-10-10 11:09:20 · 258 阅读 · 0 评论 -
前端,后端,全栈哪个好找工作?
也就是说,我们不可能轻轻松松就变成【真·前端】或【真·后端】,两者背后都是需要付出极大的耐心去付出、去成长。通过上面分析我们就会感觉到,这个问题本质不在于哪个好找工作,本质在于,我们的精力到底允许我们达到哪一步?意思就是说,如果这三者你都达到了真正意义上的企业用人标准,那毫无疑问【真·全栈】是最好找工作的。所以,与其站在十字路口不停徘徊,更好的做法是选一个自己感兴趣的方向,拿起键盘先干起来。只有我们先变成了【真·前端】、【真·后端】,我们才有可能变成【真·全栈】。前端很溜,后端很溜,这是【真·全栈】原创 2022-10-10 11:06:01 · 4956 阅读 · 3 评论 -
总结了15道Typescript项目常用语法练习,学会它,90%的场景都不再害怕!
/ 参考 https://www.typescriptlang.org/docs/handbook/2/functions.html#declaring-this-in-a-function。// 1. 去除 TreeNode 的 id 属性同时修改 children 属性的类型。// 2. 在 Response 类型的基础上改写 data 属性类型。/* React 组件 Props 范型 *//* 类型编程-从基础类型构造新类型 */// 1. string 字符串类型。原创 2022-10-10 11:03:47 · 900 阅读 · 0 评论 -
重写事件抛发接收机制原理
其中EmitterTarget类的实例化属性list充当中介角色,每当执行add方法时,给EmitterTarget类的实例化对象注册事件名称及触发函数;==EmitterTarget类实例化对象本身就是观察者,观察者的特点是有add,remove,触发改变的函数(update或这里的dispatchEvent),以及应该有用于存放注册信息的属性或者单例对象。==EmitterEvent类主要是用来创建事件对象本身,在创建时声明需要触发的事件类型以及需要携带的参数。1.定义需要使用事件抛发的类。原创 2022-10-10 11:02:29 · 93 阅读 · 0 评论 -
程序员真的是一个吃青春饭的行业吗?
35岁之后你的编程能力一定是下降的,你写代码绝对不如25岁的程序员快,但是这个不重要,因为你的经验、你的视野、你的架构能力、你的管理能力、你的问题分析能力、你的解决问题能力等等,已经远远不局限于当前的困扰。工作期间,一是平时多积累自己的工作经验,多学习提高自己的技术,二是多积累人脉,多认识朋友和同事,联系以前同学,看有没有内推的机会。国内互联网公司兴起的996模式,导致了程序员的这种脑力劳动者,变相演变成体力劳动者,拼在最前面的,熬到最晚的,往往是年轻人。对于新技术的热爱:新技术的架构思想,设计思想。原创 2022-10-10 10:58:29 · 695 阅读 · 0 评论 -
JS中各种姿势的遍历,你知道几个?
map(): 根据遍历执行的匿名函数,对于原数组中的每个值产生一个对应的值,并返回一个新的数组,存在一个映射关系,并且不会改变原数组,不会对空数组进行检测。有三个参数分别是:数组元素,元素的索引,数组本身(如果是一个参数就是数组元素,也就是数组的值。map方法是通过循环的方式一个一个项的处理原来的数组,并返回新的数组,同时,不会改变原数组的值。1.数组是一组数据,length属性表示这个数组中的内容的个数。for Each 和map 都是遍历数组的方法,用法类似,但是还是有很大区别的。原创 2022-10-10 10:56:48 · 107 阅读 · 0 评论 -
后台管理系统的权限以及vue处理权限的思路
登录功能–>输入用户名和密码–>前端发送用户名和密码–>后端接收到用户名和密码–>找数据库(验证用户名和密码)–验证通过时–>找数据库(用户名—>角色—>功能)–>获取到该用户的功能–>发送给前端–>前端根据获取到的功能,循环显示出该功能。登录功能–>输入用户名和密码–>前端发送用户名和密码–>后端接收到用户名和密码–>找数据库(验证用户名和密码)–验证通过时–>返回前端(同时,返回角色)–>前端根据角色对应的功能权限,展示对应的功能。角色与功能的对应表:这表示的是,什么样的角色具备什么样的功能。原创 2022-09-02 16:22:14 · 2450 阅读 · 0 评论 -
教你js生成二维码-QrCodeJS
通过 QECode.js 可以非常方便的在web 页面中使用二维码。让我们在应用中便捷的使用,扩展了项目的适用范围。提升项目的用户体验,使我们的应用更加符合当下用户的适用习惯,增加用户的黏性。二维码又称QR Code,是一个近几年来移动设备上很流行的一种编码方式它比传统的一维码(条形码)能存更多的信息,也能表示更多的数据类型。按照一定规律排列组成的几何图形构成,它巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念。人们的生活方方面面都离不开二维码,而且她也给人们带来了极大的便利。原创 2022-09-02 16:17:12 · 8435 阅读 · 0 评论 -
前端基础面试:前端页面由哪三层构成,分别是什么,作用是什么?
前端基础面试:前端页面由哪三层构成,分别是什么,作用是什么?原创 2022-09-02 16:13:32 · 341 阅读 · 0 评论 -
前端面试常见题:列举5种IE haslayout的属性及其值
haslayout :是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用 了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout 属性值为true时,我们说这个元素有一个布局(layout)min-height:任意值。min-width:任意值。原创 2022-09-02 16:10:03 · 110 阅读 · 0 评论 -
浏览器标准模式和怪异模式之间的区别是什么?
浏览器标准模式和怪异模式之间的区别是什么?原创 2022-09-02 16:08:13 · 769 阅读 · 0 评论 -
Mac那些好用的软件(持续更新)
Mac OS自带的终端,用起来虽然有些不太方便,界面也不够友好,iTerm2是一款相对比较好用的终端工具.iTerm2常用操作包括主题选择、声明高亮、自动填充建议、隐藏用户名和主机名、分屏效果等.5、只要在对应的网站上搜索一次,记下当时的网址,并把具体的搜索内容改为{query}就可以找到我们自定义搜索设置中所需要的Search URL信息了。其实Alfred并非高不可攀。Oh My Zsh 是对主题的进一步扩展,下载地址https://github.com/robbyrussell/oh-my-zsh。.原创 2022-08-05 11:07:07 · 3562 阅读 · 0 评论 -
Web前端基础知识:IE浏览器中的兼容
描述cursor属性的hand属性值只有IE9以下浏览器识别,其它浏览器不识别该声明,cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。hack如统一某元素鼠标指针形状为手型,应添加声明cursorpointer。hack给浮动元素添加声明displayinline;hack2给元素添加声明overflowhidden;hack1给元素添加声明font-size0;hack给表单元素添加声明floatleft;...原创 2022-07-28 15:36:09 · 388 阅读 · 0 评论 -
前端面试基础题:iframe缺点有哪些?
3.iframe是会阻塞页面的加载的,会影响到网页的加载速度。比如window的onload事件会在页面或者图像加载完成后立即执行,但是如果当前页面当中用了iframe了,那还需要把所有的iframe当中的元素加载完毕才会执行,这样就会让用户感觉网页加载速度特别慢,影响体验感。4.代码复杂,不利于seo,现在的搜索引擎还不能很好的处理iframe当中的内容。1.在一个页面中如果利用iframe嵌入了多个别的页面,不利于我们的管理。iframe类似于框架,可以在一个页面中嵌入别的页面。...原创 2022-07-28 15:33:51 · 1264 阅读 · 0 评论 -
前端基础面试题:rem em vw vw 百分比区别?
注意vw和vh是视口可以观看的区域的大小;如果没有滚动条的话,则宽度设置成100vw和100%的时候实现的效果一直;如果有滚动的话,则100vw中不是包括滚动条的,100%是包括滚动条的距离的。em如果自身有字体大小的设置,那么就相对于自身字体大小设置,如果自身没有字体大小设置,那么就相当于父元素进行设置。rem,em,vw,vh,vw属于前端开发除了px单位之外的另外几种单位取值;但是具体含义存在区别。px是像素单位,属于绝对单位,是一个具体的大小。陆荣涛前端学习交流Q群858752519。...原创 2022-07-28 15:31:26 · 449 阅读 · 0 评论 -
前端面试场景题:两个盒子,左边固定宽,右边自适应,有几种方法?
方法三calc(100%-固定内容的宽度)用calc函数动态计算数值。方法六使用inline-block携手calc函数设置宽度。方法二absolute定位和margin值实现。方法五使用table和table-cell实现。陆荣涛前端学习交流Q群858752519。方法一float来和BFC实现。方法四flex布局轻松搞定。加群备注CSDN推荐。公共HTML代码部分。...原创 2022-07-28 15:27:53 · 2480 阅读 · 0 评论 -
前端面试题:当margin-top、padding-top 的值是百分比时,分别是如何计算的?
我们认为,正常流中的大多数元素都会足够高于包含其后代元素(包括外边距),如果一个元素的上下外边距是父元素的height的百分数,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应的,上下外边距因为父元素height的增加也会增加,如此循环。如果没有为元素声明width,在这种情况下,元素框的总宽度包括外边距取决于父元素的width,这样可能得到“流式”页面,即元素的外边距会扩大或缩小以适应父元素的实际大小。陆荣涛前端学习交流Q群858752519。...原创 2022-07-28 15:23:49 · 648 阅读 · 1 评论 -
简述css中的不同盒模型的特性,以及应用,介绍box-sizing属性
3.当children的值是一个函数时,无论当前地址和path路径匹不匹配,都将会执行children对应的函数当children的值为一个组件时,当前地址和path不匹配时,路由组件不渲染children的值函数时,会在形参中接受到一个对象,对象中match属性如果当前地址匹配成功返回对象,否则null,由此可以使用它来完成动态更换UI,如实现高亮导航。简单的说,就是在保证只有一个HTML页面且与用户交互时不刷新和跳转页面的同时,为单页面应用中的每个视图展示形式匹配一个URL规则地址。......原创 2022-07-15 10:56:46 · 436 阅读 · 0 评论 -
JS变量你不知道的点
不使用var声明的变量,没有‘声明提升’的机制,即预解析阶段变量未被声明,而是在逐行执行阶段被赋值后才有变量abc2,所以先打印abc2就会报错!使用var声明的变量abc1并没有被删除,依然是window对象的属性;在js中变量声明和函数声明会出现‘声明提升’,js引擎解析执行代码时分为两个阶段1.预解析阶段;如果abc1和abc2都在全局作用域,都是window对象的属性,它们是否可以如对象属性一般可以被删除呢?在全局的变量abc1和abc2都是window对象的属性,都拥有全局作用域。...原创 2022-07-15 10:51:15 · 123 阅读 · 0 评论 -
query string、formData和request payload的区别
content-type的值是"text/plain"或者"application/json"时,那么,就是用的是requestpayload的格式传递数据。2、传统的form提交的时候,Content-Type默认为"Form"类型(application/x-www-form-urlencoded)查询字符串的规则请求参数使用URL地址和“问号传参“的方式进行传递----用问号把url和请求参数分开。1、传统的ajax请求时候,Content-Type默认为"文本"类型。...原创 2022-07-15 10:48:09 · 644 阅读 · 0 评论 -
浅谈vue的双向数据绑定
隐形转换在多处出现,我们在编程的时候,需要谨慎小心,熟悉后可以对之进行利用,例如判断一个数据或对象中的值是否存在时,可以利用分支语句的条件中的隐形转换来搞定。类型的转换,可以有很多种方法,例如在js中常用的parseInt、toString、等方法,这些方法都是强制将某个类型转为指定的类型。console.log(‘b变量是false’);console.log(a>b)//false-说明b被转为数字10进行了大小比较。//这说明,new出来的对象d,在输出的时候被悄悄的转换成了字符串输出了。......原创 2022-07-15 10:44:21 · 385 阅读 · 0 评论 -
Javascript面向对象编程
js为每一个构造函数都提供了一个prototype属性,让他指向另一个对象,而这个对象的所有属性和方法都会被构造函数的实例对象继承。当然这里生成实例化方法也还是一样的,但是这里会有一个很大的问题也就是我们会发现age属性和eat()方法明明是一模一样的内容,但是由于每次生成实例化对象时,都会生成同样的内容,多造成内存浪费。接着再生成实例,此时,所有实例的age个eat()方法都会指向同一个内存地址,也就是prototype对象,这样也就避免了内存浪费问题,从而提供运行效率。...原创 2022-07-15 10:43:13 · 113 阅读 · 0 评论 -
JavaScript——编程风格
原因是const可以提醒阅读程序的人,这个变量不能改变,比较符合函数式编程思想,并且JavaScript编译器会对const进行优化,所以多使用const,有利于提高程序的运行效率。但麻烦的是,如果下一行的第一个符号是下面这五个字符之一,Javascript将不对上一行句尾添加分号“(”、“[”、“/”、“+“和”-”。第二种是起首的大括号跟在关键字的后面,但是Javascript会自动添加句末的分号,有可能会导致一些难以察觉的错误。对于起首的大括号的位置,有许多不同的写法。分号表示语句的结束。...原创 2022-07-15 10:41:47 · 478 阅读 · 0 评论 -
项目实战中react性能优化总结
React 是由 Facebook 团队主导开发的UI框架,作为当前三大前端框架(另外两个是 Angular、Vue )之一,提供了数据驱动的 UI 开发模式,以及组件化的开发方式,可以构建高性能的前端应用。 从上面的规则我们可以看出,组件是主角,后面的性能提升点也是围绕组件的。从上面的规则可以看出大变动应该使用不同的组件, 小变动应该修改属性。记住了 Diffing 规则其实就可以写出性能不错的 React 代码。上面只是一个总结,不需要可以详细看看这遍文档协调。更新时 React 需原创 2022-07-08 18:49:29 · 191 阅读 · 0 评论 -
JS常见的报错及异常捕获
在开发中,有时,我们花了几个小时写的Js 代码,在游览器调试一看,控制台一堆红,瞬间一万头草泥马奔腾而来。至此,本文主要记录Js 常见的一些错误类型,以及常见的报错信息,分析其报错原因,并给予处理方法。并且将介绍几种捕获异常的方法。注:本文使用的谷歌游览器验证,不同的游览器,报错可能会不一样。常见的错误类型含义:超出了最大的堆栈大小为什么报错?在使用递归时消耗大量堆栈,导致游览器抛出错误,因为游览器给分配的内存不是无限的。举个栗子:处理办法:使用递归的时候,设定一个条件来终止递归,否则会无限循环,直到用原创 2022-06-23 10:27:17 · 1295 阅读 · 0 评论 -
Javascript中的内置对象—数组
大家好,有关js中的数组,很多小伙伴可能都会有疑问,尤其是面试的过程中有大量有关于原生数组的题,以及数组中的方法,及方法的返回值、是否会修改原数组等等。想要彻底解决这些问题,就要系统的解析数组的方法,那么我们今天就来深度解析一下这个问题哈。两种声明方式的区别?字面量方式,无论存储什么数据,都表示数组元素。构造函数中有且仅有一个正整数时,表示数组长度。构造函数中有一个负整数或小数时,直接报错构造函数中有一个或多个其它类型数据时,表示数组元素。如何访问数组?数组的属性数组的方法(增原创 2022-06-22 10:09:39 · 915 阅读 · 0 评论 -
JavaScript实现单词首字母大写的方法总汇
2、for循环+replace:这个跟第一个差别不大。思路:用正则将字符串拆分为单词数组,并对每个单词进行首字母大写处理。这里简单的把字母、数字、下划线和单撇号都视为了单词成员。思路:根据空白将字符串拆分为数组,对每个单词进行首字母大写处理,并将所有处理后的结果组成一个新数组然后拼接成字符串。思路:根据空白将字符串拆分为数组,对每个单词进行首字母大写处理,并将所有处理后的结果连成一个新字符串。思路:用正则将每个单词的首字母替换成大写。- End -*陆荣涛前端学习交流Q群858752519加群原创 2022-06-22 10:06:14 · 416 阅读 · 0 评论 -
JavaScript深入理解之闭包
闭包一直是 JavaScript 中一个非常重要的概念。以前一直很难理解这个概念,主要是对 JavaScript 中的执行原理不熟悉。通过对前面执行上下文和垃圾收集的总结,终于可以对这个概念好好进行分析了。下面是我的一些理解和总结。定义闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的最常见的方式,就是在一个函数内部创建另一个函数。我们举一个例子:在 inner 函数中,我们可以通过作用域链访问到 a 变量,因此这就可以算是构成了一个闭包,因为 a 变量是其他函数作用域中的变量。当然这和我们平时遇原创 2022-06-21 11:00:30 · 428 阅读 · 0 评论 -
JavaScript 实现网页截屏五种方法
最近研究了下如何利用JavaScript实现网页截屏,包括在浏览器运行的JS,以及在后台运行的nodeJs的方法。主要看了以下几个:测试的网页使用了WebGL技术,所以下面的总结会和WebGL相关。名词定义headless browser无界面浏览器,多用于网页自动化测试、网页截屏、网页的网络监控等。PhantomJSPhantomJS是可以通过JS进行编程的headless浏览器,使用的是QtWebKit内核。实现截屏的代码,假设文件名为github.js:运行:普通的页面没有问题,但是如果运行包含W原创 2022-06-20 10:22:32 · 6387 阅读 · 0 评论 -
手摸手带你用实现vue全屏loading插件
由于我们打开网页时,浏览器与服务器交互需要时间,受限于宽带以及服务器性能,导致用户在访问一个网页时,往往需要一个等待期,才能在浏览器中真正完全展示出网页内容。在网页加载过程中网页就是一片空白,对于我们用户而言,我们看到一片空白,还以为网站 “挂掉了”,就很忧伤!!当然了,我们针对这个问题,各大网站都有自己的解决方案。有的网站会用骨架屏。比如掘金:利用骨架屏,给用户提醒,网站内容马上呈现给您,不要着急!有的网站会选择在数据出来之前 定义一个全屏的loading,提供用于网站正在加载比如:网站在加载时以及网站刷原创 2022-06-15 09:36:51 · 1699 阅读 · 0 评论 -
使用Dplayer实现Vue3中的视频及弹幕播放
Dplayer是一款上手简单,功能强大的HTML5视频播放器,我们可以使用它,快速在普通HTML、Vue、React中实现视频播放的功能需求。Dplayer同时也提供了目前各大视频站都在使用的弹幕功能,让我们的视频功能更加丰富有趣。下面我们就一起来看看,如何使用Dplayer在Vue3中实现视频播放及弹幕功能。使用npm使用yarn二、在Vue3组件中,准备一个ref容器三、在setup中获取绑定ref这里我们需要用到vue3提供的ref方法四、使用Dplayer做视频对象的初始化当我们在se原创 2022-06-14 10:27:32 · 3143 阅读 · 1 评论 -
使用 jsDoc 提升我们的开发效率
缘起作为前端开发者目前使用最广泛的编程语言 JavaScript,也是有很多的缺点的!大家都直到 JavaScript 是一个弱类型的编程语言,这就造成了一问题,一个变量到底是什么类型的,只能到到程序运行的时候才只能确定!导致我们在写码的时候经常遇到一些关于变量类型的错误!并且当我们使用 vscode 写代码的时候,使用别人提供的 api,代码提示工具提示的非常好,而我们自己使用 js 编写一些函数的时候,往往确发现代码提示的不是很友好!今天我们来学习使用 jsDoc 来解决这个问题。先看下图:我们使用vs原创 2022-06-13 14:15:23 · 2192 阅读 · 0 评论 -
如果再写for循环,我就锤自己了
几种遍历方法中for执行最快,它没有任何额外的函数调用栈和上下文。但在实际开发中我们要结合语义话、可读性和程序性能,去选择究竟使用哪种方案。下面来看for , foreach , map ,for…in , for…of五种方法现场battle。自我介绍for我是最早出现的一方遍历语句,在座的各位需称我一声爷爷。我能满足开发人员的绝大多数的需求。forEach我是ES5版本发布的。按升序为数组中含有效值的每一项执行一次 callback 函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)。我是原创 2022-06-10 10:30:07 · 13882 阅读 · 8 评论 -
前端常用终端各种命令
之前有小伙伴们留言说,想要些常见的操作终端的命令,今天就给大家整理了份很全很全的命令指南系统管理篇是对于初学者来说是最脑壳大的一些知识点,不过没有关系大家撸起袖子照着怼就是fdisk 分区工具df 查看分区使用空间大小du 查看文件夹使用空间大小mkfs 格式化命令-t 文件系统类型-o 挂载选项RPM 方式更新源代码编译方式更新ps top 对当前系统的进程信息进行查看iftop 查看某一进程的网络流量变量名 = 变量值PATH 命令解释路径+ - * / % 加 减 乘 除 取余使用函数的方式是直接使用原创 2022-06-10 10:28:22 · 1065 阅读 · 0 评论 -
剖析JavaScript的单线程
一、 浏览器的进程和线程浏览器的架构是多进程的,不同的浏览器采用不同的进程架构,这个没有统一的标准,以谷歌浏览器为例,他主要有四个进程,分别是顶层的Browser process,负责标签页网页呈现的Renderer Process,负责控制网页插件的Plugin Process和负责处理GPU的GPU Process。每个进程都可以通过创建线程或者调用线程来完成任务。打个比方,进程就相当于一个 公司,线程就相当于公司的一个部门,一个公司可以只有一个部门也可以有多个部分,公司内部的资源是共享的。二、浏览器的原创 2022-06-09 10:00:16 · 1552 阅读 · 2 评论