- 博客(82)
- 收藏
- 关注
原创 js事件循环机制
这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战调用栈(执行上下文栈)在了解事件循环之前很有必要知道调用栈的概念。首先我们栈是先进后出的执行任务。而调用栈也是按照这个顺序执行,同时当我们运行全局代码或是每个函数的时候都会创建相对应的执行上下文。当我们执行代码的时候,首先会创建一个全局的执行上下文,之后遇到调用函数就会把调用函数的执行上下文入栈,等执行完后进行出栈,然后继续往后执行直到整个调用栈为空。文字描述过于抽象,以代码举例。<script type="text/ja
2021-11-04 14:08:17
318
原创 深入学习keepalive
keepalive是我们在vue项目中经常使用的一个功能,可以让页面数据暂时缓存,不过他是如何缓存的?如何保持数据不更新的?概念:“keep-alive”包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和“transition”标签相似,都是抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中。当组件在"keep-alive"内被切换的时候,它的activated和deactivated这两个生命周期钩子函数将会被对应执行。主要用于保留组件状态或避免重新渲染。属性:inclu
2021-11-03 11:05:54
286
原创 一看就会!vue中nexttick是个嘛?
官方定义:在下次Dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。场景:在给子组件传参上;我们给子组件传参数后,在子组件中调用函数查看参数。<div id="app"> <div class="msg"> <form-report ref="child" :name="childName"></form-report> </div></div>Vue.c
2021-10-18 20:37:16
220
原创 css处理文本换行和省略
关于这个问题会有很多css的相关属性,我就来一一列举出来,并分析属性作用。最后总结策略。CJK=中日韩word-break指定了怎样在单词内断行:normal : 默认换行规则;可以看到CJK文本会自动行,非CJK文本不会自动换行,会超出容器,但是在查找到空格这类可以作为换行依据的内容时,非CJK内容也能实现换行break-all:break-all属性很霸道,只要容器装不下了,就会立即换行,不管是CJK内容还是非CJK内容,也可以理解为break-all将非CJK内容作为CJK处理。Keep-
2021-09-17 15:12:42
752
原创 浏览器渲染流程
浏览器进程:浏览器是一个多进程的架构,当我们每开一个tab页面,就会开一个新的进程,所以如果一个页面崩溃也不会影响到别的页面。面试的时候经常会问从输入url到页面显示都发生了什么,这次主要说说针对渲染这块而浏览器具体都做了些什么,都有哪些进程?首先浏览器进程有如下几部分:主进程,第三方插件进程,GPU进程,渲染进程。而渲染进程又包含了很多线程:js引擎线程,事件触发线程,定时器触发线程,异步http请求线程,GUI渲染线程。主进程:负责页面的显示与交互,各个页面的管理,创建和销毁其他进程。网络的资
2021-09-13 14:35:37
304
原创 前端常见的数组问题|数组全家桶
开始之前,我们先创建一个数组var fruits = ['Apple', 'Banana'];console.log(fruits.length);// 2一,数组的方法1.添加元素到数组的末尾 push()var newLength = fruits.push('Orange');// newLength:3; fruits: ["Apple", "Banana", "Orange"]2.删除数组末尾的元素 pop()var last = fruits.pop(); // rem
2021-08-08 21:31:02
480
原创 编程语言的分类与介绍(动态、静态、强类型、弱类型、编译型、解释型)
1,动态类型语言 VS 静态类型语言(1)动态类型语言指是在运行期间才检查数据的类型的语言。使用这类语言编程时,不用给任何变量指定数据类型。该语言会在第一次赋值给变量时,在内部将数据类型记录下来。常见的动态类型语言有:Python、Ruby、Erland、JS、Swift、PHP、Perl(2)静态类型语言是会在编译期间做检查数据类型的语言,即写程序时要声明所有变量的数据类型,是固定的。使用数据之前,必须先声明数据类型(int,float,double 等)。相当于使用之前,首先要为它们分配好内存空间
2021-05-07 13:24:26
4719
原创 解决前端跨域的八种方案
解决跨域的八种实现方案由于同源策略的限制,满足同源的脚本才可以获取资源。虽然这样有助于保障网络安全,但另一方面也限制了资源的使用。 那么如何实现跨域呢,以下是实现跨域的一些方法。一、jsonp跨域原理:script标签引入js文件不受跨域影响。不仅如此,带src属性的标签都不受同源策略的影响。正是基于这个特性,我们通过script标签的src属性加载资源,数据放在src属性指向的服务器上,使用json格式。由于我们无法判断script的src的加载状态,并不知道数据有没有获取完成,所以事先会定义好
2021-04-25 13:20:10
12302
原创 Node.js学习笔记
什么是NodeJSJS是脚本语言,脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS,浏览器充当了解析器的角色。而对于需要独立运行的JS,NodeJS就是一个解析器。每一种解析器都是一个运行环境,不但允许JS定义各种数据结构,进行各种计算,还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM,浏览器就提供了document之类的内置对象。而运行在NodeJS中的JS的用途是操作磁盘文件或搭建HTTP服务器,NodeJS就相应提供了fs、http等内
2021-04-18 14:28:15
127
原创 面试题总结(一)
面试了一些小公司,总结一下没答出来的问题:数据结构1.栈2.链表3.树结构需要恶补数据结构!!!算法1.排序2.查询搜索的算法3.回溯算法前端知识1.http协议和tcp协议的概念,两者的区别2.js中的事件委托3.js的闭包,闭包的本质4.js原型链5.js中settimeout和setIntellal的区别6.es6 的模块系统7.rem 的r基于什么?8.foreach()的使用vue1.vue的组件和生命周期2.父子组件传参传值3.v-model原理4.
2021-04-11 09:32:16
183
2
原创 360前端一二面|面经来袭
1.let const 区别以及数据存储的方式2.一道关于箭头函数的题,settimeout中的this指向 window.id = 0 const fn = { id: 1, say1: function () { setTimeout(function () { console.log('id:', this.id) }, 1000) }, say2: function () { setTimeout(() =&
2021-04-02 21:10:43
438
原创 百度一面|前端开发工程师
1.box-sizing的几个属性2.上元素margin-bottom和下元素margin-top的问题3.清除浮动的几种方法4.js如何判断数据类型5.区分数组和对象的方法:instance of,array.isArray6.es6新属性7.函数声明和var声明那个等级更高8.事件处理9.闭包10.promise.all11.cookies,sessionStorage,localStorage作用区别12.跨域的方法,jsonp怎么实现跨域13.写一个防抖14.怎么处理不同机
2021-04-01 20:35:25
196
原创 滴滴一面|前端开发工程师|滴滴顺风车部门
首先是自我介绍,然后问我js,css,算法哪个学的好一点,我说js。然后问我算法怎么样,我说一般。然后就开始给我面试我的js基础js这次面试都是代码题,所以直接贴代码啦第一题 Object.prototype.a='a'; Function.prototype.a='a1'; function Person(){}; var didi = new Person(); console.log(didi.a); console.log(Person.a); con
2021-03-28 09:34:21
1227
4
原创 记第一次面试|阿里电面|前端开发工程师
上午简单投递了简历,没想到晚上阿里面试官就打电话要求电面。刚接到电话很紧张,说能不能让我准备10分钟。面试官说那稍后打给我。十分钟后果然打来了,但是其实没怎么准备什么。只能硬着头皮开始面试。注意点:说话要自信清晰,不要吞吞吐吐,回答问题不要笑。1.自我介绍,见到介绍了自己的情况,说到自己开始学习前端,面试官问了第一个问题:Q1 为什么想要做前端?我回答的模模糊糊,相对后端可视化,感觉有很多可研究深入学习的东西。Q2 前端有什么可以深入学习的地方讲了自己学习的感受2.提问知识点Q1 J
2021-03-11 15:45:24
283
2
原创 设计模式笔记
六个创建型模式1.简单工厂模式2.工厂方法模式3.抽象工厂模式4.单例模式单例模式:单例模式(Singleton Pattern):确保某一个类只有一个实 例,而且自行实例化并向整个系统提供这个实例,这个类称为单例类,它提供全局访问的方 法。单例模式是一种对象创建型模式。单例模式有三个要点:一是某个类只能有一个实例;二是它必须自行创建这个实例;三是它 必须自行向整个系统提供这个实例...
2021-03-08 10:56:50
117
原创 npm的--save和--save-Dev的区别
在执行npm包管理器安装包的时候,会有两种安装方式,一种是–save,一种是–save-dev共同点1.两种方式都会安装到node_modules目录中。2.两种方式都会保存到package.json中。区别:在package.json文件中,有两个存放模块的对象。–save是对生产环境所需依赖的声明(开发应用中使用的框架,库),比如:jq,react,vue都需要放到这里面。–save-Dev是对开发环境所需依赖的声明(构建工具,测试工具),比如:babel,webpack,都放到当前目录
2021-02-19 14:19:42
212
1
原创 DCLOUD插件市场发布第一个uniapp插件|实现朋友圈图片动态排列
在写项目的过程中需要实现类似与微信朋友圈的图片排列的功能。自己简单写了出来,在同桌lxx的鼓励下把它封装成了一个插件发布到了DCLOUD插件市场。虽然功能很简单,但是很实用哦~下面列出使用教程实现朋友圈图片自适应排列说明本组件通常用于需要处理朋友圈或者类似qq空间说说的图片自动排列布局用法示例<template> <view> <imageAdaptation :imgList="imgList" :imgLayout1="imgLayout1"
2021-02-15 16:55:41
1018
3
原创 qs.stringify和JSON.stringify的使用和区别
同期同学做项目都用到了qs,但是这个对我来说是一个知识盲区,今天学习完来总结一下。qs可通过npm install qs命令进行安装,是一个npm仓库所管理的包。而qs.stringify()将对象 序列化成URL的形式,以&进行拼接。JSON是正常类型的JSON,请对比一下输出var a = {name:'hehe',age:10}; qs.stringify(a)// 'name=hehe&age=10'JSON.stringify(a)// '{"name":"hehe
2021-02-05 08:59:43
254
原创 重新排列日志文件| 力扣算法| js解法|slice()|indexOf()|sort()
今天下午被一道算法题困了好久,终于看懂了。参考了某个网友的解法,对于这个题进行一个梳理和总结题目js解法代码整体思路首先定义两个数组,arr1,arr2,遍历logs数组来判断每段日志的最后一个值是不是数字,把字符串日志都放到arr1,数字日志都放到arr2然后对arr1进行排序,首先使用sort方法,让arr1按照标识符先排序,然后根据日志中字母顺序排序,就是通过判断字母日志的Unicode的大小来排序。最后再把数字追加到字母排序的后面代码解析 arr1.sort((x,
2021-01-27 18:08:54
235
原创 Sass和Scss的区别
Sass是什么Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初它是为了配合HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格。SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等
2021-01-26 08:38:55
529
原创 leetCode字符串的排列问题,滑动窗口解法
2020年寒假算法刷题1题目java代码class Solution { public boolean checkInclusion(String s1, String s2) { if(s1.length()>s2.length()){ return false; } int[] arr1 = new int[26]; int[] arr2 = new int[26];
2021-01-13 15:44:07
106
原创 UE4虚拟现实实习总结---蓝图中的常用交互事件|人物行走|物体移动|动态触发|材质改变
这周是ue4实习周,老师给我们的任务就是基于中学物理和化学实验的虚拟实验室,要有交互事件,后期可以链接vr手柄进行操作。但是实习开始老师影都没了,全靠自己学习。感觉自己学习了不少东西,这里就来总结一下!顺便感叹一下,ue4好玩又强大!以下主要介绍蓝图中的几种交互事件1.新建游戏角色并且进行角色行走旋转,2.如何控制物体移动旋转,3.如何控制物体材质动态变化大家可以举一反三,作出更好的作品1.新建游戏角色并且进行角色行走旋转步骤在刚刚新建的文件夹中鼠标右击新建蓝图类,然后分别创建以下:chara
2020-12-19 16:25:15
5325
4
原创 框架el-admin学习总结(二)----浅学
今天给组员和要学习这个框架的同学,进行了入门级的讲解。第一次讲课,感觉准备不足,而且整体讲课框架还有些问题,有些细节甚至自己都没有了解透。所以这次还有有很多问题的。接受自己的问题,并在以后改正,加油eladmin学习总结一,Login:整体逻辑:1. // 获取验证码 // 获取用户名密码等Cookie //判断 token 过期是否知识点:1.v-on事件修饰符:*prevent:*@click.prevent —阻止跳转行为 self:------
2020-11-30 22:35:21
1336
原创 在父组件控制子组件的加载
在写科研管理项目的时候,遇到了一个问题,需求是这个鸭子是子组件需要从父组件中获取接口请求到的数据,同时需要每次进入父组件的页面时,这个数据都是从接口拿到的最新的数据。发现问题,发现每次通过面包屑点开父组件,然后进入其他页面,再重新进入这个父组件时,希望子组件的数据是更新后的,从而控制一些样式改变。会发现每次拿到的都是原来的数据。从控制台输出也发现,父组件接口请求到数据总是比渲染子组件晚。(因为接口请求是异步的原因)问题解决所以要想每次进入这个父组件页面都让子组件获得最新的数据,就需要等接口
2020-11-24 21:05:50
1055
原创 重新学习vuex---mutation和action区别
首先vuex项目结构需要遵守Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:应用层级的状态应该集中到单个 store 对象中。提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。异步逻辑都应该封装到 action 里面。只要你遵守以上规则,如何组织代码随你便。如果你的 store 文件太大,只需将 action、mutation 和 getter 分割到单独的文件。对于大型应用,我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例:mutatio
2020-11-20 08:28:02
4152
原创 框架el-admin学习总结(一)----初学
已经学习了一星期的eladmin,从一开始的迷迷糊糊到现在算是了解一丢丢皮毛,来做个学习总结。首先在线体验预览地址:https://auauz.net/dashboard账号密码:admin/123456(所有账户都是一个密码)github 和码云上都有开源的代码,包括前后端的,下载运行。成功进入前端页面,这时我们要加入自己的模块。我们需要把vue文件写在view文件夹下面项目目录如下:写好代码你会发现显示不出来,如果要想显示自己的模块还需要两个步骤第一步:在前端界面的菜单管理进行新增
2020-11-14 09:42:28
3770
1
原创 微信公众号开发,清除微信内置浏览器缓存
只对Android手机有效:在微信任意对话框(随便找个订阅号即可),发送以下网址http://debugx5.qq.com点击进入,然后就会出现一个类似浏览器的设置界面,这是QQ浏览器内核的设置界面如图:
2020-11-08 13:01:28
341
原创 Vue知识:动态设置样式style、class
对象语法:绑定单个class:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:200px;height:30px;margin: 100px; } .active1{
2020-10-24 16:20:03
835
原创 vue中$router的接受传递参数--query和params区别
1.query方式传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } }) 接收参数:this.$route.query.id2.params方式传参和接收参数传参: this.$router.push({ name:'xxx' params:{ id:id } }
2020-10-19 21:29:39
227
原创 数据结构可视化工具usfca
工具地址:https://www.cs.usfca.edu/~galles/visualization/Algorithms.html使用方法:点击链接进入可视化工具导航页面:该页面提供的大部分平时所用到的数据结构:点击B+树即可模拟B+树的动态插入过程,非常有利于理解...
2020-10-10 16:54:29
506
1
原创 VUE父子组件传值
父传子父组件:<template> <div> //这里调用子组件 <sex @listenChildEvent="sexMsg" ></sex> </div></template>script代码:import Sex from "../components/Sex.vue";export default { components: { Sex }, data()
2020-09-26 18:04:48
133
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人