君往何处_-优快云博客

原创 js worker 使用

在 IIS 服务器上测试下 Worker，顺便测试字符与 base64 之间的转换。index.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" conte...

2023-08-22 16:45:00 123

原创 js cookie 使用

1 function setCookie(key, value, expires = 1) { 2 var days = expires; 3 var exp = new Date(); 4 exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000); 5 document.cookie = key ...

2023-08-10 11:49:00 93

原创 binary 与 base64

1 const charsMap = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'.split(''); 2 3 function binaryToBase64(chars) { 4 const padLength = (3 - chars.length % 3) % 3; 5 ...

2023-08-02 13:46:00 225

原创【polyfill】_repeat

1 function _repeat(str, num) { 2 if ( 3 typeof str !== "string" || 4 typeof num !== "number" || 5 num.toString().includes(".") || 6 num < 0 7 ) 8 throw Error("参数不合...

2023-07-07 18:50:00 54

原创深度克隆，数组扁平化，快速排序

深度克隆 1 function deepClone(source) { 2 if (Array.isArray(source)) { 3 const target = []; 4 for (let item of source) { 5 target.push(deepClone(item)); 6 } 7 return targe...

2023-07-01 01:31:00 42

原创 unicode 转 utf16

1 function toUtf16(text) { 2 if (text.length === 1) return text.charCodeAt(0).toString(16); 3 const point = text.codePointAt(0); 4 const highBits = 0xd800, 5 lowBits = 0xdc00, 6 ...

2023-06-22 12:32:00 138

问题由来：js 数字存储采用 IEEE754 标准，该标准用 64 位二进制数存储一个浮点数，即一个数字占用的内存是 8bytes，因此在存储一个无限大的数字时就会存在精度损失。对于像 0.1 这样的浮点数来说，无法用二进制的方式精确表示，这是由计算方式本身决定的，因此这部分浮点数的存储精度丢失是必然的，和语言、存储方式、内存大小没有关系。当然，像 0.5 这种可以用二进制精确表示，并且大小不超...

2023-06-22 01:26:00 77

原创 unicode 与 utf8 互转

1 function isHex(val) { 2 if (typeof val !== 'string') return; 3 return /^[0-9a-fA-F]+$/.test(val); 4 } 5 6 function isBinary(val) { 7 if (typeof val !== 'string') return; 8 ...

2023-06-21 09:31:00 108

原创 js storage 存储大小测试

问题由来：网上说 localStorage 和 sessionStorage 的存储大小是 5M，那么这是一个精确数字还是一个估算数字？测试下： 1 function getSize(storage) { 2 const _storage = window[storage]; 3 let pieces = [20, 18, 16, 14, 12, 10, 8, 6, 4, 2,...

2023-05-19 21:10:00 121

原创 js 大整数加法和乘法

1 function Big() { 2 "use strict"; 3 4 // 把 '123' 分散为 [3, 2, 1] 5 function getDigitList(n) { 6 return (n + "") 7 .split("") 8 .reverse() 9 ...

2023-05-17 20:59:00 75

原创浏览器SOP与CORS

同源策略(SOP)同源策略(Same origin policy)是浏览器安全模型，是浏览器为了源的安全做出的限制。源其实就服务器，也就是说，同源策略是通过限制浏览器的行为，来保护服务器的数据，禁止非同源之间窃取对方资源。例如，“http://127.0.0.1:3000/index.html”的脚本可以访问到“http://127.0.0.1:3000“的资源，但是如果尝试访问”http...

2023-03-17 04:12:00 64

原创正则表达式基本使用

匹配单词边界与非单词边界在正则表达式中，由数字、字母、下划线组成的连续序列表示一个单词，用\w表示，\w的边界用\b表示；那么，其余的非边界用\B表示。例如，“a_1”表示一个单词，左右两侧是两个\b，中间衔接处是两个\B；“2023-3-5”表示三个单词，则匹配六个\b和三个\B。小分组引用正则表达式的小括号不仅表示优先级，同时也获取小分组；小分组可以在正则表达式当中引用，也可以在函数当...

2023-03-15 11:27:00 46

原创 canvas基本概念

基本概念1.路径canvas的路径存放在路径列表里，在调用绘制命令的时候依次绘制。2.beginPathbeginPath表示一段路径的开始，在使用beginPath以后，重新开始填充路径队列。3.closePathclosePath表示闭合一段路径，闭合的节点是上一个moveTo的位置。4.save和restoresave和restore可以避免绘制状态的频繁设置。5.设备像...

2023-03-14 14:22:00 56

原创 web 前端零散知识

css 禁止选中1 * {2 -moz-user-select: none;3 -webkit-user-select: none;4 -ms-user-select: none;5 -khtml-user-select: none;6 -o-user-select: none;7 user-select: none;8 }j...

2022-11-23 18:54:00 52

原创 web 前端 video

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 &...

2022-11-19 19:05:00 232

原创 css grid 布局与拖动

一、容器与项目容器是一个 BFC，容器的内部不会影响到容器的外部容器可以划分网格，并规范项目的集体行为单个项目有自己的行为，可以占用一个网格，或不占满，或占用多个网格，或溢出等项目不允许 float，可以 position，这个和文档流有关二、容器属性定义一个容器1 display: grid; /* 表现为块元素 */2 display: inline-...

2022-11-18 00:06:00 114

原创手动实现 vue3 [ reactive, computed, watch ]

一、vue.js1 import reactive from "./reactive";2 import Watcher from "./Watcher";3 import computed from "./computed";4 import watch from "./watch";5 6 export { reactive, Watcher, computed, watch ...

2022-11-17 01:42:00 54

原创 es6-module

es6提供了module，以此支持web端app的模块化建设，但是这个module只能在服务器生效，下面是一个完整的测试。plugin.js 1 export default function a() { 2 return "通过default暴露的内容"; 3 } 4 5 export function b() { 6 return "通过自定义名字单独暴露的...

2022-11-17 01:22:00 49

原创防抖与节流

防抖意义：防抖是为了避免无效操作，也就是说当前操作是否有效，取决于在一定时间内是否有下一次操作，如果有，则覆盖上一次操作。使用场景：例如关键词搜索，input 框为了提高客户体验，一般都是绑定 oninput 而非 onchange，这种情况下，如果客户 100 ms 内连续输入多个字符，就会触发多次 api 请求，很浪费服务端资源。响应很快的情况下，搜索结果多次连续渲染会造成视觉抖动...

2022-11-03 19:31:00 71

原创手动实现 Promise

实现： 1 ((root, factory) => { 2 if (typeof exports === "object") { 3 module.exports = factory(); 4 } else { 5 root.MyPromise = factory(); 6 } 7 })(this, fu...

2022-10-22 15:40:00 25

原创为自己的博客添加一点效果

博客园为我们提供了主题，还可以申请 js 权限，这无疑令人激动；下面是一段效果，不到 100 行，放在“页脚 HTML”里就能直接使用！ 1 <style> 2 body { 3 overflow-x: hidden; 4 } 5 .life-motto { 6 position: absolute; 7 ...

2022-10-21 06:41:00 54

原创手动实现call、apply、bind

先写一个骨架 1 Object.assign(Function.prototype, { 2 myCall, 3 myApply, 4 myBind, 5 }); 6 7 function myCall(_this, ...arg) {} 8 9 function myApply(_this, arg) {}10 11 function myB...

2022-10-20 08:29:00 38

weixin_43899407的博客

原创 js 压缩库 LZString，压缩率大约 90%