吴惟刚

趣味小游戏平台

Mon, 23 Jun 2025 19:31:31 +0800

作为程序员应该自己干点事情，后续打算自己做个【趣味小游戏平台】

有兴趣的朋友可以点进去看看，大家可以留言，期望加入什么小游戏！

http://wuweigang.com/small-game

目前有两个示例

宝宝记文字（家有baby的可以看看，这个游戏就是为我家宝宝开发的）
1-100的数字记忆宫殿（帮助记忆）

使用步骤

先注册，后登陆，
注册自己随意，请记住账号和密码，（未配置数据库，数据全部在本地，后续可能做成数据库，现在纯玩）

高度近视患者的日常用眼指南

Wed, 09 Apr 2025 11:19:37 +0800

以下是为高度近视（≥600 度）患者定制的日常用眼指南，涵盖环境管理、用眼习惯、设备使用、生活禁忌等核心维度，附具体操作清单和风险规避策略：

高度近视管理的核心是 “预防重于治疗”，通过科学用眼、定期监测、规避风险因素，可最大程度降低并发症发生概率。请结合个人眼部具体情况（如是否已有视网膜变性、眼压异常等），在眼科医生指导下调整方案。

可根据实际需求添加个性化内容（如职业用眼特点、儿童 / 老年患者特殊注意事项等），建议打印后张贴在书桌或床头，提醒日常执行。

20250409

铁律： 把眼睛当"公司核心服务器"来维护，当 “国宝级文物” 供着！ “保护眼睛” 当成每天最重要的事，比减肥、护肤都重要 100 倍！

一、用眼环境 “黄金标准”（从光线到空间全方位优化）

1. 光照管理（避免明暗刺激）

白天：窗边工作时拉薄纱窗帘（避免直射强光），桌面照度保持 300-500lux（用手机照度 APP 检测）
夜晚：使用4000K 暖白光护眼灯（色温过高易疲劳），灯头高于视线 15cm，同时开背景灯（如落地灯），确保环境光与屏幕亮度差＜1:3
禁忌：关灯看手机 / 电脑（诱发瞳孔散大阻塞房角，增加青光眼风险），夜间使用冷白光（蓝光峰值刺激视网膜）

2. 空间布局（减少眼部调节负荷）

屏幕距离：电脑屏幕中心与眼睛距离≥60cm（用尺子测量！），手机距离≥40cm（可贴距离提醒贴纸在手机壳）
屏幕高度：显示器顶部与眉毛平齐，视线略向下 15°（使用电脑支架垫高，键盘与肘部同高）
阅读材料：书本倾斜 30°（用阅读架），避免长期低头看纸质文件（颈椎前倾会压迫眼部血管）
端正坐姿：保持端正坐姿，避免弯腰驼背、趴在桌上或侧卧用眼，减少头部晃动对眼球的压力

二、用眼时间 “精准控制”（分场景制定休息规则）

1. 工作 / 学习场景（每分每秒都计数）

严格分段

每 20 分钟远眺 20 秒（别信 “20-20-20”，对高度近视没用！）
电脑办公：25 分钟工作 + 5 分钟休息（用手机闹钟强制锁屏，休息时远眺 6 米外固定点 1 分钟）
阅读 / 书写：每 40 分钟必做 “眼球运动操”（上下左右各转动 5 次，顺时针 + 逆时针圆圈各 3 圈）
近距离用眼（看书、电脑、手机等）每 30~40 分钟休息 5~10 分钟，遵循 “20-20-20” 法则：用眼20分钟看 20 米(原20英尺，约6米)外的物体 20 秒，放松眼部肌肉。

终极禁忌：

连续用眼超 1 小时未休息（高度近视眼球壁更薄，持续充血易引发视网膜微血管瘤）
避免在黑暗环境中用眼（建议开小夜灯）。
看远时若模糊，及时佩戴眼镜，避免频繁调节晶状体导致眼轴进一步增长。
佩戴合适度数的框架眼镜或隐形眼镜（建议选择高透氧材质，隐形眼镜每日佩戴不超过 8 小时），避免裸眼眯眼视物增加眼肌负担。

2. 娱乐场景（重点管控夜间用眼）

