Baron的技术blog

原创 电脑bios启动按键

原创 用React hock 实现点击提示并复制的功能(兼容性好)

【代码】用React hock 实现点击提示并复制的功能(兼容性好)

原创 小米浏览器图片不显示问题

在开发 webview 过程中遇到一个问题, 类名 wechatImg 的 div 通过 background 引入的一张图片无法在小米的手机浏览器上显示. 遇到这个问题时十几种pc 浏览器,7\8种 mobile 浏览器都通过了测试,唯独在小米的移动端无法展示.在元素前添加一个空的 span 标签来解决小米手机不显示 .wechatImg 元素内容的问题，这可能代表了一个特定的渲染或重排(repaint/reflow)行为在小米手机的浏览器上。某些浏览器可能在处理空或伪装元素时有不同的优化策略。

原创 React 技术栈框架react库的对比

在这里插入图片描述。

原创 前端脚手架工具和前端构建工具的区别

构建工具是用来处理和转换项目中的源代码的工具。这些工具可以把高级语言或者较新的标准的代码转换成浏览器可以理解的形式，并对资源文件（如CSS、图片和字体等）进行优化。脚手架工具是用来快速生成项目结构、配置以及一些基础代码的工具。使用脚手架可以让开发者不需要从零开始配置项目，这样可以大大提高项目的起步速度和效率。了解了这些工具各自的作用，可以帮助开发者高效地设置和维护前端开发环境，从而加快项目开发的进度。在实际应用中，这两类工具往往是相互配合使用的。

原创 lowCode 的实现原理

整体架构相对简单，核心就是定义一套标准的数据规范，提供一个编辑器去编辑这个数据，同时提供一个解释器去解析该数据，然后渲染出页面。页面都是由组件递归嵌套而来(DOM树), 基础公共逻辑采用Mixin封装,同时方便接入扩展能力。

原创 react函数组件模拟生命周期

【代码】react函数组件模拟生命周期。

原创 浏览器滚动到底部页面加载问题

浏览器滚动到底部页面加载问题

原创 项目使用Swiper4兼容小于IE11方案

兼容IE

原创 2022年大庆铁人中学2022高考喜报

2022大庆铁人中学2022高考喜报

原创 2022年大庆实验中学2022高考喜报

大庆实验中学2022高考喜报

转载 常见前端性能优化的35种方法总结

常见前端网页性能优化方法总结汇总

原创 低代码平台调研结果

调研要求：项目活跃度技术栈：react低代码功能点和业务切合度低代码平台调研项目一、百度aims百度aims 体验地址：https://aisuda.github.io/amis-editor-demo/#/edit/0优点：2019年开源最早，关注量最多的国内低代码开源，最近更新一周之内；使用时间较长，在百度内部经过实践考验；内置组件丰富；项目活跃度较高，github 10.9k star， gitee 2.6k star 有交流群；技术栈：ts+react；缺

原创 兼容ie方案：浏览器报Set未定义

报错原因：由于项目中使用了Swiper4，其内部的css样式使用了display:flex ，不支持IE11之前的版本。项目会在IE11之前的浏览器报Set未定义，导致项目中的很多功能失效。具体解决找到对应问题页面，引入下面代码：<script src="https://ss.xgo-img.com.cn/pc/js/ieTipModal.js"></script><link rel="stylesheet" href="//ss.xgo-img.com.cn/pc/

原创 中国城市列表 cityList.son

var dataCity = [ { "name": "北京", "city": [{ "name": "北京", "area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县"] }] }

原创 前端安全问题总结

XSS攻击Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。所以,网页上哪些部分会引起XSS攻击?简单来说,任何可以输入的地方都有可能引起,包括URL!常见的注入方法在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。在内联的 JavaScript 中，拼接的数据突破了原本的

原创 pdf在线预览解决方案——pdf.js使用

业务背景在C端的前端项目中，针对用户会有多种规则需要展示，之前的处理方案是将这些规则写成一个个的静态页面，用户来访问这些页面。但如果这些规则需要变更的话，就需要前端修改对应的规则页面的文案，重新发版。为了避免这种因为规则文案修改而频繁发版的情况，现改用pdf方式来渲染，只需要在后台上传、配置需要展示的pdf规则文件，前端通过动态获取文件url在线预览pdf规则。实现方式针对pdf的渲染，为了更好的兼容ie浏览器和m端，采用了PDF.js库。PDF.js 由 Mozilla 提供支持。目标是创建一个通

原创 nginx拦截sql注入解决方案

