- 博客(58)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 当下的程序员该如何面对复杂的就业坏境
已经2023年了，我们都知道现在开发趋向于年轻化，大部分都是90后、95后，毕竟，软件开发不像硬件开发一样，年限越高，相对来说越吃香。31岁,前端工程师，工作经历8年，7年左右都在外包公司，1年左右在创业公司。经常能在网上听到一些某某公司清退一些35岁以上人员，特意百度查了一下30岁程序猿的出路，发现知乎上有这么一个话题，“30岁以上的程序员该何去何从？100多w的阅读量，说明越来越多的程序猿都在关注这个话题。
2023-05-27 22:18:53
470
原创 前端大屏可视化项目
1、确定需要适配屏幕的大小，虽然我们前端默认大屏的1920*1080起步的，但是防止有人不懂开发前需要新搞清楚适配范围；2、和UI说清楚字体大小尽量在12px以上，一是12px以下写起来麻烦；二是12px以下在大屏中展示效果不好；3、不同大小屏幕的适配方法 我使用的是zoom，其中1920是设计稿的宽度当然transform scale 和rem等方式也行；4、大屏中有很多样式很难实现，可能会使用很多图片代替，图片太多可以使用雪碧图来优化；5、DataV组件库中的轮播表config数据更新后视图不发生变
2022-06-27 21:58:50
11685
3
原创 Ant Design的入门使用教程
一、Ant Design 介绍1.1 背景如果经常浏览各种网站，就会发现不管网页的主题是什么，通常都会出现一些重复的构件，比如：日历、表格、表单、菜单、卡片、导航栏等。这些构件的功能和外观都很类似，只是在一些细节的地方，根据需要做了定制。它们就叫做组件，一张完整的网页，可以看做是不同功能的组件的集合。又由于之前浏览器大战的残留问题，导致即时做出了一个组件，但是其不能很好的适用所有浏览器。2014年，React 框架发布，为组件提出了一套可行的解决方案。从此，可以用于实际开发的组件库才变成了现实。1
2022-06-24 14:39:58
10592
原创 前端项目中遇到的最大问题是什么，该如何回答
实话实说，都是常规开发，项目还在初级阶段，暂时还没遇到难点一开始也不太会回答，但是后来想了一下面试官的意图，之后就直接说学校项目其实深度和难度上都不大，但是在碰到某个知识点的时候，我有深入去了解它的源码（原理），巴拉巴拉。项目经理可能是项目经理也可能是技术总监，但关注的都是你的学习能力，及项目把控能力，不会像一面那样问些细碎的知识点最近项目中遇到什么问题，及解决方案？面试前自己一定要准备一波，不然面试的时候自己大脑中会一片空白。如果觉得自己解决的问题都没什么技术含量，那可以说项目中其他同事解决的问题，或
2022-06-13 09:10:52
20505
原创 一次弄懂Event Loop
Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。堆是一种数据结构，是利用完全二叉树维护的一组数据，堆分为两种，一种为最大堆，一种为最小堆，将根节点最大的堆叫做最大堆或大根堆，根节点最小的堆叫做最小堆或小根堆。堆是线性数据结构，相当于一维数组，有唯一后继。如最大堆栈在计算机科学中是限定仅在表尾进行插入或删除操作的线性表。栈是一种数据结构，它按照后进先出的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要
2022-06-03 22:50:24
1090
原创 网络传输过程中的优化
如果服务端还是 HTTP 1.1 协议，那么浏览器并发的 HTTP 请求是由数量限制的（比如桌面浏览器并发请求可能是 8 个，手机浏览器是 6 个），如果一下子并发的几十个请求那么会有很多请求会停下来等，等前面的请求好了下一个再进去，这样就延长了整个页面的加载时间。如果服务端已经开启了 http2，那么不存在并发请求的限制。项目中有很多依赖库如 React、lodash ，它们的版本是基本不会发生变化的。将这些不会发生变化的包单独拆出来，加上缓存，那么二次请求时这些不变的包都不会被拉取，这样就可以提升网站整
2022-06-03 09:57:16
478
原创 编写高性能的JavaScript
常见编码规范将 js 脚本放在页面底部，加快渲染页面将 js 脚本将脚本成组打包，减少请求使用非阻塞方式下载 js 脚本尽量使用局部变量来保存全局变量遵循严格模式：“use strict”;尽量减少使用闭包减少对象成员嵌套缓存 DOM 节点访问避免使用 eval()和 Function()构造器尽量使用直接量取创建对象和数组最小化重绘(repaint)和回流(reflow)为什么 JS 要放到 body 尾部？如果 JS 需要绑定操作 DOM，那么放在 header 中如果处理
2022-05-31 12:56:27
183
原创 Homebrew你了解吗？
如果你有一台MAC，如果不知道HOMEBREW，那就丧失了玩MAC的乐趣了。HOMEBREW对MAC来说相当于咖啡伴侣一样的存在。现在你是否有很多的问号？HOMEBREW 是什么鬼？嗯，别急，小白都是这样过来的，比如博主。一、Homebrew是什么？Homebrew的安装和使用Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况，十分方便快捷。主要从下载的源码包解压（包含相关
2022-05-25 21:58:04
1155
原创 Mac中的Zsh和Bash你了解吗
使用Mac系统的朋友应该比较熟悉Zsh和Bash这两个shell，但是对二者具体有什么区别可能不太了解。本文将从这两个shell入手，对相关概念以及二者区别进行解释。1.什么是shell？shell 单词的本意是“壳子”，在计算机领域一样可以理解为机器外面的一层壳，目的是进行用于人机交互，本质上是命令解释器。只要是人与电脑之间交互的接口，就可以称为 shell。需要说明的是，常见的概念包括shell脚本，其指的是采用shell语言编写的脚本，可以使用shell程序来进行执行，而本文所说的shell均
2022-05-25 21:42:46
11612
2
原创 ES6/ES7/ES8新特性汇总
ES6起各个版本的新特性汇总ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以浏览 ECMA news查看。ECMAScript 标准建立在一些原有的技术上，最为著名的是 JavaScript (网景) 和 JScript (微软)。它最初由网景的 Brendan Eich 发明，第一次出现是在网景的 Navigator 2.0 浏览器上。Netscape 2.0 以及
2022-05-05 19:57:21
4006
3
原创 Promise的神奇之处
前端重点之Promise一、promise 的认识1.js的单线程1）javascript的执行环境是单线程的2）单线程：指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务，这个任务可称为主线程，但是实际上还有其他线程，如事件触发线程、ajax请求线程等2.同步与异步1）同步模式：也就是单线程模式，一次只能执行一个任务，函数调用后需等到函数执行结束，返回执行的结果，才能进行下一个任务，如果这个任务.
2022-05-05 18:46:14
227
1
原创 JS之常用组件封装
组件封装一、说明什么是组件？组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元一个好的组件特点：封装性、正确性、扩展性、复用性。二、具体作者：zh_yang转载：https://www.jianshu.com/p/81f679149a181、 封装一个轮播组件介绍API：Carousels.init($ct,data)依赖JQuery第一个参数为需要展示轮播的容器，自行设置宽度、高度第二个参数为轮播图片SRC数组，数量自定预览.
2022-05-04 19:53:11
2582
原创 Sass、Scss、Less和Stylus区别总结
Sass、Scss、Less、StylusCSS 预处理器技术已经非常的成熟了，而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号//sass 太费眼了.father width:100px; .son
2022-05-04 13:34:25
1925
1
原创 轻松学习正则表达式
正则表达式的实际运用RE基础知识正则表达式是一组由字母和符号组成的特殊文本，它可以用来从文本中找出满足你想要的格式的句子。一个正则表达式是一种从左到右匹配主体字符串的模式。 “Regular expression”这个词比较拗口，我们常使用缩写的术语“regex”或“regexp”。 正则表达式可以从一个基础字符串中根据一定的匹配模式替换文本中的字符串、验证表单、提取字符串等等。想象你正在写一个应用，然后你想设定一个用户命名的规则，让用户名包含字符、数字、下划线和连字符，以及限制字符的个数，...
2022-05-03 14:16:35
321
原创 事件委托（代理）的理解
事件委托（代理）什么是事件？事件是我们在编程时系统内发生的动作或者发生的事情（譬如点击鼠标、敲击键盘）。事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。事件有多种类型，以下代码我们以“鼠标点击”事件为例。浏览器的事件模型，就是通过监听函数（listener）监听事件，在事件发生改变后作出反应。事件的「默认行为」是指浏览器规定的行为，例如单击超链接会跳转…事件的传播一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段：事件捕获阶段（
2022-05-03 13:02:03
1374
原创 Flutter你了解吗？
FlutterFlutter是什么？Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码，在Android 和iOS平台上都可以运行。跟React Native、Weex等有什么不同？React Native、Weex等一直存在一个问题，就是性能跟原生App存在很大的差异。这跟它们的原理有很大的关系，下面从原生App，RN、Weex，Flutter的简单原理说一下它们的不同。原生App苹果2008年发布iOS，Google 2009年发布Android，它们的
2022-05-02 15:06:15
227
原创 MongoDB超详细教程（保姆级）
MongoDB一、简介1. 简单介绍MongoDB是一个基于分布式文件存储的数据库由C++语言编写，旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似json的bson格式，因此可以存储比较复杂的数据类型。Mongo最大的特点是它支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数
2022-05-01 12:01:00
91857
12
原创 vue-admin-template模板使用问题汇总
vue-admin-template前景概要vue-element-admin是基于element-ui的一套后台管理系统集成方案。功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能GitHub地址：https://github.com/PanJiaChen/vue-element-admin项目在线预览：https://panjiachen.gitee.io/vue-element-adminvueAdmin-
2022-04-29 14:05:20
884
原创 Vue中使用Mock模拟get和post请求
Mock模拟post请求很多时候，前端的开发需要配合后端接口数据，但是后端开发未完成的时候，前端不能苦等，可以先用mock来进行数据模拟和调试。使用方法如下：1、安装mockjsnpm install mockjs2、在vue项目中mock创建文件夹创建mock文件夹之后.还需要创建json文件.作为pots请求数据源3、在index.js中写如下代码一般情况是在src文件夹下创建api文件夹,用来管理整个项目的接口数据,然后我们需要接着在api文件夹下创建index.js,作为入口
2022-04-29 13:18:20
3716
2
原创 前端工程师很有必要学习Node
Node的学习很有必要Node近两年已经成为前端知识栈必备技能之一。随便点开招聘网站找个岗位几乎都会要求会Node，更不用提一些高级岗位了。可能你看过Node是什么，看过Node的文档，用Node写过一些小项目。但是如果问你——你知道在一线互联网企业里，Node真正是怎么用的吗？是拿来做什么的？怎么做？我相信百分之八十的人都不知道答案，甚至包括一些用Node写过博客，小站点的前端程序员。这也是大家对于学习很容易出现的问题：我学会了这个框架（技术）的所有API，但是我不知道到商业项目里怎么用它。接下来本
2022-04-29 12:11:15
1139
2
原创 数据结构汇总
终身受益的700个网站【史上最全】——建议收藏“卑微的小丑”总有一个可以帮助你！！！https://blog.csdn.net/liu17234050/article/details/105092333什么是数据结构:是数据之间存在一种或多种特定关系的数据元素集合为编写出一个“好”的程序，必须分析待处理对象的特性及各处理对象之间存在的关系这也就是研究数据结构的意义所在知识结构图:https://www.processon.com/view/5cf5d469e4b0da05395d5143.
2022-04-29 11:50:30
356
原创 JS实用技巧之断点调试详解
引言调试能力是一个程序员的生存根本，可是很多初学者却忽视调试。今天我们就来讨究一下JS的调试技巧。本文章将会详细列举JS相关的各种实用调试技巧。如果您是JS的初学者，那么这篇文章将对您有很大的帮助。为什么要调试？程序就是函数堆砌起来的，程序的运行就是函数的执行过程。而通过JS调试，我们可以更为直观的追踪到在程序运行中，函数的执行顺序，以及各个参数的变化。这样我们就可以快速的定位到问题所在。1. 什么是JS调试？在程序运行中，我们总会遇到各种bug，而通过代码的追踪代码的运行顺序从而定位到问题的过
2022-04-28 13:58:23
9522
2
原创 svn使用教程(gif动图)
svn使用教程本篇文章动图带大家快速学会 svn 的基本使用方法，掌握 Windows 上最常用的 svn 客户端 TortoiseSVN 的用法。1. 了解 SVN 客户端、服务端SVN 分为客户端、服务端，SVNBucket 就是一个 SVN 的服务端，负责托管 SVN 的代码。我们需要使用 SVN 的客户端来跟服务端打交道。在 Windows 上，我们推荐使用 TortoiseSVN，可视化的操作界面，集成右键菜单，非常方便。2. TortoiseSVN 介绍也叫乌龟SVN，是当前
2022-04-27 19:23:24
274
原创 前端三大布局,float,flex,grid的介绍
什么是布局在说三大布局之前我们先聊聊什么是布局：布局就是把页面分成一块一块，按左中右、上中下等排列现在的布局分类有两种：固定宽度布局，一般宽度为960/1000/1024px不固定宽度布局，主要靠文档流的原理来布局还有一种就是响应式布局，这种布局要考虑到手机端的布局，在pc端固定，在手机端不固定布局的思路：由大到小，先定下大局再完善小部分，一般老手使用这种办法由小到大，先完成小部分，再组合成大布局，新手推荐前端戒律：在布局的时候千万不要将界面写死，永远不要把width和he
2022-04-27 17:52:05
1658
原创 【vue】vue+ES6循环处理数组：map、filter、foreach、every、some、reduce、find、findIndex等方法（转载）
列举了一些实际项目中经常使用到的方法一、map()方法：全部循环，不改变原数组，会生成新的数组。 test(){ let arr=[0,1,2,3,4]; let afterArr = arr.map(val => val+2) console.log(arr);//[0, 1, 2, 3, 4] console.log(afterArr);//[2, 3, 4, 5, 6] },二、foreach()：全部循环，可以重新给原数.
2022-04-27 12:51:53
1077
原创 JS对象、字符串以及数组之间的相互转换
1、对象转字符串const obj = { id: 0, name: '张三', age: 12}const objToStr = JSON.stringify(obj)console.log('obj:', obj)console.log('objToStr:', objToStr)2、json字符串转对象const str = '{"id":0,"name":"张三","age":12}'const strToObj = JSON.parse(str)
2022-04-26 22:03:42
2411
原创 JS中的splice,slice,substr,split,replace方法
今天所说的这几种方法名和功能都特别像，所以说比较容易混淆，今天就来彻底解决一下这个问题，认清分清，并运用起来。一、splice()splice：方式是数组原型上的一个方法，方法向/从数组中添加/删除项目，然后返回被删除的项目，会改变原数组（官方定义）语法：array.splice(index,howmany,item1,.....,itemX)；参数一index:必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。参数二howmany：必需。要删除的项目数量。如果设置.
2022-04-26 21:38:15
4284
原创 在Vue中将markdown转换成html并渲染样式
1.下载依赖npm install marked2.在需要使用的页引入import marked from 'marked'在这里插入图片描述3.语言转换注：这里blog是转换后的html语言，而blogDetailData.content是从数据库取出来markdown文本this.blog = marked(this.blogDetailData.content)这里会有问题,显示不出来,通过marked.parsecomputed: { compiledMarkdow
2022-04-25 22:59:49
4434
原创 大前端中的专业术语
一、名词解释横切在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切留白两个容器或碎片之间的上、下、左、右的空白距离继承元素可以从其父级元素中获得一些可为自己使用的属性或值。图片定位把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图底图页面中在标签中使用的背景图齐底(图线用于区分横切或碎片结束的线或图页面结构页面的基础框架，由横切、布局元素组成焦点区(图)最易注意的区域导航在页面中具有导向
2022-04-25 21:10:14
3141
原创 你不知道的的Mock
MOCK数据1. 本地集成 Mockjs, npm安装，实现数据Mock(没有发真正请求，代码层面的拦截)安装： cnpm i mockjs --save-devmain.js：中使用mock开关，即什么时候用mock数据，上线使用后端数据就改成false。注意： 区别于import是编译时加载，require是执行时加载，如果用import(‘./mock/api’)则会每次加载都被mock拦截。const mock = trueif(mock){ // require是执行
2022-04-25 16:25:14
201
原创 js特效总结
JS动画特效中的三大属性一、offset系列1. offset系列的5个属性offsetLeft : 用于获取元素到最近的定位父盒子的左侧距离 *计算方式: 当前元素的左边框的左侧到定位父盒子的左边框右侧 *如果父级盒子没有定位, 那么会接着往上找有定位的盒子 *如果上级元素都没有定位,那么最后距离是与body的left值offsetTop : 用于获取元素到最近定位父盒子的顶部距离 *计算方式:当前元素的上边框的上侧到定位父盒子的上边框下侧 *如果父级盒子没有
2022-04-25 15:00:51
2563
原创 学会fetch的用法
在开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR)，Fetch ，jQuery实现的AJAX。其中, XMLHttpRequest(XHR)和Fetch是浏览器的原生API，jquery的ajax其实是封装了XHR。让我们首先来比较一下这三者的使用示例。1.XMLHttpRequest(XHR)var xhr;if (window.XMLHttpRequest) { // Mozilla, Safari... xhr = new XMLHt.
2022-04-25 14:28:34
2150
原创 前端常见的浏览器兼容问题
不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎所以浏览器兼容性问题一般指：css兼容、js兼容一、样式初始化由于各大浏览器会有自身的默认样式，并且不尽相同，所以为了尽可能的保证样式的统一性，前端在开发项目之前都会先进行样式格式化，最常见的分为以下几个方面。1.pandding 值和 margin 值均设置为 0将html、body、a、li、ol、input、textarea、select、button 等标签的 .
2022-04-24 13:59:15
5136
原创 带你走进前端的世界
优秀的学习网站github：优秀的开源项目库，多阅读别人的源码，多上传自己的源码，向世界各地的大牛学习codepen：在线代码编辑工具,感受前端之美的必选之地，里面有很多酷炫的效果和优秀的插件echojs：快速了解js新资讯的网站stackoverflow和segmentfault：基本上各种问题都能在上面获得解答google web fundamentals：每篇文章都适合仔细阅读static files：开放的CDN，很好用iconfont：阿里的矢量图标库，非
2022-04-23 11:45:07
125
原创 Swagger的使用说明
前言：作为一个以前后端分离为模式开发小组，我们每隔一段时间都进行这样一个场景：前端人员和后端开发在一起热烈的讨论"哎,你这参数又变了啊",“接口怎么又请求不通了啊”,“你再试试,我打个断点调试一下…”。可以看到在前后端沟通中出现了不少问题。对于这样的问题,之前一直没有很好的解决方案，直到它的出现，没错…这就是我们今天要讨论的神器:swagger,一款致力于解决接口规范化、标准化、文档化的开源库，一款真正的开发神器。一：swagger是什么？Swagger是一款RESTFUL接口的文档在线自动生成+.
2022-04-22 15:05:35
412
原创 总结GitHub上传项目中经常遇到的问题
1. git add 添加 多余文件这样的错误是由于， 有的时候 可能git add . （空格+ 点） 表示当前目录所有文件，不小心就会提交其他文件git add 如果添加了错误的文件的话撤销操作git status 先看一下add 中的文件git reset HEAD 如果后面什么都不跟的话 就是上一次add 里面的全部撤销了 ,HEAD 可以不写，直接git resetgit reset HEAD XXX/XXX/XXX.java 就是对某个文件进行撤销了,HEAD 可
2022-04-22 14:02:36
2326
原创 如何正确的使用Stack Overflow?
一、使用英文搜索Stack Overflow是一个英文网站,很多问题和回答都是英文的,所以首先养成用英文来搜索你的问题.比如说你遇到这样一个问题:python列表如何删除元素?这时候你就可以像下面这样搜索答案,然后再搜索结果中慢慢寻找符合你问题的答案提问题之前一定要自己先搜索，先在 Google 搜索，然后在 StackOverFlow 上搜索，当实在找不到答案后再提问。 对于那些靠搜索就能得到答案的问题，StackOverFlow 上的广大群众是毫不留情的，反对票数量蹭蹭得往上加啊。
2022-04-21 11:12:15
13684
1
原创 前端跨域的常见几种解决方案
一、什么是跨域？在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。什么是同源策略？同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制以下几种行为：Cookie、LocalStorage 和 IndexDB 无法读取DOM和JS对象无法获得
2022-04-20 22:11:22
1279
原创 Es6中对象的新增方法
1.Object.is()ES5 比较两个值是否相等，只有两个运算符：相等运算符（）和严格相等运算符（=）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。ES6 提出“Same-value equality”（同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。Object.is('fo
2022-04-19 21:14:25
698
原创 vue-router的路由模式
hash模式在hash模式下，本质上是通过修改window.location.href实现的。前端路由的改变依托于#锚点，而锚点后边的值我们可以通过修改window.location.hash的值来修改，每一次hash值的变化都会导致触发hashchange这个事件，很重要的一点就是，这样修改页面不会刷新，不会导致浏览器向后端发送请求window.onhashchange = function(event){ console.log(event.oldURL, event.newURL);
2022-04-19 13:44:13
999
空空如也
前端按照实际工作的标准，需要达到什么样的水平，包括技术栈
2022-05-02
TA创建的收藏夹 TA关注的收藏夹
TA关注的人