博客园 - 卑微小陈的随笔
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=34983
2021-08-11T05:47:52Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
feed.cnblogs.com
https://www.cnblogs.com/hmchen/p/14502437.html
小程序分享海报绘制神器 - Painter - 卑微小陈的随笔
由于最近接触到商务类型的小程序开发较多,其中必不可少的一个功能就是小程序分享海报的绘制,海报绘制无非就是将元素在 canvas 上绘制并生成图片,常用的方法有 Wxml2Canvas 及 Painter。由于 Wxml2Canvas 的局限性较大,而且绘制出来的效果比较一般,如果较为简单的海报可以尝
2021-03-08T13:38:00Z
2021-03-08T13:38:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】由于最近接触到商务类型的小程序开发较多,其中必不可少的一个功能就是小程序分享海报的绘制,海报绘制无非就是将元素在 canvas 上绘制并生成图片,常用的方法有 Wxml2Canvas 及 Painter。由于 Wxml2Canvas 的局限性较大,而且绘制出来的效果比较一般,如果较为简单的海报可以尝 <a href="https://www.cnblogs.com/hmchen/p/14502437.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/14003114.html
利用js在最大程度减少回流的情况下,对列表各项进行修改(createDocumentFragment的使用) - 卑微小陈的随笔
最近遇到一个题目,大致如下:假设有一个Todo-List,共有1000项数据,假设里面有100条数据已经过期,需要在后面添加上"已过期"字样,如何实现,怎样才能最大程度的减少回流的发生? 刚拿到题目的时候我就在想,这不是挺简单的吗,遍历一遍数据列表,在已过期的数据后面插入一个absolute的spa
2020-11-18T16:30:00Z
2020-11-18T16:30:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】最近遇到一个题目,大致如下:假设有一个Todo-List,共有1000项数据,假设里面有100条数据已经过期,需要在后面添加上"已过期"字样,如何实现,怎样才能最大程度的减少回流的发生? 刚拿到题目的时候我就在想,这不是挺简单的吗,遍历一遍数据列表,在已过期的数据后面插入一个absolute的spa <a href="https://www.cnblogs.com/hmchen/p/14003114.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/13934623.html
使用js实现列表无限循环滚动 - 卑微小陈的随笔
最近的业务有涉及到需要将列表做成无限循环滚动,即第一个element滚出边界之后需要自动跳到队尾,参与下一轮滚动,达到无限滚动的效果。 最终实现效果如上图所示,下面讲一下思路。 // js <div class="scroll-container"> <div v-for="index in 8"
2020-11-05T15:27:00Z
2020-11-05T15:27:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】最近的业务有涉及到需要将列表做成无限循环滚动,即第一个element滚出边界之后需要自动跳到队尾,参与下一轮滚动,达到无限滚动的效果。 最终实现效果如上图所示,下面讲一下思路。 // js <div class="scroll-container"> <div v-for="index in 8" <a href="https://www.cnblogs.com/hmchen/p/13934623.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/13192282.html
Storybook for vue - 前端ui组件管理神器 - 卑微小陈的随笔
一、简介 Storybook是一款开源的组件开发工具,它可以运行在主程序之外,因此开发者可以用它来独立开发UI组件,或者用它来快速构建ui组件文档。 目前Storybook支持的框架有: React React Native Vue Angular Marionette.js Mithril Mar
2020-06-25T11:38:00Z
2020-06-25T11:38:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】一、简介 Storybook是一款开源的组件开发工具,它可以运行在主程序之外,因此开发者可以用它来独立开发UI组件,或者用它来快速构建ui组件文档。 目前Storybook支持的框架有: React React Native Vue Angular Marionette.js Mithril Mar <a href="https://www.cnblogs.com/hmchen/p/13192282.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/12692721.html
JavaScript常用的数组操作方法以及ES6中数组新拓展的方法 - 卑微小陈的随笔
前几天面试的时候被面试官问了这个问题,愣了一下,突然没反应过来哪些操作方法是ES5哪些是ES6的(平时用得比较少,记得不是很牢),后面在面试官的提醒下才说出了map和filter。今天就稍微总结一下在JavaScript中数组的操作方法吧。 一、ES6中数组新增的操作方法 1. 数组解构运算符(sp
2020-04-13T09:30:00Z
2020-04-13T09:30:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】前几天面试的时候被面试官问了这个问题,愣了一下,突然没反应过来哪些操作方法是ES5哪些是ES6的(平时用得比较少,记得不是很牢),后面在面试官的提醒下才说出了map和filter。今天就稍微总结一下在JavaScript中数组的操作方法吧。 一、ES6中数组新增的操作方法 1. 数组解构运算符(sp <a href="https://www.cnblogs.com/hmchen/p/12692721.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/12679123.html
原型对象、原型、原型链以及原型链继承 - 卑微小陈的随笔
一、什么是原型对象 首先明确一下定义,每个函数都会有它的原型对象,也就是prototype,这是在函数创建的时候浏览器会根据一定规则自动生成的。看下图: 可以看到,函数的prototype里面包含一个construction,它会指向函数本身。另外一个__proto__,也就是我们下面将会讲到的原型
2020-04-11T05:16:00Z
2020-04-11T05:16:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】一、什么是原型对象 首先明确一下定义,每个函数都会有它的原型对象,也就是prototype,这是在函数创建的时候浏览器会根据一定规则自动生成的。看下图: 可以看到,函数的prototype里面包含一个construction,它会指向函数本身。另外一个__proto__,也就是我们下面将会讲到的原型 <a href="https://www.cnblogs.com/hmchen/p/12679123.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/12676736.html
vue生命周期(lifecycle)以及对nextTick的理解 - 卑微小陈的随笔
每个Vue实例在被创建的时候,都会经历一系列初始化的过程。比如说需要设置数据监听、模板编译、将实例挂载到DOM结构上并且在数据变化时对DOM结构进行更新等等。Vue允许开发者在不同的生命周期运行一些钩子函数(hook),给开发者在不同的生命周期中添加自己代码的机会。所有的生命周期钩子自动绑定 thi
2020-04-10T15:11:00Z
2020-04-10T15:11:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】每个Vue实例在被创建的时候,都会经历一系列初始化的过程。比如说需要设置数据监听、模板编译、将实例挂载到DOM结构上并且在数据变化时对DOM结构进行更新等等。Vue允许开发者在不同的生命周期运行一些钩子函数(hook),给开发者在不同的生命周期中添加自己代码的机会。所有的生命周期钩子自动绑定 thi <a href="https://www.cnblogs.com/hmchen/p/12676736.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/12630116.html
浅谈MVC、MVP、MVVM模型 - 卑微小陈的随笔
在学习vue、react的过程中,总能看到MVVM模型,那么MVVM究竟是什么,下面将我最近看到的资料以及自己的想法总结一下。 与MVVM相似的,还有MVC、MVP,先从MVC、MVP这两个入手,方面后面对MVVM的理解。 一、 MVC M:Model,即模型,也可以理解为数据层,用于封装数据以及数
2020-04-03T17:22:00Z
2020-04-03T17:22:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】在学习vue、react的过程中,总能看到MVVM模型,那么MVVM究竟是什么,下面将我最近看到的资料以及自己的想法总结一下。 与MVVM相似的,还有MVC、MVP,先从MVC、MVP这两个入手,方面后面对MVVM的理解。 一、 MVC M:Model,即模型,也可以理解为数据层,用于封装数据以及数 <a href="https://www.cnblogs.com/hmchen/p/12630116.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/11765127.html
html5新增的语义化标签极其作用 - 卑微小陈的随笔
在html5中,新增了几个语义化标签:<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>等。 1.什么是HTML语义化? 通过标签判断内容语义,例如根据h
2019-10-30T07:19:00Z
2019-10-30T07:19:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】在html5中,新增了几个语义化标签:<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>等。 1.什么是HTML语义化? 通过标签判断内容语义,例如根据h <a href="https://www.cnblogs.com/hmchen/p/11765127.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/11762217.html
用JavaScript来实现单例模式 - 卑微小陈的随笔
首先,了解一下什么是单例模式,这里我直接把菜鸟教程中的定义给copy过来: 用一句话来总结就是:在单例模式中,一个类仅有一个实例,并提供一个访问它的全局访问点。这无非是用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象,在JavaScript我
2019-10-29T15:03:00Z
2019-10-29T15:03:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】首先,了解一下什么是单例模式,这里我直接把菜鸟教程中的定义给copy过来: 用一句话来总结就是:在单例模式中,一个类仅有一个实例,并提供一个访问它的全局访问点。这无非是用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象,在JavaScript我 <a href="https://www.cnblogs.com/hmchen/p/11762217.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/11718750.html
函数节流和防抖 - 卑微小陈的随笔
一、函数节流 所谓节流,就是控制某个函数在某一时间内,只能执行一次。应用场景一般是在拉动滚动条进行懒加载,为了防止过度请求,所以加上节流控制,防止服务器过载。 知道其原理之后,我们就可以思考一下如何进行节流。“某一时间内只能执行一次该函数”,那么我们自然而然就会想到一个函数,setTimeout()
2019-10-22T03:24:00Z
2019-10-22T03:24:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】一、函数节流 所谓节流,就是控制某个函数在某一时间内,只能执行一次。应用场景一般是在拉动滚动条进行懒加载,为了防止过度请求,所以加上节流控制,防止服务器过载。 知道其原理之后,我们就可以思考一下如何进行节流。“某一时间内只能执行一次该函数”,那么我们自然而然就会想到一个函数,setTimeout() <a href="https://www.cnblogs.com/hmchen/p/11718750.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/11708040.html
块级元素和行内元素 - 卑微小陈的随笔
一、块级元素和行内元素的区别 (1)块级元素会独占一行,其宽度自动填满其父元素宽度; 行内元素不会独占一行,相邻的行内元素会排列在同一行,直至一行排不下才会换行,其宽度随元素的内容而变化。 (2)块级元素可以包含行内元素和块级元素;行内元素不能包含块级元素。 (3)行内元素设置width、heigh
2019-10-20T08:41:00Z
2019-10-20T08:41:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】一、块级元素和行内元素的区别 (1)块级元素会独占一行,其宽度自动填满其父元素宽度; 行内元素不会独占一行,相邻的行内元素会排列在同一行,直至一行排不下才会换行,其宽度随元素的内容而变化。 (2)块级元素可以包含行内元素和块级元素;行内元素不能包含块级元素。 (3)行内元素设置width、heigh <a href="https://www.cnblogs.com/hmchen/p/11708040.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/11676600.html
JavaScript中new运算符的实现 - 卑微小陈的随笔
废话不多说直接进入正题,首先我们需要先知道new运算符到底做了哪些事情,再来模拟它实现这一功能。 1. 建立一个空的Object对象; 2. 把这个空对象用__proto__链接到原型 3. 用apply绑定对象的this指向 4. 返回新的对象 知道了new的具体过程之后,我们就可以来试一下用代码
2019-10-15T03:26:00Z
2019-10-15T03:26:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】废话不多说直接进入正题,首先我们需要先知道new运算符到底做了哪些事情,再来模拟它实现这一功能。 1. 建立一个空的Object对象; 2. 把这个空对象用__proto__链接到原型 3. 用apply绑定对象的this指向 4. 返回新的对象 知道了new的具体过程之后,我们就可以来试一下用代码 <a href="https://www.cnblogs.com/hmchen/p/11676600.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/11671445.html
关于广度优先查找和深度优先查找 - 卑微小陈的随笔
由于最近在做的项目中设计到了虚拟dom的设计,那自然就避免不了需要对虚拟dom中的节点进行遍历/查找了,一般来说查找节点无非就两种方法 - 广度优先查找和深度优先查找,这跟我们在数据结构中学习到的树的遍历其实是一样的。ok,废话不多说,讲一下我对这两种查找方法的理解吧。 首先广度优先查找,BFS,它
2019-10-14T06:48:00Z
2019-10-14T06:48:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】由于最近在做的项目中设计到了虚拟dom的设计,那自然就避免不了需要对虚拟dom中的节点进行遍历/查找了,一般来说查找节点无非就两种方法 - 广度优先查找和深度优先查找,这跟我们在数据结构中学习到的树的遍历其实是一样的。ok,废话不多说,讲一下我对这两种查找方法的理解吧。 首先广度优先查找,BFS,它 <a href="https://www.cnblogs.com/hmchen/p/11671445.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/11564555.html
常考面试题之两个字符串相加(长整数相加) - 卑微小陈的随笔
无论你面试的是什么岗位,应该都或多或少看到过这个问题 - 两个长整数相加要怎么实现。如果a和b的位数不大,确实直接用类型转换就可以求出a+b了,但是万一a和b的位数都是几百位呢,早就溢出了,这时候要怎么计算呢? 这种情况下,有三种解决方法可供选择: 一、 用字符串来存储a和b的值; 二、 用数组来存
2019-09-21T12:49:00Z
2019-09-21T12:49:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】无论你面试的是什么岗位,应该都或多或少看到过这个问题 - 两个长整数相加要怎么实现。如果a和b的位数不大,确实直接用类型转换就可以求出a+b了,但是万一a和b的位数都是几百位呢,早就溢出了,这时候要怎么计算呢? 这种情况下,有三种解决方法可供选择: 一、 用字符串来存储a和b的值; 二、 用数组来存 <a href="https://www.cnblogs.com/hmchen/p/11564555.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/11564394.html
浅谈函数柯里化 - 卑微小陈的随笔
关于函数柯里化的定义,我摘抄一段来自百度百科的原话:在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。 这段话听起来可能有一些抽象,但是如果用实际例子来解释可能会帮助我们更好地理解何为
2019-09-21T12:04:00Z
2019-09-21T12:04:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】关于函数柯里化的定义,我摘抄一段来自百度百科的原话:在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。 这段话听起来可能有一些抽象,但是如果用实际例子来解释可能会帮助我们更好地理解何为 <a href="https://www.cnblogs.com/hmchen/p/11564394.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/11397171.html
浅拷贝和深拷贝 - 卑微小陈的随笔
在介绍浅拷贝和深拷贝的区别之前,先看一个例子,或许可以方便我们理解: 其中,example 1 和 example 2 就是我们平时用得最多的拷贝,也就是浅拷贝。 ps:由于浅拷贝和深拷贝一般都是针对于对象以及数组而言的,example 1 只用于对比。 通过上面的 example 2 我们可以看到
2019-08-22T14:09:00Z
2019-08-22T14:09:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】在介绍浅拷贝和深拷贝的区别之前,先看一个例子,或许可以方便我们理解: 其中,example 1 和 example 2 就是我们平时用得最多的拷贝,也就是浅拷贝。 ps:由于浅拷贝和深拷贝一般都是针对于对象以及数组而言的,example 1 只用于对比。 通过上面的 example 2 我们可以看到 <a href="https://www.cnblogs.com/hmchen/p/11397171.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/11390274.html
前端面试经典题之ES6新特性 - 卑微小陈的随笔
ES6 主要是为了解决 ES5 的先天不足,在原先ES5的基础上新增了许多内容,本篇文章将列举出ES6中新增的10大特性。 一、 let 和 const 与var不同,let和const都是用于命名局部变量,都是块级作用域。具体可参考阮一峰老师的文章:http://es6.ruanyifeng.co
2019-08-21T16:01:00Z
2019-08-21T16:01:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】ES6 主要是为了解决 ES5 的先天不足,在原先ES5的基础上新增了许多内容,本篇文章将列举出ES6中新增的10大特性。 一、 let 和 const 与var不同,let和const都是用于命名局部变量,都是块级作用域。具体可参考阮一峰老师的文章:http://es6.ruanyifeng.co <a href="https://www.cnblogs.com/hmchen/p/11390274.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/11311420.html
前端面试经典题之apply与call的比较 - 卑微小陈的随笔
在讲apply和call之前,我们需要先清楚在js中,this指向的是什么。 大家可以参考一下阮一峰老师写的关于JavaScript中this的原理讲解文章:http://www.ruanyifeng.com/blog/2018/06/javascript-this.html 关于apply和cal
2019-08-08T03:11:00Z
2019-08-08T03:11:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】在讲apply和call之前,我们需要先清楚在js中,this指向的是什么。 大家可以参考一下阮一峰老师写的关于JavaScript中this的原理讲解文章:http://www.ruanyifeng.com/blog/2018/06/javascript-this.html 关于apply和cal <a href="https://www.cnblogs.com/hmchen/p/11311420.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/hmchen/p/11298612.html
前端面试经典题之从输入地址到页面加载过程中发生了什么 - 卑微小陈的随笔
从用户输入地址到浏览器加载界面,主要过程如下: DNS解析 TCP连接 发送HTTP请求 服务器接收请求并响应 浏览器解析并进行渲染 连接结束 下面进行具体过程分析 一、 DNS解析 通俗地来讲,DNS解析就是讲用户输入的站点地址解析成服务器所在的ip地址。用户在浏览器中输入的地址并不是该域名真正意
2019-08-05T16:39:00Z
2019-08-05T16:39:00Z
卑微小陈的随笔
https://www.cnblogs.com/hmchen/
【摘要】从用户输入地址到浏览器加载界面,主要过程如下: DNS解析 TCP连接 发送HTTP请求 服务器接收请求并响应 浏览器解析并进行渲染 连接结束 下面进行具体过程分析 一、 DNS解析 通俗地来讲,DNS解析就是讲用户输入的站点地址解析成服务器所在的ip地址。用户在浏览器中输入的地址并不是该域名真正意 <a href="https://www.cnblogs.com/hmchen/p/11298612.html" target="_blank">阅读全文</a>