- 博客(90)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 js公共函数，自己在工作中接触到（遇到就及时更新）
数组按指定顺序排列var objs = [ {name: 'A', type: 'fly'}, {name: 'B', type: 'blur'}, {name: 'C', type: 'wipe'}, {name: 'D', type: 'cube'}, {name: 'B', type: 'zoom'}, {name: 'C', type: 'cube'}, {name: 'E', type: 'iris'}, {name: 'F',
2021-03-25 16:17:14
480
5
原创 请注意查收您要的常见HTTP状态码（分类详细，简洁易懂！！！）
HTTP状态码HTTP状态码（英语：HTTP Status Code）是用以表示网页服务器超文本传输协议响应状态的3位数字代码。它由 RFC 2616 规范定义的，并得到 RFC 2518、RFC 2817、RFC 2295、RFC 2774 与 RFC 4918 等规范扩展。所有状态码的第一个数字代表了响应的五种状态之一。所示的消息短语是典型的，但是可以提供任何可读取的替代方案。 除非另有说明...
2020-05-05 14:59:38
600
原创 一张图让您看懂git，看不懂我也没办法了。。。。。。。。
Git是什么？Git是目前世界上最先进的分布式版本控制系统（没有之一）。Git有什么特点？简单来说就是：高端大气上档次！那什么是版本控制系统？如果你用Microsoft Word写过长篇大论，那你一定有这样的经历：想删除一个段落，又怕将来想恢复找不回来怎么办？有办法，先把当前文件“另存为……”一个新的Word文件，再接着改，改到一定程度，再“另存为……”一个新文件，这样一直改下...
2019-12-02 15:34:21
742
原创 面试看这里！！！2020年前端面试知识点（持续更新）
this指向：a.如果是一般函数,this指向全局对象window;b.在严格模式下"use strict",为undefined.c.对象的方法里调用,this指向调用该方法的对象.d.构造函数里的this,指向创建出来的实例.改变this指向：（call，apply，bind）call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第...
2019-10-21 16:55:14
789
1
原创 2020年12月TypeScript平均工资上涨后，TS 核心概念梳理
8月20日，TypeScript 4.0 正式发布了(Announcing TypeScript 4.0)，虽然没有重大的变更和特性，可以看做是 3.9 版本正常迭代，不过 Daniel 也在公告中说了：对于初学者而言，现在是最好的上手时机。In fact, if you’re new to the language, now is the best time to start using it.确实 TS 在经过了几年的发展后，使用 TS 的团队也越来越多，更重要的是 TS 的生态越来越完备，..
2022-10-31 17:49:34
311
原创 简单明了《a标签的href》跳转页面情况，看完秒懂！！！
概念a标签的默认跳转链接行为是由href来实现的，同时设置href属性可以使a标签在hover状态下以手指指示的样式显示。但实际过程中发现对a标签的href属性的不同设置，可能会导致不同的行为反馈，故想要进行几种不同的设置情况总结一下。1.a标签中设置href属性，没有赋任何值<a href></a>点击a标签会刷新页面，回到顶部。2.a标签中设置href属性，赋值href="#"<a href='#'></a>..
2021-06-03 15:40:33
8461
4
原创 萝卜青菜各有所爱------htm 与 html
htm 与 html 的区别前者是超文本标记(Hypertext Markup)后者是超文本标记语言(Hypertext Markup Language)可以说 htm = html同时，这两种都是静态网页文件的扩展名，扩展名可以互相更换而不会引起错误（这是指打开而言，但是对于一个链接来说，如果它指向的是一个htm文件，而那个htm文件被更改为html文件，那么是找不到这个链接的）那为什么出现两种文件格式呢？htm 是来源于老的 8.3 文件格式，DOS 操作系统只能支持长度为三位的
2021-05-19 14:01:56
266
原创 告诉你什么是图片懒加载！
什么是图片懒加载？当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。通俗一点：1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径。2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。ps：自定义属性可以取任何名字
2021-02-26 17:37:54
306
原创 手写一个Redux，就能深入理解他的原理了
Redux可是一个大名鼎鼎的库，很多地方都在用，我也用了几年了，今天这篇文章就是自己来实现一个Redux，以便于深入理解他的原理。我们还是老套路，从基本的用法入手，然后自己实现一个Redux来替代源码的NPM包，但是功能保持不变。本文只会实现Redux的核心库，跟其他库的配合使用，比如React-Redux准备后面单独写一篇文章来讲。有时候我们过于关注使用，只记住了各种使用方式，反而忽略了他们的核心原理，但是如果我们想真正的提高技术，最好还是一个一个搞清楚，比如Redux和React-Redux看起来很像，
2021-02-20 14:16:15
198
原创 快读学习提高web性能4——AMP如何保证Next.js应用程序的牢靠性
AMP如何保证Next.js应用程序的牢靠性在Next.js应用程序中了解支持AMP的好处和取舍AMP是一个Web组件框架，可确保快速加载页面。Next.js具有对AMP的内置支持。你会学什么？本指南首先简要介绍AMP如何保证快速的页面加载，然后说明在Next.js应用程序中支持AMP的不同方法，然后帮助您确定最适合您的方法。本指南的目标读者是决定使用Next.js但不确定是否支持AMP的Web开发人员。本指南不是为决定使用AMP但不确定要使用哪种框架的Web开发人员编写的。但是，
2021-02-08 11:10:35
396
原创 快读学习提高web性能3——在Next.js中使用动态导入进行代码拆分
在Next.js中使用动态导入进行代码拆分如何通过代码拆分和智能加载策略来加速Next.js应用程序。基于路由和基于组件的代码分裂默认情况下，Next.js将您的JavaScript分成每个路由的独立块。当用户加载您的应用程序时，Next.js仅发送初始路由所需的代码。当用户在应用程序中导航时，他们获取与其他路由关联的块。基于路由的代码拆分可最大程度地减少需要立即解析和编译的脚本的数量，从而缩短页面加载时间。虽然基于路由的代码拆分是一个很好的默认设置，但是您可以通过在组件级别进行代码拆分来进
2021-02-07 13:47:24
894
2
原创 快读学习提高web性能2——Next.js中的路由预取
Next.js中的路由预取Next.js如何通过路由预取以及如何对其进行自定义来加快导航速度。你会学什么？在本文中，您将学习Next.js中的路由如何工作，如何针对速度进行优化以及如何对其进行自定义以满足您的需求。该<Link>组件在Next.js中，您不需要手动设置路由。Next.js使用基于文件系统的路由，可让您仅在./pages/目录内部创建文件和文件夹：要链接到不同的页面，请使用<Link>组件，类似于使用良好的旧<a>元素的方式：.
2021-02-04 16:20:19
420
原创 快读学习提高web性能1——Next.js的默认性能
Next.js的默认性能Next.js是一个自以为是的React框架，具有许多性能优化。该框架的主要思想是通过默认包含这些功能来确保应用程序启动并尽可能保持高性能。简介将简要概述该框架提供的许多功能。本系列的其他指南将更详细地探讨这些功能。Chrome正在与Next.js合作，以为希望构建快速的，服务器渲染的React应用程序的任何开发人员改善框架。最近添加了许多更新的优化，例如模块/无模块支持和改进的粒度分块策略。你会学什么？尽管默认情况下Next.js提供了许多性能优化，但是..
2021-02-02 14:56:45
654
2
转载 简单的代码提交，还能玩出这么多花样？
作为一个开发人员，每天必不可少要提交代码，但是你真的懂代码提交吗？这篇文章带领大家熟悉一下常用的代码提交方式，大家可以根据自己所在公司的开发模式对号入座。代码提交方式可以用一个专业术语描述：代码工作流。在 SVN 时代大家会使用集中式工作流，所有人都往一个主库分支合入代码；随着技术的演进，以 Git 为代表的分布式代码管理工具横空出世，在 Git 的基础上又逐渐出现了多种代码管理工作流：功能分支工作流，Gitflow 工作流，Forking 工作流。搬好小板凳，下面一一为大家讲解。.
2021-01-26 11:41:37
190
原创 开发常用到的字符串截取方法，细节总会容易忘！看一遍就懂了
萝卜青菜各有所爱 ------ slice()、substring()、substr()。他们都有截取字符串的作用，接下来是他们之间的区别：一、substring()substring()方法返回一个索引和另一个索引之间的字符串，语法如下：str.substring(indexStart, [indexEnd])下面有六点需要注意：substring()从提取的字符indexStart可达但不包括 indexEnd 如果indexStart 等于indexEnd，substr
2021-01-25 14:10:15
211
原创 为什么抖音快手这么吸引你?来看看什么是Feed流吧！
简介：Feed流是一个目前非常常见的功能，在众多产品中都有展现，比如微博，朋友圈，消息广场，通知，IM等。通过Feed流可以把动态实时的传播给订阅者，是用户获取信息流的一种有效方式。在大数据时代，如何打造一个千万级规模的Feed流系统仍然是一个挑战。本文中会介绍如何设计一个千万量级的Feed流系统的架构。在互联网领域，尤其现在的移动互联网时代，Feed流产品是非常常见的，比如我们每天都会用到的朋友圈，微博，就是一种非常典型的Feed流产品，还有图片分享网站Pinterest，花瓣网等又是另一种形式的F.
2021-01-14 17:05:00
2844
1
原创 圣诞节马上到了。H5+CSS3+JS制作圣诞帽头像源码送给你们。。。
先给大家看下页面效果------这张图片源码到手后大家可以随便换的！！！废话不多说，直接上源码：这里是部分代码！！！<!DOCTYPE html><html><head> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="Content-Type" content="text/html; charset=utf.
2020-12-22 15:37:33
2306
14
原创 超级全！js常用各种正则表达式
1.非负整数 /^\d+$/2.正整数 /^[0-9][1-9][0-9]$/3.非正整数 /^((-\d+)|(0+))$/4.负整数 /^-[0-9][1-9][0-9]$/5.整数 /^-?\d+$/6.非负浮点数 /^\d+(.\d+)?$/7.正浮点数 /^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$/8.非正浮点数 /^((-\d+(.\d+)?)|(0+(.0+)?))$
2020-12-17 17:18:57
1299
2
原创 赶快卸载！微软新公布了18个流氓浏览器插件！
为了增强浏览器的功能，我们通常会在上面安装各种插件。一些需要第三方软件才能实现的效果，通过插件都可以在浏览器内快速实现。浏览器插件固然强大方便，但是也有一些弊端——近年来，大量恶意插件在Chrome插件商店浑水摸鱼，严重危害用户安全。这些恶意插件往往伪装成正常的浏览器工具，被用户下载安装后，就能劫持用户电脑、植入恶意代码、钓鱼、窃取信息、挖矿、重定向到恶意网站等等。这给Chrome开发团队带来不小的困扰，因为恶意插件屡禁不止，上架速度甚至比谷歌删除它们的速度...
2020-12-07 10:06:38
1380
2
原创 一篇文章让你完全掌握Sass，不只是学会而已哦！！！
使用sass变量存储数据Sass与CSS的不同之处之一是它使用变量。与JavaScript相似，它们被声明并设置为存储数据。在JavaScript中，使用let和const关键字定义变量。在Sass中，变量以开头，$后跟变量名称。这是几个例子：$main-fonts: Arial, sans-serif;$headings-color: green;//To use variables:h1 { font-family: $main-fonts; color: $headi
2020-11-25 15:56:53
1814
22
原创 React v17.0来了！！！没有新功能？？？
没有新功能React 17版本是不寻常的，因为它没有添加任何面向开发人员的新功能。取而代之的是，该发行版主要致力于使React本身的升级变得更加容易。我们正在积极开发新的React功能，但它们不是此版本的一部分。React 17版本是我们将其推广到任何人的战略的关键部分。特别地，React 17是一个“垫脚石”版本，使将由一个版本的React管理的树嵌入到由另一个版本的React管理的树中更加安全。逐步升级在过去的七年中，React升级一直是“全有或全无”。您可以使用旧版本，也可以将整个
2020-11-24 15:58:43
992
原创 咱们不画饼！进来教你画三角形。。。
前言先来两个案列吧， 原理三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。实现...
2020-11-20 10:22:51
446
原创 万能给任何页面加蒙层！！！
依旧废话不多说，直接上代码 var searchMask = document.getElementById('InputSearchMask'); searchMask = document.createElement('div'); searchMask.id = 'InputSearchMask'; searchMask.style.display = 'none'; searchMask.style.position = 'fixed'; searchMask.style
2020-11-16 15:56:16
533
1
原创 Js公共函数------获取目标元素的高度height
废话不多说，直接上代码/** * getElementHeight * * @description 获得目标元素height * @param {target} 目标元素 * @return {string} * */ const getElementHeight = element => { if (element) { return Math.max( element.scrollHeight, element.offsetHeight,
2020-11-13 17:22:44
461
原创 Js公共函数------获得目标元素的位置{x, y}
还是废话不多说，直接上代码/** * getElementPosition * * @description 获得目标元素x,y * @param {target} 目标元素 * @return {object} {x, y} * */ const getElementPosition = element => { let [actualLeft, actualTop, current] = [ element.offsetLeft, element.offs
2020-11-13 16:28:38
619
1
原创 Js公共函数------检测设备是移动端还是PC端
直接上代码，自己拿去测试// 检测设备状态 const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent, ) ? 'Mobile' : 'Desktop';const isMobile = detectDeviceType() === 'Mobile';console.
2020-11-12 14:03:03
140
1
原创 湖！人！总！冠！军！（为啥屏蔽？？？？？）
虽然会迟到，但它不会缺席。所有湖蜜、詹蜜在心里憋着一年的的那五个字终于可以有底气的大声喊出了------“湖！人！总！冠！军！”，这个时候老大在天上一定是微笑着的；恭喜湖人时隔十年再次夺冠，恭喜我詹获得自己的第四个总冠军，以及自己的第四个FMVP；打破的历史记录太多了，自己的里程碑也太多了，真的太多的荣誉了；辗转联盟17年，已经35岁了；没什么可以多说的了，此生无悔做詹蜜！...
2020-10-12 17:51:45
141
原创 如何在手机上查银行卡号？进来手把手教你！
废话不多说直接进入正题。在手机上查银行卡号有两种方法，如下：方法一：致电所在银行的电话银行，如工商银行的客服电话是95588.，招商银行的客服电话，致电人工客服，客服可能需要用户身份证号、绑定的手机号、短信验证消息等等，便会为用户提供银行卡的完整卡号。方法二：利用银行卡所在的手机银行了解完整卡号，以招商银行为例1、打开手机银行的主界面，点击右下角的我的。2、屏幕中出现解锁页面，解锁。3、解锁后，点击银行卡。4、进入后，选择自己想知道卡号的银行卡。5、点击查看.
2020-09-25 15:31:55
10629
原创 最小尺寸的透明图片，你还在写background: transparent吗？
Base64 Encode 1x1px透明GIF图片Base64 Encode 1x1px透明GIF图片能干什么？这种图片的特征就是体积最小化，最大限度的减少带宽。而且是透明的，具有隐身作用。用到的场景很多，比如测试浏览器是否支持data URI技术，或用来做一个透明的浮动层，或在lazy load图片时用它来做占位符。下面就是Base64 Encode 1x1px透明GIF图片的data URI数据，有一天你会用到它们。透明图片<imgsrc="data:image/gif...
2020-09-21 11:51:50
1098
原创 Js公共函数------生成不重复的随机数组且区间和长度自定义
前言：需求是做搜索视频推荐音乐，每次只展示出三个，当空搜的时候展示的是前100个的随机的三个。所以我想了半天，最后想到的方法是通过索引，从1-100中随机选出3个数字组成一个数组这样就能拿到想要的三个0-100的随机数组成的数组:const musicArr = randomUniqueArr(3, 0, 100);下边是公共函数的实现/** * 生成一个不重复的随机数组 * * @param {number} len 数组长度 * @param {numbe...
2020-08-28 15:34:55
486
原创 Js公共函数------对象数组数据进行处理
/** * 通过id获取对应的对象 * * @param {string} id ID * @param {array} array 数据集 * @return {object} id所在的对象 */const findByID = (id, array) => (array || []).find(({ id: itemID }) => itemID === id);/** * 通过id获取对应的对象的下标 * * @param {string} id ID *.
2020-07-28 19:17:28
283
原创 多了不敢说，未来10年内的前端学习内容分享给你们
https://github.com/podf/Front-end-tutorialhttps://github.com/podf/fucking-algorithm
2020-07-27 16:16:07
136
原创 萝卜青菜各有所爱------深谈React和Vue
前言由于我个人主要是用React的（公司项目都是在用react），但是Vue我也会写的，他们各有各的优点，缺点吧，接下来我们就详细的比较一下各个方面。以下是我个人认为：技术选择如果应用体积小，且要求速度快，考虑vue（vue更轻量） 如果要构建一个大型应用程序，考虑React （react更复杂，但是技术和生态圈更成熟） 如果要构建一个同时适用于Web端和原生App的框架，考虑React （react兼容移动端）简介ReactReact 是全球最火的前端框架(Facebook推
2020-07-17 11:26:37
296
原创 萝卜青菜各有所爱------TypeScript VS JavaScript
前言身为一个前端开发工程师，可以说就是靠js吃饭的，但是ts也应该是我们必备的技能，我接触学习ts是在实习公司做了一个项目，一开始自己认为ts区别js就是声明标量的时候一定要标注数据类型，现在只能说当时理解很嫩，接下来就详细介绍一下两者吧：TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言，我们已经熟知 TypeScript 是 JavaScript 的一个超集，但是 TypeScript 与 JavaScript 之间又有什么样的区别呢？在选择开发语言时，又该如
2020-07-13 11:27:25
177
原创 萝卜青菜各有所爱------console系列详解
前言作为一名前端开发人员，经常会用console.log或者console.info，下边是所有的console介绍。Console 对象用于 JavaScript 调试。JavaScript 原生中默认是没有 Console 对象,这是宿主对象（也就是游览器）提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同。Console 对象常见的两个用途：显示网页代码运行时的错误信息。 提供了一个命令行接口，用来与网页代码互动。以 Chrome浏览器为例，我们可以通过按 F
2020-07-10 15:37:01
294
原创 萝卜青菜各有所爱------npm和yarn
前言为什么要写这篇文章呢，首先我在以前的公司（实习期间）一直在用npm，当然也知道有yarn这个东西，就是没用过。来了新公司以后就开始用yarn啦，接下来让我们看一下他们之间的比较吧！Yarn的优点？速度快 。速度快主要来自以下两个方面：并行安装：无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。 离线模式：
2020-07-10 11:42:32
181
原创 如何开发网页版简历并部署到自己的服务器上？
点击这里看效果：http://106.12.86.145:1997/Scy/为什么要做一个属于自己的网页版简历呢？我个人认为可以提升自己的技术，在找工作的时候有可能成为加分项（大部分公司是不看这个的）开发之前自己的整体架构：当然每个子主题里还有很多细小的部分，这里我就省略了 ，开发的时候会碰到再具体化。整体框架搭建出来以后我就开始开发了，接下来就到了技术选用。像这种偏于演示的界面展示就不建议用react等框架了，一般做程序、系统什么的再用框架，我感觉像这种的界面用jq最方便.
2020-05-29 17:21:04
1056
8
love-tree.zip
2020-05-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人