qq_35436516的博客

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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