自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(31)
  • 资源 (3)
  • 收藏
  • 关注

原创 我所整理的面试题(六)

面试题

2022-05-21 17:41:03 385

原创 实现一个mini-react

用最小化原则实现一个mini-react

2022-05-03 00:39:55 953 1

原创 常用git命令大全

基本指令git add提交的文件的信息添加到暂存区中。当使用 git commit 时,将依据暂存区中的内容来进行文件的提交。它通常将现有路径的当前内容作为一个整体添加,但是通过一些选项,它也可以用于添加内容,只对所应用的工作树文件进行一些更改,或删除工作树中不存在的路径了。“索引”保存工作树内容的快照,并且将该快照作为下一个提交的内容。 因此,在对工作树进行任何更改之后,并且在运行 git commit 命令之前,必须使用 git add 命令将任何新的或修改的文件添加到索引。该命令可以在提交之

2021-11-21 23:53:44 746

原创 随笔:关于Fiber架构的一点点理解

什么是fiber:react16以后的一个虚拟dom思想fiber:纤维 :很小很小絮状物react 16版本以前的虚拟dom其实react16以前对于虚拟dom和vue2.0是很相似的。vue2.0通过snabdom生成虚拟dom ,diff运算 而vue3则做了优化推荐一个开源作者租户做的一个react的网址(还有教程)https://pomb.us/build-your-own-react/...

2021-09-09 22:51:02 837

原创 一名自由程序员:我所整理和收集的前端面试题(五)

经典面试题合集(绝大多数都是超高频面试题)从浏览器地址栏输入url到显示页面的步骤(这是详细版本)在浏览器地址栏输入URL浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤如果资源未缓存,发起新请求如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control:HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期HTTP1.1增加了Cache-Control: max-ag

2021-09-08 13:32:46 270

原创 手动用webpack-chain 搭建移动端react环境

项目介绍一个移动端web-app项目 基于webpack-chain(vue2.0的打包工具)webpack-chain介绍一个可以链式调用的webpack配置webpack-config.js配置const { merge } = require('webpack-merge')const common = require('./config/common.js')const dev = require('./config/dev')module.exports = env =&gt

2021-09-06 01:02:19 624

原创 一名自由程序员:我所整理和收集的前端面试题(四)

【原生App vs. 跨平台App vs. 混合App】优劣对比:1、原生开发,至少得两套代码,成本高、开发周期长、复杂交互和样式开发麻烦;交互流畅、性能好、能够访问手机原生功能。2、H5:交互可以做得非常精致、样式也可以精致;不擅长使用手机原生功能。3、跨平台开发:一套代码运行在多个平台,开发周期短,成本低,招人好招。性能没那么好,卡顿、兼容性略微麻烦、不好做技术选型。4、混合开发:两个壳子,成本没那么高,开发周期没那么长,性能良好,用原生可以访问手机功能,用H5可以做复杂交互和样式。原生和H5

2021-09-03 09:10:11 270

原创 Redux流程分析 传统流程和redux-toolkit的使用

redux官方给的两种库传统Redux流程写法react-reduxRedux框架主要由Action、Reducer和Store三大元素组成。actionAction是一个普通对象,其中存在的type属性是必须的,用来表示Action的名称,type一般被定义为普通的字符串常量。为了方便管理,一般通过action creator来创建action,action creator是一个返回action的函数。在Redux中,State的变化会导致View的变化,而State状态的改变是通过接触

2021-08-15 23:41:37 1323 1

原创 Redux自定义封装connect和usedispatch 和useSelector

前言多的不多说 直接上代码 说实话,不太懂redux建议先看看文档 一切知识优先看文档和源码 看不懂的再去看一些机构的视频或者看某些大佬的文章封装connect本质上自己创建了一个上下文来取出数据state再派发出去。封装该层语法connect语法connect(mapStateToprops,mapDispatchToprops)(WrappedComponent)mapStateToProps类型是个函数,作用是吧store的数据放在props上 在上下文中…props解构funct

2021-08-09 01:12:18 676

原创 一名深漂程序员:我所整理和收集的前端面试题(三)(笔记)

