- 博客(106)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 寒流来袭，被裁了
上周五（11.18）下午谈的裁员的事。之前有听闻这个消息，但听说的截止时间是明年3.31之前，寻思着过完年再说吧。没想到呀，它提前来了…不管什么原因，该不该，气不气… 已经发生的事，咱也没办法给塞回去了。好在公司也算可以了，这个月走，N+1。下个月走，N。我选了下个月（主要考虑社保）。所以要尽可能在年前找好下一份工作。这边记录一下找工作的准备、面试的一些情况和过程中自己的一些想法吧。做的第一个事情，就是找了个大佬模拟面试，摸一下底。
2022-11-24 15:00:27
359
1
原创 脚手架应用场景之快速搭建项目
上传npm包的时候，my_cli已经存在了，需要改个名称，所以加了一个demong后缀。而my_cli是我们配置的可执行的命令名称，在package.json的bin字段里。在第一个步骤的时候我们用npm link 将项目链接到本地执行的。作为demo，你可以使用我创建的这两个示例模板。中间可以根据自己的需求添加不同的流程，来创造属于你自己的脚手架。或者还有一些其他的你们公司自己的东西，比如说自己封装的axios库、自己的UI库等等。在用户选择模板后，请用户输入项目名称，如果没有输入，默认给一个。
2022-09-29 15:18:18
565
原创 偷个懒，简化Git提交脚本输入
在日常开发的时候，经常需要提交代码，之前一直是： git status git add . git commit -m ‘feat: xxx’ git push每次都要打这几句代码，终于烦透了！！！而且提交信息的feat、fix还有一堆的规范，老子记不住啊！！！要是能用一个命令+ 输入变更信息来搞定，不香吗？我习惯用Git 命令提交代码，如果是使用可视化界面操作的话，可能也差不多。所以今天花了一个下午捯饬了一下。基本上够用了。
2022-08-22 19:21:46
225
原创 前端全链路性能优化
一、静态资源优化1、图片的优化1.1 图片格式及应用场景jpeg是一种针对彩色照片而广泛使用的有损压缩图形格式。应用于存储和传输照片。不适合：线条图形和文字、图标图形，不支持透明度。适合：颜色丰富的照片、彩色图、通栏banner图；结构不规则的图形。压缩:npm i -g jpegtranjpegtran -copy none -optimize -outfile out.jpg i...
2021-09-29 11:40:49
1842
原创 MobX5笔记
简介mobx是一个简单、可扩展的状态管理库。MobX 浏览器支持MobX5 任何支持ES6 proxy的浏览器 不支持IE11 node6MobX4 任何支持ES5的浏览器MobX4 和 MobX5的API是相同的开发前准备启用装饰器语法支持（方式一）npm run eject 暴露配置下载装饰器语法babel插件 npm i @babel/plugin-proposal-decorators在package.json文件中加入配置启用装饰器语法支持（方式二）npm
2021-08-04 17:41:59
493
2
原创 前端性能检测工具 --- Web Vitals
最近在用react搭建项目，发现react的脚手架升级了，在项目根目录下发现了一个新的文件 – reportWebVitals.js。很好奇这是个啥。reportWebVitals.js内容如下：const reportWebVitals = onPerfEntry => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID,
2021-02-19 17:28:12
7697
原创 通过JS实现点击复制页面表格到Excel
本文基于react项目实现。起因接了一个需求，要求实现点击页面上的一个按钮，复制某个表格数据，然后ctrl+V到Excel表格中。思考其实我觉着这个功能用导出Excel的方式实现不就好了么。不过本着好奇的心思，还是试着做做看吧。首先，点击按钮的时候要拿到要复制的数据。最初是想通过获取DOM元素的方式来取得表格，可是这样的话，得到的就是含有html标签的一堆字符串。那么只能自己来拼装数据了。我把表格部分的数据通过复制、黏贴到编辑器看下他是什么，结果如下图：而页面上的表格是这样的：对比来看：跟
2021-02-05 17:52:24
6195
7
原创 React样式模块化解决方案--styled-components
介绍styled-components是一个css in js 类库。可以防止css样式污染、组件更改时更容易定位到相关的样式。它使用标签模板来对组件进行样式化。它移除了组件的样式之间的映射。这意味着，当你定义一个样式时，实际上只是创建了一个普通的React组件，定义的样式也附在它上面。由于React对css的封装非常弱，导致了一系列第三方库，用来加强React的CSS操作（统称 CSS in JS，使用JS语言写CSS）另一个CSS in JS库 polished起步1、创建react项目
2021-01-21 19:20:57
653
原创 JS监听键盘组合事件
起因今天看到一个需求，要是使用Alt+A快捷键实现某个功能。可以监听键盘的事件keydown keyup keypress都可以监听键盘事件。他们之间的区别在于：keypress只能捕捉单个字符keypress 可以捕获单个字符的大小写keypress 不区分小键盘和主键盘的数字字符keypress 不能监听alt、ctrl、enter、shift这些keydown keyup 可以捕获组合键keydown keyup 不能区分字母的大小写keydown keyup 区分小键盘和主键
2021-01-21 19:02:39
2733
原创 2020总结 | 只为遇见更好的自己
写在前面2020最后一天，我在KFC写总结。前几天就想写了，嗯，我是拖延症患者。????2020年，换工作、被裁员，体检一堆问题…回顾我31年的人生，没有重点小学、没有重点初高中、专科学历、没有获奖经历、没有特殊技能、学习能力差、英语不好、拖延… 加上现在算大龄程序员了吧，似乎我的人生拿了一把烂牌，可是我还是想赢啊。我怎么走上了前端这条路？11年毕业后，在工厂里打工，做技术员，跟IT无关。最好的4年光阴，感觉错付了，但是不后悔，每个人都有不同的经历。然后14年的时候，觉得这么下去我能看见我退休甚至
2020-12-31 21:02:21
381
5
原创 前端处理后台返回的流数据
实际工作中，常常会遇到如预览PDF、下载Excel之类的需求。通常处理方式有：1、后端返回一个文件在服务器的URL，前端直接使用就行。2、后端返回流数据。如图前端如何处理？1、接口请求的时候一定要加responseType: 'blob',否则生产的文件会是空白（PDF）2、代码实现 const binaryData = [] binaryData.push(res)// res 后台返回的流数据 this.pdfUrl = window.URL.c
2020-10-28 17:44:31
6786
2
原创 系统学习大前端(12) --- Vue.js 源码分析
准备工作Vue源码获取项目地址fork一份到自己仓库vue3.0地址源码目录结构srccompiler 编译相关core Vue核心库platforms 平台相关代码server SSR服务端渲染sfc .vue文件编译为JS对象shard 公共的代码FlowJS的静态类型检查器官网参考-3、flow调试设置打包工具 Rollup安装依赖 npm i设置sourcemappackage.json文件中的dev脚本中
2020-08-31 17:37:27
366
原创 针对不同数据结构和算法的专题训练（二）
1、动态规划1.1 322.零钱兑换var coinChange = function(coins, amount) { if(amount===0) return 0; const dp = Array(amount+1).fill(Number.MAX_VALUE) dp[0] = 0; for (let i = 1; i < dp.length; i++) { for (let j = 0; j < coins.length; j++) {
2020-08-04 09:18:56
290
原创 系统学习大前端(11)---vue-router实现、模拟vue、VDOM实现原理练习
文章内容输出来源：拉勾教育大前端高薪训练营一、简答题1、当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如果把新增成员设置成响应式数据，它的内部原理是什么。let vm = new Vue({ el: '#el' data: { o: 'object', dog: {} }, method: { clickHandler () { // 该 name 属性是否是响应式的 this.dog.name = 'Trump' } }})
2020-07-15 16:18:52
553
原创 系统学习大前端(10)---vue-router实现、模拟vue、VDOM实现原理
文章内容输出来源：拉勾教育大前端高薪训练营vue-router实现基本使用创建路由组件vue.use()注册vue-router注册router对象设置占位router-view创建链接 router-link动态路由/detail/:id[获取]$route.params.id[获取]props:true — 推荐()=> import() 按需引入嵌套路由children编程式导航$router.push()$router.repla
2020-07-15 16:10:48
267
原创 系统学习大前端(9)---模块化、webpack、rollup、规范化标准练习
文章内容输出来源：拉勾教育大前端高薪训练营一、简答题1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。流程初始化项目配置文件webpack.config.js配置项目入口、输出路径、开发模式等配置不同资源处理的loader配置plugin执行打包命令通过webpack.config.js配置文件的entry入口配置开始查找项目依赖资源根据配置的loader解析不同的资源，输出打包后的资源。在webpack打包过程中不
2020-07-15 10:44:59
856
原创 系统学习大前端(8)---模块化、webpack、rollup、规范化标准
文章内容输出来源：拉勾教育大前端高薪训练营1. 模块化模块化演变过程step1 – 文件划分方式命名冲突污染全局作用域无法管理模块间的依赖关系step2 – 命名空间的方式将每个模块添加命名空间依然没有解决模块间的依赖关系step3 – IIFE(自执行函数)通过函数提供私有作用域step4 – commonjs规范（node）一个文件就是一个模块每个模块都有单独的作用域通过module.exports导出成员通过require函数载入模块以同步的
2020-07-15 10:32:49
427
原创 系统学习大前端(7)---工程化、自动化构建练习
文章内容输出来源：拉勾教育大前端高薪训练营简答题1、谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。工程化就是通过一些方法去提升研发效率和研发质量的手段。提升效率脚手架自动化构建组件化模块化保证质量ESlint代码检测git commit提交规范单元测试2、你认为脚手架除了为我们创建项目结构，还有什么更深的意义？提升效率，可以快速搭建一个基础项目架构规范化 对技术选型、项目结构等做一些规范，以降低沟通成本编程题
2020-07-14 17:27:17
835
原创 系统学习大前端(6)---工程化、自动化构建
文章内容输出来源：拉勾教育大前端高薪训练营工程化概述前端面临的问题ES6+ 兼容问题Less、Sass等 不支持模块化、组件化不支持手动压缩手动上传代码多人开发，难以统一风格等待后端接口完成…工程化主要解决的问题传统语言或语法的弊端无法使用模块化、组件化重复的机械式工作代码风格统一、质量保证依赖后端服务接口支持整体依赖后端项目工程化的表现一切重复的工作都应该被自动化工程化不等于某个工具vue-clicreate-react-ap
2020-07-14 17:18:25
284
原创 系统学习大前端(5)---ES6+新特性、TS、JS性能优化练习
文章内容输出来源：拉勾教育大前端高薪训练营1、下列代码执行结果，并解释原因。var a = [];for (var index = 0; index < 10; index++) { a[index] = function(){ console.log(index); }}a[6]()输出10这里使用var声明的变量会提升至全局执行上下文中，当循序结束时，index的值为10.这个问题解决有两种方式：通过闭包var 改成 let2、下列代码执行结果
2020-07-14 16:39:01
511
原创 系统学习大前端(3)---函数式编程、异步编程练习
文章内容输出来源：拉勾教育大前端高薪训练营一、简答1、谈谈你是如何理解JS异步编程的，EventLoop、消息队列都是做什么的？什么是宏任务、什么是微任务？由于JS是单线程的，这样执行任务会发生线程阻塞。所有JS引入了异步编程，通过回调的方式来解决这种阻塞。对于像定时器这种异步任务以及IO任务、其它线程发送过来的任务，JS会将其放到消息队列中，通过EventLoop的机制从消息队列里面依次取出任务执行。消息队列里的任务就是宏任务，微任务是promise、mutationObserver、nextT
2020-07-14 15:38:14
541
原创 系统学习大前端(4)---ES6+新特性、TS、JS性能优化
ES新特性1、let、const块级作用域变量提升最佳实践：不使用var ，默认使用const ，明确会改的使用let。2、解构数组const arr = [1,2,3]const [a,b] = arr;const [,,c] = arr;使用…方式解构const [a,...rest] = arr;默认值const [a,b,c,d = 12] = arr对象const obj = { name:'zs', age:18}const {na
2020-06-30 22:49:52
1772
原创 系统学习大前端(1)---函数式编程、异步编程
函数式编程学习函数式编程的目的函数式编程随react流行受到更多关注vue3 开始拥抱函数式编程函数式编程可以抛弃this打包过程中可以更好的利用tree shaking过滤无用代码方便测试、方便并行处理很多库可以帮助我们进行函数式开发 lodash underscore ramda函数式编程概念函数式编程（Function Programming,FP）是编程范式之一。常说的编程范式还有面向过程编程、面向对象编程。面向对象的编程：把现实世界中的事物抽象成程序世界中的类和对象
2020-06-30 22:47:16
466
2
原创 针对不同数据结构和算法的专题训练（一）
1、数组1.1 11. 盛最多水的容器题解：左右两个指针移动，算出其中的面积，最大的就是结果。实现var maxArea = function (height) { if (!height || height.length<=1) return 0 let left = 0,right = height.length-1;//左右两个指针 let max = 0;//最大值 while (left<right) { // 计算
2020-06-01 11:16:16
622
原创 前端训练营第五周
1、结构化程序设计1.1 JS执行粒度JS Context => Realm宏任务微任务（promise）函数调用（Execution Context）语句/声明表达式直接量/变量/thisRealm 里面有一套完整的Js内置对象。在JS中，函数表达式和对象直接量都会创建对象。使用. 做隐式类型转换也会创建对象。这些对象也是有原型的。如果没有realm ，就不知道原型是什么。作业（选做）：用G6 antv 可视化Realm中的所有对象重学前端：JavaScript对象：
2020-05-24 23:13:18
728
原创 前端训练营第四周
结构化程序设计宏任务、微任务setTimeout、setInterval、任务队列 – 宏任务promise 、MutationObserver ---- 微任务逗号表达式永远返回最后面的。var x = (1,2,3);x ----> 3因为5.1 这周内容不多。主要内容就是微任务、宏任务。讲了蛮多的promise的例子。...
2020-05-24 23:06:09
442
原创 前端训练营第三周
表达式、类型转换1、Float转为bit1.1 64位浮点数默认隐藏了一个1.（十进制不可能以0开始，二进制只有0,1，不以0开头，必然是1，所以隐藏了一个1）。符号位 + 指数部分 + 小数部分1.2 正0和负0num/0 — Infinity(-Infinity)2、Express 表达式2.1 运算符优先级 优先级表达式生成树Member 属性访问a.ba[b]foostringsuper.b — 构造函数中super[‘b’]new.targetnew
2020-05-09 16:53:19
409
原创 vue项目报错Navigating to current location ("/cancell") is not allowed
先截个图，控制台报错如上。不影响功能，但是看着膈应。百度了下，这个问题是由于连续点击相同路由导致的。vue-router未处理这个问题。解决方式：自己捕捉错误一、this.$router.push(`/login`,()=>{},(err)=>{})二 、 this.$router.push(`/login`).catch(err=>{ ...
2020-04-25 16:42:11
324
原创 前端训练营（2）
一、编程语言通识语言分类非形式语言中文英文阿拉伯文、蒙古文…形式语言（乔姆斯基谱系：是计算机科学中刻画形式文法表达能力的一个分类谱系，是由诺姆·乔姆斯基于 1956 年提出的）它包括四个层次：0型文法（无限制文法或短语结构文法）包括所有的文法。等号左边不止一个 ::= “c”1型文法（上下文相关文法）生成上下文相关语言。“a”“c”::=“a”“x”“c”...
2020-04-24 20:03:59
1307
1
原创 javaweb入门（五）----- JSTL与EL表达式
EL表达式EL（Expression Language）表达式语言，用于简化JSP的输出。EL表达式的语法： 表达式示例：‘<h1>学生姓名：{表达式}示例：`<h1>学生姓名：表达式示例：‘<h1>学生姓名：{student.name}`作用域对象EL表达式内置4种作用域对。EL表达式输出语法：${[作用域.]属性名[.子属性]}EL表达...
2020-04-18 12:00:00
132
原创 前端训练营（1）
从事前端开发三年多了，前端各方面知识都有所涉及。也正是因为想学的太多，所以就啥也没记住啥也没学好。这次训练营也是希望能够跟着winter大神好好打磨一下自己的知识体系，可以达到p6的水平。一 知识体系我之前也是比较在意自己知识体系的建立的，但是涉及的方面太多了训练营指导的知识体系删繁就简，重在基础。把精力放在前端js html css方面，并追本溯源达到真正的知其然后知其所以然。通过归纳总...
2020-04-15 21:13:33
3358
1
原创 有序数组的最快的查找算法
最近面试问的比较多的一个题目是：有一个有序的数组，有没有最快的方法查找到里面的一个元素是否存在？存在返回下标，不存在返回-1。部分人回答用循环，多数人想到用数组的findIndex方法。很少的人知道这个题是要用二分查找的。这个题主要是想看一下应聘人员对数据结构和算法有没一下了解。当然上面三种方式都可以实现这个需求，但是最优解还是二分查找法。首先，循环和findIndex的是算法复杂度度...
2020-03-20 11:15:17
8051
2
原创 webpack4.0学习笔记（2）
优化配置1、HMRHMR：hot module replacement 热模块替换作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大提升构建速度。样式文件：可以使用HMR功能，因为style-loader内部实现了。JS文件：默认不能使用，需要修改JS代码，添加支持HMR功能的代码。注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。html文件...
2020-03-19 15:37:21
514
原创 javaweb入门（四）-----Servlet与JSP进阶
HTTP请求HTTP请求的结构HTTP请求包含三部分：请求行、请求头、请求体。HTTP响应的结构HTTP常见状态码ContentType的作用
2020-03-15 20:34:31
137
原创 webpack4.0学习笔记（一）
介绍webpack是一种前端资源构建工具，一个静态模块打包器。在webpack看来，前端所有的资源文件都会作为模块处理。它会根据模块的依赖关系进行静态分析，打包生成对应的静态资源。五个核心概念Entry ：入口文件，以入口为起点开始打包，分析构建内部依赖图。Output ：出口，打包后的资源输出位置及命名。Loader ： 使得webpack处理非JS文件Plugins: 用于执行...
2020-03-13 16:53:44
238
原创 web安全及防御
XSS黑客往网页里注入恶意脚本代码，当用户访问时获取到包含恶意代码的网页。通过恶意脚本，黑客可以获取和控制用户信息。反射型XSS（非持久型）诱导用户点击恶意链接来造成一次性攻击。黑客把带有恶意脚本代码参数的URL地址发送给用户，用户点击此链接，服务端获取请求参数并且直接使用，服务器发射回结果界面。反射型XSS攻击是一次性的，必须通过用户点击链接才能发起。一些浏览器如Chrome，内置...
2020-03-12 10:46:15
439
原创 javaweb入门（三） ---- JSP
JSPJSP介绍JSP（Java Server Page） Java服务器页面JSP 是J2EE的功能模块，由web服务器执行。JSP的作用就是降低动态网页开发难度。JSP特点JSP使用简单，短时间学习便可上手使用。JSP可将java代码与HTML分离，降低开发难度。JSP的本质就是Servlet。JSP的应用程序要求可正常运行的Tomcat.所有JSP页面的扩展名...
2020-03-09 22:45:34
165
原创 javaweb入门（二） ----Servlet
J2EEJ2EE(java 2 platform Enterprise edition)是指“java 2企业版”。web应用就是J2EE最核心的功能。J2EE由13个功能模块：Servlet web服务器小程序。JSP 服务器页面。JDBC 数据库交互模块。XML XML交互模块。EJB 企业级Java Bean。RMI 远程调用。JNDI 目录服务。JMS 消息服...
2020-03-06 22:02:52
158
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人