JHCan333-优快云博客

原创 mac换成windows，前端发版的时候竟然有这么多坑？

至此，mac 迁移到 windows 上的前端发版流程调整就完成了。在前端的开发工作之外，了解一点运维的知识还有有点意思的。

2025-02-26 14:25:47 746

原创复制所绑定元素文本的vue自定义指令

最近写了一个复制所绑定元素文本的vue自定义指令，给大家分享一下。

2025-02-22 18:45:49 300

原创如何操作data-*属性？

在 JavaScript 中操作<div>元素的*data-*

2025-02-22 18:30:39 475

RangeSelection</</onclick</function// 1. 获取目标元素const;// 2. 创建选区（Range）const;;// 3. 将选区添加到 Selection 对象const;;// 清除现有选区addRange;try// 4. 复制内容到剪贴板（现代浏览器推荐 Clipboard API）ifwriteTexttoStringthen=>log"纯文本复制成功";// 如果需要复制 HTML 格式内容const;

2025-02-21 15:45:19 570

原创深入理解正则表达式的预查

正向肯定预查=...))：确保当前位置后面紧跟指定模式。正向否定预查!...))：确保当前位置后面不紧跟指定模式。反向肯定预查<=...))：确保当前位置前面紧跟着指定模式。反向否定预查...))：确保当前位置前面不紧跟着指定模式。

2025-02-18 16:03:21 998 1

原创什么叫不可变数据结构？

不可变数据结构是一种重要的编程概念，特别适用于需要高并发、易于调试和测试以及函数式编程的场景。尽管不可变数据结构可能会带来一些额外的内存开销，但通过结构共享等优化技术，这些开销通常是可以接受的。

2025-02-18 14:53:43 806

原创前端哪些内容最好添加专属前缀？

通过添加专属前缀，可以提高代码的组织性和可读性，同时减少命名冲突的可能性。然而，也需要注意不要过度使用前缀，以免使代码变得冗长和难以维护。在团队项目中，制定并遵循一致的命名规范是非常重要的。在前端开发中，为了避免命名冲突、提高代码的可读性和可维护性，以及为了遵循最佳实践，通常会为某些内容添加专属前缀。

2025-01-10 11:30:11 242

原创【程序员养生篇】通过饮食抗氧化、抗糖化、抗发炎

体内活性氧过多，导致白细胞以及正常细胞受到攻击上面说了那么多细节，简单概括一下：从食物的角度来说，就是营养均衡，多吃各种蔬菜、各种肉、水产，适当喝一些茶、咖啡、红酒，然后控制糖分的摄入，少吃油炸类的食物。祝愿大家都能有一个好的身体，健健康康的过每一天。

2025-01-03 14:20:47 638

原创 2024前端面试经验分享

针对公司的招聘要求，准备不同的自我介绍，突出自己的重点，尽量匹配目标岗位。

2024-11-30 21:09:54 1527

原创从前端导师的角度给实习生几点建议

希望对实习生同学有所帮助，也祝每一个付出努力的人都能得到应得的回报！

2024-08-12 18:01:44 802

原创干货！从前端导师的角度看如何带实习生！

每隔一段时间或典型项目结束之后，督促新人写项目复盘文档，分析优点与不足，了解自己的提升空间。以上是根据我个人的经验，总结的培养实习生需要注意的地方，欢迎大家沟通讨论！希望所有的实习生都能找到好的导师，也希望所有的实习生可以不踩没有意义的坑，快速成长为独当一面的中流砥柱！

2024-08-07 16:20:52 506

原创同源策略、跨域相关以及script等标签带来的问题和处理方式

同源策略（Same-origin policy）是一种在web应用中重要的安全策略，用于限制一个源（origin）的文档或者它加载的脚本如何与来自另一个源的资源进行交互。这里的“源”由协议、域名和端口组成，只要这三者不完全相同，就算是不同源。定义：CSP是一种Web安全策略，通过HTTP头部信息告诉浏览器哪些外部资源可以被加载和执行，哪些不可以。原理：CSP的核心思想是“白名单制度”，即只允许在白名单中列出的可信来源提供的内容被执行或加载。这种限制可以应用于脚本、样式表、图片、字体等各种类型的资源。

2024-08-05 15:14:55 850

原创前端如何实现更换项目主题色的功能？

