- 博客(51)
- 收藏
- 关注
RSS订阅原创 Next.js——app里有什么
Next.js中app文件夹的主要结构，包括layout，page，load，not-found，error等的介绍
2024-05-09 00:00:45
849
原创 Next.js是什么
Nextjs对React做了二次封装，开发者能更快更容易的进行项目搭建，使用Nextjs之后，开发者不需要考虑构建打包，不需要考虑路由，可以自由选择服务端或者客户端渲染，它甚至还是一个全栈框架，只要你想，下一个全栈工程师就是你。
2024-04-13 23:38:15
756
原创 CSS拾遗
之前一直对CSS只有浅显的认识，许多所谓的属性也只是了解了大概，这次趁着项目的机会，也学习了很多，在此记录下来，作为查漏补缺，也作为一次总结。
2023-04-27 15:22:48
437
原创 svg动画的几种方式
最近在做的项目中有部分的svg需要做成动画，最开始的想法是转成gif，然后一看，啊，90M！！！实在不能忍，于是和设计妹纸一起研究起了svg动画，发现这玩意儿还是很好玩的，怎么让svg动起来，这是一个很有趣的话题。在目前的开发过程中，一共使用了三种方式，接下来就一一列举一下吧。如果有更好的方式，欢迎补充一起讨论。
2023-04-13 10:11:49
2852
原创 vscode使用小技巧
解放双手，让敲代码变得更加愉快，这里会不定时的记录一些vscode使用小技巧，看到哪个记录哪个，建议收藏，有时候脑袋抽了不记得可以回顾一下，平时都用上生活会愉快很多
2022-12-08 10:44:06
192
原创 2021前端面试总结及反思
1.背景校招进入一家初创型公司，工作刚满两年的前端入门级选手，写过vue，目前主要以React为主。从准备面试到拿到offer经历了将近5个月，大大小小面试20余次，刚开始的时候以为自己准备好了，但是没想到以为的准备好其实还差得远，不得不说，这几个月的面试与学习让我的前端技术突飞猛进，对很多知识的理解变得更加的深入，在此总结一下现在前端常考的一些知识点。有空的时候再把答案填补上～2.网络及浏览器原理从输入url到渲染出界面发生了什么？网络七层协议/五层协议？三次握手和四次挥手Http1.x，h
2021-07-12 23:33:10
418
2
原创 那些年的拦路虎们
这段时间被阿里面试了两次，以下是这两次笔试的题目，题目本身不难，奈何实力不足，做题的时候容易怂，所以做得不是很好，最近反思之后，将题目重新做了一遍，答案仅为个人想法，测试用例都过了，但还有一定（是很大很大很大）的进步空间，希望先记录下来，有空的时候再进行二次复盘。1.一个小时做出以下三道题难度：两颗星（题目真的不难，就是当时有点紧张）手写防抖（debounce）,手写节流（throttle）function debounce(fn, cb) { let timer; return fun
2021-06-06 23:48:52
161
3
原创 组件化和工程化
组件化和工程化是前端发展到一定阶段的产物，当模块化满足不了某个阶段的开发需求时，组件化和工程化就实现了。首先需要回顾一下模块化的概念。模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案，一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。1.组件化随着前端的不断发展，模块化已经不能满足简单的开发需求了。前端开发开始注重业务逻辑，UI和功能。在开发过程中可以按照不同的文件划分，每个文件都是一个满足某种业务逻辑，包含一定UI以及功能的相对独立的
2021-06-06 15:50:06
308
原创 Vue的生命周期
Vue的生命周期在生命周期之中需要对this进行应用，所以生命周期函数不能用箭头函数的方式声明beforeCreate在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前被调用这个时候还没将数据初始化，内容也还没被挂载，如果有些数据一定要先加载，那就需要在这个阶段进行created在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调
2021-05-27 23:50:04
48
原创 一些神奇但是很有用的css属性
一些神奇但是很有用的css属性linear-gradient：线性渐变background:linear-gradient(pink, #9198e5)自定义属性：在css中使用变量<!-- 定义自定义属性 -->:root { --theme-color: red;}<!-- 使用变量 -->h1 { color: var(--theme-color);}解决1px问题.scale-1px-bottom { positio
2021-05-27 22:52:17
125
原创 CSS基础——动画
动画的英文"Animation" 一词源自于拉丁文字根的anima,意思为灵魂;动词animate是赋予生命,引申为使某物活起来的animation可以解释为经由创作者的安排,使原本不具生命的东西像获得生命一般地活动广义的动画是指把一些不动的东西(绘画或是木偶),运用逐帧拍摄的方式制作并放映,使之变成运动的影像.1.动画的本质是动作的变化2.传统动画的由多幅相关连的动画组成帧动画3.传统动画是利用人眼睛的“视觉滞留效应”，当人眼所看到的影像消失后,影像仍在大脑中停留一段时间的现象。停留时间约1/2
2021-05-24 18:46:16
297
原创 Antd 设计语言
1.全局样式色彩色彩体系主要分为两个层面：系统色彩体系以及产品色彩体系；系统色彩体系是系统的一些基础颜色，产品级色彩体系更多的是根据产品诉求不同而使用的颜色（像品牌色，功能色之类的）色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的布局UI界面的空间布局要基于「动态、体系化」的角度出发展开，建议从以下5个方面出发统一的画板尺寸：统一设计板尺寸适配方案：判断系统是否需要适配，哪些区域是需要动态布局的(1920,1440,1366,1280等)网格单位：antd的网格基数是8（
2021-05-24 17:19:10
765
原创 聊聊V8引擎
首先要记住一个知识点，在浏览器中有那么一个部分叫js引擎，专门用来翻译js代码，把js代码翻译成机器能够执行的字节码或者机器码，以此提高执行效率。js引擎有很多，不同浏览器使用的可能都不一样，这里主要讲的是V8引擎，讲它是因为chrome用的是它，而且Node.js用的也是它（说白了就是当今使用量比较大）定义：V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It
2021-05-19 21:33:08
330
原创 手写promise方法
1.promise.allfunction promiseAll(promises) { // 全部resolve或者一个reject就返回 return new Promise(function (resolve, reject) { if (!Array.isArray(promises)) { return reject(new TypeError("入参必须是数组")); } let resolvedCount = 0; let len = pr
2021-05-09 12:30:59
103
原创 compose函数
compose函数先po一下实现方法// 解法1 迭代function compose(fns) { let fnsArr = [...fns]; // 因为arguments是个类数组，所以需要先将它转化为数组，方便后续迭代操作，类数组转化为数组的方法还有很多，比如slice(0),concat(),Array.from()等 let index = fnsArr.length - 1; // 获取最后一个函数的索引 let res = null; // 初始化结果， return
2021-05-09 12:25:51
1232
2
原创 模块化简介
模块化什么是模块模块是将一个复杂的程序依据一定的规则封装成几个文件，并将这些文件组合在一起，每一个文件内部的数据和实现是私有的，只是向外部暴露一些接口方法以对外部其他模块进行通信模块的实现进程全局function模式：将不同的功能封装成不同的全局函数，这样的话容易污染全局命名空间，而且每个模块之间的关联并不能通过肉眼看出来命名空间模式：它进行了简单的对象封装，将关联的模块作为对象的属性封装在一起，这样的话能减少全局变量，但对于对象而言，外部可以随时修改模块内部数据IIFE模式(立即执行函数)：
2021-05-01 17:57:33
242
原创 客户端和服务器之间的异步请求
浏览器最开始和服务器开始有密切数据交互之后，原来的同步请求就开始不够用了，这个时候出现了一些异步请求技术，如ajax，axios和fetch，在交互过程中，为了数据安全，出现了同源策略，为了满足业务需求，我们也需要一些方式来实现跨源请求
2021-05-01 16:35:14
552
原创 ES的那些新特性
这段时间看到很多的es新特性，很多其实使用起来很方便，所以将他们都记录下来，也便于项目报错的时候发现可能特性太过于新babel没有正确转换的问题es12String.prototype.replaceAll()返回一个新字符串，模式的所有匹配都会被替换，等价于全局正则表达式'abbaababab'.replaceAll('ab','ee') // 'eebaeeeeee''abbaababab'.replace(/ab/g,'ee') // 'eebaeeeeee'Promise.an
2021-04-24 22:33:10
253
原创 客户端Javascript
这里主要聊聊js是如何在Web浏览器中实现的，介绍一些常见的API以及使用方法1.Window对象Window对象是客户端js程序的全局对象，是所有客户端js特性和api的主要接入点（所以在js中用到window对象时this一般都会指向全局）时间循环相关setTimeout和setInterval这两个API用来注册在指定时间之后单次或者重复调用的函数，前者是只调用一次，后者重复调用，声明时会生成一个id，如果不使用clearTimeout(id)和clearInterval(id)，计时
2021-04-24 21:11:17
325
原创 从输入url到看到页面经历了些什么（一）
从输入url到看到页面经历了些什么（一）这篇文章描述的是从输入url到数据回传到浏览器过程中主要发生了什么，当中穿插了一些与之相关的知识点
2021-04-17 20:08:27
196
原创 一些简单leetcode题目
Leetcode-1822 数组元素积的符号已知函数 signFunc(x) 将会根据 x 的正负返回特定值：如果 x 是正数，返回 1 。如果 x 是负数，返回 -1 。如果 x 是等于 0 ，返回 0 。给你一个整数数组 nums 。令 product 为数组 nums 中所有元素值的乘积。返回 signFunc(product) 。解题思路可能比较奇葩：var arraySign = function(nums) { if(nums.indexOf(0) > -1){
2021-04-16 23:54:47
212
原创 leetcode-打家劫舍
打家劫舍分简单版和进阶版两个题目，分别对应leetcode-198以及leetcode-213，普通版题目：专业的小偷，每间房内都藏有一定的现金，相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警。给定一个代表每个房屋存放金额的非负整数数组，计算你 不触动警报装置的情况下 ，一夜之内能够偷窃到的最高金额。进阶版的题目加了一个条件，房子首尾相连；思路我是先看的进阶版题目，首尾相连的屋子，所以这次从进阶版题目开始说起。拿到题目的时候，第一个反应是贪心（后来血泪史
2021-04-16 00:59:39
177
原创 leetcode-179-求最大数
求最大数题目：给定一组非负整数 nums，重新排列每个数的顺序（每个数不可拆分）使之组成一个最大的整数。（leetcode-179）题目分析：一看到排序，第一个想到的快排（因为最近在快排上栽了跟头，所以看到题目啥也不管先写一个快排），这道题的难点其实不在于排序算法本身，而在于用怎样的规则将数组排列好。下面是详细的题解：function compareNum(a,b){ // 比较函数是关键 //比如33和222相比，最终目的是比较33222和22333，他们俩谁大决定谁位置排在前面，33222=
2021-04-12 23:44:38
114
原创 内存管理
内存声明周期分配所需要的内存js在定义变量时就完成了内存分配还会通过函数调用分配内存（看返回的时对象，元素还是字符串来决定）使用分配到的内存（读，写）使用值的过程实际上就是对分配内存进行读写的操作，可能是写入一个变量或者写入对象的属性值，甚至是传递参数的函数不需要时将内存释放/归还js嵌入了垃圾处理器，找出哪些不再继续使用的变量，释放其占用的内存常用的两个垃圾回收算法——引用计数以及标记清除引用计数：跟踪记录每个值被引用的次数，把对象是否不再需要这个概念简单理解为，对象有
2021-04-11 23:17:45
73
原创 类和继承
类是用于创建对象的模板，简单的理解，类就是通用事务的抽象类的所有实例对象都是从同一个原型对象继承属性，因此，原型对象是类的核心。只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性就会指向函数的原型对象，同时prototype会有一个constructor属性，会指向prototype属性所在函数的指针构造函数是用来初始化新创建的对象的，使用关键字new来调用构造函数，就能自动创建一个新对象，也就是能够创建一个实例，构造函数是类的外在体现实例就是类的具体化，类的
2021-04-11 22:29:00
469
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人