手机使用：单次≤30 分钟，夜间开启 “深色模式”+“护眼模式”（蓝光过滤≥60%），使用 26 号以上大字体
视频观看：选择 27 寸以上显示器，距离≥3 米，每集结束后做 “眨眼训练”（快速眨眼 20 次 + 用力闭眼 5 秒，重复 3 组，缓解干眼）

三、设备使用 “硬核配置”（从工具端降低伤害）

1. 显示设备选择

电脑：优先 IPS 屏幕（色彩还原度高，减少用眼疲劳），分辨率≥2K（字体边缘更清晰，避免眯眼），推荐 “护眼模式” 设置：亮度 40%-60%，对比度 60%-70%，（建议字体≥14 号）
手机：启用 “电子书模式”（黑白显示减少视觉刺激），安装 “Forest” 类 APP 限制连续使用时间（超过 40 分钟自动锁屏）
眼镜

每日用专用酶清洁剂（如博士伦 RGP 护理液）浸泡 4 小时，使用前用生理盐水冲洗（禁用自来水，避免阿米巴原虫感染）。
建议每 1 年更换新镜片（即使无破损，材质老化会降低透氧率），每次佩戴最长不超过 10 小时（夜间严禁佩戴）。
需选高折射率镜片和抗冲击材质(如PC镜片)，劣质镜片可能加剧视疲劳
佩戴超薄非球面镜片（折射率≥1.74，减轻鼻梁压迫），镜腿长度调至耳后 1cm（避免太阳穴压迫影响血液循环）
每年验光：度数变化＞50 度及时更换镜片**（度数欠矫会加速眼轴增长）**
隐形眼镜，选择佩戴RGP硬性隐形眼镜，（透氧性好，还能稍微控制眼轴增长）。白天戴，晚上摘

2.辅助工具清单

工具	作用	推荐型号 / 用法
防蓝光眼镜	过滤 415-455nm 有害蓝光	选择透光率＞85% 的镜片（透光率过低反而伤眼）
蒸汽眼罩	缓解干眼，促进眼周血液循环	每日睡前使用，温度 40±2℃，时间 15 分钟
桌面加湿器	保持环境湿度 40%-60%（防泪液蒸发）	选择冷雾型，距离桌面 50cm 以上

3. 医疗干预，控制近视度数进一步加深

低浓度阿托品滴眼液（需遵医嘱），避免同时服用抗胆碱能药物（如某些抗抑郁药）

仅建议 18-40 岁、眼轴年增长＞0.3mm 的患者

佩戴角膜塑形镜（OK镜）或周边离焦框架眼镜
推荐 50 岁以上高度近视患者使用抗 VEGF 药物（如雷珠单抗）预防新生血管性黄斑病变

四、姿势与运动 “绝对禁区”（避免眼球承受额外压力）**

1. 日常姿势 “三不原则”(禁忌)

不低头：看手机时用支架抬高至视线水平（低头角度＞45° 会增加眼压 30%）
不侧卧：睡前避免单侧侧卧看手机（压迫眼球导致角膜变形，长期引发散光加深）
不弯腰：捡东西时屈膝下蹲而非弯腰低头（低头时颅内压传导至眼球，瞬间眼压骤升）

2. 运动风险分级（终身严格执行）

绝对禁止(禁忌)

任何头部剧烈震荡运动（如蹦极、拳击、跳水、跳绳）
快速旋转（如过山车、滑雪大回转）
低头负重（如倒立、大重量深蹲）
日常避免用力揉眼
快速低头弯腰
防止用力过猛，如便秘，搬重物（大于20斤），甚至用力咳嗽都可能诱发视网膜脱离

谨慎参与：篮球 / 足球（避免对抗碰撞）、羽毛球 / 乒乓球（双打时后排防守易忽视来球撞击）、登山（海拔＞2000 米需戴加压眼罩防视网膜缺氧）
安全推荐：

慢速游泳（自由泳为主，避免蛙泳低头蹬腿动作）
太极 / 八段锦（动作柔和无剧烈头部活动）
散步（每日 6000 步，配带防紫外线偏光镜）
瑜伽等温和项目
控制体重，避免肥胖（肥胖与近视进展及并发症风险相关）

孕妇管理

妊娠晚期避免Valsalva动作（用力屏气可能导致视网膜血管破裂）
顺产时需监测眼压，必要时选择剖宫产（分娩时眼压可短暂升高至50mmHg）

