自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

余百炼的博客

关于前端开发的那些事儿

  • 博客(49)
  • 收藏
  • 关注

原创 Vue 模板编译原理

关于 Vue 编译原理这块的整体逻辑主要分三个部分,也可以说是分三步,这三个部分是有前后关系的: 第一步是将 模板字符串 转换成 element ASTs(解析器) 第二步是对 AST 进行静态节点标记,主要用来做虚拟DOM的渲染优化(优化器) 第三步是 使用 element ASTs 生成 render 函数代码字符串(代码生成器) 来源于:http:/...

2019-03-19 21:16:37 1755

原创 讲一讲JS 能表示的最大数值及JS Number类型数字位数及IEEE754标准

JS的基础类型Number,遵循IEEE 754规范,采用双精度存储(double precision),占用 64 bit。如图意义1位用来表示符号位 11位用来表示指数 52位表示尾数浮点数,比如 1 2 0.1 >> 0.0001 1001 1001 1001…(1001无限循环) 0.2 >...

2019-03-16 14:14:38 18163

原创 js中是如何存储一个数据的??

一个很基础的知识点,JavaScript中基本数据类型和引用数据类型是如何存储的。由于自己是野生程序员,在刚开始学习程序设计的时候没有在意内存这些基础知识,导致后来在提到“什么什么是存在栈中的,栈中只是存了一个引用”这样的话时总是一脸懵逼。。后来渐渐的了解了一些内存的知识,这部分还是非常有必要了解的。基本数据结构栈栈,只允许在一段进行插入或者删除操作的线性表,是一种先进后出的数...

2019-03-15 22:39:16 3934

原创 最详细精简的来讲解JS浏览器事件循环机制

先来明白些概念性内容。进程、线程 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的。 线程是进程的执行流,是CPU调度和分派的基本单位,同个进程之中的多个线程之间是共享该进程的资源的。 浏览器内核 浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签会合并成一个进程),浏览器内核...

2019-03-14 20:44:01 783

原创 1.什么是vue生命周期?有什么作用?

1.什么是vue生命周期?有什么作用?每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数,这给了用户在不同阶段添加自己的代码的机会。(ps:生命周期钩子就是生命周期函数)例如,如果要通过某些插件操作DOM节点,如想在页面渲染完后弹出广告窗, 那我们...

2019-02-23 20:54:27 17734 5

原创 CSS Sprites

 1.简介CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。2.优点(1)CSS Sprites能很好地减少网...

2019-02-16 11:34:08 127

原创 关于js的replace方法的一些说明

