题目leecode 371两整数之和给你两个整数 a 和 b ，不使用 运算符 + 和 - ​​​​​​​，计算并返回两整数之和 原理要实现基本运算, 有没有想过这些运算是如何在计算机底层实现的?从半加器开始，逐步介绍计算机如何执行加法和其他数学运算。 逻辑门逻辑门是集成电路的基本组件。简单逻辑门可由晶体管组成。这些晶体管的组合可以使代表两种信号的高低电平在通过它们之后产生高电平或者低电平的信号。高、低电平可以分别代表逻辑上的“真”（T；true）与“假”（F；false）或二进制的1和0，从而实现逻辑运算。常见的逻辑门包括与门，或门，非门，异或门（也称互斥或）。 AND(与门)全入皆高才出高。一低出低。 A B 输出 0 0 0 0 1 0 1 0 0 1 1 1 OR(或门)全入皆低才出低。 A B 输出 0 0 0 0 1 1 1 0 1 1 1 1 XOR(异或)只有其中一项输入为高，输出为高；否则出低。 A B 输出 0 0 0 0 1 1 1 0 1 1 1 0 半加器半加器就像在玩乐 ...

最近使用canvas在实现拖拽功能, 需要监听鼠标按下跟移动事件。所以创建canvas js对象来统一管理。但是遇到了addEventListener指向了当前元素, 导致监听事件无法移除出现问题。 123456789101112131415161718export default class FlowChatCanvas { // ...业务代码省略 mousedown() { // 此时this指向了元素本身 console.log(this); // 需要在鼠标按下的同时, 监听鼠标移动 this.canvas.addEventListener('mouseup', this.mouseup, false); this.canvas.addEventListener('mousemove', this.mousemove, false); } mouseup() {} mousemove() {} registerEvents( ...

背景最近在做前端业务埋点, 遇到的问题。业务场景是在列表中监听商品是否曝光, 如果用户可见就进行商品上报。上报是用 Image()传输。 为什么要用 image 进行埋点上报 123// str 传参const img = new Image();img.src = `${url}?${str}`; 问题浏览器并发请求资源数浏览器的并发请求数目限制是针对同一域名的。同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞。 以 chrome 为例浏览器同域名下资源加载的最大并发连接数为 6，当资源文件大于 6 时，多于 6 个的文件就会进入待定，等第一批加载完才会加载第二批的 6 个图片资源，这样就增加了等待时间。无形中就增加用户加载网页等待的时间； 当时在测试环境下, 后端接口在更新, 导致上报请求未能完成。列表曝光又是逐个进行上报(偷懒了没有合并上传), 遇上了浏览器并发请求限制!当时页面与接口又是同域名, 从而导致用户无法进行操作(因为网络请求阻塞导致) 解决域名分片由于浏览器限制了每个域（domain）的活动连接数。为了 ...

上报方式我们采集了埋点数据后, 就需要把采集的数据交给后端。那么我们应该如何上报?我们得考虑接口跨域、上报异常(正在进行上报时, 用户关闭了页面, 这样上报就会失败)、性能要求(不能应用应用使用) 基于以上要求, 提供了三种方式供用户自行选择 sendBeacon浏览器引入的 sendBeacon 方法，发出的是异步请求，但是请求是作为浏览器任务执行的，与当前页面是脱钩的。因此该方法不会阻塞页面卸载流程和延迟后面页面的加载，用户体验较好。缺点： 浏览器存在支持问题 img 避免跨域1x1 像素 img 对网页内容的影响几乎没有影响图片请求不占用 Ajax 请求限额不会阻塞页面加载，影响用户的体验相比 XMLHttpRequest 对象发送 GET 请求，性能上更好触发 GET 请求之后不需要获取和处理数据、服务器也不需要发送数据 post超出 get 最大请求数、或者用户手动进行上报方式配置则会采用 post 默认情况下优先级 sendBeacon > img > post 12345678910111213141516171819202122232425// 判 ...

什么是曝光?商品曝光人数：看到商品在首页、列表页、活动页面，以及在商品详情页下方的更多展现的人数。（不包括商品详情页的访客数量）商品曝光次数：商品在店铺首页、列表页、活动页面，以及在商品详情页下方的更多展现的次数。（不包括商品详情页的浏览量） 通过商品曝光我们能得出商品在不同营销位的比重， 从而得出用户操作喜好 如何判断元素可视区域?Element.getBoundingClientRect()getBoundingClientRect 方法返回一个 对象，该 DOMRect 对象提供有关元素大小及其相对于视口的位置的信息。如果目标元素 rect 满足 top > 0 && left > 0 && bottom >= 视窗高度 && right <= 视窗宽度便能得出元素完全在视窗内。 在长列表下 我们可以通过监听滚动条事件， 从而获取目标元素是否暴露在用户视窗内。 在线代码示例 CodePen 这种方法实现起来简单，兼容性相对较好，这个属性频繁计算会引发页面的重绘，当元素过多时，会造成性能问题，出现卡顿，影 ...

最近项目需要采集用户的行为数据, 从而进行分析得到页面点击量、访问量、访问路径等重要数据, 为运营和业务人员提供精准数据，为产品优化和精细化运营提供数据支持。 埋点方式选择这里采用代码侵入式埋点的方式进行、 SDK 提供 点击事件、曝光事件、页面时长进行上报 点击事件(用户每点击一次按钮、商品、区块.. 就记录一次数据) 曝光事件(专区、活动、商品…用户可见) 页面时长(活动、页面 停留时间) 埋点方式实现点击事件如何让前端同事更轻松的捕获数据、这里实现了 dom 自定义事件实现自动上报, 在 vue 中也提供了指令 如有特殊业务场景也可以使用手动进行上报。 123456789101112131415161718192021222324// 自动上报// js// vue<button v-track:click="{ 'page_id': 1, 'event_type': 12, // 事件类型 'objs' // 业务数据 }"/><button ...

介绍Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。 开始下载vue示例12345git clone https://github.com/hjwforever/luckysheet-vue3-vite.git// 安装依赖npm install // 启动npm run dev 运行后如下: 文件目录: 123456├── src│ └── assets| └── components| └── LuckySheet.vue ├── ...└── package.json 打开 LuckySheet.vue 为了看起来更简洁 移除暂时用不到的方法 123456789101112131415161718192021222324252627<template> <div id="luckysheet"></div></template><script setup>import {onMounted } from  ...

参考资料: CSS 父元素如何通过判断子元素来设置样式 技术周刊 2021-05-21：Canvas 之春 背景某些特定场景下 我们希望通过子元素来判断从而修改父级属性。除了JS控制之外是否有CSS实现这方面功能查了大量资料发现css现阶段没有实现这块 原因如下: 由于它违反了CSS目前的“不回溯”的原则，因此一直没有被纳入规范 其实你从浏览器的角度来考虑这件事情，便不会有疑问了。假如浏览器支持父级或者前面兄弟元素选择器的话，就不得不在渲染到当前元素时，倒回去找到特定的元素，重新渲染。因为选择器是可以组合的，甚至还会造成很多其它元素也需要重新渲染（想象.someClass:parent div），这样带来的reflow和repaint会造成难以估量的性能问题，甚至计算盒模型的栈保不齐都要溢出。所以自然不会有类似的选择器出现了。 现在Chrome 意图实验性支持 CSS :has() 选择器，可以用来选择父级元素。目前 Igalia 公司正在为 Chrome 实现该选择器，其团队成员 Brian Kardell 还发表了博文 Can I :has() 进行了详细介绍。 12345 ...

介绍Lottie 是Airbnb推出Library 它可将After Effects动画经由Bodymovi扩展插件输入成一个JSON动画文件格式, 适用于 Web、iOS、Android、Windows、QT、Tizen 和其他平台。 使用如果你有After Effects动画, 可通过AE插件Bodymovi 生成JSON动画 没有After Effects动画可以让设计来制作, 或者学习制作~ 当然也可以使用 Lottie Files 提供的免费动画 接着从Lottie Files下载一个动画任意动画 Flutter中使用 lottie json 放入项目assets 目录下 安装 lottie12dependencies: lottie: ^1.3.0 使用12345678910111213141516171819import 'package:flutter/material.dart';import 'package:lottie/lottie.dart';void main() => runApp(const MyApp ...

前言 应用开启时, 会出现短暂白屏才会出现加载后页面, 给用户的感觉也不好 原生… Pub 插件这里使用flutter_native_splash 安装依赖 12345dependencies: flutter: sdk: flutter ... flutter_native_splash: ^2.1.6 设置 pubspec.yaml image: 图片 color: 背景颜色 用于图片不能充满屏幕 android: true 生成 andorid ios: true 生成 ios android_gravity: “fill” // 铺满 ios_content_mode: “scaleAspectFit” // 铺满 …1234567flutter_native_splash: image: assets/images/splash.png color: "#ffffff" android: true ios: true android_gravity: "fill" ios_content_mode: & ...