五、生活习惯 “细节决胜”（从饮食到睡眠全链条保护）

1. 营养补充 “精准配方”

每日必吃

叶黄素建议剂量10mg/日，与脂类食物同服提高吸收率（空腹服用生物利用率下降40%）
DHA选择藻油来源（避免鱼油重金属污染风险），每日200-300mg
早餐：1 杯蓝莓酸奶（花青素 + 益生菌，保护视网膜血管）
午餐：100g 清蒸三文鱼（Omega-3，减缓玻璃体混浊）+ 1 份菠菜（叶黄素，黄斑保护伞）
晚餐：1 个煮鸡蛋（玉米黄质）+ 1 小碗紫甘蓝沙拉（维生素 C，增强血管韧性）
多摄入富含叶黄素、玉米黄质（菠菜、胡萝卜、玉米）、Omega-3 脂肪酸（深海鱼、坚果）、维生素 C/E（柑橘、蓝莓、坚果）的食物，减少高糖、高盐饮食（研究显示高糖可能加速眼轴增长）。
每日饮水量 1500~2000ml，保持身体水分平衡，避免脱水导致眼干。

严格忌口

奶茶 / 可乐（高糖加速晶状体混浊）、火锅 / 烧烤（辛辣刺激诱发眼底血管扩张）、腌制食品（高盐导致黄斑水肿风险↑60%）
严格控制咖啡因摄入（每日≤200mg，约 1 杯中杯美式），过量可能导致眼压波动（研究显示咖啡因使眼压升高 2-4mmHg）。

2. 睡眠管理 “护眼黄金期”

入睡准备：睡前 1 小时关闭所有电子设备，改用暖光阅读（纸质书或墨水屏）
睡眠姿势：仰卧位（枕头高度 = 一拳竖立高度，约 10cm），若侧卧需在两腿间夹枕头保持身体平衡，避免头部倾斜压迫眼部
晨间禁忌：起床时缓慢坐起（避免血压骤升冲击眼底血管），先闭眼转动眼球 10 圈再睁眼

3.眼部放松与按摩

每天做 1~2 次眼保健操（重点按压睛明、四白、太阳穴）
或用温热毛巾敷眼（40℃左右，每次 10 分钟），促进眼部血液循环。

4.户外活动

每日户外活动≥2小时，阳光刺激多巴胺分泌减缓眼轴增长

六、应急与监测 “双重保险”（早期发现是关键）

1. 自我监测 “每日 3 查”

晨起查：睁眼后轻闭眼，用指腹轻按眼球（左右眼压力是否对称，突然变硬需警惕青光眼）
用眼后查：长时间用眼后看直线是否变弯（警惕黄斑病变），眼前是否有固定黑影（视网膜脱离前兆）
夜间查：暗处看灯是否有彩虹圈（青光眼发作信号，立即测眼压）

2. 医疗监测 “年度清单”

检查项目	推荐时间	重点关注指标
散瞳眼底照相 oct	每年 1 次（必做！）	视网膜裂孔、黄斑萎缩、玻璃体混浊、有无裂孔前兆
眼压 + 角膜厚度	每半年 1 次	24 小时眼压波动（夜间眼压更重要）
眼轴长度 + 屈光度	每季度 1 次	眼轴年增长＞0.3mm 需强化干预
黄斑 oct	每季度 1 次	排查黄斑病变

3. 数据对比原则

建立个人眼健康档案，对比历年OCT视网膜神经纤维层厚度（变薄＞5μm/年提示青光眼风险）

七、风险预警 “救命锦囊”（突发情况处理流程）**

眼前闪光感 / 漂浮物增多

立即停止活动，半卧位休息，24 小时内做眼底 B 超（警惕玻璃体牵拉视网膜）

中心视力骤降 / 视物变形

当天挂眼科急诊，排查黄斑出血 / 水肿（黄金治疗时间 48 小时内）

眼痛伴头痛恶心

怀疑急性青光眼，先按压鼻侧眼角 10 分钟（减少房水生成），口服乙酰唑胺后立即就医

若出现以下症状，立即就医

突发视力骤降、眼前固定黑影或视野缺损；
眼部剧烈疼痛、红肿、畏光流泪；
头痛伴恶心呕吐（可能提示青光眼急性发作）