当前公司的组件库设计的时候，对于同一组件的颜色设置基本有三种：正常色、较深色（常用于hover效果）、较浅色（常用于边框），所以第一步是可以根据正常色，获取深浅色。因为色值比较灵活，可以任意选取，所以最好的实现方式是，根据设置的色值，拼接相应的 style 标签代码，对样式进行覆盖。深浅色的获取，基本是通过设置 HSL 颜色的亮度实现，所以第一步是将任意格式的色值，转换为 HSL 格式。根据上面生成的深浅色，生成 style 代码，需要注意组件库的代码和项目中的代码要分开。

2024-07-30 17:34:18 495

原创前端 socket.io 跨域

确保替换your-frontend-domain.com和your-backend-domain.com:3000为实际的前端和后端域名和端口号。在使用Socket.io进行前端跨域通信时，可以通过设置Socket.io的cors选项来允许跨域请求。

2024-07-29 10:13:36 570

原创 vue slot：为什么 $slots 无值而 $scopedSlots 有值？

在 Vue.js 中，$slots 和 $scopedSlots 是组件实例上用于访问插槽内容的两个属性，但它们各自有不同的用途和表现方式，特别是在处理作用域插槽（scoped slots）时。

2024-07-18 17:00:19 981

原创代码优化方法记录

每次代码 review 之后，对 review 的情况进行总结记录，产出实际经验，方便组内学习、分享。

2024-07-12 15:00:20 442

原创代码 review 介绍

这是代码 Review 的初衷，也是代码 Review 最直接的价值。Reviewers 根据各自的经验，思考方式，看问题的角度给代码提出各种可能的改进意见，从而形成更好的代码以及产品质量。我们知道产品问题越晚提出解决它的代价就越大，参与进去的人、要走的流程都会越来越多。代码 Review 可以说是早期解决问题最有效的途径之一了，在代码 Review 中解决掉哪怕一个小问题都能避免后续一堆的麻烦事。

2024-07-12 14:53:38 1170

原创如何在多项目并行的情况下保证工作效率？

2、对工作内容评估优先级，并按照优先级处理。1.1、需要上下游同学做的前置依赖问题。1、使用工作清单，把记忆的工作交给清单。1.2、组内必须自己处理的问题。1.3、组内其他人可以处理的问题。1、区分工作内容类型。

2024-07-10 15:26:10 995 2

原创 nginx 配置页面重定向，并携带链接和参数

将 ip:port//oldPrefix/pages?a=1 重定向到 ip:port//targetPrefix/pages?a=1

2024-06-28 12:19:59 604

原创详细介绍如何计算两条折线的交点并使用Echarts展示以及图表优化

1、背景前段时间公司有个需求，需要在一个图表中展示两条折线，并且绘制出两条线的交点。为了满足需求大哥的需求，我也是着实想了有一会。下面我就把具体的实现过程给大家展示一下。1.1、ECharts 简介个人很喜欢Echarts这个图表库，就先给大家介绍一下，方便大家更好的了解。ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝...

2019-12-18 22:58:13 3742 2

原创看不到但摸得到的捣蛋鬼---Zero Width Space

看不到但摸得到的捣蛋鬼—Zero Width Space1.情况如何？昨天，“某某某”的代码出现了一个bug。大概是这个情况：有一个提示信息，需要展示，大概这样：这行文字，在谷歌上一点问题都没有，但是在ie上出现了奇怪的框框。比如这样：ie浏览器真的是代码检查器啊，稍微一个不注意，就搞事情～～～2.so why？经过我的多次实验、摆弄，发现一件事，我在双引号和label之间按下退...

2019-12-03 21:47:46 478

原创 JavaScript 中的 this 并不难

js学习笔记 — this 详解js中的this，如果没有深入的学习了解，那么this将会是让开发人员很头疼的问题。下面，我就针对this，来做一个学习笔记。1.调用位置在理解this的绑定过程之前，首先要理解调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置）。只有分析好调用位置，才能明白这个this到底引用的是什么？寻找调用位置，最重要的是分析调用栈（就是为了到达当前执行...

2019-12-02 15:00:58 175

原创三次握手、四次挥手以及TCP标志位的详细介绍

一、TCP标志位在讲TCP三次握手和四次挥手之前，先说一下TCP标志位，方便后续的理解。简单来说，TCP标志位的值代表了当前请求的目的。标志位一共有6种，分别是：SYN(synchronous)：发送/同步标志，用来建立连接，和下面的第二个标志位ACK搭配使用。连接开始时，SYN=1，ACK=0，代表连接开始但是未获得响应。当连接被响应的时候，标志位会发生变化，其中ACK会置为1，代表...