在从后台的数据获取起止时间来计算天数的时候,碰到的Data格式如下:{ "result": true, "data": [ { "_id": "5bac9173b8be3f63b9e121ce", "name": "产品实习生", "employeeKind": "实习", &qu

2018-12-30 09:45:20 284

原创 关于ajax传递函数参数的问题

今天做网页的时候,想ajax在success后执行我自己写的一个函数,于是我传值如下: var ajx=function(func){ var url="http://www.rulertech.com:3000/api/getAllOfferJobs"; $.ajax({ url: url, ...

2018-12-30 09:30:26 458

转载 querySelectorAll与querySelector的区别:

    querySelectorAll : 找出所有匹配的节点并返回数组.    querySelector : 找到一个后就返回节点对象。1、querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。 2、querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)。 3、返回的结果是静态的,之后对document结构...

2018-12-22 21:44:50 701

原创 面试问题之刷新页面后,你用来保存数据的全局变量里面的数据不见了怎么办?

面试官:你刚刚说你用一个全局变量来保存了上一次向服务器发送请求时返回的数据,以避免在发生相同的请求时,重复请求服务器,那么我想问,如果页面刷新了数据会怎么办?我:嗯。。。没想过这个问题面试官:我告诉你,上一次请求所保存的数据都会消失哦,那么你有什么办法来解决这个问题呢?、我:。。。。正确回答:刷新页面,所有的变量都会被初始化。如果你要保留数值,你可以利用H5的本地存储(locals...

2018-12-22 21:34:44 2565 1

原创 面试问题之电商网站中购物车如何实现一键全选或者一键全不选功能??

答案是遍历checklist,修改checkbox的状态;那么有哪些方法可以遍历checklist呢??html代码如下: <div> <input type="checkbox" name="ckb" value="1" />1 <input type="checkbox.

2018-12-16 22:17:52 1294 1

原创 面试问题之事件委托的原理

        今天面试问到的问题,你能说一下事件委托的原理吗?我就有点无法口述清楚了,回来以后好好梳理一下发现,如果说要讲清楚事件委托的原理,还是要追溯到事件源,即event.target,那么我先来讲一下事件源吧。事件源是什么???      在事件中,当前操作的那个元素就是事件源。比如网页元素中a标签和input都有onclick事件,当点击a发生onclick事件时,事件源就是a标...

2018-12-14 23:10:40 3355 1

原创 谈一谈你对B端产品的看法?

今天面试,hr提到了这个问题,说实话我有点懵,因为我不是很了解B端C端的概念,我回来就查了一下,我觉得知乎上的这个回答讲的比较好:https://www.zhihu.com/question/36016196...

2018-12-13 19:05:11 1434

转载 什么是MVVM?MVC和MVVM的区别又是什么,MVVM框架之VUE的实现原理是什么?

1. MVVM定义:        MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。      【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。      【视图模型】有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是...

2018-12-11 15:26:52 799 1

原创 箭头函数的四不行

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。 ...

2018-12-11 11:08:47 710

原创 background-attachment的使用事项

background-attachment :定义背景图片随滚动轴的移动方式 取值: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 inherit: 继承初始值: scroll 继承性: 否 适用于: 所有元素background-origin 属性规定 background-position ...

2018-12-06 22:05:36 603

原创 一句话让你知道什么是置换元素

a) 置换元素:       浏览器根据元素的标签和属性,来决定元素的具体显示内容。       例如:浏览器会根据<img>标签的src属性的 值来读取图片信息并显示出来,而如果查看html代码,则看不到图片的实际内容;<input>标签的type属性来决定是显示输入 框,还是单选按钮等。 html中 的<img>、<input>、&l...

2018-12-06 22:00:36 3566

原创 使用inline-block后,高度出现Bug

在做一个小demo时候,出现虽然已经设置了height为44px;但是在浏览器上高度明显不对,经过查阅知道是inline-block元素存在的bug导致。这篇文章对于这个问题给出了很多解决办法:https://segmentfault.com/a/1190000010934928我的bug:解决办法: ...

2018-12-03 17:14:51 1161

原创 如何预览Github上的自己做的网站页面

第一步:点进settings第二步:       到达setting页面后,向下滚动,找到 GitHub Pages 功能,点击master branch,并save,此时网页会刷新,往下拉到 GitHub Pages 版块,会得到一个「预览地址」,我的「预览地址」是https://yubailian123.github.io/Hanke-dog/,打开这个地址,你会发现是你的RE...

2018-12-01 17:36:44 1662

原创 git如何解决failed to push some refs to git

请跳转https://jingyan.baidu.com/article/f3e34a12a25bc8f5ea65354a.html

2018-11-30 20:19:23 418

原创 前端组件化开发和模块化开发的区别

前端组件化开发和模块化开发的区别         首先,组件化和模块化的意义都在于实现了分治,目前我们开发的项目复杂度不断的上升,早已不是我们一个人能完成的工作,团队合作的话又会产生配合困难等各方面问题,组件化和模块化便应运而生,结合webpack,glup,grunt等代码混淆工具,完成代码压缩,混淆的工作。区别:组件是具体的:按照一些小功能的通用性和可复用性来抽象组件组件化更多的...

2018-11-29 22:15:18 5471

原创 关于HTML5中<template>标签的一些特点以及使用方法介绍

下面两个链接合起来看会清楚,阅读顺序先1后2:1.https://www.cnblogs.com/hanguidong/p/9381317.html2.https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template

2018-11-27 20:21:42 919

原创 关于页面渲染原理

主流的Webkit内核浏览器(Safiri)和Gecko内核浏览器(FireFox)在渲染引擎的具体步骤上有些不同,但是大致的原理如下图:                 1.浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象。DOM树里包含了所有HTML标签,包括display:none隐藏...

2018-11-27 10:46:52 887

转载 ES6关于Promise的用法

Node的产生,大大推动了Javascript这门语言在服务端的发展,使得前端人员可以以很低的门槛转向后端开发。当然,这并不代表迸发成了全栈。全栈的技能很集中,绝不仅仅是前端会写一些HTML和一些交互,后台熟悉数据库的增删查改。想必接触过Node的人都知道,Node是以异步(Async)回调著称的,其异步性提高了程序的执行效率,但同时也减少了程序的可读性。如果我们有几个异步操作,并且后一个...

2018-11-26 11:19:42 115

转载 js的 new image()用法

创建一个Image对象:var a=new Image();    定义Image对象的src: a.src=”xxx.gif”;    这样做就相当于给浏览器缓存了一张图片。图像对象:建立图像对象:图像对象名称=new Image([宽度],[高度])图像对象的属性: border complete height hspace lowsrc name src vspace width...

2018-11-26 10:30:35 67129 3

原创 用git添加文件时候遇到的warning: LF will be replaced by CRLF in

今天在用git添加我的一个小练习时,弹出一个warning如下:百度到解决办法:1、删掉刚刚创建的.git文件夹rm -rf .git2、把core.autocrlf 设置成falsegit config --global core.autocrlf false3、重新加入git git add 然后又出现一个fatal如下: 继续百度,解决办法...

2018-11-25 11:45:21 457

原创 浏览器从输入URL到渲染完页面的整个过程是怎么样的?

        浏览器的主要功能是将用户选择的web资源呈现出来,它从服务器请求资源,并将得到的资源(HTML,PDF,image等等)显示在浏览器窗口。那么从用户敲入URL到完整渲染出来,经历了什么过程呢?也就是说整个浏览器的工作流程是怎样的呢?整个过程大致如下:       1. 输入URL,浏览器根据域名寻找IP地址       2. 浏览器发送一个HTTP请求给服务器,如果服务器...

2018-11-25 10:09:40 4638 2

原创 ES6中对象扩展的关键字super

super关键字用来访问到对象的原型:const obj = {name:'xiaoming'};const cObj = { say() { // 注意此处只能用对象的简写方式才能访问, //若此处用say:function () 或者箭头函数,均会报错 console.log(`My name is $(super.name)`);}...

2018-11-24 23:08:23 134

原创 es6中扩展运算符在函数参数的运用以及箭头函数的一点知识

1、利用扩展运算符将函数的arguments类数组对象转换成数组:  function sum() { // let args = Array.prototype.slice.call(arguments); (传统方法) // let args = [...arguments]; let [...args] = arguments; console.log(args)...

2018-11-23 16:12:57 1738 3

原创 如何向Github README.md中添加图片

1.先把图片上传到你的项目中;然后在github网站上按路径打开图片,如下打开的图片链接: 2.复制图片的地址然后在README.md写上:![这里随便写文字](你刚复制的图片路径)注意  上面的感叹号和中括号和小括号之间不能有空格(都是英文状态下的)然后保存就能看到下面的效果,赶快试试吧: ...

2018-11-22 20:44:17 140 2

原创 prototype与__proto__区别

__proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!!使用Object.getPrototypeOf()代替__proto__!!!一、prototype几乎所有的函数(除了一些内建函数)都有一个名为prototype(原型)的属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以有特定类型的所有实例共享的属性和方法。prototype是通过调...

2018-11-17 20:52:05 196

原创 js中的短路操作符||与&&用法

1、||(逻辑或)只有前后都是false的时候才返回false,否则返回true。alert(2||1);//2前面2是true,后面1也是true,结果是2,alert('a'||1);//'a'前面'a'是true,后面1也是true;测试结果是'a',alert(''||1);//1前面”是false,后面1是true,而返回结果是1。alert('a'||0...

2018-11-05 22:41:01 1113

原创 关于phpstorm创建新文件和引用的问题

今天在做一个小demo遇到一个问题,用的是phpstorm,我打算通过后台来访问到json文本文档的数据,但是屡次遇到后台报错:以下是我创建文件的流程和控制台报错的结果:第一步:创建新json数据文件名:第二步:选择要创建的文件类型(此处我选择text):第三步:后台对其进行获取然后打开浏览器,通过前端向后台请求数据,控制台报错:后来我手动到相对应的文件夹中去创...

2018-10-26 21:21:54 3639

原创 字符串正则替换replace第二个参数是函数的问题

按照JS高程的说法,如下  replace()方法的第二个参数也可以是一个函数。在只有一个匹配项(即与模式匹配的字符串)的情况下,会向这个函数传递3个参数:模式的匹配项、模式匹配项在字符串中的位置和原始字符串。在正则表达式中定义了多个捕获组的情况下,传递给函数的参数依次是模式的匹配项、第一个捕获组的匹配项、第二个捕获组的匹配项......,但最后两个参数仍然分别是模式的匹配项在字符串中的位置和...

2018-10-19 21:14:17 518

原创 用正则表达式匹配HTML标签

&lt;script&gt; //匹配HTML标签 方法一: var str = '&lt;p class="odd" id="odd"&gt;123&lt;/p&gt;'; var pattern = /&lt;\/?[a-zA-Z]+(\s+[a-zA-Z]+=".*")*&gt;/g; console.log(str.match(pattern)); 方

2018-10-18 20:16:50 52051 1

翻译 js中string之正则表达式replace方法详解

本篇文章主要介绍了js中string之正则表达式replace方法详解,replace方法是javascript涉及到正则表达式中较为复杂的一个方法,严格上说应该是string对象的方法。replace方法是javascript涉及到正则表达式中较为复杂的一个方法,严格上说应该是string对象的方法。只不过牵扯到正则的时候比较多一些。需要我们灵活的使用。语法: stringObj.rep...

2018-10-18 19:20:12 1779

翻译 为什么原型链的终点是null,而不是Object.prototype?

首先要明确一点,原型链是指对象的原型链,所以原型链上的所有节点都是对象,不能是字符串、数字、布尔值等原始类型。另外,规范要求原型链必须是有限长度的(从任一节点出发,经过有限步骤后必须到达一个终点。显然也不能有环。)那么,应该用什么对象作为终点呢?很显然应该用一个特殊的对象。好吧,Object.prototype确实是个特殊对象,我们先假设用它做终点。那么考虑一下,当你取它的原型时应该怎...

2018-10-12 23:00:17 8425 3

转载 js对象属性 通过点(.) 和 方括号([]) 的不同之处

1.0javascript访问对象属性有两种方法,第一是点符号法,第二是方括号表示法,括号之间的值可以是任何表达式。因此,如果属性名称存储在变量中,则可以使用括号表示法。在javascript中,我们使用以下两种方法访问对象属性:点符号 - foo.bar 方括号 - foo[someVar]或foo["string"]但只有第二种情况允许动态访问属性:var foo = {...

2018-10-09 15:46:52 2973 1

原创 canvas手势解锁遇到的关于js匿名函数的问题

今天在用canvas写一个手势解锁的项目中,遇到一个问题,尽管我已经在js中声明了一个全局函数,但是没有效果,打开控制台后一直报错如下:     绕了很大一圈,发现我和源码就是在函数最后面缺少一个“();”,下面是源码,(function(){ window.canvasLock = function(obj){ this.heigh...

2018-09-30 13:12:08 176

原创 你不得不知道的设置canvas画布的宽和高的坑

在html和js中设置canvas的width和height,就是画布的大小,但是在css里设置canvas的width和height是画布被拉伸之后的大小,谨记勿忘!

2018-09-26 14:59:26 7436 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除