执行要点：把指南变成 “肌肉记忆”

工具包准备：在办公桌摆放视力表、照度计、计时器，手机贴距离提醒贴纸
家庭配合：告知家人你的用眼禁忌（如拒绝递手机时的弯腰动作，提醒定时休息）
数据记录：用表格记录每日用眼时长、休息频率、饮食情况，每季度对比眼轴数据

记住：高度近视的眼球如同 “薄皮大馅的包子”，任何微小的损伤都可能累积成灾难。这套指南不是 “苛刻限制”，而是用科学细节为视网膜筑起 “防护墙”。从现在开始，每一个正确的用眼习惯，都是在为未来 10 年、20 年的清晰视力投资。

巧记es6的Proxy以及Reflect的13个方法

Thu, 20 Mar 2025 11:36:46 +0800

es6的Proxy 有13个种方法，我们可以将其编程故事，下面以我和我儿子的一组对话，来协助记忆。

好好看看我的这段话：这就是编故事，形成画面记忆。

吴天宇放学回家，进门就说，

吴天宇：爸爸我饿了。

我：儿子我给你准备了一个零食仓库（construct），里面什么都有 (所有构造函数都有 constructor, constructor 是对象自带的一个属性，是名词，用于标识对象的构造来源。 new出来，这里可以看着动词 construct ，proxy 就是拦截，是带动作的)。

吴天宇：爸爸那你随便给我拿点吃的吧

我：拿了一颗草莓给儿子。（get）

吴天宇：爸爸草莓坏了，扔掉吧。

我：扔掉了所有坏了的草莓（deleteProperty），（deleteProperty 主要就是为了搞定 delete 操作符，记忆方法：为了与关键词delete有区别，所以为 deleteProperty）

吴天宇：爸爸明天春游，今天老师给了我一个面包，帮我放我的零食仓库，明天吃

我：把面包放进去（set）

吴天宇：草莓吃完了，爸爸我还饿，家里有火腿肠吗（has）？有的话你帮我做个火腿肠吃吧。

我：有火腿肠，拿出火腿肠，去厨房给吴天宇做烤肠，烤熟了给吴天宇

吴天宇：爸爸你做的火腿肠是什么牌子的？

我：你最爱的双汇火腿肠（ getPrototypeOf）

吴天宇：爸爸可以把这个火腿肠的牌子换成金锣（ setPrototypeOf），（换成就是set）

我：不可以换了，我们只能查看火腿肠的描述（getOwnPropertyDescriptor ）（这里不是 property 而是 OwnProperty 可以记忆为自己拥有的属性，而不是是个属性就行，必须是自己拥有的）

吴天宇：那我看一下火腿肠的生产日期和保质期，爸爸这个火腿肠要过期了，我把上产日期改一下（ defineProperty）

我：不能改了，改了也是假的，儿子吃饱了么，今天拿了几次零食（apply）

吴天宇： 2次了，爸爸我看零食仓库东西不多了啊，还可以再加点（isExtensible）

我：好的，那我把冰箱的水果都给你放进去，现在满了，已经很多了吧，关零食仓库门（preventExtensions）

吴天宇：好的，爸爸，那现在零食仓库有多少种零食了啊（ownKyes）

我：有好多了，你可以吃很久了

主要帮自己记忆，同时也希望对大家有帮助

css3文字渐变色

Tue, 10 Dec 2024 15:25:40 +0800

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Administrative Text Effect</title>
    <style>
        .administrative-text {
            position: relative;
            z-index: 1;
            font-size: 40px;
            line-height: 1em;
            font-weight: bold;
            transform: skewX(-10deg);
            //font-style: italic;
        }

        .administrative-text:before {
            content: attr(data-text);
            position: relative;
            z-index: 2;
            display: block;
            font-size: 1em;
            background: linear-gradient(to bottom, #fefeff 0%, #fff 25% , #99e2ff 85%, #609ecd 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            overflow: visible;
            // 渐变色文字的阴影
          /*  //filter: saturate(400%);
            //filter: drop-shadow(10px 5px 5px #0e2f68);*/
        }

      /*  // 这种更加可控*/
        .administrative-text:after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 0;
            transform: translate(4px, 6px);
            color: #153a74;
            //text-shadow: 0 0 4px #153a74;
            filter: blur(1px);
            opacity: 0.8;
            overflow: visible;
        }

        body {
            background-color: #164d8e;
        }
    </style>