2019-11-29 14:41:40 6090 1

原创互联网行业常用术语

最近整理了一些互联网行业，特别是IT行业的常用术语，主要分为【1.公司职务类】【2.互联网概念类】【3.技术概念相关】【4.开发职务类】【5.技术开发相关】这几个模块，给大家分享一下，避免聊天的时候尴尬。如果各位互联网同仁发现没有和自己相关的术语的话，欢迎留言，毕竟各专一行，总有不通的领域~公司职务类CEO：首席执行官（司政）为一种高级职务名称。在经济组织机构中，首席执行官（Chief Ex...

2019-11-27 09:46:22 1378

原创各种投资产品的整理分析（持续更新）

各种投资产品的整理分析（持续更新）1、指数基金1.1、定义指数基金是以特定指数（如沪深300指数、标普500指数、纳斯达克100指数、日经225指数等）为标的指数，并以该指数的成份股为投资对象，通过购买该指数的全部或部分成份股构建投资组合，以追踪标的指数表现的基金产品。可以这么理解，指数基金紧贴所跟踪的指数（大盘）的走势，大盘涨它就涨，大盘跌它就跌。1.2、和主动型管理基金作比较指数基...

2019-11-03 19:41:26 810

原创前端开发-浏览器兼容的坑

前端开发-浏览器兼容的坑最近开始整理前端开发的浏览器兼容问题，初次发版内容少一点，后续会持续更新内容~一、JS 篇1.new Date() —safari浏览器需要特殊照顾// 对于一个代表时间的字符串var dateTimeStr = "2019-10-10 10:10:10";// 在谷歌浏览器上可以使用 new Date（）将其转换为时间戳,但是在safari上却会报错ne...

2019-10-27 10:41:49 492

原创 JavaScript — event介绍以及兼容处理

JavaScript— event1.事件流浏览器发展到第四代时（IE4及 Netscape Communicator 4），浏览器开发团队遇到一个问题：页面的哪个部分会拥有某个特定的事件？可以想象在一张纸上的一组同心圆，如果把手指放在圆心上，那么你的手指指向的不是一个圆，而是纸上的所有圆。即在点击一个按钮时，不仅点击了按钮，也点击了整个页面。事件流描述的是从页面中接收事件的顺序。不过IE ...

2019-10-27 10:04:40 180

原创 Xcode开发时碰到的问题

1.打包成功后，发布到蒲公英上，显示“未签名，只能越狱手机可以安装”。出现这个问题，是因为打包的时候签名没有获取到。下面是配置签名的大概步骤。打包的时候需要点击左上角选择这个设备：然后选择 Product=》 Archive ，生成安装包然后选择 Development后面的一直点下一步就好了。但是上传到蒲公英上的时候，偶尔还是会出现“未签名，需要越狱手机安装”的情况。这样的话...

2019-10-25 12:21:31 778

原创 js 常用扩展方法

在日常的开发过程中，经常会碰到javaScript原生对象方法不够用的情况，所以经常会对javaScript原生方法进行扩展。下面就是在实际工作时，经常使用的一些方法，做一下记录，有需要的可以拿去。1、String篇1.1、字符串做相加运算：浮点数的精度问题是javaScript计算的一个障碍，因为有些小数以二进制表示的话位数是无穷的。比如1.1，在程序中无法真正的表示1.1，只能做到一定程...

2019-10-18 14:42:35 581

原创安卓SDK的配置流程以及安装build-tools等插件

这两天做了一个移动端混合开发的项目，需要配置安卓的SDK，不过在这之前，需要先配置好Java环境（这个在这里就不写了）。下面开始配置步骤：下载SDK，然后解压到某个目录下面。推荐两个下载网址：http://down.tech.sina.com.cn/page/45703.htmlhttps://mac.softpedia.com/get/Developer-Tools/Google-An...

2019-10-17 11:06:52 689 1

原创域名访问和ip访问区别