系列文章目录一名深漂程序员:我所整理和收集的前端面试题(一)一名深漂程序员:我所整理和收集的前端面试题(二)一、如何做性能优化1.webpack工程环境层面的优化1.新的工具 ,更好的代码压缩技术 ,代码抽取vandor2.代码层面的优化1.少使用assets里的资源。2.尽量使用异步代码,减少同步代码。3.少用es5效率低的方法。多使用ES6及以上的方法4.减少if/else的使用。可以多使用switch5.减少链式调用。3.部署层面1.公共组件的抽

2021-08-05 01:31:09 225

原创 webpack自定义loader和plugin

写在前面的话首先我想说,绝大多数初中级前端别说手写这玩意了,连webpack打包都不需要接触到,哪怕是高级,外包型公司或者大型自研项目理论上也接触不到。就算接触到了,现有的优化构建方案和第三方插件和包非常多,webpack的生态其实做的很好了,但是吧,你只要在简历里不管是真搞过还是吹了牛写上了对webpack的研究,那很有可能,面试官会问你又没有自己写过loader和plugin啊。那没事咱不慌,问就是写过,写给他看就是了自定义loader官方文档https://webpack.docschina

2021-07-29 01:19:25 335

原创 一名深漂程序员:我所整理和收集的前端面试题(二) webpack有关面试题

写在前面的话虽然作为绝大多数,打包发布这些事接触的很少甚至接触不到,尤其是如果在外包公司。那基本上除了写业务逻辑,打包上线这些事跟咱没任何关系,但是。webpack,或者vite这些打包的工具是面试题经常问的,掌握并了解是非常好的加分项一.如何做webpack构建优化,有哪些策略?devtool:‘source-map’选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。一些值适用于开发环境,一些适用于生产环境。对于开发者来

2021-07-28 00:40:39 371

原创 利用jQuery实现h5播放器播放组件

播放组件介绍首先会H5播放组件其实自带video audio标签,只需要引入 添加属性 就可以自动在网页上播放,同样,vue和react也有相应的播放插件。比如vue-video-player 和react native的播放组件这里提供一个npm地址https://www.npmjs.com/package/vue-video-playerhttps://www.npmjs.com/package/react-native-video-controls但是呢,作为前端工程师,多用原

2021-07-10 01:13:56 1197

原创 前端小Demo:使用Socket实现简易网络聊天室

项目实现截图1.实现原理websocket首先我们要知道 http是一种无状态协议,无法轻松实现实时应用。服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接。我们可以实现捕获浏览器上的事件,通过事件跟服务器进行数据交互,使用ajax技术。但是反过来却不可能实现:服务器发生了一个事件,服务器不会主动去跟客户端交互。你们想一想,如果有一天百度像你发送了一个请求,会不会觉得很诡异。可是聊天室确实存在。聊天室是要保持客户端和服务器持续连接,且服务器能主动给客户端发送消息,实现方式如下:长轮

2021-07-01 01:26:26 2648 3

原创 一段文快速带你入门Node.js和第三方模块(二)

1.Node.js基础和内置模块具体内容可以见上期文档:一段文带你快速入门Node.js 和内置模块(一)Node.js的第三方模块npm下载工具就是网上别人已经开发好的模块,我们可以直接拿来借鉴使用,但是需要下载,下载工具使用npm。下载:npm install/i 包名 npm i 包名 包名 …npm i 包名@版本号 # 最新版本可以使用 @latest -版本号不用写全 npm i 全局工具 --gloabl # 简写 npm i 全局工具 -g下载命令执行之后,会生成nod

2021-06-26 13:48:09 347

原创 一短文带你快速入门Node.js 基础及内置模块(一)

1.什么是Node.jsNode.js 是一个开源与跨平台的JavaScript运行时环境。与2009年发布。它是在浏览器外运行,它是一个事件驱动异步I/O单进程的服务端JS环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。*一句话概括就是:用js这个语言写后端相关网址https://nodejs.org/zh-cn/http://nodejs.cn/注意:nodejs实现了js代码在浏览器外执行,所以在nodejs中无法运行DOM和BOM的

2021-06-25 01:04:02 417

原创 原生CANVAS语法实现的封装折线图和饼图