</head>
<body>
<div class="administrative-text" data-text="行政案件"></div>
</body>
</html>

免费的ai大模型

Thu, 30 May 2024 16:23:00 +0800

文心一言 https://yiyan.baidu.com/ （百度的，用起来很舒服）

2. 通义千问 https://tongyi.aliyun.com/qianwen/?spm=5176.28326591.0.0.40f76ee1QmUArS （阿里的，写代码最爽， webstorm 插件【通义灵码】，写代码飞起来）强力推荐

3. 腾讯元宝 https://yuanbao.tencent.com/chat/naQivTmsDa （腾讯出品）

4. 360智脑 https://chat.360.com/chat/498368d4bd81725b （360）

5. 科大讯飞（讯飞星火） https://xinghuo.xfyun.cn/ （科大讯飞）

6. 紫东太初 https://taichu-web.ia.ac.cn/#/chat （中国科学院自动化研究所和武汉人工智能研究院）

7. 豆包， https://www.doubao.com/ （字节出品）

8. 免费chatGPT 收集站点 http://124.220.104.235/web/chatgpt （内部收集了很多有用的网站连接，大家可以点进去看看）

9. kimi chat

https://kimi.moonshot.cn/chat/cq9si52vk6g2knhkui40?data_source=tracer&utm_campaign=TR_Ptes7zsy&utm_content=&utm_medium=%E7%99%BE%E5%BA%A6&utm_source=baidu_search&utm_term=&bd_vid=11448210671834644571

10.chatAi http://ai.wxbkskj.cn/chat?sessionid=1812468440150691841

desktopvoc

Wed, 15 Nov 2023 10:54:31 +0800

DesktopVoc桌面背单词

官方网站【http://www.jokerenglish.cn/】

软件注册，以及相关上手教程【http://www.jokerenglish.cn/how-to-register/】

canvas-img引发的内存问题

Tue, 10 Oct 2023 14:56:11 +0800

版本信息

作者	时间	主要变更内容	链接
吴惟刚	2023年10月10日	无	http://wuweigang.com/?id=395

问题描述

页面滚动按需加载图片，越往下滚动页面图片越来越多（图片采用canvas渲染），机器为8GB内存机器，在chrome下大约3000张图，浏览器崩溃，每张图平均1MB

系统问题排查定位

如果不加载图片，不渲染canvas, 浏览器内存不会增长, 基本问题就出现在这里

问题定位追踪测试

环境信息

window10 chrome 117.0.5938.134 64
window7 chrome 75.0.3770.38 32
下面测试简称 window10和 window7
页签自己的进程为渲染进程， gpu进程各页签共享进程， chrome为多进程架构

测试如下

测试1

用js循环生成1000个canvas, 存储到某个变量中, canvas 宽高大小为512乘512，查阅知识一个，一个像素的canvas为4byte, 因此512乘512乘4=1MB

通过getImageData()可以获取canvas存的信息，像素信息使用 Uint8 来存储的，数组长度为 4， Uint8 占用内存为 1 个字节，因此一共是 4 个字节，因此一个像素的canvas为4byte

window7
页签内存增高，内存占用 1065200 kb
window10
致GPU 内存增高， GPU进程 1161568 k ，页签内存无变化，占用 44228k kb，

测试1结论

结论， 1000 canvas会导致内存升高1000 MB ，且不会销毁！ window10 导致GPU 内存增高， window7导致页签内存增高。

测试2

用js循环生成100个 new Image(), 图片的大小为3.5MB (window7 500个)

window7

在图片加载过程中，内存一度上升到3000MB 以上，加载完，稳定后保持在 1773928 k

将new Image() 全部存储到某个变量中，内存不会下降销毁
将new Image() 加载完后，再将变量设置成null，内存会下降销毁
将new Image() 加载完后，再将变量设置成null，并且每个new Image()对象，创建一个 img标签，最后统一放到html中显示，内存不会下载销毁
将new Image() 加载完后，再将变量设置成null，并且仅仅创建一个 img标签，最后放到html中显示，内存会下降销毁，仅仅保持img中显示的那个内存