1.get请求好处理2 .post请求 由于需要拿到请求体，需要安装lua插件支持当前方案 ：get在server级别处理post在lication级别处理if ($query_string ~* ".*('|--|union|insert|drop|truncate|update|from|grant|exec|where|select|and|chr|mid|like|iframe|script|alert|webscan|dbappsecurity|style|WAITFOR

原创 渲染出现的 [Object object] 错误

可能原因是 String + Object导致Object是转换为String，默认结果就成了 [Object object]。可能的解决方案：在自定义对象定义toString()并返回任何你想要在输出中看到的。使用JSON.stringify(obj)将其转换为更有用的东西，这当然会在循环引用存在的情况下中断。...

原创 React dangerouslySetInnerHTML api 的介绍与使用

使用场景：在 react 项目中，当后端接口返回的一个字段里有HTML字符实体的情况下，是不会转换成对应样式的。比如& g t; 就不会显示成>,< b r > 也不会进行换行。这时候用 dangerouslySetInnerHTML就可以正常渲染混有 DOM字符串。举例：<div dangerouslySetInnerHTML = {{ __html: 接口传来的数据}} />如果是直接调用渲染接口中的值，则是以上的写法，如果仅仅是显示固定的内容，用如

原创 react 手写优化实现 antd 倒计时功能组件（ 附源码）

react 手写优化antd 倒计时功能组件

原创 react 实现dom打印功能 附代码

react 实现dom打印功能 附代码

原创 antd pagination onchange 事件不触发，pagination onchange分页请求内容不正确。

1.antd pagination onchange 事件不触发背景：无论是 table 内配置还是单独引入pagination组件， 均为正常使用。但是分页成功，onchange 事件却不触发。首先项目中其余页面也有用到分页组件，一切正常。这样就排出了antd 版本的影响。然后在前端调试antd 源码，发现 total 值的类型不对。因为这个值是从后端直接取回赋值，后端传回来的类型是一个string（实际是因为http传输造成的转换）。坑的地方就是，还能够成功分页，而且控制台并无报错提示，很不友好

原创 react for循环中setState失效或者多添加data[i]的问题

代码 const [addvalue, setAddvalue] = useState("") const [plainOptions, setplainOptions] = useState(defaultplainOptions) const add = () => { if (addvalue) { const bigdata = addvalue.split(" ") for (let i = 0; i &

原创 react+ts 项目：ts(2322),类型“Readonly＜{}＞”上不存在属性“day”。ts(2339) 解决办法

React - 类型“Readonly<{}>”上不存在属性父组件传值报错子组件接收数据报错排查代码后发现, 只要将 .tsx 换成 .jsx 之后发现问题就不存在了。 于是将问题定位在了 TypeScript 上。所以只需要将子组件接受的 props 和 state 的类型定位成 any 这个问题就可以解决。...

原创 git pull 报错 ，error: 您对下列文件的本地修改将被合并操作覆盖

1.git stash 本地代码暂存缓存区2.git pull 暂存后就可以拉取新的代码3.git stash pop 把暂存区代码取出4.合并修改冲突

原创 关于package.json、 package-lock.json 和 yarn.lock 的安装问题

package.json 是记录项目依赖包的版本文件。当我们新 clone 一个项目后，需要根据里面记载的信息下载对应的版本依赖到node_modules 文件夹。package-lock.json，yarn.lock 是保证项目包依赖版本稳定的安全文件 。一般情况，用npm、和yarn 都可以下载对应的依赖，但是会有一些特殊诡异的情况。这时候我们需要观察：如果拉下来的项目中有package-lock.json，我们就要用npm 或者cnpm 安装 （注意有时node版本也会有影响）如果原项目中有

原创 阿里P9白慕，阿里云原生开发技术分享

时间2020/09/19 下午 籍海楼四楼：快速入职白慕：阿里云原生开发技术负责人，原中间件项目java研发主管阿里的业务开发在阿里业务开发幸福的：代理 中间件实现分库分表java sdk 客户端阿里体系介绍：淘系、阿里云、蚂蚁原共享业务事业部 ==> 中台 ==> 业务中台、中间件、数据中台公司内部没有中台口号，为了营销中台优势：提升稳定性云原生云原生：开源、开放、标准化、弹性 （serverless用户屏蔽底层细节）基础设施、基础网络

原创 互联网、大公司常用的英文缩写

求职、招聘过程HC （Head Count），俗称人头数，指的是招聘名额。JD（Job Description），工作职责描述，也就是企业的招聘要求。OC （Offer Call），当企业决定录用你时，会打电话发 Offer，并询问你是否接受。一般 OC 也称为「开奖」。口头offer，区别于签实习协议或发意向书。Offer ，邀请，意向录用，恭喜拿到它就相当于有了船票，不过也有因为天气原因导致的……OM （Offer mail ）录用邮件。公司架构、岗位BG（Business Gro

原创 信息安全之完美设置自己的密码

很多公司为保障办公信息安全，会号召员工每三个月强制更换一次办公OA密码。密码更换频繁记不住？来，快来看如下招数。首先在设置个人密码时，不要使用易暴露的个人信息，不能使用123456、abcdef、888888这样的“弱”密码。如何让自己的密码“强壮”起来呢？首先. 密码要足够长首先它要有足够的长度，建议使用14位+的密码长度，这叫我们如何才能记得住呢？”我们以通过自己喜欢的一首古诗，一句歌词，一段名言，或者是喜欢的动漫卡通等等来帮助记忆，然后尝试把他们写成汉语拼音全拼的形式。比如“喜洋洋与灰太狼”

原创 速来围观，一分钟快速了解 BFF

BFF，既Backend For Frontend。 中文翻译过来的意思是前端的后端。关于前后端日常描述：后端同学追求的服务下沉,解耦，微服务化。一条message 需要几个接口返回。[前端：能给组装一下吗？, 后端：都返你了，自己拼一下吧…别人也这么用的…]前端追求用户体验 [前端：少一次http请求，多写个接口难吗？ 后端：没必须浪费时间在重写，不差这个一个请求…]总结： 前端和后端同学都说的各自有道理，就看谁有时间来处理了，那到底有没有一种解决场景可以化解这种尴尬的场景，于是就有了BFF，1

原创 2021年大庆铁人中学2021高考喜报

2021大庆铁人中学高考喜报

原创 2021年大庆实验中学2021高考喜报

2021年大庆实验中学2021高考喜报

原创 react+ts 项目：引入antd select组件联动 ，ts7053、ts2741报错解决

相关组件：ts7053解决办法：数据生命时定义类型any，即可解决截图中全部报红。ts2741any大法+ 增加option 的 value值定义。

原创 Canvas 和 SVG 的区别对比

区别SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要

原创 2021年杭州值得去的46家规模互联网大厂公司全名&简称

阿里巴巴（中国）有限公司 ---- 阿里深圳市腾讯计算机系统有限责任公司 ---- 腾讯北京京东叁佰陆拾度电子商务有限公司 ---- 京东广州网易计算机系统有限公司 ---- 网易北京快手科技有限公司 ---- 快手北京字节跳动科技有限公司 ---- 字节跳动北京小桔科技有限公司 ---- 滴滴三六零安全科技股份有限公司 ---- 360华为投资控股有限公司 ---- 华为用友网络科技股份有限公司 ---- 用友广州华多网络科技有限公司 ---- 欢聚时代北京世纪好未来教育科技有限公.

原创 2021你还找不到的查询行业数据&行业报告平台地址大全

国家权威机构、国外咨询机构、投研机构、国内BAT数据报告、国内第三方数据机构 平台汇总。国家权威机构中国信通院：国家智能机出货量官方统计；中国城市轨道交通协会：中国城市地铁线路流量数据；国家政务服务平台：企业信息法人信用景区信息等；国家宏观经済数据：人口/ GDP/CPU社会消费品零售总额行政规划等；国家统计局：统计年鉴所有数据指标；世界银行：外债放育人口分布气候变化等公开数据；世界数据图册：世界和地区统计资料、各国数据、地图、排名；国外咨询机构Flurry ：国外App行业报.

原创 2021年上海值得去的66家规模互联网大厂公司全名&简称

阿里巴巴（中国）有限公司 ---- 阿里深圳市腾讯计算机系统有限责任公司 ---- 腾讯北京百度网讯科技有限公司 ---- 百度北京京东叁佰陆拾度电子商务有限公司 ---- 京东广州网易计算机系统有限公司 ---- 网易北京三快在线科技有限公司 ---- 美团北京快手科技有限公司 ---- 快手北京字节跳动科技有限公司 ---- 字节跳动北京小桔科技有限公司 ---- 滴滴三六零安全科技股份有限公司 ---- 360华为投资控股有限公司 ---- 华为上海寻梦信息技术有限公司 ---.

原创 webpack中，hash、 chunkhash、 contenthash的区别

Hash（哈希）一般是结合CDN缓存使用的，如果文件内容发生改变，那么对应文件的哈希值也会改变，对应的HTML引用的URL地址也会跟着改变。这样触发CDN服务器从源服务器上拉取对应数据，进而行地缓存的更新。值内容hash计算与整个项目的构建相关；chunkhash计算与同一 chunk 内容相关；contenthash计算与文件内容本身相关；...

原创 2021年深圳值得去的50家规模互联网大厂公司全名&简称

阿里巴巴（中国）有限公司 ---------- 阿里深圳市腾讯计算机系统有限责任公司 ---------- 腾讯北京百度网讯科技有限公司 ---------- 百度北京京东叁佰陆拾度电子商务有限公司 ---------- 京东广州网易计算机系统有限公司 ---------- 网易北京三快在线科技有限公司 ---------- 美团北京快手科技有限公司 ---------- 快手北京字节跳动科技有限公司 ---------- 字节跳动北京小桔科技有限公司 ---------- 滴滴华为投资.