介绍首先canvas是html5的一种新标签,代表一个画布,可以在上面进行绘画、动画等操作。画布默认大小是300*150。canvas标签本生就是一个只是画布,可以导出为透明背景的png图片。要实现上面有文字、线条等呈现,需要使用js实现。总之,画布上一切的呈现,都需要使用js来实现。画布大小不能使用样式控制,用样式调整的是一个可视区域,其实真实的大小,还是一样的,只是在画布上画内容的话,会等比例放大。调整画布大小,需要在标签上直接添加width和height属性。canvas标签也是可以放文字的,

2021-06-23 01:07:52 574 4

原创 那些前端用js手搓出来的算法与数据结构(二)字符串篇

前端算法之字符串类算法在学校时候我们用C学习数据结构时串的结构体定义是这样的typedef struct{ char *ch; //指向动态分配存储区首地址的指针 int length; //串的长度 }Str;字符串在js中是一种类型,也叫string型直接new String 就能构造一个字符串并且有着非常多的字符串方法index of()、slice(start, end)substring(start, end)substr(start, length)…那现在总结几个字

2021-06-10 00:03:34 141 4

原创 那些前端用js手搓出来的算法与数据结构(一)链表篇

首先,一句话,前端学算法有啥用低情商:好跟后端battle。顺便互相吹吹牛高情商:提高业务能力。提炼基本功实际:大厂大公司面试要问,没办法。工作中:应用场景不多,基本都是后端玩的那到底学不学要不要高薪嘛,要你就最好学学,力扣刷刷题。说那么多干啥那有哪些比较值得刷的算法呢这里我整理了一些包括很多其实在高校就会讲的线性表链表二叉树的算法,甚至还有很多别的算法,例如动态规划,贪心算法等等。这些算法往往伴随着面试官考察你的逻辑能力和你的知识深度。如何用js写算法(一)链表类链式结构的创建1

2021-06-08 19:42:50 288 3

原创 纯原生JS使用ES6语法实现飞机大战

1.游戏背景首先,这是一个采用原生js写的一个demo。用ES6的模块化和class进行构建。这个项目已经 写咋一个html上的,如果课设或者什么需要的小伙伴。直接复制代码到html文件就行了至于图片 ,我会把图片截出来2.运行截图...

2021-06-06 23:43:08 2212 11

原创 js、bootstrap、jq实现酷炫赛道风格的多功能辩论赛计时器

先简单一下这个计时器背景大学时期打了几年的辩论赛。一直有这个情怀在。看到那些孩子们孩子用很多年前的计时软件。就考虑闲暇时做一个新的计时器。但首先存在一个问题。实现多功能的方法要不做成微信小程序。或者是做成web项目上传云服务器。但是考虑成本和维护。就先做一个不带数据库和后台的页面。赛制和环节通过点击之页面上的button组合需要的赛制环节模式。需要说明的是首先 这不是我的原生开发。这是我在gitee上拿到一个开源的项目 进行加工。优化了一下页面效果和逻辑。添加了一些逻辑。本来想用vue再加工一下。但是

2021-06-04 21:41:38 1136 7

原创 纯原生JS面向对象构造函数方法实现贪吃蛇小游戏

Demo介绍用prototype构造函数写的贪吃蛇。直接复制代码到html文件就可以运行。学任何一门语言 练习逻辑都会写个贪吃蛇啥的,这不来了嘛这个demo通过几个方法基本无HTML和css完全动态生成界面元素。基本注释都在代码中源码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>document</title></head>

2021-05-31 22:04:19 517 6

原创 纯原生JS面向对象实现打字小游戏

Demo介绍通过键盘点击下落小球所显示的数字,小球刷新再任意位置重新掉落。并且,每五个球后掉落速度加快小球刷新位置 大小,颜色随机。用面向对象class方法实现该demo源码可直接使用。赋值到html文件 然后打开就可以使用,可用作学校课设使用源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa

2021-05-31 20:07:28 346

原创 纯原生JS用面向对象class方法实现简易扫雷小游戏

Demo介绍纯原生js 实现 且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷。左键点击扫雷。右键标记该地方有雷。该demo下载下来复制到html文件中直接可以使用。不需要下载任何插件和引入任何框架。小游戏源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w

2021-05-29 14:25:31 1673 6

原创 原生JS实现简单打砖块弹球小游戏

使用原生JS写的,还有一点瑕疵。代码直接复制到html就能使用速度随机的 因为设涉及横向和纵向速度,所以显示的小球速度值是他们的和速度(立方和开根号)。按回车或者在滑块上单机左键开始游戏。鼠标滑动或者键盘A(左)或者D(右)控制滑块方向接小球。这个小demo的意义主要为了锻炼逻辑能力<!DOCTYPE html><html><head><meta charset="UTF-8"><title>document</title

2021-05-26 20:28:08 821 8

原创 细谈Javascript中的继承以及各种继承的类型

1.继承的概念首先字面意思上简单理解就是儿子继承爸爸的特性function Animal(name,age){ this.name = name; this.age = age}Animal.prototype.say = function(){ console.log('各种声音')}function Cat(eye) { this.eye = eye}Cat.prototype.xingwei = function () { console.

2021-05-26 01:06:58 170 2

原创 细谈回调地狱终极解决方案及ES7新语法async和await

1.回调地狱的一般解决方案正常情况下,我们都知道用promise去解决回调地狱。通过其调用then 和catch方法来实现回调函数多层嵌套问题。但是,我们可以实际来仔细看看用promise解决回调地狱的方法和问题所在。//假设我们有两个数据库。 area.php传递一个城市的区域。city.php传递城市名。//我们现在要通过ajax传递参数promiseAjax({ url:"area.php", data:{ name:"南山区" }}).then(re

2021-05-25 00:09:53 203

原创 前端练习:用面向对象封装AJAX(用promise和用普通回调函数两种方法)

普通回调函数写法首先不用promise方法。设置的参数cb是当前请求参数的回调函数。封装的特性:1 提取参数,进行传递2 找到get和post异同点一样的地方公用 不一样的区别处理 class axios { static get(url, data, cb) { axios.http('get', url, data, cb); //这里使用静态方法 } static post(url, data, cb) {

2021-05-20 09:02:00 208

原创 PHP Study初学者使用mysql的时候一直无法连接到数据库解决方法

虽然前端工程师理论上不用接触太多后端的东西,但作为往全栈方向发展。后端尤其是php 或者java是必经之路。这对扩宽技术栈,涨薪的帮助还是很大的。那作为php的学习,笔者推荐phpstudy。因为最主要的原因,不用配环境,一键安装直接用就可以了。但是很多初学者会出现mysql一直连不上去。看了很多网上教程还是有问题。那笔者带大家总结几个原因。首先,我们一般出现的是如下情况。mysql为红色显示。 这个时候。第一个情况。服务默认未开启。或者有防火墙,防火墙的关闭可以再windows设置里然后

2021-05-17 22:09:17 5378

原创 一名深漂程序员:我所整理和收集的前端面试题(一)

1.重绘和回流什么是重绘?什么是回流?在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。浏览器的解析过程 - html结构 解析html结构 生成dom树(doucment object model) - css样式 解析css样式 生成cssom树 - dom+cssom 渲染 Render Tree 回流:根据生成的渲染树,获取浏览器

2021-05-17 00:37:01 193

原创 写给前端初学者:JavaScipt初学入门的一些小疑问(一)

写给前端初学者JavaScipt初学入门的一些小体会首先,你得了解 这是个什么玩意:他是种什么语言,他跟那个流水的编程语言,铁打的java有什么关系java跟JavaScript的关系 就跟周杰伦跟周杰的关系一样,就是…没有关系。但你说完全没有关系吧也不准确。当初网景公司开发javascript。就是蹭了一手java当年的热度。就跟王一博很火。我取个名字叫王二博。反正不违法不违规。至少我在公司这名字能起到作用。其次是,但凡是本科或者说事是计算机科班出身或者是有过开发经历敲过代码的。在接触过js之

2021-05-15 14:47:47 194

有动画弹出显示的打字小游戏。适合新手训练

有实际动画弹出显示对错信息的打字小游戏。适合新手训练

2021-05-29

用面向对象写的京东渐变轮播图

适合初学者,原生js用class写的京东渐变式轮播图

2021-05-25

纯原生JS 实现的多彩视频弹幕效果。可实现删除 关闭打开弹幕

适合刚学习完原生js项目的同学。里面简单用到了bootsrap的样式。弹幕是随机大小颜色。可以控制出现消失,列表清楚。适合刚学完面向对象 bom dom操作的同学

2021-05-21

空空如也

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

TA关注的人

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