前端
Yunruohan
这个作者很懒,什么都没留下…
展开
-
常考浏览器面试考点
1.浏览器的从接收url到渲染的过程浏览器在用户输入url之后会先对url进行dns解析,dns会按照浏览器本地 > 本地电话host >dns服务器这个顺序去查找对应的ip,找到ip后就会向服务器发出请求,服务器在收到请求之后会把对应的静态文件返回,浏览器解析html的时候会按照从上到下,遇到css加入异步的请求中,不阻碍继续解析,遇到script要看script标签是否标识要异步,如果是就先进行异步加载继续解析html,如果是script设有defer标签就是等到dom解析完再解析...原创 2021-03-05 11:24:12 · 164 阅读 · 0 评论 -
JS的常见知识点
JS的内置类型 js的内置类型分为两大类:一类是JS的基本类型包括六种null undefined string number boolean symbol第二类是引用类型Object面试题1.说下你知道的JS的内置类型 2.JS继承 JS继承有7种方式:原型链继承function father() { this.type = 1}function person(name) { this.name = name ...原创 2021-02-25 19:33:17 · 162 阅读 · 0 评论 -
我理解的闭包
一、理解闭包函数A中包含函数B,函数B可以访问函数A作用域中的变量,这种情况下就称闭包二、闭包的应用应用1:封装私有变量特点:当你想要让一个函数中的变量变成私有(这时候大家应该想到对象,但是对象是可以直接访问变量的,那么new就是一个好的中间转换过程),只能通过函数对应的方法来获得,这时你就可以利用闭包function Ninja() { var feints = 0; this.getFetint = function() {...原创 2021-01-17 19:07:29 · 262 阅读 · 0 评论 -
this指向问题总结
一、什么情况下会讨论this的指向访问this访问对象的某个属性二、不同情况下this的指向问题①全局普通函数中使用thisthis指向windowvar a = 1function f() { console.log(this.a)}// 1②对象中的某个属性为普通函数,函数中使用thisthis指向对象let obj = { a: 'obj', f: function() { console.log(this.a) }}原创 2021-01-17 15:49:40 · 240 阅读 · 0 评论 -
Promise
一、promise为何产生promise是一种异步解决方案,因为promise可以让异步回调变得更简单,其具有以下特点promise的状态有三种,pending(执行状态)、成功状态(resolved)、失败状态(rejected),只有构造函数传入的code执行结果才会改变promise的状态 只要新建就会执行 promise构造函数中传入的code会立即被执行,但是then属于微任务二、promise的基本使用let p = new Promise((resolve, reject)原创 2021-01-10 23:20:50 · 128 阅读 · 0 评论 -
js的深拷贝
一、通过for in实现function deepCopy1(obj) { let o = {} for(let key in obj) { o[key] = obj[key] } return o}let obj = { a:1, b: undefined, c:function() {},}console.log(deepCopy1(obj))// { a: 1, b: undefined, c: [Function: c] }二、通过JSON.原创 2021-01-08 17:19:34 · 142 阅读 · 0 评论 -
谈一谈自己对BFC的理解
一、BFC概念BFC全名为块级格式化上下文,它是一个独立的渲染区域,其内部的盒子如何布局只遵循块级格式化上下文的规则,不受外部元素的干扰二、如何定义BFC当前元素的float属性不为none 当前元素的position属性不为static和relative 当前元素的overflow属性不为visible 当前元素的display属性是inline-block、table-cell、flex、table-caption和inline-flex三、BFC的布局规则每个盒子都占一行,在垂原创 2021-01-08 16:51:29 · 290 阅读 · 0 评论 -
事件
一、事件冒泡观察dom结构,我们会发现每个元素都被其它元素包裹着,像同心圆一样,当圆心有事件发生的时候,似乎会向外扩散,这里我们可以把这种扩散理解为事件冒泡事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点 举例理解:<!DOCTYPE html><html><head> <title>理解冒泡实例</title></head><body> <div id=原创 2020-12-22 23:38:22 · 131 阅读 · 0 评论 -
JS垃圾回收机制
一、什么是垃圾一般来说,没有被引用的对象就是垃圾,为了减少内存被无用的变量占用造成内存的浪费,所以需要对垃圾进行回收二、回收的方法 1.标记清除清除维度:其作用域是否在执行环境 不同执行环境清除原则:全局作用域是在当前窗口在执行态的时候就不会被清除,但是局部环境是在其执行环境被销毁的时候就会被标记清除 举例解释let obj1 = { prop: 'obj1'}function f1() { let obj2 = { prop: 'obj2' } ret.原创 2020-12-21 18:56:25 · 171 阅读 · 0 评论 -
理解js中声明的作用域
一、首先我们了解一下作用域的分类全局作用域:全局作用域是未定义在某个函数内的 函数作用域:局部作用域是定义在某个函数内的二、通过实例理解作用域中的声明例子一:代码中a、b、c和f1均为全局作用域中声明,我们可以将全局理解为一级作用域,全局作用域中声明的函数为二级作用域,函数中的函数称为三级作用域,以此类推,级数大的可以访问级数小的<script>var a = 1let b = 2const c = 3function f1() { let d = 4 r原创 2020-12-21 00:39:03 · 205 阅读 · 0 评论 -
手写简单的apply、call和bind
一、手写call先来看下call的使用let obj = { name: 'obj'}var name = 'window'function f(lastname) { console.log(this.name + ' ' + lastname)}f.call(obj, 'sun')// 输出obj sun思考:能直接通过函数.调用,通过我们学到的原型链的知识,我们可以将callFun写到prototype上Function.prototype.callFun =原创 2020-12-10 21:00:29 · 185 阅读 · 0 评论 -
函数传参的方式
一、理解函数的实参和形参形参:函数定义时写明的参数叫形参 实参:函数调用时传入的参数叫实参function f(a, b) { // a b为形参 return a + b}f(1, 2) // 1 2为实参二、函数形参的定义方式方式一:预先定义好所有需要的形参特点:需要预知参数的个数function f(a, b, c, d) { return a + b + c + d}f(1, 2, 3, 4)方式二:只定义部分可预知的参数,剩余的用剩余参数定义原创 2020-12-06 10:55:59 · 277 阅读 · 0 评论 -
js的继承
一、理解继承对象的继承是二、继承方式总结方式一:原型继承方式二:构造函数继承方式三:原型和构造函数组合式继承方式四:Class继承原创 2020-12-03 12:50:32 · 81 阅读 · 0 评论 -
从对象创建来理解原型链
一、理解__proto__ 和prototype在理解原型链之前我们先来看两个属性,__proto__ 和prototype,在我的理解中,__proto__和prototype是对象和函数与其关联对象的一种标识__proto__:对象的一个属性,指向它的来源 prototype:函数的一个属性,指向它的来源二、对象创建总结方式一:对象字面量特点:创建一个自定义属性的对象,属性在创建的时候定义,不能复用let obj = { name: 'a', age: 'b'}观原创 2020-12-02 22:15:39 · 139 阅读 · 0 评论 -
从页面输入url到页面渲染的过程
1.用户输入用户输入一个url之后,浏览器会解析用户的输入,目的是找到该地址对应服务器的index.html文件,解析的步骤如下先找浏览器缓存(chrome://dns/)看是否有改url对应的服务器地址,如果有则向服务器发出请求,没有则进行第二步 浏览器缓存没有该url,那么就像系统的缓存文件中找,如果有则向服务器发出请求,没有则进行第三步 本地缓存没有就会像dns服务器请求去解析,dns会将对应的地方返回,浏览器向返回的地址发出请求2.浏览器发出请求浏览器会向服务器发出tcp链接 服原创 2020-11-30 18:00:36 · 154 阅读 · 0 评论 -
JS的同步和异步、微任务和宏任务
1.为什么JS是单线程的js是运行于浏览器的脚本语言,因其经常涉及操作dom,如果是多线程的,如果一个线程修改dom,另一个线程删除dom,那么浏览器就不知道该先执行哪个操作,所以js执行的时候会按照一个任务一个任务来执行,那么任务是怎么排列的呢2.为什么JS的任务要分类为同步任务和异步任务试想一下,如果js的任务都是同步的,那么遇到定时器、网络请求等这类型需要延时执行回调函数的任务会发生什么?页面会像瘫痪一下暂停下来等待这些需要需要时间的代码执行完毕,基于此,又引入了异步任务,每个异步任务都必原创 2020-11-26 20:41:40 · 2277 阅读 · 1 评论 -
常用的RegExp总结
第一部分介绍正则的定义1. 正则的介绍 let reg = /pattern/flagspattern 像上面let后面定义的则为正则的定义,pattern是其中的正则表达式(可以包含字符、限定符、分组、向前查找、反向引用) flags 校验的标志 常用的有(g:全局匹配 i : 不区分大小写匹配)2.正则的定义字面变量法// 定义全局条件let reg = /a/g;...原创 2019-10-26 21:25:36 · 953 阅读 · 1 评论 -
css选择权的权重计算
记住四个规则走遍权重计算的天下类型 举例 权值 内联样式 style="" 1000 id选择器 #id 100 类 .class 10 普通标签 p div 1原创 2018-07-22 15:08:32 · 457 阅读 · 0 评论 -
前端学习资料
转资源汇总原创 2018-11-14 17:23:13 · 137 阅读 · 0 评论 -
怎么理解脚手架vue-cli
接触过一段时间前端的同学必然会接触到vue,然后就会接触到vue-cli,因为大多数人是通过npm install -g vue-cli,意思是安装全局的vue-cli,实际上vue-cli就是一个简单的demo,它会为你配置好一些最基本的东西,每次不用从零开始,从而使你的开发变得方便快捷起来...原创 2018-11-14 17:39:25 · 410 阅读 · 1 评论 -
vuex案例讲解
情景:如果你的页面较多,且共享的数据较多,那么你可以使用cuex来管理你的数据 官方文档地址 https://vuex.vuejs.org/guide/state.html 对vuex中元素进行解释state:用来存储数据,可读 mutation:用来定义改变state中数据的方法 getters:用来对共享数据进行过滤操作 action:解决异步改变共享数据 3. ...原创 2018-11-20 00:35:40 · 389 阅读 · 0 评论 -
“设置display:block-inline的li或div中添加文字后,导致li或div排版掉落、错位”的原因及解决方法
情景 在了解可以通过设置display:inline-block会将块级元素拥有inline元素一行排列的特性,那么我们可能想要通过将li的display属性设置为inline-block来实现块级元素的行排列,这时候你可能说通过设置浮动float就可以解决,不着急,float的原理和实现作为补充内容会接着聊,那么接下来先通过效果图来看一下问题所在代码展示(通过设置display将li...原创 2018-11-25 03:15:13 · 3991 阅读 · 4 评论 -
饿了么框架表单验证学习心得
情景我想利用饿了么框架实现表单验证 http://element-cn.eleme.io/#/zh-CN/component/form#form-biao-dan 但是我的form里面的model和例子所给的model格式不一样 //这是例子所给的数据结构ruleForm: { name: '', region: '', date1: '', dat...原创 2018-12-04 18:13:29 · 1784 阅读 · 1 评论 -
B2C 解释B端C端
作为程序员你可能经常会听到"B端还是C端产品",所以这些名次应该是你所熟悉的B指business,商家 功能具有复杂性,比如XXX管理系统C指customer,用户 功能具有单一性,比如keep健身、王者荣耀游戏B2C 商家对用户,京东、天猫就是典型C2C 个人对个人,这里的个人可以理解为做小生意的个体,淘宝就是典型B2B 商家对商家 ...原创 2018-11-27 11:22:17 · 2049 阅读 · 0 评论 -
vue中v-if与v-show的区别
情景:有时候你可能会需要一个效果按条件时有时无 vue提供v-if与v-else来实现这样的效果,以下是使用其的一部分代码<template> <div @click="showT"> <transition name="el-zoom-in-center"> <div class="transitio...原创 2018-11-27 12:02:02 · 234 阅读 · 0 评论 -
饿了么input框的使用
input是开发中常用的标签,但是不同的场景所需要input对应的方法也不相同,饿了么这趟框架其实还是蛮好用的,基本满足了大家的需求,这里想要稍作总结一下input框需要有提示<el-input placeholder="请输入内容" v-model="input1"></el-input><script>export default {...原创 2018-12-13 21:01:12 · 2781 阅读 · 0 评论 -
前端程序员必备概念
你是否知道自己的电脑为什么可以访问百度?为什么你本地起的服务只可以让和你在同一局域网的电脑访问到?先解释一下这俩个问题你可以访问百度是因为百度的地址是公网ip,任何连网的电脑都可以通过http协议进行解析访问你本地起的服务只有和你是在同一个局域网内的电脑才可以解析你的地址进行访问 2. 解释一下公网ip公网你可以理解为全世界约定了一个规则,只要可以上网的电脑都可以按照这...原创 2018-12-09 22:24:53 · 235 阅读 · 0 评论 -
webpack中的host
当你本地起了vue的项目服务后,如果对方和你在同一局域网内,对方可通过访问你的ip+端口即可访问你起的服务,但是vue脚手架自动生成的host是127.0.0.1,按照计算机的原则,127.0.0.1对应的就是你的ip,应该是可以访问到的,但是最终会发现并不能 vue生成的脚手架 如果想要对方访问自己的服务,那么将host改为0.0.0.0 127.0.0.1与0.0.0.0的区...原创 2018-12-17 10:14:26 · 3056 阅读 · 0 评论 -
dependencies与devDependencies的区别
情景:每一次从git上拉取vue项目之后,会执行npm install命令,大家都知道这个操作执行成功之后会新增node_modules文件夹存放了刚被下载的依赖,但是大家有没有想过根据什么来安装npm install会根据什么来安装依赖npm install会根据packjson这个文件夹中的dependencies和devDependencies来安装对应的依赖,dependencies...原创 2019-01-07 10:31:40 · 945 阅读 · 0 评论 -
很详细的服务器部署node和nginx详解
分享主目录服务器安装node环境(前端必备,提供俩种详细的安装方式) 服务器安装nginx启动web服务(包括配置自己所需路径) 服务器nginx配置反向代理服务器登录软件FinalShell 下载链接http://www.hostbuf.com/downloads/finalshell_install.exe 方便:可以快捷的进入服务器的文件进行编辑,如下截图中,...原创 2019-08-16 14:48:17 · 3650 阅读 · 0 评论 -
常用的Array总结(包含ES5/6/7/8/9/10)
第一部分介绍数组的定义和访问1. 数组定义使用new操作符来定义 new Arraylet arr = new Array();使用 [ ] 定义数组字面量法let arr = [];2. 数组赋值使用数组字面量法赋值 (常用)let arr = ['a', 'b', 'c'];3. 值的访问通过数组下标的索引访问let arr = [...原创 2019-10-11 01:57:04 · 295 阅读 · 0 评论 -
vue项目配置Sass
敲入下面的命令( sass-loader依赖于node-sass ) npm install --save-dev sass-loader npm install --save-dev node-sass 2. 在build文件夹下的webpack.base.conf.js的rules里面添加配置{ test: /\.sass$/, loaders: ['styl...原创 2018-11-14 16:17:46 · 144 阅读 · 0 评论 -
sass学习
sass学习 中文文档 https://www.sass.hk/docs/sass特色功能完全兼容 css3 在css基础上增加变量、嵌套、混合等功能 通过函数进行颜色值与属性值的运算 提供控制指令等高级功能 自定义输出格式 2. 嵌套规则#main p { color: #ddd; width: 30%; .redbox { ...原创 2018-11-12 14:48:33 · 110 阅读 · 0 评论 -
Less学习
Less的使用(中文文档https://less.bootcss.com/)学习怎么使用之前必然要了解一下在什么环境中使用node环境npm install -g lesslessc styles.less styles.css 浏览器环境<link rel="stylesheet/less" type="text/css" href="styles.less" /&...原创 2018-11-12 14:19:34 · 94 阅读 · 0 评论 -
科大讯飞面经
上来先是自我介绍对于找工作的大家自然是轻车熟路的一面具体如下:讲一下快速排序的思想及过程 说一下快排的复杂度 讲一下堆排序的思想及过程 讲一下堆排序的应用场景吧 讲一下这几种排序算法各自的优势 cookie你了解多少,讲一下你的理解 IP协议你了解多少,讲一下你的理解 讲一下你知道的前端涉及安全方面的信息 讲一下你们调试的工作吧 如果我现在想要实现一个登录的功能,你需要做...原创 2018-09-13 18:07:32 · 2170 阅读 · 1 评论 -
flex弹性布局
转载:https://www.cnblogs.com/nuannuan7362/p/5823381.html一、简要介绍 css3最喜欢的新属性之一便是flex布局属性,用六个字概括便是简单、方便、快速。 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏...转载 2018-09-23 16:38:08 · 130 阅读 · 0 评论 -
JS继承方式的总结
继承方式一 原型链继承function parent(){ this.age = "parent";}function child(){}//子类想要继承父亲具有父亲的属性namechild.prototype = new parent()//这样访问child.prototype.age即可得到namevar children = new child()conso...原创 2018-09-23 16:34:00 · 123 阅读 · 0 评论 -
vue-如何做移动端的适配-方法一
在head标签中加入的js原生代码 <script> (function(doc,win){ let docEl = doc.documentElement; let resizeEvt = 'orientationchange' in window ? 'orientationchange':'resize'; l...原创 2018-09-23 15:28:47 · 1054 阅读 · 0 评论 -
js 如何将字符串转换为数字
方法一:利用js自带的数字转化方法let a = "12" parseInt(a)方法二:利用强制数字转换方法let a = "12" Number(a)方法三:利用弱转换的方式let a = "12" a = a * 1...原创 2018-09-15 22:07:02 · 5092 阅读 · 0 评论 -
http缓存机制
前言 转载:https://www.cnblogs.com/chenqf/p/6386163.htmlHttp 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说,仅仅只是知道浏览器会对请求的静态文件进行缓存,但是为什么被缓存,缓存是怎样生效的,却并不...转载 2018-07-23 08:36:59 · 247 阅读 · 0 评论