前端
文章平均质量分 91
秃如其来的秃头
种一棵树最佳时间是十年前,其次是现在!
如果一直躲在舒适区,最终一定会进入恐慌区。
展开
-
前端项目搭建规范
前端项目搭建规范一. 代码规范1.1. 集成editorconfig配置EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格(tab | space)indent_size = 2 # 缩进大小end_of_line =原创 2022-01-17 10:41:57 · 462 阅读 · 1 评论 -
JavaScript深入之继承的多种方式和优缺点
JavaScript深入之继承的多种方式和优缺点对象得原型JS当中每个对象都有一个特殊的内置属性[[prototype]],这个特殊的对象可以指向另外一个对象当我们通过引用对象的属性 key 来获取一个 value 时,它会触发 [[Get]]的操作这个操作会首先检查该属性是否有对应的属性,如果有的话就使用它如果对象中没有改属性,那么会访问对象的 [[prototype]] 内置属性指向的对象上的属性那么如果通过字面量直接创建一个对象,这个对象也会有这样的属性吗?如果有,应该如何获取原创 2022-01-13 10:36:52 · 407 阅读 · 0 评论 -
浏览器缓存机制
浏览器缓存机制缓存位置从缓存位置上来说分为四种,并且各自有优先级,当依次查找缓存且都没有命中的时候,才会去请求网络Service WorkerMemory Cache内存缓存Disk Cache硬盘缓存Push Cache网络请求Memory Cache内存中的缓存,但是内存缓存虽然读取高效,可是缓存持续性很短,会随着进程的释放而释放。 一旦我们关闭 Tab 页面,内存中的缓存也就被释放了。Disk CacheDisk Cache 也就是存储在硬盘中的缓存,读取速度原创 2021-11-24 12:00:29 · 1487 阅读 · 0 评论 -
JS函数式编程
JS函数式编程实现 call第一版Function.prototype.mycall = function(){ // 1. 获取需要被执行的函数 foo.mycall 这里的 this 就是 foo 该函数 let fn = this console.log('Function=>',this) fn()}// 测试用例function foo(){ console.log('foo=>',this)}foo.mycall()原创 2021-10-28 17:21:49 · 676 阅读 · 0 评论 -
JS执行过程、词法作用域、执行上下文、深入变量对象、作用域链
JS执行过程、词法作用域、执行上下文、深入变量对象、作用域链JavaScript深入系列作用域作用域是指程序源代码中定义变量的区域作用域规定了如何查找变量,也就是确定当前执行代码对变量的访问权限JS采用词法作用域(lexical scoping),也就是静态作用域静态作用域与动态作用域JS采用的是词法作用域,函数的作用域在定义函数定义的时候就决定了 --重点而与词法作用域相对的是动态作用域,函数的作用域是在函数调用的时候才决定的。var scope = "global scope";f原创 2021-10-23 17:26:23 · 229 阅读 · 0 评论 -
最后一击——回流(Reflow)与重绘(Repaint)
最后一击——回流(Reflow)与重绘(Repaint)回流:当我们对 DOM 的修改引发了 DOM 几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性(其他元素的几何属性和位置也会因此受到影响),然后再将计算的结果绘制出来。这个过程就是回流(也叫重排)。重绘:当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性(比如修改了颜色或背景色)时,浏览器...原创 2020-03-10 01:16:29 · 147 阅读 · 0 评论 -
解锁浏览器背后的运行机制
解锁浏览器背后的运行机制及css、js为何阻塞开启浏览器渲染“黑盒”什么是渲染过程?简单来说,渲染引擎根据 HTML 文件描述构建相应的数学模型,调用浏览器各个零部件,从而将网页资源代码转换为图像结果,这个过程就是渲染过程(如下图)。从这个流程来看,浏览器呈现网页这个过程,宛如一个黑盒。在这个神秘的黑盒中,有许多功能模块,内核内部的实现正是这些功能模块相互配合协同工作进行的。其中我们最需要...原创 2020-03-07 00:44:04 · 116 阅读 · 0 评论 -
浏览器缓存机制介绍与缓存策略剖析
浏览器缓存机制介绍与缓存策略剖析缓存可以减少网络 IO 消耗,提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。对于这个操作的必要性,Chrome 官方给出的解释似乎更有说服力一些:通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信,这会延迟浏览器获得和处理内容的时间,还会增加访问者的流量费用。因此,缓存并重复利用之前获取的资源的能力成...原创 2020-03-06 10:41:16 · 177 阅读 · 0 评论 -
检测网站打开速度的5个方法
检测网站打开速度的5个方法网页载入速度对于一个网站来讲很关键,Google已经将一个网站的载入速度列入了网站关键字排名的考虑因素当中,也就是说如果你的网站有足够的内容,而且载入速度比别人的网站更快一步的话,那么你就是获得更好的排名。那么下面就赶快测试你的网站,提高网站访问速度吧。1:用Ping命令简单测网站速度的方法Ping可以用来检查网络是否通畅或者网络连接速度,点击开始→运行 在运行中输...转载 2020-02-24 13:21:09 · 3636 阅读 · 0 评论 -
重学前端 浏览器是如何工作的
前端 浏览器是如何工作的URL显示网页得内容1、浏览器通过HTTP 或者 HTTPS协议请求代码资源2、将请求回来得HTML代码经过解析,构建dom树3、解析dom树css4、最后根据CSS属性怼元素逐个进行渲染,得到内存中得位图5、一个可选得步骤是对位图进行合成,这会极大得增加后续绘制得速度6、合成之后,在绘制到界面上流程: http>构建dom树>计算css>...原创 2020-02-18 11:47:24 · 129 阅读 · 0 评论 -
重学前端面向对象及其原型(二)
重学前端(二)运行时类型是代码实际执行过程中我们用到的类型。所有的类型数据都会属于7个类型之一。从变量、参数、返回值到表达式中间结果,任何JavaScript代码运行过程中产生的数据,都具有运行时类型。类型UndefinedNullBooleanStringNumberSymbolObjectUndefined NullUndefined类型表示未定义,他的类型只有...原创 2020-02-16 21:51:39 · 128 阅读 · 0 评论 -
前端性能优化之静态资源优化
静态资源优化图片格式 和 应用场景介绍JPEG联合图像装甲小组是一种针对彩色照片而广泛使用的有损压缩图形格式介绍:栅格图形。常用文件扩展名为.jpg,也有.jpeg、.jpe。JPEG在互联网上常被应用于存储和传输照片不合适:线条图形和文字、图标图形,因为它的压缩算法不太这些类型的图形;并且不支持透明度非常合适:颜色丰富的照片、彩色图、大焦点图、通栏bnner图‘(一般是放在导航下面...原创 2020-02-06 00:57:20 · 1763 阅读 · 0 评论 -
重学前端笔记
重学前端书籍JavaScript高级程序设计精通CSS解释对于任何计算机语言来说,必定是“用规定的文法,取表达特定语义,最终操作运行时的”的一个过程文法词法直接量关键字运算符语法语义语法与语义则是表达式语句、函数、对象、模块运行时类型对象数字字符串执行过程文法可以分成词法和语法,这来自编译原理的划分,同样是完备的。...原创 2020-01-22 18:48:07 · 194 阅读 · 0 评论 -
响应式 Web 设计(一)布局 及其 标签语义化
响应式 Web 设计响应式Web弹性网格布局、弹性图片/媒体、媒体查询所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。设计思路即先为小屏幕设计内容、样式,然后再向大屏幕扩展为什么不用 width:100% ?要实现图片的自动缩放,也可以使用更通用的 width 属性,比如width:100% 。然而,这条规则在这里的效果不同。如...原创 2019-11-24 23:51:17 · 441 阅读 · 0 评论 -
【建议收藏】Git操作与命令看这篇足矣
【建议收藏】Git操作与命令看这篇足矣一、创建与合并分支1、 从master分支创建dev分支并切换到dev分支git checkout mastergit checkout -b dev其中,git checkout -b dev 等价于:git branch devgit checkout dev(1)git branch查看本地当前的分支,分支前面带“*”表示当前分支,...原创 2019-11-22 11:28:25 · 146 阅读 · 0 评论 -
MongoDB:shutting down with code:100
MongoDB:shutting down with code:1002019-11-13T14:25:25.616+0800 I CONTROL [main] Automatically disabling TLS 1.0, to force-enable TLS 1.0 specify --sslDisabledProtocols 'none'2019-11-13T14:25:25.9...原创 2019-11-13 14:41:38 · 666 阅读 · 0 评论 -
Vue2.x ElementUI登录表单中加入验证码倒计时功能
Vue2.x ElementUI登录表单中加入验证码倒计时功能部分Vue代码如下:<el-form ref="loginForm" :model="loginForm" status-icon :rules="rules" class="login-form"> <el-form-item label="" prop="code" class="pr"> ...原创 2019-11-13 14:20:27 · 2110 阅读 · 6 评论 -
JS 基础小题
JS 基础小题const shape = { radius: 10, diameter() { return this.radius * 2 }, perimeter: () => 2 * Math.PI * this.radius}shape.diameter()shape.perimeter()// B: 20 and NaN注:对于箭头函数...原创 2019-11-05 20:43:50 · 222 阅读 · 0 评论 -
HTTP 方法:GET 对比 POST
HTTP 方法:GET 对比 POST什么是 HTTP?超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信。两种 HTTP 请求方法:GET 和 POST在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:GET 和 POST。GET - 从指定的资源请求数据。POST - 向指定的资源提交要被处理的数据GET 方法请注意,查询字符串(...原创 2019-09-08 22:20:56 · 99 阅读 · 0 评论 -
JS原型及其原型链(知识点及其面试题)
JS原型及其原型链(知识点及其面试题)构造函数//构造函数名 首位大写function Foo(name,age){ this.name = name this.age = age this.class = 'class01' //return this //默认执行这一行}//当new 这个函数执行的时候 this 变成空对象var f = new Foo('小明',25...原创 2019-08-27 23:55:24 · 2275 阅读 · 0 评论 -
前端JS面试题
前端JS面试题call 和 apply 的区别 是什么,哪一个性能更好一些?传参的区别call 是一个个传递apply是传递一个数组bind 是预先处理,但是不会立即执行但是 call 在基于ES6的展开运算符也可以将数组中的每一项传递给函数call apply 都是 Function 原型上面的方法,而每个函数作为 Function 的实例,可以调取其方法在...原创 2019-10-31 14:26:46 · 320 阅读 · 0 评论 -
数组扁平化
数组扁平化// 编写一个程序,将数组扁平化,并去除其中重复部分数据,// 最终得到一个升序而且不重复的数组let arr = [1,2,3,[4,5,6,7],[1,23,5,[1,2,3,45,5]],10]//方法一://使用 ES6 中提供的 Array.prototype.flat 处理//然后在使用 set 方法去除重复项arr = arr.flat(Infinity)...原创 2019-10-29 14:57:31 · 158 阅读 · 0 评论 -
深入javascript之原型和原型链
JS原型链你是如何理解原型 和原型链得?把所有对象共用得属性放在一个堆内存对象上(共用属性组成得对象),然后让每一个对象得_propto_ 存储这个【共用属性组成得对象】得地址,而这个公用属性就是原型原型得出现就是为了减少不必要得内存消耗,而原型链就是对象通过__proto__向当前实例所属类得原型上查找属性或方法得hi之,如果找到 Object 得原型上还是没有找到想要得属性或者方...原创 2019-10-28 21:09:14 · 293 阅读 · 0 评论 -
Vue生命周期
Vue生命周期生命周期的应用场景和函数式组件创建阶段beforeCreate : 初始化事件和生命周期 数据观测、属性、侦听器配置等create : 模板编译到renderbeforeMount ====== > rendermounted : 异步请求、操作DOM、定时器等更新阶段beforeUpdate : 依赖数据改变或 $forceUpdate ...原创 2019-10-28 21:01:54 · 391 阅读 · 0 评论 -
Vue
使用JQ 和 使用框架的区别数据和视图得分离,解耦(开放封闭原则 )以数据驱动视图,只关心数据变化,DOM 操作被封装对MVVM的理解及三大要素MVCVue 的三要素响应式:vue 如何监听到data 得每个属性变化?模板引擎:vue 的模板如何被解析,指令如何处理渲染:vue的模板如何被渲染成html?以及渲染过程Vue中怎么实现响应式什么是响应式修改da...原创 2019-10-28 20:49:35 · 104 阅读 · 0 评论 -
前端JS面试题总结
前端JS面试题总结你是如何理解原型 和原型链得?把所有对象共用得属性放在一个堆内存对象上(共用属性组成得对象),然后让每一个对象得_propto_ 存储这个【共用属性组成得对象】得地址,而这个公用属性就是原型原型得出现就是为了减少不必要得内存消耗,而原型链就是对象通过__proto__向当前实例所属类得原型上查找属性或方法得hi之,如果找到 Object 得原型上还是没有找到想要得属性或者...原创 2019-10-28 13:29:43 · 568 阅读 · 0 评论 -
BFC的作用及使用场景
BFC的作用及原理常见布局模式1、流动模型(Flow)自上而下按顺序垂直延伸分布从左到右水平分布显示2、浮动模型3、层模型层模型有三种形式:1、相对定位(position: relative)2、绝对定位(position: absolute)3、固定定位(position: fixed)BFC的基本概念BFC(Block formatting...原创 2019-10-19 15:26:06 · 388 阅读 · 0 评论 -
call、apply、bind作用、实现及详解
call、apply、bind作用、实现及详解它们有什么不同?怎么用?call 接收多个参数,第一个为函数上下文也就是this.后边参数为函数本身的参数let obj ={ name:'小猪头'}function printName(firstName, lastName,flag){ console.log(this) console.log(`第一个名字${firstNa...原创 2019-10-16 16:56:59 · 216 阅读 · 0 评论 -
React-生命周期
React-生命周期组件生命周期的三个阶段Mounting(加载阶段)Updating(更新阶段)Unmounting(卸载阶段)先来介绍一个生命周期的定义:componentWillMount(){}// Mounting 安装阶段 // 在客户端和服务器上,在初始渲染发生之前立即调用一次 如果在这个方法中调用setState,// render()将看到更新的状态,...原创 2019-10-15 15:22:33 · 118 阅读 · 0 评论 -
前端 ES6知识点总结
前端 ES6知识点总结ES6变量的解构赋值数组的解构赋值:简单的数组解构:let [a,b,c] = [1,2,3] //从数组中提取值,按照位置的对象关系对变量赋值。数组模式和赋值模式统一:let [a,[b,c],d]=[1,[2,3],4];//简单的理解为等号左边和等号右边的形式要统一,如果等号两边形式不一样,很可能获得undefined或者直接报错...原创 2019-10-15 14:40:20 · 269 阅读 · 0 评论 -
getDerivedStateFromProps 新的生命周期过程
getDerivedStateFromProps 新的生命周期过程先来看看最新版本react的生命周期图:getDerivedStateFromPropsReact生命周期的命名一直都是非常语义化的,这个生命周期的意思就是从props中获取state,可以说是太简单易懂了。可以说,这个生命周期的功能实际上就是将传入的props映射到state上面。由于16.4的修改,这个函数会在每次re...转载 2019-10-14 17:38:23 · 527 阅读 · 0 评论 -
ES5中的数组方法(二)
forEach()forEach()方法从头至尾遍历数组,为每个元素调用指定的函数。如上所述.传递的函数作为forEach()的第一个参数。然后forEach()使用三个参数调用该函数:数组元素、元素的索引和数组本身。如果只关心数组元紊的值,可以编写只有一个参数的函数—额外的参数将忽略:注意,forEach()无法在所有元紊都传递给调用的函数之前终止通历。也就是说,没有像for循环中使用的相...原创 2019-09-30 11:40:05 · 95 阅读 · 0 评论 -
JS数组及其方法(一)
JS数组及其方法join()Array.join()方法将数组中所有元素都转化为字符串并连接在一起.返回最后生成的字符串。可以指定一个可选的宇符串在生成的字符申中来分隔数组的各个元素.如果不指定分隔符,默认使用逗号。如以下代码所示:Array.join()方法是String.split()方法的逆向操作,后者是将字符串分割成若干块来创建一个数组。reverse()Array. re...原创 2019-09-30 11:17:48 · 296 阅读 · 0 评论 -
Promise 对象(一)
Promise 对象-Promise 对象俩个特点(1)对象的状态不受外界影响,只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。三种状态:pending(进行中)fulfilled (已成功) //resolved()rejected(已失败)//rejected()(2) 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Prom...原创 2019-09-28 19:09:16 · 82 阅读 · 0 评论 -
JS中的同步与异步
JS中的同步与异步一、JS中同步异步编程浏览器是多线程,JS是单线程的(浏览器只分配一个线程来执行JS)进程大线程小:一个进程中包含多个线程,例如在浏览器中打开一个HTML页面就占用了一个进程,加载页面的时候,浏览器分配一个线程去计算DOM树,分配其他的线程去加载 对应的资源文件。。。在分配一个线程去自上而下执行JS同步:在一个线程上(主栈/主任务队列)同一个时间只能做一件事情,当前事...原创 2019-09-28 16:07:17 · 182 阅读 · 0 评论 -
React-redux框架之connect()与Provider组件 用法讲解
React-redux框架之connect()与Provider组件 用法讲解React-Redux 将所有组件分成两大类:UI 组件(presentational component)和容器组件(container component)。最常用得俩个APIconnect()Provider 组件UI 组件只负责页面的渲染没有状态所有的数据都有参数(this.props)提供...原创 2019-09-27 20:54:21 · 354 阅读 · 0 评论 -
React16.9配置支持Less文件的开发环境
React16.9配置支持Less文件的开发环境基于脚手架 create-react-app 快速构建一个react 工程项目结构自动安装react 的核心组件 : REACT / REACT-DOM自动安装webpack ,并且完成相关的配置【使用脚手架】npm install create-react-app -g 把脚手架安装到全局环境下,以后应用命令操作,完...原创 2019-09-25 16:03:47 · 230 阅读 · 0 评论