清颖的博客

在地图上面写多个小图标，图标位于地图两侧并且都可以点击。要求点击图标时不触发地图的点击事件。如果使用Taro的Map组件开发地图，什么都不处理的情况下，点击小图标时，地图也会被触发点击事件。这不是我们的预期结果。解决方法：pointer-events: visible;

回顾本次求职面经，呕心沥血整理，无偿分享面试题。找到工作的正确打开方式是：先投小公司或不想去的公司；回顾一下面试题，总结知识点；优化简历，再投自己希望去的，继续总结面试题，复盘（这点非常重要！！！）一面：一般都是八股文，年轻的面试官经验少，他们全都大炮轰击问不停（阿里、飞猪、米哈游），有的感觉是走过场，反正阿里基本都有算法笔试，可能他们问个基础后面留给二面去筛了；有资深的会问的比较有水平，一步一步问，然后扒原理……

async函数总是返回一个Promise。await会暂停async函数的执行，直到Promise被解析或拒绝，且它不会阻塞主线程。async和await的底层是基于Promise和微任务队列的，它们为异步编程提供了一种更加直观和易于理解的语法糖。

用js研发高德地图，做web应用，如何用逆地理编码解决根据经纬度获取地点名称？计算两点之间的距离？使用于前端研发，pc端或h5页面。

做运营系统、后台系统、ToB项目时避免不了需要研发表单，要填写各种内容。操作：给`Form.Item`的属性`rules`，给`rules`里面指定了 *{ required: true }*, 同时给了 `validator`自定义校验方法。问题描述：自定义校验后，required 必填不起效。解决……

在JavaScript中，new关键字用于 创建一个新对象并将其实例化为指定的构造函数类型。时，它创建了一个新对象，并将该对象的原型链指向 proto。

Cookie、sessionStorage和localStorage都是Web存储机制，用于在用户的浏览器中存储数据。本文详细说明一下他们的作用，以及不同点。

instanceof 运算符 是 JavaScript 中用于检测 一个对象 是否是其构造函数的 prototype 属性指向的原型链上的实例。输入一个对象，一个构造函数；通过循环遍历对象的原型链，逐级检查是否与给定构造函数的原型相匹配，从而判断对象是否是由特定构造函数创建的。Object.getPrototypeOf(xx),用于获取指定对象的原型（即原型链的上一层对象），相当于xx.（简单记：用于检查一个对象是否是指定构造函数的 prototype 原型链上的实例。

继上一篇博客，补充一些行业内的CSS书写案例。

CSS命名一般是用 BEM 规则命名的。它背后的想法是将用户界面划分为独立的块。`BEM`的意思就是`B模块(block)`、`E元素(element)`、`M修饰符(modifier)`，即：`[block]__[element]--[modifier]`。关于CSS属性的书写顺序建议：一般来说，要先定义好布局，即先写位置、再写大小边距，再写文字样式、背景色，最后写其他属性。

Vue中this.$nextTick的执行时机，整体可分为两种情况：第一种：下一次 Dom 更新之后执行（即等待DOM更新结束之后，执行nextTick的延迟回调函数）；第二种：页面挂载后 （mounted）执行。二、使用场景与举例：对应第一种：a. 修改数据后需要等待Vue.js完成视图更新后，再执行特定的逻辑。b. 在事件触发修改数据的时候，

问题背景：使用Taro 提供的组件库 VirtualList 时，数据源长度改变后，发生渲染抖动。读完本篇文章，你可以获得：虚拟列表概念虚拟列表的使用场景性能优化策略-key虚拟列表渲染抖动的问题解决表格抖动或渲染错误的解决方向

有一个列表，是循环遍历出来的，我们要做的是：点击某个子项时，只有该子项的展开或收起状态会受到影响，而其他子项的状态不会改变。（同情景的，做小图标高亮时也可以用到，达到只有该项图标高亮的效果）如上，在点击事件中传入Id（或其他代表唯一的属性），改变当前项的数据并返回，而其他项原样返回。可以使用组件的状态来追踪每个子项的展开或收起状态，通过。无论用的什么前端框架都可以使用该思路，属于JS思想。这样的属性去判断，然后返回子项数据。

taro官网没有写更多的内容，网上查找了一番，找到了方法。按步骤来：1. 改配置文件，即标题1中所述。2. 给样式文件 less/scss/css 加前缀：`.module`，如原来是：`index.less`，要改为`index.module.less` ……重新编译运行，给类名加了5位数的哈希字符，OK啦！

掌握JavaScript的基础语法和ES6+的新特性，了解JavaScript面向对象编程和函数式编程的思想，能够使用JavaScript编写复杂的交互和动态效果，掌握常见的JavaScript框架和库，如React、Vue、Angular等。：熟悉后端技术和Web开发的基础知识，了解常见的后端开发语言和框架，如Node.js、Python、Ruby on Rails等，能够与后端工程师有效配合，协同完成前后端分离项目的开发。总之，一个成功的前端开发程序员需要持续学习和实践，并不断适应新的技术和趋势。

obj.hasOwnProperty(property)可以判断是否是对象的自有属性，若有，返回true，否则返回 false（原型链上的返回false）。所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。x in obj 也可判断。见正文4种方法