域名访问和ip访问区别ip访问对应某一台确定的服务器；域名访问相当于在ip访问的基础上，做了一个反向代理的中间功能。例如：百度，很多人会同时使用，如果使用的是同一台服务器的话，服务器估计会扛不住，如果访问的是域名，中间的反向代理，可以将用户反向代理到不同的服务器上，减轻服务器压力。通过域名访问的话，一般会对用户的请求做处理，比如识别、过滤作用，即只允许符合规则的ip进行访问，其余的就要被...

2019-09-26 20:42:36 11326 1

原创 css雪碧图（精灵图）与字体图标的介绍以及对比

css雪碧图（精灵图）与字体图标的介绍以及对比设想一个实际场景：在一个页面为了展示，我们放置了很多独立的小图片，浏览器在显示页面的时候，就需要向服务器就会发送很多请求，来获取并加载这些小图片，但是这样的话，就会导致请求数量太多，造成资源浪费，以及访问速度变慢。碰到这样的情况，可以使用两种方式解决这种问题：CSS雪碧图以及字体图标。但是这两种方式也都有不同的适用场景，需要根据实际需求来做取舍。...

2019-09-24 15:48:24 451

原创快速获取dom到body左侧和顶部的距离，简单粗暴无bug-getBoundingClientRect

获取dom到body左侧和顶部的距离-getBoundingClientRect平时在写js的时候，偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查，有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次，算出来了一堆错误答案。下面我要分享的这个方法，兼容性很好（ie4都ok），而且很方便，不会算错。这个方法就是 getB...

2019-09-23 12:42:06 3286 1

原创 CSS 中 transform、animation、transition、translate的区别

在前端页面的开发过程中，经常会碰到这么几个 CSS 属性容易搞混：transform、translate、animation还有transition。下面就针对这几个 CSS 属性做一个对比，辨别这几个属性的区别以及了解他们的使用场景。简单概括一下：transform：主要应用于元素的 2D 或者 3D转换，可以将元素旋转、缩放、移动、倾斜等,使用的时候注意兼容性就好了；translat...

2019-09-22 16:22:31 196

原创一个基于Vue的仪表盘demo

最近写了一个基于vue的仪表盘，其中主要是和 transform 相关的 css 用的比较多。给大家分享一下，喜欢的话点个赞呗？嘿嘿截图如下：实际效果查看地址：https://jhcan333.github.io/can-Share/demos-tips/gaugeDemo.htmlgithub：https://github.com/JHCan333/can-Share/blob/mas...

2019-09-21 19:19:23 2050 1

原创关于mock

关于mock一、什么是mock？通俗来讲，在开发和测试过程中，由于环境不稳定或者协同开发的同事未完成等情况下，有些数据不容易构造或者不容易获取，就创建一个虚拟的对象或者数据样本，用来辅助开发或者测试工作。减轻了对于协同模块的依赖，使开发以及测试变得更加独立。二、为什么要使用mock？现在的很多项目，基本都是划分为一个个小模块进行的，各个模块相互依赖，需要协同进行。但是实际开发过程中，由于各...

2019-09-20 07:40:05 371 1

原创一个基于Vue的时钟Demo

前两天写了一个基于vue的小钟表，给大家分享一下。其中时针和分针使用的是图片，结合transform制作；表盘刻度是通过transform和transformOrigin配合画的；外面的弧形框框，啊哈哈，也是用的图片。具体的看里面的注释就好了，感觉写的还算清楚，啊哈哈~<!DOCTYPE html><html><head> <meta ch...

2019-09-18 15:42:16 527 1

原创解决ie6在css上的兼容问题

ie6上css碰到的坑前两天在给一个项目做东西的时候，碰到一个有意思的项目，是需要兼容ie6，有一些碰到并且解决的问题，给大家写下来，方便大家以后碰到类似的问题哈～1.important支持的不够好1.1为什么说不够好？important某些情况下不能决定最终的样式属性。1.2代码！代码！！我们通过对颜色的控制说明这一切~<style type="text/css"> ...

2019-09-17 22:15:12 365 1

原创 JS 防抖和节流

防抖和节流在处理高频事件，类似于window的resize或者scorll，或者input输入校验等操作时。如果直接执行事件处理器，会增大浏览器的负担，严重的直接卡死，用户体验非常不好。面对这种情况，我们一般可以采用防抖和节流的方式减少调用频率。同时也不会影响实际效果。一、防抖防抖的作用是：在事件被触发的n秒后执行回调，如果在这n秒内又被触发，则重新计时。常见场景：input校验：在i...

2019-09-17 14:18:58 222 1