window10
在图片加载过程中，内存一度上升到3511932k 以上，加载完，稳定后保持在 1773928 k
将new Image() 全部存储到某个变量中，内存会下降销毁, 内训会下降到 45684k
将new Image() 加载完后，再将变量设置成null，内存会下降销毁
将new Image() 加载完后，再将变量设置成null，并且每个new Image()对象，创建一个 img标签，最后统一放到html中显示，内存会下载销毁
将new Image() 加载完后，再将变量设置成null，并且仅仅创建一个 img标签，最后放到html中显示，内存会下降销毁

测试2结论

根据以上测试，猜测window10上的chrome做了改良，img 用完后会自动销毁，dom元素不会占用太多内存， window7 下的chrome无法销毁，除非该图片不被引用，否则内存永远存在！

测试3

用js循环生成1000个 canvas, 并且请求图片, 图片的大小为3.5MB, 将其渲染到canvas上 (window7 500个)

window7
在图片加载过程中，内存一度上升到3000MB 以上，加载完，稳定后保持在 1998728 k
将canvas 全部存储到某个变量中，内存不会下降销毁
将canvas 全部销毁，new Image() 不销毁，内存不会下降销毁
将canvas 全部销毁，new Image() 全部销毁，内存会下降销毁

window10
在图片加载过程中，内存一度上升到3000MB 以上，加载完，稳定后保持在 1998728 k
将canvas 全部存储到某个变量中，内存不会下降销毁，保留canvas占用的内存。
渲染进程非激活情况下，稳定在1076260k，激活情况下 39120k, GPU进程会优先接管canvas渲染进程 1342064k
将canvas 全部销毁，new Image() 不销毁，内存不会下降销毁，保留canvas占用的内存
将canvas 全部销毁，new Image() 全部销毁，内存会下降销毁

测试3结论

window7下，canvas渲染图片内存会更高，且不会回收，因此跟canvas和图片两者相关
window10, 各个渲染进程的canvas使用到的内存会在页签激活时，被gpu进程取代，内存转移到GPU内存，占用内存情况跟canvas相关，跟图片无关

基于图片和canvas降低内存的优化建议

如果是使用 new Image() 加载图片，那么变量中不缓存 new Image() 对象
如果是使用 img加载图片，那么应该尽量使用虚拟列表，减少页面的img标签
如果使用canvas循环图片，不要在js变量中缓存canvas, 尽量使用虚拟dom，减少页面的canvas数量
图片加载过程中window7会持续走高，在此过程并不会降低内存，因此应该尽量避免持续请求图片，可以变成间隔请求

demo

大家可以自己复杂代码进行测试，图片自己在网上下载，把 src 修改为自己的图片即可

demo1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
    <title>canvas limit</title>
</head>
<body>
<div>
    <span>内存单位: MB</span>
    <input type="number" id="jsNumber"/>
</div>
<div>
    <button id="jsCreate">创建</button>
</div>
<script>
    // 放进该全局变量，防止GC
    let queue = [];
    let index = 0;
    const documentFrame = document.createDocumentFragment();
    // 创建 对象
    const createObject = (count) => {
        const size = 512;
        const canvas = document.createElement('canvas');
        canvas.width = size;
        canvas.height = size;
        const context = canvas.getContext('2d');
        context.fillRect(0, 0, size, size);
        index++;
        if (index === count) {
            const span = document.createElement('span');
            span.innerHTML = '完成' + count;
            document.body.appendChild(span);
            document.body.appendChild(documentFrame);
        }
        return canvas;
    };

    // 循环创建对象
    const loopCreateObject = (n) => {
        for (let i = 0; i < n; i++) {
            queue.push(createObject(n));
        }
    };
    const input = document.querySelector('#jsNumber');
    const button = document.querySelector('#jsCreate');
    button.addEventListener('click', (event) => {
        event.preventDefault();
        const number = input.value;
        if (!Number.isNaN(Number(number))) {
            queue = [];
            loopCreateObject(Number(number));
            console.log(`创建${number}MB canvas成功`);
        }
    });
</script>
</body>
</html>

demo2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
    <title>img limit</title>
</head>
<body>
<div>
    <span>内存单位: MB</span>
    <input type="number" id="jsNumber"/>
</div>
<div>
    <button id="jsCreate">创建</button>
