- 博客(26)
- 收藏
- 关注
RSS订阅原创 前端也可以学习的Docker
本文从使用者角度介绍了Docker CLI、Dockerfile相关内容并使用了官方文档中的示例进行技术演示，最后对Kubernetes等容器编排技术进行了简单的介绍
2023-10-09 11:54:18
214
原创 前端工程化实践 - 代码规范 & 提交规范 & 构建流程 & Monorepo（附 React Native 案例）
本篇文章将从仓库策略、 依赖管理、代码规范、提交规范、任务流程五个角度向读者介绍前端项目的一些工程化技术以及如何使你的 React Native 项目兼容 Monorepo 策略，同时你将了解到 lerna、yarn workspace、husky、lint-staged、eslint、prettier、commitlint、commitizen、webpack 等技术在项目中是如何工作的。
2023-06-13 10:30:06
853
原创 2024届 面试总结
一面（技术面 50分钟）自我介绍你平时是怎么学前端的？你刚刚有提到单点登录，什么是单点登录。你当时是怎么实现的？ST，TGT，登录态Ticket 存在哪里？你会涉及到一些跨域的问题吗？项目中的 Cookie 会涉及到安全问题吗？怎么去避免？Cookie 过期时间项目中用到了 UmiJS、React、dva，你是怎么做技术选型的？讲一讲在用 dva 过程中遇到的问题从 dva 中获取数据时，你一般会怎么写？讲一讲 webpack 相关的配置移动端样式要怎么适配，从 css 方面讲。（讲
2023-05-25 19:38:33
364
原创 Android 12 Indirect notification activity start (trampoline) from xx blocked解决方案
最近在写一个点击通知发出Broadcast并在中处理一些事情后再打开Activity的功能。调试时没有问题，但在应用打包后点击通知时Activity无法被打开
2023-04-17 15:02:07
641
原创 彻底解决 Delete `␍`
从仓库中拉取新的代码时总会遇到`Delete ␍ eslint(prettier/prettier)`的问题，现在总结一下解决方法
2023-02-17 20:24:19
1497
2
原创 React Native 安卓全面屏状态栏和底部导航栏透明适配
最近在写项目，调试应用时发现顶部状态栏和底部全面屏手势指示条区域不是透明的，看起来很难受。研究了一下这个问题，现在总结一下解决方案。原生组件提供的 Hooks -重写应用的onCreate生命周期方法修改styles.xml配置文件关于全面屏UI和手势适配问题，可以参考Android开发文档中的相关内容。
2023-01-24 21:57:47
1460
原创 Umi4 从零开始实现动态路由、动态菜单
近期在写 Umi4 的练习项目，计划实现一个从服务器获取路由信息并动态生成前端路由和导航菜单的功能。本文记录了相关知识、思路以及开发过程中踩到的坑。
2022-10-04 22:56:28
11058
14
原创 React 学习笔记 - react router v6 hooks
React 学习笔记 - react router v6 hooks前言详解useHref功能示例useInRouterContext功能useLocation功能useMatch功能useNavigate功能示例useNavigationType功能useOutlet功能useParamsuseSearchParams功能useResolvedPath功能useRoutes功能参考文档前言目前正在学习react router，了解到v5和v6版本具有较大差异。本文将结合源代码详细说明react rou
2022-03-31 17:34:56
2411
原创 React 学习笔记 - 利用Context和react-router实现权限路由
React 学习笔记 - 利用Context和react-router v5实现权限路由前言思路实现向根组件注入权限列表抽离ContextHOC实现权限路由组件实现实现使用方法实现类似react-router-config的集中式权限路由配置实现使用方法前言之前使用高阶组件和Context实现简单的权限拦截，本篇文章将引入react-router，实现权限路由功能通过阅读本篇文章，你将了解：如何在当前示例中使用Context，以及如何通过React Hooks使用Context创建一个Permi
2022-03-29 16:00:49
984
原创 React 学习笔记 - create-react-app踩坑 & eslint
React 学习笔记 - create-react-app踩坑 & eslint问题解决方案eslintrc配置文件解析parserOptions 解析器配置env 代码运行环境extendsrulesplugins使用TypeScript问题最近使用create-react-app创建了一个项目，然后使用npm run eject使配置文件暴露此时，产生了错误 Using babel-preset-react-app requires that you specify NODE_ENV or
2022-03-26 18:12:33
2739
原创 React 学习笔记 - 利用高阶组件和React Hooks实现权限拦截
React 学习笔记 - 利用高阶组件和React Hooks实现权限拦截思路实现注入权限列表抽离Context向页面注入权限列表的HOC向根组件注入权限含有权限拦截功能的HOC无权限时显示的组件权限拦截HOC组件测试用于测试的组件在组件中使用权限组件高阶组件是以组件作为参数，返回一个组件的函数。返回的组件把传进去的组件进行功能强化。通过以下示例进一步理解高阶组件。思路使用HOC包裹需要权限的页面或组件，并注入唯一的权限签名用Context保存全局的权限菜单列表，用Provider注入异步获取到的
2022-03-15 10:38:57
2052
原创 React 学习笔记 - 使用React Hooks进行简单的表单封装
React 学习笔记 - 使用React Hooks进行简单的表单封装前言示例组件使用Form组件FormItem 组件Input 组件前言学完@我不是外星人的React进阶实践指南，了解了props的基本使用、隐式注入props、表单嵌套原理等。利用所学React Hooks知识对原文给出的demo进行了简单改动希望通过这实践 demo 让大家学习到：props 基本使用学会操作 props.children ，隐式注入 props掌握表单嵌套原理(现实情况要比这个复杂)示例组件使用
2022-03-06 20:36:25
1188
原创 React学习笔记 - Context
React学习笔记 - Context介绍APIReact.createContextContext.ProviderContext.ConsumerClass.contextTypeContext.displayName介绍Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 propsContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎
2022-02-13 16:04:36
549
原创 React学习笔记 - 事件处理绑定this指向
React学习笔记 - 事件处理绑定this指向使用箭头函数使用`Function.prototype.bind()`public class fields使用箭头函数利用箭头函数自身没有作用域的特点，使用箭头函数处理this指向，但这种方法每次渲染都会创建一个新的函数class App extends React.Component { constructor(){ this.state = { count: 0 } } render(){ return ( <s
2022-02-09 16:29:21
425
原创 JS学习笔记 - Proxy & Reflect
JS学习笔记 - Proxy & ReflectProxy定义Proxy捕获器不变式可撤销代理this问题Reflect应用跟踪属性访问隐藏属性属性验证函数与构造函数参数验证Proxy实现观察者模式ProxyProxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写定义ProxyES6提供了Proxy构造函数，用来生成Proxy实例var proxy = new Proxy(target,handle
2021-10-23 23:56:28
137
原创 JS学习笔记 - 深入理解浏览器和Node.js中的宏任务、微任务、事件循环
JS学习笔记 - 深入理解浏览器和Node中的宏任务、微任务、事件循环JavaScript是单线程的浏览器线程简介GUI渲染线程JS引擎线程定时器触发线程浏览器事件线程http请求线程宏任务和微任务宏任务和微任务有哪些宏任务微任务浏览器的事件循环浏览器的宏任务、微任务机制JavaScript是单线程的JavaScript是一个单线程的脚本语言，即JS的代码只能在一个进程中运行。也就是说，JS只能同时执行一个任务。但如果全部代码全是同步执行的，这会引发很严重的问题，比方说我们要从远端获取一些数据，难道要一
2021-10-11 00:11:29
214
原创 原生 JS 实现轮播图
原生 JS 实现轮播图页面布局原理代码页面布局设置一个父容器作为遮罩，子容器包含了要播放的图片子容器为flex布局使元素水平排列子容器中的图片元素flex-shrink:0确保元素不被压缩通过改变子容器的left实现轮播图的移动原理首先在图片的首和尾使用insertBefore appendChild cloneNode方法将首尾的- 图片克隆添加到首尾然后将父元素 left 向左移动一个屏幕宽度的距离。这样才能让第二张（因为首尾各添加了一张图片，所以原先的第一张就变成了第二张）变成可视范
2021-09-08 09:57:02
235
原创 JS学习笔记 - localStorage和sessionStorage
JS学习笔记 - localStorage和sessionStorage简介Web Storage 和 cookie 的异同点相同不同生命周期不同存储大小限制不同作用域不同与服务器通信易用性Web Storage API添加键值对获取键值删除键值对清除所有键值对其他方法判断是否存在键获取localStorage中键值对数量获取 localStorage 的属性名称通过StorageEvent响应存储的变化简介HTML5 Web Storage提供了两种在客户端存储数据的新方法 localStorage
2021-09-07 10:59:16
552
原创 CSS学习笔记 - 移动端界面与响应式界面
移动端界面与响应式界面移动端样式适配px、em、rempxemremw3c盒模型和ie盒模型w3c 盒模型IE盒模型移动端样式清除视口设置媒体查询设备类型语法@media语法监控设备@import语法监控设备style标签监控设备link标签监控设备移动端常见布局响应式布局实现BootStrap的栅格类网格配置示例代码流式布局flex布局grid布局rem布局移动端样式适配px、em、rem1 ÷ 父元素的font-size × 需要转换的像素值 = em浏览器默认字体大小是16pxpx1p
2021-08-25 23:37:57
419
原创 JS学习笔记 - this指向
JS学习笔记 - this指向默认绑定隐式绑定隐式丢失显式绑定new绑定严格模式默认绑定全局环境下this指向window函数独立调用时，函数内部this指向window被嵌套的函数独立调用时，this指向windowIIFE自执行函数表达式中，this指向window闭包中this指向window隐式绑定当函数作为对象中的方法时，this指向该方法的直接对象隐式丢失将函数复制别名将函数作为参数传递函数作为内置函数时settimeout(function(){ //this指
2021-08-17 22:38:50
86
原创 JS学习笔记 - 深拷贝
JS学习笔记 - 深拷贝function deepCopy(source,target){ for(let key in source){ if(source[key].hasOwnProperty(key)){ //只取非原型对象中的属性 if(source[key] && typeof source[key] === 'object'){ //判断该属性对应的值是是否为Array或object //注意：typeof new Array和typeof new
2021-07-29 19:33:53
84
原创 JS学习笔记 - Object
JavaScript Object 学习笔记JavaScript 对象创建模式对象字面量工厂模式构造函数模式拓展构造函数模式寄生构造函数模式稳妥构造函数模式原型模式组合模式动态原型模式JavaScript继承原型链继承借用构造函数继承组合继承寄生组合式继承Object的静态方法Object的实例方法属性描述对象JavaScript 对象创建模式对象字面量var obj = {}var o = new Object();缺点：创建过多重复代码，占用内存控件，代码过于冗杂工厂模式function
2021-07-29 18:40:04
143
原创 JS学习笔记 - Promise
JS学习笔记 - Promise一、概念Promise对象状态状态不变性二、使用使用Promise对象链式操作- Promise.prototype.then()Reject处理语法糖 - Promise.prototype.catch()Promise.all()Promise.race()Promise.allSettled()一、概念Promise对象ECMAScript 6 中提供了Promise对象，用来传递异步操作的消息，它代表了一个异步操作的最终完成或者失败。状态Promise对象代
2021-07-05 21:02:40
184
原创 JS学习笔记 - 数组遍历方法
JS数组高阶方法一、Array.prototype.forEach()示例代码通过索引修改原数组二、Array.prototype.map()示例代码三、Array.prototype.filter()示例代码四、Array.prototype.reduce()示例代码 - 累加示例代码 - 求最大值示例代码 - 数组去重五、Array.prototype.find()示例代码六、Array.prototype.some()示例代码七、Array.prototype.every()一、Array.prot
2021-06-20 15:14:33
185
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人