前端基础知识：防抖和节流分别是什么？请描述，并写出来。防抖是：在第一次触发事件时，不立即执行函数，若计时器的时间间隔之内没有再次触发事件就执行；在计时器时间间隔内又触发新的事件，会清除计时器，重新计时。节流相关……请见全文内容

要检测一个元素是否可见或者两个元素是否相交的需求场景有这些： - 图片懒加载——当图片滚动到可见时才进行加载- 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉- 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况 - 在用户看见某个区域时执行任务或播放动画

① 函数式组件不需要继承，直接 “function+组件名” 就可以了；而class组件还需要继承 `class DemoClass extends React.Component() `② 函数式组件没有 this 指向的问题，方法定义后直接调用；而class 组件中有this，要考虑 this 指向，事件还需要 bind 绑定③ 函数式组件写法简单，无生命周期函数，直接用 useEffect 控制执行时机；而 class 需要一系列的生命周期函数控制，

如何判断JS的数据类型？有哪些方法？基本数据类型的判定：`typeof [变量名]`。引用类型判定：constructor...

小伙伴发现：“怎么某APP是灰的？不会是手机出问题了吗？” 然后再打开其他APP，发现：“都是灰的啊！明白了，看来是有大事发生……赶紧打开新闻看看”。对于前端开发来说，什么效果不是用代码可以实现的呢？下面我们就灰色主题如何设置来研究一番。

【代码】算法题前端解决方案——JavaScript代码实现。

仅仅依靠 CSS媒体查询，只是让 PC端 的页面在 Mobile端 可用，远远达不到原生 Mobile端 的效果。CabloyJS优先适配Mobile端，再把 Mobile端 的交互体验和开发模式无缝带入 PC端。这样可以达到期望的效果但是同样的业务逻辑需要开发两套代码，增加了时间成本和人力成本。只需要一套代码，同时兼容Mobile端和PC端，并且Mobile端达到原生交互体验。

防抖不起作用的原因：useEffect 会在每轮渲染结束后执行，在state发生改变时，也会重新执行。解决：这里要使用ref保存防抖函数，防止触发efect函数时被重新生成。本文还可以学习到如何自定义hooks。......

这里以简单的语言描述一下useReducer的使用。使用场景：当一个state需要维护多个数据且它们之间互相依赖。这样业务代码中只需要通过dispatch来更新state，繁杂的逻辑都在reducer函数中了。分别介绍一下各个参数、方法。

背景：使用React的antd组件的Upload（官网），要求文件上传后，在点击提交时再将文件传过去。技术点：完全控制的文件上传。可控制上传数量。控制文件格式。移除时的事件onRemove。状态、数量改变onChange事件等。是否带cookie，withCredentials: true。提交时，originFileObj属性获取原始文件。

如果你在useEffect函数中使用了async，运行后会出现该报错：“Uncaught TypeError: destroy is not a function”，下面为您分析原理并解决。

亲测有效，css实现隐藏滚动条。网上一搜就是3种方法实现隐藏滚动条，实际试了我这边没起作用。真正实现方法请看正文。

Select组件的`dropdownRender`属性，可以扩展下拉菜单。我们只需要在这个属性中编辑代码，将操作区域用Divider组件与选项分离开即可。

如何使用js进行千分位分割？正则表达式可以解决。注：这只是千分位分割，不处理精度（无四舍五入）

本地已经有node.js，需要升级更高版本。该怎么做呢？详细步骤如下：到node.js官网下载安装包。如果上述没有需要的版本，点击最下面的“全部安装包”，会跳到一个新的页面，更改路径为需要的版本号就可以了，我这里手动输入的 v16.14.0，如图......

前端异步请求axios中拦截器的使用方法详解。

axios如何取消请求？AbortController派上用场了！在旧的版本中，可以使用CancelToken来取消。

axios 前端必学技术，它实质上是一个基于XMLHttpRequest和 promise 的 HTTP 库，Vue和React都推荐使用它发送ajax请求。本文主要讲述axios发送请求时要掌握的知识点。值得一看！

useContext的意义：接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 Provider 的 props值决定。

程序员如何准备好自己的简历？详细应聘及面试技巧分享。

git如何撤销代码改动？这里针对未add的，已add的，已commit但需撤销的等，总结了多个场景的撤销方法。

咱们在开发中，大多数时间都是一个异步操作一个异步操作去执行的，但是有一些特殊情况，需要一股脑去执行多个异步操作，比如：多表单校验：只有所有表单都校验通过才能提交；多接口请求：只有所有接口都请求成功才能进行下一步操作。新语法：Promise.allSettled，他能直接完成我们上面所做的处理：接收一个 Promise 数组，执行结果返回一个成功的 Promise

在React中要实现父组件对子组件的方法调用，离不开对React.forwardRef与useImperativeHandle的理解。1、React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。React.forwardRef 接受一个渲染函数（可理解为一个组件）作为参数。这个函数的参数是props和ref，返回 React 节点。

默认情况下，行内元素不会以新行开始，而块级元素会新起一行。一般情况下，行内元素只能包含数据和其他行内元素；而块级元素可以包含行内元素和其他块级元素。