</div>
<script>
    // 放进该全局变量，防止GC
    let queue = [];
    let index = 0;
    const documentFrame = document.createDocumentFragment();
    // 创建 对象
    const createObject = (count) => {
        index++;
        let img = new Image();
        img.index = index;
        img.onload = () => {
            if (img.index === count) {
                const span = document.createElement('span');
                span.innerHTML = '完成' + count;
                document.body.appendChild(span);
                document.body.appendChild(documentFrame);
            }
            // const  targetImg = document.createElement('img');
            // targetImg.src = 'img/img3024-4032.jpg?index=' + img.index;
            // documentFrame.appendChild(targetImg);
            // img = null;
        };
        // 加载图片出错的处理
        img.onerror = (error) => {
        };
        // 84KB
        // img.src = 'img/img512-min.jpg?index=' + index;
        // 3.35MB
        img.src = 'img/img3024-4032.jpg?index=' + index;
        // img.src = 'img/img512-max.jpg?index=' + index;
        // 240kb
        // img.src = 'img/img512-zmax.jpg?index=' + index;
        return img;
    };

    // 循环创建对象
    const loopCreateObject = (n) => {
        for (let i = 0; i < n; i++) {
            queue.push(createObject(n));
        }
    };

    const input = document.querySelector('#jsNumber');
    const button = document.querySelector('#jsCreate');

    button.addEventListener('click', (event) => {
        event.preventDefault();
        const number = input.value;
        if (!Number.isNaN(Number(number))) {
            queue = [];
            loopCreateObject(Number(number));
            console.log(`创建${number}MB canvas成功`);
        }
    });
</script>
</body>
</html>

demo3

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
    <title>img-canvas limit</title>
</head>
<body>
<div>
    <span>内存单位: MB</span>
    <input type="number" id="jsNumber"/>
</div>
<div>
    <button id="jsCreate">创建</button>
</div>
<script>
    // 放进该全局变量，防止GC
    let queue = [];
    let index = 0;
    const documentFrame = document.createDocumentFragment();
    // 创建 对象
    const createObject = (count) => {
        const size = 512;
        let canvas = document.createElement('canvas');
        canvas.width = size;
        canvas.height = size;
        let context = canvas.getContext('2d');
        index++;
        let img = new Image();
        img.index = index;
        img.onload = () => {
            context.drawImage(img, 0, 0, size, size);
            if (img.index === count) {
                const span = document.createElement('span');
                span.innerHTML = '完成' + count;
                document.body.appendChild(span);
                document.body.appendChild(documentFrame);
            }
            /*  const  targetImg = document.createElement('img');
                   targetImg.src = 'img/img3024-4032.jpg?index=' + img.index;
                   documentFrame.appendChild(targetImg);
             */
            context = null;
            canvas = null;
            img = null;
        };
        // 加载图片出错的处理
        img.onerror = (error) => {
        };
        // 84KB
        // img.src = 'img/img512-min.jpg?index=' + index;
        // 3.35MB
        img.src = 'img/img3024-4032.jpg?index=' + index;
        // img.src = 'img/img512-max.jpg?index=' + index;
        // 240kb
        // img.src = 'img/img512-zmax.jpg?index=' + index;
        return canvas;
    };
    // 循环创建对象
    const loopCreateObject = (n) => {
        for (let i = 0; i < n; i++) {
            queue.push(createObject(n));
        }
    };
    const input = document.querySelector('#jsNumber');
    const button = document.querySelector('#jsCreate');
    button.addEventListener('click', (event) => {
        event.preventDefault();
        const number = input.value;
        if (!Number.isNaN(Number(number))) {
            queue = [];
            loopCreateObject(Number(number));
            console.log(`创建${number}MB canvas成功`);
        }
    });
</script>
</body>
</html>

nvm基础使用(node版本管理工具)

Fri, 25 Aug 2023 20:39:58 +0800

版本信息

作者	时间	主要变更内容	链接
吴惟刚	2023年08月25日	无	http://wuweigang.com/?id=394

nvm 是什么？

nvm 是一个nodejs的版本管理工具，可以让电脑同时存在多个版本的nodejs，针对不同的项目可能使用不同的 nodejs 版本。

nvm 安装

下载地址

https://github.com/coreybutler/nvm-windows/releases

