- 博客(29)
- 收藏
- 关注
RSS订阅原创 连线题实现的几种方式
通过设置两点之间的连线长度以及设置div元素的旋转角度进行划线。设置svg和canvas的开始和结束位置坐标进行划线。设置canvas的开始和结束位置坐标进行划线。设置svg的开始和结束位置坐标进行划线。
2024-09-09 21:23:42
366
原创 Vue3如何优雅的加载图片
这个功能主要的底层逻辑是是使用IntersectionObserver API，IntersectionObserver用于在浏览器中观察元素的可见性和位置变化。页面首页会加载大量的图片，初次进入页面时，会导致页面性能下降，于是乎，改进这个功能，可以让所有图片自动懒加载。每次当加载完图片，就从占位图过渡到正常图片模式。3.当图片进入可视区域时，使用data-src属性替换 src 属性。1.给图片提供默认的占位图片 src，同时提供data-src属性。2.传入图片对应的 ref 属性。
2024-03-12 11:54:38
601
原创 protobufjs/minimal-使用以及源码解读
该方法通常是在 Node.js 的 Buffer 类型中定义的，所以浏览器中将执行new Writer()相关逻辑。2、package.json文件scripts加入一下几行命令，用于快捷生成要使用的protobuf的代码。5、如果是ts项目可以基于已经生成的js文件执行命令生成ts文件,会自动生成一个.d.ts文件。创建.proto文件（一般有后端提供.proto文件，直接下载移动过来就可）4、执行生成js文件的命令会自动生成.js文件如下。上述生成的js文件中可看到校验部分的代码。
2023-07-27 15:37:13
1290
原创 protobuf.js文档翻译
Protocol Buffers是一种跨语言、跨平台、可扩展的序列化结构化数据的方式，用于通信协议、数据存储等，最初由Google设计。protobuf.js是一个纯JavaScript实现，支持node.js和浏览器的TypeScript。它易于使用，速度惊人，并且可以与.proto文件一起开箱即用！
2023-06-25 20:47:53
554
1原创 mqtt.js
什么是MQTT协议MQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的“轻量级”通讯协议，该协议构建于TCP/IP协议上，由IBM在1999年发布。MQTT特点MQTT是一个基于客户端-服务器的消息发布/订阅传输协议，最大优点在于，用极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。做为一种低开销、低带宽占用的即时通讯协议，使其在物联网、小型设备、移动应用等方面有较广泛的
2022-04-28 22:55:12
6233
原创 vue3.0新增特性之组合式API(setup)
新特性组合式APIsetup:setup 选项在组件创建之前执行，一旦 props 被解析，就将作为组合式 API 的入口在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data 、computed 或 methods 被解析之前，所以它们无法在 setup 中被获取。使用示例import { fetchUserRepositories } from '@/api/repositories'import { ref } from 'vue'
2022-04-28 16:44:25
539
原创 protobuf.js
什么是protobuf协议缓冲区提供了一种语言中立、平台中立、可扩展的机制，用于以向前兼容和向后兼容的方式序列化结构化数据。它类似于 JSON，只是它更小更快，并且生成本地语言绑定protobuf解决了哪些问题协议缓冲区为大小高达几兆字节的类型化结构化数据包提供了一种序列化格式。该格式适用于临时网络流量和长期数据存储协议缓冲区是 Google 最常用的数据格式。它们广泛用于服务器间通信以及磁盘上数据的归档存储...
2022-04-26 17:18:05
5931
原创 git命令
目录一 参考资料二 git 配置&检查1.配置2.检查三 命令使用1.提交2.版本回退3.跟踪对比4.撤销修改5.分支管理四 使用流程图五 常见问题一 参考资料参考资料1git信息配置二 git 配置&检查1.配置git 提供了一个叫做 git config 的工具，专门用来配置或读取相应的工作环境变量。环境变量存放的位置：/etc/gitconfig 文件：系统中对所有用户都普遍适用的配置。若使用 git config 时用 --system 选项，
2022-04-07 15:04:44
582
原创 Vue源码解析
参考资料vue3.0源码下载地址vue2.6.12源码下载地址一 源码学习目录vue3.0目录目录结构package：源码目录，Vue3 的源码存放在这里面scripts：Vue3 的脚本文件，用来存放配置文件，进行编译和打包test-tds：测试文件package├─packages # 源码目录，Vue3 的源码存放在这里面│ ├─compiler-core # 与模板编译相关的代码│ ├─compiler-dom
2022-02-02 15:39:06
1381
原创 Vue学习
Vue.js对比其他框架vue API生命周期：计算属性：（computed）计算属性缓存 vs 方法<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>计算属性缓存：computed: { // 计算属
2021-04-04 23:05:36
114
原创 web worker
什么是web worker定义Web Workers 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞。它的作用就是给JS创造多线程运行环境，允许主线程创建worker线程，分配任务给后者，主线程运行的同时worker线程也在运行，相互不干扰，在worker线程运行结束后把结果返回给主线程。这样做的好处是主线程可以把计算密集型或高延迟的任务交给worker线程执行，这样主线程就会
2021-02-22 21:38:57
226
翻译 面向对象编程
实例对象与 new 命令1.对象是什么面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。对象可以复用，通过继承机制还可以定制。因此，面向对象编程具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比起由一系列函数或指令组成的传统的过程式编程（procedural programming），更适合多人合作的大型软件项目。（1）对象是单个实物的抽象。当实物被
2020-09-28 20:02:59
746
翻译 标准库
Object 对象JavaScript 的所有其他对象都继承自Object对象，即那些对象都是Object的实例。Object对象的原生方法分成两类：Object本身的方法与Object的实例方法。Object对象本身的方法所谓“本身的方法”就是直接定义在Object对象的方法。Object.print = function (o) { console.log(o) };上面代码中，print方法就是直接定义在Object对象上。Object的实例方法所谓实例方法就是定义在Object原
2020-09-25 19:14:37
187
翻译 语法
数据类型的转换简介JavaScript 是一种动态类型语言，变量没有类型限制，可以随时赋予任意值。变量的类型没法在编译阶段就知道，必须等到运行时才能知道。虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要求的。如果运算符发现，运算子的类型与预期不符，就会自动转换类型。比如，减法运算符预期左右两侧的运算子应该是数值，如果不是，就会自动将它们转为数值。'4' - '3' // 1强制转换强制转换主要指使用Number()、String()和Boolean()三个函数，手动将各
2020-09-23 18:16:36
223
翻译 算术运算符
算术运算符1.加法运算符是在运行时决定，到底是执行相加，还是执行连接。也就是说，运算子的不同，导致了不同的语法行为，这种现象称为“重载”（overload）。由于加法运算符存在重载，可能执行两种运算，使用的时候必须很小心。true + true // 21 + true // 2'a' + 'bc' // "abc"如果一个运算子是字符串，另一个运算子是非字符串，这时非字符串会转成字符串，再连接在一起。1 + 'a' // "1a"false + 'a' // "falsea"2
2020-09-23 14:48:14
169
翻译 数据类型
概述1.简介JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。（ES6 又新增了第七种 Symbol 类型的值）数值（number）：整数和小数（比如1和3.14）字符串（string）：文本（比如Hello World）。布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值null：表示空值，即此处的值为空。对象（ob
2020-09-22 19:36:59
254
翻译 基本语法进击篇
变量1.简介如果只是声明变量而没有赋值，则该变量的值是undefined。undefined是一个特殊的值，表示“无定义”。var a;a // undefined 如果变量赋值的时候，忘了写var命令，这条语句也是有效的。var a = 1;// 基本等同a = 1;但是，不写var的做法，不利于表达意图，而且容易不知不觉地创建全局变量，所以建议总是使用var命令声明变量。2.变量提升JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一
2020-09-21 17:22:58
171
翻译 未来的JavaScript记录与元组
记录和元组是一个新提案（Record & Tuple，https://github.com/tc39/proposal-record-tuple），建议为JavaScript增加两个复合原始类型：记录（Record），是不可修改的按值比较的对象元组（Tuple），是不可修改的按值比较的数组什么是按值比较当前，JavaScript只有在比较原始值（如字符串）时才会按值比较（比较内容）：> 'abc' === 'abc'true但在比较对象时，则是按标识比较（by ident
2020-08-18 14:32:40
295
原创 js保存自定义内容至本地文件以及二进制流下载
1.js保存自定义内容至本地文件例如：想要把“hello world”作为内容生成txt文件保存至本地saveContent = (content, fileName) =>{ let downLink = document.createElement('a'); downLink.download = fileName; //字符内容转换为blod地址 ...
2020-01-09 18:54:10
1093
原创 H5页面微信分享
H5页面微信分享单纯的h5页面在微信中访问1.使用微信分享默认的标题，描述，以及缩略图标题：微信自动抓取html中的title例如： <title>标题</title> 描述：自动获取当前浏览页的url(不可自定义，无法修改)缩略图：可以在父层 div 上设置 display: none; 或者对 img 设置 position: absolute; v...
2020-01-08 16:02:14
794
原创 MD5哈希文件加密
MD5哈希文件加密yarn add spark-md5（或者npm install spark-md5 ）建立js文件(md5Files.js)import SparkMD5 from 'spark-md5'export default class BMF { md5(file, md5Fn, progressFn) { this.aborted = fal...
2020-01-08 14:36:22
752
原创 H5吸顶效果实现
h5吸顶第一种 使用css 粘性定位 position: sticky; 属性实现效果示例1.正常文档流位置2.向上滑动后位置3.吸顶之后内容滑动<div className={styles.main}> <div className={styles.top}> </div> <div cl...
2020-01-07 14:53:42
2606
原创 管道操作符与可选链
ECMA随手记Object.fromEntries使用let aa= [ ['foo', 'bar'], ['baz', 42] ];console.log(Object.fromEntries(aa))输出：{baz:42,foo:'bar'}语法使用1.可选链(用于可选的属性访问) let x = foo?...
2019-10-25 19:21:43
461
翻译 二.js语法结构
2.语法结构2.1 字符集JavaScript程序是用Unicode字符集编写的。Unicode是ASCII和Latin-1的超集,并支持地球上几乎所有在用的语言// 区分大小写 js是区分大小写的语言,关键字、变量、函数名和所有标识符都必须采用一致的大小写形式,例如: 关键字:"while"必须写成"while",而不能写成"While"或者"WHILE",变量也一样，大小写的 ...
2019-05-24 18:18:06
230
翻译 一.JavaScript入门（概述）
js入门学习1.JavaScript概述1.1 js语言核心本节为js的快速概览，这里有一些示例和代码：// 注释,对js代码作解释var x; //声明一个变量xx=0; //x赋值为0x //通过变量获取其值0js数据类型: 数字(number),字符串(string),boolean(true,false), null,undefined,对象...
2019-05-24 17:02:10
138
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人