- 博客(45)
- 收藏
- 关注
RSS订阅原创 前端实践-基于浏览器的开发与性能优化一
认识浏览器调试面板【红色圆点按钮】：表示“开始 / 暂停抓包（packet capture）。所谓抓包，就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全。默认情况下是开始抓包。但是如果关闭该按钮停止录制，那么重新刷新该页面，就获取不到任何请求。【Preserve log（保留日志）】：若页面有跳转，开启该功能可以默认保留之前的请求【Disable cache（禁止从 Cache 中加载资源）】：开启了 Cache 会影响到网络性能测试的结果【 抓图信息区域】：
2022-05-04 12:31:48
870
原创 Git命令
撤销刚刚的commit，使文件改动恢复到暂存区git reset --soft HEAD^git-数据恢复git reflog-查看引用日志reflog = Reference log，表示引用日志。当本地仓库中的引用发生移动时，reflog 都会记录下这个移动的行为，跟部移动记录仪差不多。仓库中的『引用』包括HEAD指针和分支指针git reflog <ref> // 其中ref默认HEAD指针，可以通过替换ref来查看其他引用的日志 //查看 master 分支.
2022-04-25 15:09:52
1687
原创 React文档通读-part one
prosp的只读性纯函数个人理解：纯函数就是函数内部不去更改入参的函数，并且相同的输入，总是会得到相同的输出，并且在执行过程中没有任何副作用。这里的副作用指的是函数在执行过程中产生了外部可观察变化。常见的副作用（1）发起HTTP请求（2）操作DOM（3）修改外部数据（4）console.log()打印数据（5）调用Date.now()或者Math.random()如下代码的两个函数中，sum函数就是纯函数，因为它不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。相比之下，w
2022-03-30 16:07:40
1281
原创 字体被切割问题
在PC端做的H5网页，在某些机型上会出现如下图所示的样式分割问题。解决该问题可以采取：（1）给字体设置大于font-size的行高，然后行与行之间的其他距离 可以用margin来控制。（2）尝试给字体增加/减少几px的距离另外对于地址这一行的布局（1）采用flex布局（2）50km处采用绝对定位方式。因为flex布局会有些小问题，div内部文字过长的时候会溢出。行高line-height行高支持四种类型的属性值normal：line-height的默认属性值，最终长度与字体大小、字体族
2022-03-30 11:58:44
828
原创 React-useCallback与useMemo
文章目录useCallbackuseMemo结论补充js中的作用域useCallbackuseCallback(fn, deps)相当于useMemo(() => fn, deps)。输入：内联回调函数，依赖项数组输出：传入的回调函数的memoized版本const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b],);useCallback的用法与useState的用
2022-03-23 16:19:22
623
原创 Linux命令
文章目录进入目录进入目录比如你要进入~/Library/Application\ Support/xxxx工具/cli/logs中，并删除logs文件夹中的所有日志文件（1）在终端中输入 cd ~/Library/Application\ Support/xxxx工具/cli/logs即可（2）进入到其上层文件夹 cd ../ （3）查看cli文件夹下的文件 ls（4）删除logs文件夹 rm -rf logs（5）新建logs文件夹 mkdir logs（6）重新查看文件加列表 ls（7
2022-03-08 16:12:44
742
原创 JS-正则表达式
文章目录前言一、JS正则二、使用步骤总结前言无一、JS正则// 边界符号（一般用于精准匹配）^ 以它开始$ 以它结束// 量词符号* 重复0次或者更多次（可理解为乘法）+ 重复1次或者更多次（可理解为加法）? 重复0次或一次（可理解为三元表达式的?是否存在）{n} 重复n次{n, m} 重复n到m次| 或者二、使用步骤总结提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的
2022-02-13 14:22:38
322
原创 JavaScript中的JSON对象
文章目录前言一、JSON1.JSON.stringify()2.前言一、JSONJSON官网给出JSON由两种结构组成：（1）一个键值对的集合-A collection of name/value pairs（2）一组有序值-An ordered list of values.1.JSON.stringify()JSON.stringify()方法将一个JavaScript对象或值转换为 JSON字符串，如果指定了一个replacer 函数，则可以选择性地替换值，或者指定的replacer
2022-02-08 20:49:57
766
原创 JavaScript之DOM的位置、属性、方法
文章目录前言一、DOM的位置1.1、`getBoundingClientRect()`注意1.2、`element.scrollLeft && element.scrollTop`1.3、`offsetParent && offsetLeft && offsetTop`-元素自身相关的属性（开发中不常用到）1.4、`element.clientTop && element.clientLeft`前言前段时间的开发工作涉及
2022-02-04 22:37:48
2870
原创 HTML标签
文章目录总结&理解输出1、[input](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#%3Cinput%3E_types)input常见问题二、使用步骤1.引入库2.读入数据总结总结&理解输出1、inputinput元素有诸多属性，可以用于充当按钮、复选框、日期控件、选择文件、单选按钮、密码输入等等，是个很强大的元素。但实际上大部分属性只作用于特定一组 type。此外，一些属性作用于的方式取决于的t
2022-01-13 23:49:47
131
原创 css之样式惨案-字体族学习
项目场景：UE同学反馈 字体未加粗、文字之间分割线没有与文字居中对齐。定位到了问题后，我发现字体确实已经加粗，而且设置的flex布局通过align-items设置了垂直居中。在安卓上，字体加粗了，而iphone上字体未加粗。所以我认为这又是一个难搞的兼容问题…尝试了各种方案发现就是没效果然后发现加粗问题是字体族写错了…font-family: PingFangSC-Medium;// 而我拼成了// font-family: PingFangSC-Meduium;// 就离谱....
2022-01-11 19:36:17
305
原创 GIT之【ERROR: commit count: 1, latest commit: xxxxx. missing Change-Id in message footer】
项目场景：在一次代码提交的时候，怎么也无法提交成功。【前情提要】该项目启动时，报错npm ERR! could not determine executable to run，然后我参考了这篇文章。将项目中的依赖升级并安装了husky…项目确实是正常启动了，但是提交代码的时候，让人头大的事情发生了，如下图所示如图所示，changeId丢失。根据图中的建议，我重新安装了hook并commit --amend --no-edit，但仍然无法提交。然后尝试了如下解决方案原因：已经安装hook，本地做m
2022-01-11 18:00:53
3074
1
原创 scss中的样式复用：继承；占位符；混合宏
文章目录一、@extend-待更新学习一、@extend-待更新学习.title { color : #f5f5f5; font-size:57px; font-family: PingFangSC;}.cusTitle1 { width : 100px; @extend .title;}.cusTitle2 { width : 200px; @extend .title;}
2022-01-10 14:45:01
4026
原创 div-滚动时设置不显示滚动条
文章目录总结&输出理解一、横滑、竖滑总结&输出理解css一、横滑、竖滑在固定大小的div中设置滑动效果，一般使用overflow-x和overflow-y，此时会出现x方向和y方向的滑动条。以下为消除滑动条的方法（浏览器、移动端、浏览器&移动端兼容）overflow-x: scroll;scrollbar-width: none; /* firefox */-ms-overflow-style: none; /* IE 10+ */&::-webki
2022-01-10 14:33:05
3230
原创 next.js学习笔记-getServerProps获取数据
学习目标：getServerSideProps获取数据学习内容：1.getServerProps获取数据学习产出：静态化访问xxx路由之前，向服务器请求数据和HTML加工直接返回前台展示。作用：下次访问同一个路由地址的时候，直接返回静态页面减少服务器的压力，以达到优化的目的。获取数据的几种方式获取数据方法静态化异步只能在pages文件夹下作用服务端请求getStaticProps是是是是请求数据getStaticPaths是是是是生
2022-01-10 00:37:07
1814
原创 JS判断数组、对象
Object.prototype.toString.call()优点：可以检测所有基本数据类型，即使是 null和defined缺点：不能精准判断自定义对象，对于自定义对象只会返回[object Object]Object.prototype.toString.call() 常用于判断浏览器内置对象每一个继承自Object 的对象都有toString方法，如果该方法没有被重写的话，就会返回[Object type]（其中type为对象的类型）非Object类型的对象使用toString时，会
2021-12-29 15:02:48
464
原创 React Hooks之useMemo
学习目标：useMemo学习内容：useMemo学习产出：useMemo为了进行性能优化，React提供了useMemo 和 useCallback。其中useMemo 用来保持一个对象引用不变。React-useMemo中给出了使用useMemo的介绍：它返回一个memoized 值，且仅会在某个依赖项改变时才重新计算memoized值。如果没有提供依赖项数组，则它在每次渲染时都会计算新的值。const memoizedValue = useMemo(() => computeE
2021-12-28 17:52:45
2977
原创 React Hooks之useState
学习目标：setState学习内容：提示：这里可以添加要学的内容例如：1、 setState2、 掌握 Java 基本语法3、 掌握条件语句4、 掌握循环语句学习产出：setStatesetState更新状态的两种写法。（1）对象式的setStatesetState(stateChange, [callback])stateChange为 状态改变对象（该对象可以提现状态的更改）callback是可选回调函数，它在状态更新完毕、界面更新完毕后（render调用后）才会被调
2021-12-28 15:53:40
721
原创 amis开发文档-快速熟悉文档
文章目录前言一、amis开发文档二、使用步骤前言amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。一、amis开发文档amis开发文档amis中提供的组件在amis中自定义样式通过示例更好的了解amis二、使用步骤更新ing…...
2021-12-25 18:37:23
1990
原创 前端开发-CSS踩坑&经验集锦
文章目录1、布局时，注意 文字 溢出的情况1、布局时，注意 文字 溢出的情况在开发场景中，经常会有左右的布局的情况。当两侧未设置具体的宽度时，文字往往会溢出。因此要注意考虑文字溢出的处理...
2021-12-20 14:29:07
163
原创 next.js学习笔记-css的引入
学习目标：css引入学习内容：next中1、页面中如何引入css2、组件中如何引入学习产出：css的引入（四种方法）方法1：全局引入在pages文件夹下新建_app.tsx文件（next中有一个app根组件，新建_app.tsx是在重写该文件）//_app.tsx文件import "../styles.scss"export default ({Component, pageProps}) => ( // Component代表动态组件，跟随访问地址不同而指向不同的组件
2021-12-14 21:08:16
1327
原创 next.js学习笔记
学习目标：掌握next.js页面开发流程学习内容：next.js页面开发流程1、 创建新的页面和组件2、 路由的标签跳转和编程跳转3、 路由跳转使用query传递参数和接收参数，6个钩子事件学习产出：next.js出现背景VUE和React开发得到的是单一页面，存在首屏加载过慢（第一个页面将所有资源都加载过来）、不能SEO这两个问题优点（1）搭建轻松（2）自带数据同步（3）丰富的插件，自己形成生态（4）配置灵活项目基本结构-pages添加页面在 Next.js 中，一个 pag
2021-12-13 19:29:01
699
原创 文字与icon水平居中
如图所示，实现文字和icon居中。表面上看是一个很简单的实现。我的代码<div className='enquire'>咨询客服</div>.enquire{ position: relative; font-family: PingFangSC-Regular; font-size: 45px; color: #525252; letter-spacing: 0; line-height: 45px; padding-right:.
2021-11-11 10:26:50
851
原创 sass文件-嵌套规则
sass允许将一套CSS样式嵌套进另一套样式中。【目的】：避免了重复输入父选择器，结构看起来更清晰并且易于管理。其中：（1）内层的样式将它外层的选择器作为父选择器（2）&将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递。&所在的位置只代表了他的父亲，也就是说在每一层，指向是都是他所在的父元素。#app { h1 { text-align: center; &:hover { .
2021-10-31 16:56:04
481
原创 百度小程序开发-事件处理
与浏览器的 DOM 事件类似，智能小程序的视图中事件分为冒泡事件和非冒泡事件冒泡事件指的是当组件上的事件被触发后，该事件会向父节点传递；非冒泡事件指的是当组件上的事件被触发后，该事件不会向父节点传递用法事件绑定在组件上，与属性的写法相同（以 key、value 的形式）。<view id="text" bindtap="handleTap3">code here</view>key 以 bind 或 catch 开头，衔接事件类型，例如 bindtap、cat.
2021-10-12 08:10:57
199
原创 background、background-color、background-image
1. 遇到的问题【需求】：为已经设置了渐变色背景的按钮，增加另一种情况设置一种固定颜色。【错误做法】：在定义的新类中设置background-image为’#E3F1FB’。【结果】：发现颜色一直没有生效，但是检查了类名确实已经添加，但是颜色没有生效。原先代码为// 原先颜色.container { background-image:linear-gradient(180deg, #E3F1FB 0%, #E3F1FB 32%, #ffffff 100%);} 【原因】：ba
2021-09-22 16:11:05
1225
原创 MATLAB-批量重命名文件
之前算法A用1.1版本的platEMO运行后得到的文件名与2.0.6版本的不一样，所以再重新运行对比算法的时候，算法A得到的数据就无法读取，所以只好进行重命名操作…原来文件的命名方式DDEA_WFG3_M8_1.mat要求的格式DDEA_WFG3_M8_D17_1.mat即在M8字符串的后面添加字符串即可，使用insertAfter函数newStr = insertAfter(str,startStr,newText)str:表待修改的字符串startStr:要在str中的哪一个字符后插入
2020-07-13 21:18:18
276
原创 总结：js延迟加载的方式有哪些？
该面试题主要考察的是程序的性能方面。性能优化的核心思想就是快，常见的优化手段有预先准备数据（如缓存），按需获取，分段、异步获取等1.JS的同步加载同步加载（又称阻塞模式）：直接将参考博客：https://www.cnblogs.com/songForU/p/10905031.html...
2020-06-18 15:43:39
585
原创 前端复习1：从一道题分析JS事件循环机制
console.log('global')//第一个宏任务(整体script)进入主线程,打印afor (var i = 1;i <= 5;i ++) {//注意这里定义了全局变量i setTimeout(function() {//遇到setTimeout，其回调函数进入宏任务队列 console.log(i) },i*1000) console.log(i)//打印i}new Promise(function (resolve) {//遇到Promise，new Pr
2020-06-15 22:45:20
240
原创 js算法：两个栈实现一个队列
题目：用两个栈来实现一个队列，完成队列的Push和Pop操作本来是很简单的一道题，但是二刷的时候又出错了…反思我的错误代码：var inStack=[];var outStack=[];function push(node){ inStack.push(node);}function pop(){ if (outStack){ return outStack.pop(); }else{ while(inStack){
2020-06-08 10:29:29
338
原创 JavaScript闭包
首先是一些基本概念：匿名函数 和 自执行函数 / 自调用函数匿名函数的基本形式:function () { //代码 }既然没有名字，那么如何调用呢：（1）将匿名函数付给一个变量，这个变量现在就充当了这个函数的名称，但是记住，这个不是名称，在用该变量时就等同于使用该函数。var b=function () { //代码 }b();（2）使用自...
2019-09-08 22:28:36
93
原创 JavaScript--块级作用域
参考文章1参考文章2什么是块级作用域？任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域，例如for、while、if而JavaScript不具有块级作用域（在es6标准出来之前，javascript是不存在块级作用域的），即在javascript的代码块中定义一个变量，在该代码块外面仍可使用该变量，例如：<scrip...
2019-08-25 22:02:36
645
原创 前端面试题-声明提前
参考文章面试题：四处分别输出什么？为什么？console.log(a)//?a();//?var a =3;function a(){ console.log(10);}console.log(a);//?a = 6;a();//?正确代码顺序可以改为：function a(){ console.log(10);}var a;//再次声明a，并未修改a的值，忽...
2019-08-23 11:33:35
211
转载 排序算法
（1）冒泡排序（2）快速排序参考博客（快排原理）参考博客（形象化过程）快排原理：在要排的数（比如数组A）中选择一个中心值key（比如A[0]），通过一趟排序将数组A分成两部分，其中以key为中心，key右边都比key大，key左边的都key小，然后对这两部分分别重复这个过程，直到整个有序。整个快排的过程就简化为了一趟排序的过程，然后递归调用就行了。一趟排序的方法：1，定义i=0，j=...
2019-05-29 20:48:09
118
原创 字符串拼接和截取
package test01;/** * 测试字符串拼接和字符串截截取 * @author Administrator * */public class CutString { public static void main(String[] args) {//字符串截取代码===============================================...
2019-05-28 12:10:00
1844
原创 数组的打印方式（java）
package test01;import java.util.Arrays;/** * 打印数组的几种方法 * @author Administrator * */public class PrintArrayTest { public static void main(String args[]) { int[] b= {5,7,2,9,4,1,0,5,7};//新建数...
2019-05-28 11:04:29
169
转载 实现一个简单的LinkedList
LinkedList底层实现package cn.byhieg.collectiontutorial.listtutorial;/** * Created by byhieg on 17/2/15. * Mail to [email protected] */public class SimpleLinkedList<E> { private int size;...
2019-05-26 22:04:50
216
转载 自己封装ArrayList类
ArrayList底层实现package cn.byhieg.collectiontutorial.listtutorial;import java.io.Serializable;import java.lang.annotation.ElementType;import java.util.Arrays;import java.util.RandomAccess;/** * ...
2019-05-26 15:06:25
308
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人