windows 下载

nvm-setup.exe
点击安装，下一步，下一步即可。
注意如果系统中已经安装了node，当出现安装提示时，应该点“是”

nvm 常用命令

安装node 版本

1
2
3

# nvm  install  version  如：

nvm  install  14.16.1

查看node 版本列表
1
nvm ls
查看当前使用的node 版本
1
nvm current

使用某个版本的node

# nvm use  version 如：

nvm  use  14.16.1

# 查看当前的node 版本 
node  -v

帮助
1
nvm --help
nvm 版本
1
nvm --version

nvm 不能全局使用的解决方案

出现 nvm ls 出现下面的提示：

This is not the package you are looking for: please go to http://nvm.sh

说明全局环境变量没有，需要自己配一下全局变量

以window10 为例：
打开window设置
右键我的电脑=> 属性 => 点击主页
在搜索框中输入环境变量，点击编辑

编辑环境变量

添加以下配置

变量值为nvm的安装路径

再在cmd面板输入命令，可以看到成功信息

动态表单数据结构定义

Wed, 26 Jul 2023 17:22:30 +0800

要实现上述的动态表单，建议数据结构定义如下：

// 表单输入项的数据结构
var dataStructure = [{
    // 属性名称 （必须和后端定义的查询key一一对应）
    code: 'dq',
    // 字段的label （必须和需求文档的labe一一对应）
    label: '地区',
    // 页面输入的值 （必须,最终返回给后端定义值）
    value: '',
    // 数据类型  number, text,  date,   radio,   checkbox,  select, select-tree,  textarea
    //  number  对应 input  number
    //  text  对应 input  text
    //  date  对应 input  date
    //  radio  对应 radio
    //  checkbox  对应 checkbox
    //  select  对应 select
    //  select-tree  对应 select-tree
    //  textarea  对应 textarea
    type: 'text',
    // 是否是默认项
    default: true,
    // 组件对应的其他属性 (如： input text 的属性)
    options: {
        placehoder: '请输入查询条件',
        required: true,
        // 下拉框的数据值
        data: []
    },
    // 占多少列  （必须和后端定义的查询key一一对应）
    colspan: 1,
    // 是否是自定义
    define: false,
    // 扩展
    extend: {
        // 属性名称 （必须和后端定义的查询key一一对应）
        code: 'dq',
        // 字段的label （必须和需求文档的labe一一对应）
        label: '地区',
        // 页面输入的值 （必须,最终返回给后端定义值）
        value: '',
    }
}
]

分析问题的方法

Tue, 18 Jul 2023 14:53:59 +0800

一、简化（拆解问题，复杂问题拆解的越细越好解决）

二、列举（问题进行归类）

三、辐射（发散）

四、横纵向（横向分析、纵向分析）

五、直觉

六、换位思考

七、头脑风暴

八、具象、抽象法

九、配对

十、缩小放大

十一、推理法（肯定式、否定式推理、假设）

十二、排除法

十三、目标定义本身， smart目标法(具体的（Specific）、可以衡量的（Measurable）、可以达到的（Attainable）、相关性(Relevant)、有明确的截止期限（Time-bound）)

十四、问题的定义本身符合5W1H原则 (六何分析法)，包括when时间，where地点，who人物，what什么事, why原因是什么？ how 如何发生的？问题出现过程必须定义清楚。

十五、5w2h分析法，7问分析法 （WHAT+WHY+WHEN+WHERE+WHO+HOW+HOW MUCH） WHAT——是什么，目的是什么，做什么工作。）WHY——为什么要做，可不可以不做，有没有替代方案。WHO——谁，由谁来做。WHEN——何时，什么时间做，什么时机最适宜。WHERE——何处，在哪里做。HOW ——怎么做，如何提高效率，如何实施，方法是什么。HOW MUCH——多少，做到什么程度，数量如何，质量水平如何，费用产出如何。

十六、7则高效方法论

有些问题时永远解决不了的（尽力就好）
有些问题是不用解决的（分清主次）
有些问题会自动消失（不要去操心）
有些问题是自己造成的（自己学习、积累、成长）
有些问题是其他人的问题（不用太操心）
有些问题是所有人的问题（解决好自己的问题）
大多数问题需要特定的人解决（不要浪费时间）