https://blog.archai.space/posts/ Recent content in Posts on Archai's home Hugo -- gohugo.io Wed, 26 Aug 2026 00:00:00 +0000 https://blog.archai.space/p/%E5%88%86%E4%BA%AB%E4%B9%A6%E7%AD%BE%E6%A0%8F%E7%9A%84%E8%84%9A%E6%9C%AC/ Tue, 05 Apr 2022 00:00:00 +0000 https://blog.archai.space/p/%E5%88%86%E4%BA%AB%E4%B9%A6%E7%AD%BE%E6%A0%8F%E7%9A%84%E8%84%9A%E6%9C%AC/ 跳转到脚本列表🚀 什么是书签栏的脚本？ 用过油猴脚本自然不会对书签栏脚本感到陌生，与油猴不同的是，书签栏脚本的触发方式是点击书签，而不会自动触发。以下是演示GIF： 演示动图 使用方式 以Chrome浏览器为例，第一步：右键书签栏，选择添加网页 添加网页 第二步：在名称处填写脚本名称，网址处填写脚本，最后点击保存即可！ 输入脚本 脚本分享 1.页面自动刷新 功能： 点击之后输入秒数t（未作限制，请输入数字），页面会自动进行 t 秒一次的刷新，无限循环；如果需要停止，再次单击，点击取消或者输入0即可刷新一次自动取消。 1 javascript: var t=prompt("Time(s)="); var current = location.href; if (t) {setTimeout('reload()', 1000 * t); function reload() { setTimeout('reload()', 1000 * t); var fr4me = '<frameset cols=\'*\'>\n<frame src=\'' + current + '\' />'; fr4me += '</frameset>'; with (document) { write(fr4me); void (close()); }; };}else{location.replace(current);}; 2. Video自动播放 功能：点击之后输入速度t即可实现视频倍速播放，点击取消或者输入0即可恢复1倍速播放。 1 javascript: var t=prompt("speed = "); if(t){document. https://blog.archai.space/p/vue2.0%E5%AD%A6%E4%B9%A0%E5%B0%8F%E7%BB%93/ Sat, 02 Apr 2022 00:00:00 +0000 https://blog.archai.space/p/vue2.0%E5%AD%A6%E4%B9%A0%E5%B0%8F%E7%BB%93/ 关于Vue和VueComponent 一个重要的内置关系:VueComponent.prototype.proto===vue.prototype 一个重要的内置关系 为什么要有这个关系？ 让组件实例对象(vc)可以访间到Vue原型上的属性、方法. ref属性 1.被用来给元素或子组件注册引用信息(id的替代者) 2.应用在htm1标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识: <h1 ref="xxx">.....</h1>或<School ref="xxx"></School> 获取:this.$refs.xxx 配置项props 功能: 让组件接收外部传过来的数据 (1).传递数据: <Demo name="xxx"/> (2).接收数据: 第一种方式(只接收): props:['name'] 第二种方式(限制类型): props:{ name:String } 第三种方式(限制类型、限制必要性、指定默认值): 1 2 3 4 5 6 7 props:{ name:{ type:String,//类型限制 required:true,//必要性 default:"JQF"//默认值 } } 备注: props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告, 若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据. mixin(混入) 功能: 可以把多个组件共用的配置提取成一个混入对象 使用方式: 第一步：定义混合 1 2 3 4 5 6 const mixData={ data(){. https://blog.archai.space/p/%E4%BD%BF%E7%94%A8-frp-guacamole-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E8%BF%9C%E7%A8%8B%E6%A1%8C%E9%9D%A2%E8%AE%BF%E9%97%AE%E6%96%B9%E6%A1%88%E5%85%A8%E8%BF%87%E7%A8%8B%E8%AE%B0%E5%BD%95/ Wed, 26 Aug 2026 00:00:00 +0000 https://blog.archai.space/p/%E4%BD%BF%E7%94%A8-frp-guacamole-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E8%BF%9C%E7%A8%8B%E6%A1%8C%E9%9D%A2%E8%AE%BF%E9%97%AE%E6%96%B9%E6%A1%88%E5%85%A8%E8%BF%87%E7%A8%8B%E8%AE%B0%E5%BD%95/ 使用 FRP + Guacamole 搭建个人远程桌面访问方案全过程记录 项目背景 由于家庭网络通常没有固定公网 IP，且部分办公环境无法安装传统远程控制软件，需要搭建一套： 不依赖家庭公网 IP、不需要路由器端口转发、支持纯浏览器访问、可远程控制 Windows 桌面的方案。 最终方案：用 FRP 打通「公网 VPS → 家庭 Windows」的隧道，再用部署在 VPS 上的 Apache Guacamole 提供浏览器端远程桌面（RDP）访问。 整体架构 外部客户端（任意浏览器） ↓ 公网 ↓ 阿里云 VPS ├── frps（FRP 服务端，Docker） └── Guacamole + guacd + postgres（Docker） ↓ FRP 隧道 家庭 Windows 主机 └── frpc（FRP 客户端，开机自启） ↓ 目标服务 RDP（127.0.0.1:3389） 数据流：浏览器 → Guacamole(8080) → guacd → VPS:13389 → frps → frpc → 127.0.0.1:3389 环境信息 项目 说明 VPS 阿里云，Ubuntu 24. https://blog.archai.space/p/%E4%BD%BF%E7%94%A8-cloudflare-tunnel-meshcentral-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E8%BF%9C%E7%A8%8B%E6%8E%A7%E5%88%B6%E7%8E%AF%E5%A2%83%E5%85%A8%E8%BF%87%E7%A8%8B%E8%AE%B0%E5%BD%95/ Sat, 22 Aug 2026 00:00:00 +0000 https://blog.archai.space/p/%E4%BD%BF%E7%94%A8-cloudflare-tunnel-meshcentral-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E8%BF%9C%E7%A8%8B%E6%8E%A7%E5%88%B6%E7%8E%AF%E5%A2%83%E5%85%A8%E8%BF%87%E7%A8%8B%E8%AE%B0%E5%BD%95/ 使用 Cloudflare Tunnel + MeshCentral 搭建个人远程控制环境全过程记录 项目背景 由于部分办公环境存在限制，例如： 公司电脑无法获取管理员权限； 无法安装传统远程控制软件； 无法直接通过公网访问家里的电脑； 家庭网络通常没有固定公网 IP； 因此需要搭建一套： 不依赖公网 IP、不需要路由器端口转发、支持浏览器访问、支持远程桌面控制的个人远程访问方案。 最终方案： 公司电脑 ↓ 浏览器访问 ↓ Cloudflare Tunnel ↓ 家庭电脑 ↓ MeshCentral ↓ 控制家庭设备 整体采用： Cloudflare Tunnel：负责安全内网穿透； MeshCentral：负责远程设备管理和桌面控制； 自定义域名：提供稳定访问入口。 最终访问地址： https://remote.******.com 一、三台电脑工作模式说明 整个系统涉及三台设备： 1. 家庭主机（服务器端） 作用： 作为远程控制目标，同时运行 MeshCentral 和 Cloudflare Tunnel。 运行环境： Windows 系统 主要功能： 软件 功能 MeshCentral 提供远程控制服务 cloudflared 将本地服务安全暴露到公网 Node. https://blog.archai.space/p/%E4%BB%8E%E9%9B%B6%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA3d%E5%8D%A1%E7%89%87%E7%9A%84%E9%95%9C%E9%9D%A2%E5%80%92%E5%BD%B1%E6%95%88%E6%9E%9C/ Thu, 18 Jan 2024 00:00:00 +0000 https://blog.archai.space/p/%E4%BB%8E%E9%9B%B6%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA3d%E5%8D%A1%E7%89%87%E7%9A%84%E9%95%9C%E9%9D%A2%E5%80%92%E5%BD%B1%E6%95%88%E6%9E%9C/ 背景 在为 ACMUSIC（网易云第三方客户端）的私人FM模块添加镜面倒影效果时，遇到了一个有趣的技术挑战：镜面倒影明明 DOM 结构正确、transform 也没问题，但就是不可见。这篇文章记录了排查过程和最终的解决方案。 1. 三层结构设计 倒影系统采用三层嵌套结构： .fm-card-wrapper（3D 变换容器） ├─ .fm-card（封面卡片，340×340, border-radius 28px） └─ .fm-reflection-plane（倒影裁剪平面） └─ .fm-reflection（倒影元素，scaleY(-1) 翻转） └─ img（封面图片，340×340） 关键设计思路： plane：position 在卡片正下方，overflow: hidden + border-radius: 28px 负责裁剪倒影可见区域和圆角 reflection：position 在 plane 内部，通过 transform: scaleY(-1) 实现垂直镜像 img：复用封面图片，object-fit: cover 填充 2. 核心 CSS 2.1 Plane——裁剪平面 1 2 3 4 5 6 7 8 9 10 11 12 .fm-reflection-plane { position: absolute; left: 0; top: 100%; // 紧贴卡片底部 width: 100%; height: 410px; // 关键：高度要足够大 overflow: hidden; // 裁剪可见区域 pointer-events: none; border-radius: 28px; // 与卡片圆角一致 // 真正的可见高度由 clip-path 控制 clip-path: inset(0 0 300px 0); // 顶部 110px 可见 } 2. https://blog.archai.space/p/vue%E4%B8%ADv-on%E6%94%AF%E6%8C%81%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BB%93/ Fri, 13 May 2022 00:00:00 +0000 https://blog.archai.space/p/vue%E4%B8%ADv-on%E6%94%AF%E6%8C%81%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BB%93/ Vue中支持的事件 资源事件 事件名称 何时触发 error 资源加载失败时。 abort 正在加载资源已经被中止时。 load 资源及其相关资源已完成加载。 beforeunload window，document 及其资源即将被卸载。 unload 文档或一个依赖资源正在被卸载。 网络事件 事件名称 何时触发 online 浏览器已获得网络访问。 offline 浏览器已失去网络访问。 焦点事件 事件名称 何时触发 focus 元素获得焦点（不会冒泡）。 blur 元素失去焦点（不会冒泡）。 WebSocket 事件 事件名称 何时触发 open WebSocket 连接已建立。 message 通过 WebSocket 接收到一条消息。 error WebSocket 连接异常被关闭（比如有些数据无法发送）。 close WebSocket 连接已关闭。 会话历史事件 事件名称 何时触发 pagehide A session history entry is being traversed from. https://blog.archai.space/p/vue.js%E4%B9%8Brouter.replace%E7%9A%84%E5%AE%9E%E4%BE%8B/ Thu, 28 Apr 2022 00:00:00 +0000 https://blog.archai.space/p/vue.js%E4%B9%8Brouter.replace%E7%9A%84%E5%AE%9E%E4%BE%8B/ 重定向后页面回退反复跳转bug 问题 在网易云项目时，由于Api所返回数据的问题，在Video搜索界面出现Mv的结果，这样就导致当点击的视频为Mv时，无法在Video页面利用传入的id参数渲染Video 问题图示 解决办法 想到利用判断，在得到MV之后跳转到MV播放界面，也即重定向redirect： 1 2 3 4 5 6 this.$router.push({ name: 'MvPlay', query: { id: this.id, } }) 但是，这就出现了页面回退之后又前进这样反复的BUG，于是想到replace，修改为： 1 2 3 4 5 6 this.$router.replace({ name: 'MvPlay', query: { id: this.id, } }) 这样，在Video页面重定向到Mv页面后，不会留下在Video页面的历史，所以就不会出现上面的BUG了！ https://blog.archai.space/p/vue%E8%B7%AF%E7%94%B1%E5%9C%B0%E5%9D%80%E6%94%B9%E5%8F%98%E9%A1%B5%E9%9D%A2%E5%8D%B4%E4%B8%8D%E5%88%B7%E6%96%B0/ Sat, 16 Apr 2022 00:00:00 +0000 https://blog.archai.space/p/vue%E8%B7%AF%E7%94%B1%E5%9C%B0%E5%9D%80%E6%94%B9%E5%8F%98%E9%A1%B5%E9%9D%A2%E5%8D%B4%E4%B8%8D%E5%88%B7%E6%96%B0/ 在网易云项目时，在歌手详情页点击相似的歌手跳转到query参数不同的另一个歌手详情页时，出现地址栏query参数变化，而页面却没有实时更新的现象，经过搜索找到以下解决方案： 方案一：watch监听路由 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 watch: { // 方法1 //监听路由是否变化 '$route' (to, from) { if(to.query.id !== from.query.id){ this.id = to.query.id; this.init();//重新加载数据 } } } //方法 2 设置路径变化时的处理函数 watch: { '$route': { handler: 'init', immediate: true } } 方案二：给router-view添加一个不同的key 给router-view添加一个不同的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。 1 <router-view :key="$route.fullpath"></router-view> 小洁🙎🏼‍♀️ 抽象问题描述：同一path的页面跳转时路由参数变化，但是组件没有对应的更新。 实际原因：主要是因为获取参数写在了created或者mounted路由钩子函数中，路由参数变化的时候，这个生命周期不会重新执行。 https://blog.archai.space/p/%E8%81%AA%E6%98%8E%E4%BA%BA%E5%92%8C%E5%82%BB%E5%AD%90%E5%92%8C%E5%A5%B4%E6%89%8D/ Sat, 09 Apr 2022 00:00:00 +0000 https://blog.archai.space/p/%E8%81%AA%E6%98%8E%E4%BA%BA%E5%92%8C%E5%82%BB%E5%AD%90%E5%92%8C%E5%A5%B4%E6%89%8D/ 《聪明人和傻子和奴才》 这篇散文诗作于1925年12月26日，鲁迅最初将其发表于1926年1月4日《语丝》周刊第60期。 奴才总不过是寻人诉苦。只要这样，也只能这样。有一日，他遇到一个聪明人。 “先生！”他悲哀地说，眼泪联成一线，就从眼角上直流下来。“你知道的。我所过的简直不是人的生活。吃的是一天未必有一餐，这一餐又不过是高粱皮，连猪狗都不要吃的，尚且只有一小碗……” “这实在令人同情。”聪明人也惨然说。 “可不是么！”他高兴了。“可是做工是昼夜无休息的：清早担水晚烧饭，上午跑街夜磨面，晴洗衣裳雨张伞，冬烧汽炉夏打扇。半夜要煨银耳，侍候主人耍钱；头钱从来没分，有时还挨皮鞭……。” “唉唉……”聪明人叹息着，眼圈有些发红，似乎要下泪。 “先生！我这样是敷衍不下去的。我总得另外想法子。可是什么法子呢？……” “我想，你总会好起来……” “是么？但愿如此。可是我对先生诉了冤苦，又得你的同情和慰安，已经舒坦得不少了。可见天理没有灭绝……” 但是，不几日，他又不平起来了，仍然寻人去诉苦。 “先生！”他流着眼泪说，“你知道的。我住的简直比猪窠还不如。主人并不将我当人；他对他的叭儿狗还要好到几万倍……” “混帐！”那人大叫起来，使他吃惊了。那人是一个傻子。 “先生，我住的只是一间破小屋，又湿，又阴，满是臭虫，睡下去就咬得真可以。秽气冲着鼻子，四面又没有一个窗……。” “你不会要你的主人开一个窗的么？” “这怎么行？……” “那么，你带我去看去！” 傻子跟奴才到他屋外，动手就砸那泥墙。 “先生！你干什么？”他大惊地说。 “我给你打开一个窗洞来。” “这不行！主人要骂的！” “管他呢！”他仍然砸。 “人来呀！强盗在毁咱们的屋子了！快来呀！迟一点可要打出窟窿来了！……”他哭嚷着，在地上团团地打滚。 一群奴才都出来了，将傻子赶走。 听到了喊声，慢慢地最后出来的是主人。 “有强盗要来毁咱们的屋子，我首先叫喊起来，大家一同把他赶走了。”他恭敬而得胜地说。 “你不错。”主人这样夸奖他。 这一天就来了许多慰问的人，聪明人也在内。 “先生。这回因为我有功，主人夸奖了我了。你先前说我总会好起来，实在是有先见之明……。”他大有希望似的高兴地说。 “可不是么……”聪明人也代为高兴似的回答他。 https://blog.archai.space/p/vue%E5%9C%A8%E9%A1%B5%E9%9D%A2%E7%9B%B4%E6%8E%A5%E5%B1%95%E7%A4%BA%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95xx/ Thu, 07 Apr 2022 00:00:00 +0000 https://blog.archai.space/p/vue%E5%9C%A8%E9%A1%B5%E9%9D%A2%E7%9B%B4%E6%8E%A5%E5%B1%95%E7%A4%BA%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95xx/ 用vue.js写成的页面中，可能出现由于外部请求导致的页面展示阻塞现象，进而导致模板语法{{xxx}}直接展示在页面上，这其实跟页面加载的流程有关，整个页面加载的流程是： 解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造HTML DOM模型 -> 加载图片等外部文件 -> 页面加载完毕 所以，当HTML加载的时候，就会把{{}} 当成文本加载出来，只有当vue初始化完成后，才会把{{}}解析成vue的语法。 遇到这种情况有以下几种解决方案： 方案一(不推荐)：在head里面加入引入vue的script标签 如果把引入vue的script放到head里面，那页面就不会出现{{}}，因为在body之前，vue就已经引入进并且加载完成了。 方案二：v-text|v-html 使用v-text插入文字，使用v-html插入HTML结构，替换原本使用的模板语法{{xxx}} 方案三：template 使用<template>标签包裹要渲染的HTML结构，那么只有vue解析时才会展示出该结构 方案四：v-cloak指令 + CSS样式 标签上的v-cloak属性在被vue解析到时会自动去掉，那么我们可以利用CSS的属性选择器，给有v-cloak属性的元素设置display:none样式，那么，在加载HTML时自然不会显示{{xxx}}，而在vue解析时又会显示出来，问题得以解决！ https://blog.archai.space/p/%E6%B5%8B%E8%AF%95shortcodes/ Mon, 04 Apr 2022 00:00:00 +0000 https://blog.archai.space/p/%E6%B5%8B%E8%AF%95shortcodes/ Bilibli tecent video Your browser doesn't support HTML5 video. Here is a link to the video instead. https://blog.archai.space/p/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8/ Wed, 30 Mar 2022 00:00:00 +0000 https://blog.archai.space/p/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8/ webStorage 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)。 浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。 相关API: xxxStorage.setItem('key','value'); 该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。 xxxStorage.getItem('key'); 该方法接受一个键名作为参数，返回键名对应的值。 xxxStorage.removeItem('key'); 该方法接受一个键名作为参数，并把该键名从存储中删除。 xxxStorage.clear(); 该方法会清空存储中的所有数据。 备注: SessionStorage存储的内容会随着浏览器窗口关闭而消失。 LocalStorage存储的内容，需要手动清除才会消失。 xxxStorage.getItem('key');如果key对应的value获取不到，那么getItem的返回值是null。 可以通过JSON.stringify()存储对象，通过JSON.parse()解析对象，JSON.parse(null)的结果仍然是null。 https://blog.archai.space/p/vue%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E7%9B%91%E8%A7%86%E5%8E%9F%E7%90%86/ Mon, 21 Mar 2022 00:00:00 +0000 https://blog.archai.space/p/vue%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E7%9B%91%E8%A7%86%E5%8E%9F%E7%90%86/ 1.vue会监视data中所有层次的数据. vue对于配置在data中的所有对象都会以key值作为目标进行监视，不论多少层，都会递归地为每一个key配置getter和setter(通过Object.defineProperty())。 相关阅读 MDN关于defineProperty的说明 2.如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据，即在data中提前配置。 (1).对象中后追加的属性,Vue默认不做响应式处理 直接通过修改vm._data或者vm来添加key，并不会配置getter和setter，因此不会做响应式 (2).如需给后添加的属性做响应式,请使用如下API: Vue.set(target,key/index,value)或vm.$set(target,key/index,value)（可以同时修改数组和对象） ​ 特别注意: Vue.set()和vm.$set()不能直接给vm或vm的根数据对象(vm._data)添加属性!!! 3.如何监测数组中的数据? 在数组中直接通过索引的方式修改数组并不会引起Vue的响应，那么要如何做呢？Vue通过包裹数组更新元素的方法(对原数组方法进行修改)实现,本质就是做了两件事: (1). 调用原生对应的方法对数组进行更新. (2). 重新解析模板,进而更新页面. 就包裹了下面的七种数组方法： push() pop() shift() unshift() splice() sort() reverse() 也就是说，通过上面七种方法修改数组，会让Vue做出响应。 例如想要修改数组中索引为0的位置的数据，可以通过 vm.data.arr.splice(0,0,val)或Vue.set(vm.data.arr,0,val)又或者vm.$set(vm.data.arr,0,val)，在具体的由Vue管理的方法中this指向的应该就是vm！！ 数据劫持 Vue通过setter,getter对数据进行动态监测，其实就是“劫持”了数据😯 https://blog.archai.space/p/canvas%E7%BB%98%E5%88%B6%E8%B7%9F%E9%9A%8F%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%E7%9A%84%E7%BA%BF%E6%9D%A1/ Sun, 20 Mar 2022 00:00:00 +0000 https://blog.archai.space/p/canvas%E7%BB%98%E5%88%B6%E8%B7%9F%E9%9A%8F%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%E7%9A%84%E7%BA%BF%E6%9D%A1/ 在浏览网页时无意中发现了下面这种背景互动的效果： GIF动画演示 通过一番周折，最终找到以下实现代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 function randomLine() { function n(n, e, t) { return n.getAttribute(e) || t } function e(n) { return document.getElementsByTagName(n) } function t() { var t = e("script"), o = t. https://blog.archai.space/p/%E9%80%9A%E8%BF%87u%E7%9B%98%E5%AE%89%E8%A3%85windows%E7%B3%BB%E7%BB%9F/ Sun, 19 Sep 2021 00:00:00 +0000 https://blog.archai.space/p/%E9%80%9A%E8%BF%87u%E7%9B%98%E5%AE%89%E8%A3%85windows%E7%B3%BB%E7%BB%9F/ 创建U盘介质 有至少 8GB 空间的空白 U 盘，若不是空白创建介质时会自动清空。 🐾官方工具: https://go.microsoft.com/fwlink/?LinkId=691209 直接下载按照提示操作就行了，不过仅限win10 🐾ventoy(绿色开源)： 官网 蓝奏云 直链下载 202109192250138 第一步：选择设备 第二步：安装 第三步：将下载的系统镜像 .iso 文件移动到U盘即可，这里推荐一个下载windows正版系统的网站 ITELLYOU 注意保存必要文件 https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E5%B8%B8%E7%94%A8%E5%85%AC%E5%BC%8F%E5%AE%9A%E7%90%86%E6%80%BB%E7%BB%93/ Sun, 29 Aug 2021 00:00:00 +0000 https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E5%B8%B8%E7%94%A8%E5%85%AC%E5%BC%8F%E5%AE%9A%E7%90%86%E6%80%BB%E7%BB%93/ 公式 公式 定理 定理 附录 附录(秩) YO起来！ https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E4%BA%8C%E6%AC%A1%E5%9E%8B/ Sat, 28 Aug 2021 00:00:00 +0000 https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E4%BA%8C%E6%AC%A1%E5%9E%8B/ 性质定理 二次型$x^{T}Ax$经坐标变换$x=Cy$得二次型$y^{T}By$，其中 $B=C^{T}C$，通俗的讲，就是 二次型矩阵经过任意的一次坐标变换得到新的二次型，前后二次型矩阵合同。 任一二次型都可经坐标变换变成标准型。 配方法 从$x_1$开始先合并再配方，将 f(x)⇒f(y) 正交变换法 例题 说明在正交变换下，A不仅与∧合同，而且A与∧相似 用正交变换化二次型为标准形 参考用正交矩阵相似对角化 若是求正负惯性指数，根据特征值即可得到（特征值是二次型二次项系数✅） 标准型到规范型 标准型到规范性与系数的大小无关，只与系数的正负相关，即正负惯性系数，注意先排序，依次“大于0，等于0，小于0…” 例题 第一问参数的求解用到标准型化成规范型的规律。 第二问的求解实际上就是正交矩阵相似对角化 正定 注意正定矩阵是二次型，所以正定矩阵必对称，检验正定之前，先检验对称性，即证明$A^{T}=A$ 正定必要条件 $a_{ii}>0$ |A| > 0 正定充分必要条件 顺序主子式全大于0 特征值大于0 正惯性指数 p=n $A=C^TEC$，其中C可逆 ▲ 经典例题 九几年的 $(A^{T}A)^{T}=A^TA$，故$A^{T}A$实对称矩阵 现证$\forall X$，有$X^T(A^TA)X>0$ $X^T(A^TA)X=(AX)^{T}AX \geq 0$ https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E7%89%B9%E5%BE%81%E5%80%BC%E7%89%B9%E5%BE%81%E5%90%91%E9%87%8F/ Mon, 23 Aug 2021 00:00:00 +0000 https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E7%89%B9%E5%BE%81%E5%80%BC%E7%89%B9%E5%BE%81%E5%90%91%E9%87%8F/ 特征值与特征向量 性质 1.不同特征值的特征向量线性无关。 2.ｋ重特征值至多有ｋ个线性无关的特征向量。(※) 基本运算逻辑 三角矩阵特征值为主对角线元素⭐ 注意，当$\lambda=1$时😢 秩为1的矩阵A 特征值 $\sum_{aii},0,0…$ $A^n=\sum_{aii}^{n-1} A$​ 特征值证明： 求特征值不能先对A做任何变换，而应该带着λ变换 定义法 如果两矩阵相似 即 “两矩阵相似则具有相同特征值，特征向量也存在关系” 真题&例题 常识题？😢 关于AB=0引申出的一题多解 相似 AB相似，则 A+kE ~ B+kE 行列式相等 俩秩相等 特征值相等 绩相等 利用已知构造方程组求参，进行预处理 由 $A^n=PB^nP^{-1}$ 若取B为∧，容易求得$A^n$​的值。(其他方法) 特征值也存在关系。(特征值规律) 用相似的传递性证明两矩阵相似 A~∧ ⭐ A~∧，$A=P∧P^{-1}$则 ∧是矩阵A的特征值 P列向量是A的特征向量 （要对应，别错位） https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E6%96%B9%E7%A8%8B%E7%BB%84/ Sat, 21 Aug 2021 00:00:00 +0000 https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E6%96%B9%E7%A8%8B%E7%BB%84/ Ax=0 重点： n-r(A)，基础解系 Ax=0有非零解 $\Leftrightarrow $​​ r(A) < n (未知数个数)$\Leftrightarrow $​​​ A的列向量线性相关 特别地(针对水平型阵和方阵)，※ A-m×n,m<n, Ax=0 必有非零解 A-n×n，Ax=0有非零解 $\Leftrightarrow $​ |A|=0（克拉默法则） Ax=0有非零解，则其解线性组合必为Ax=0的解，所以Ax=0若有非零解，则必有无穷多解，在这无穷多解中，线性无关的解向量个数为 $t=n-r(A)$​​​​​，这就是基础解系​，基础解系是Ax=0的解向量中的极大线性无关组。此外，根据定理可知，Ax=0的任一解都可以由基础解系线性表出。 基础解系⭐ 是解 是线性无关组 个数t=n-r(A) 真题 2004-数三 【分析】“基础解系不存在”即为Ax=0没有非零解，根据 t=n-r(A) 知，本题等价转化为求解A的秩，求解秩时，找个大，找个小，通过夹逼，确定秩的值。 【解】$A^{*}\neq0$，则$r(A^{ *})\geq 1$​，则$r(A)\geq n-1$ Ax=b有解且不唯一，则$r(A) < n$ 联立得，r(A)=n-1 故t = n-r(A) = 1 ⭐⭐⭐⭐⭐ 2002-数二、三 【分析】根据通解的定义可知，若为通解，解必然线性无关，本题转化为证明 $a_1,a_2,a_3,a_4$哪三个线性无关 这里用到了“低维无关，添加向量后的高维必无关” 此外，如果本题为证明计算题（证明基础解系），即 求$A^{*}x=0$​ 的基础解系，则 根据$t=n-r(A^{*})$得基础解系解向量个数。 求解$r(A^{*})$​ (找大找小) ， 根据A不可逆得，$|A|=0, r(A)< n=4$​​ 由 $A_{12} \neq 0$​，则$r(A) \geq n-1=3$​​ 则r(A)=3，则$r(A^{*})$ = 1 t = 4-1=3，即基础解系有三个解向量 证明是解 $A^{*}A=|A| E=0,\text{且}|A|=0$​​ ，有 $A^{ *} (a_1a_2a_3a_4)=0$​​，则向量$a_1,a_2,a_3,a_4$​​ 均为$A^{ *}x=0$​​​ 的解 证明线性无关（上面选择题过程） 🤓 https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E5%90%91%E9%87%8F/ Sun, 15 Aug 2021 00:00:00 +0000 https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E5%90%91%E9%87%8F/ 相关、无关 向量组中含零向量必然线性相关 组中至少存在两个成比例的向量必然线性相关 相关计算 $A(\alpha_1,\alpha_2,\alpha_3…\alpha_s)$​ 是否线性相关？ $\Leftrightarrow$​​​ AX=0是否有非零解？(联系克拉默法则) $\Leftrightarrow$​​ r(A) < s 特别的，对于n维向量：⭐⭐ n个n维向量相关 $\Leftrightarrow$​ 行列式得0，即|A|=0 n+1个n维向量必然线性相关 此外，还有以下几何性质 “$\alpha$相关”$\Leftrightarrow$ $\alpha=0$ “$\alpha_1,\alpha_2$相关”$\Leftrightarrow$ $\alpha_1,\alpha_2$​共线 存在$\alpha_1=k\alpha_2$ “$\alpha_1,\alpha_2,\alpha_3$​相关”$\Leftrightarrow$​ $\alpha_1,\alpha_2,\alpha_3$​​共面 证明、选择 这是难点，重点 证明线性无关 ​ 判定方法 ⭐特征值不同的特征向量必线性无关。 此外，不同特征值中如果某一特征值存在“一对多”的关系，这些特征向量也线性无关。即若$A \alpha_1=\lambda_1\alpha_1,A \alpha_2=\lambda_1\alpha_2,A \alpha=\lambda\alpha$，那么$\alpha_1,\alpha_2,\alpha_3$​线性无关​ 恒等变形中乘的思路： 利用已知构造出0使得式子变短 直接两边乘A，得出式子，然后通过两个式子的加加减减化简 真题&经典例题 2008-数二、三、四 本题第二问“写出和A相似的矩阵”(3分) 分析：$\alpha_1，\alpha_2，\alpha_3$无关，后面出现$A\alpha_1，A\alpha_2，A\alpha_3$​想到相似 本题可以当作结论使用 https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E7%9F%A9%E9%98%B5/ Fri, 13 Aug 2021 00:00:00 +0000 https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E7%9F%A9%E9%98%B5/ 基本计算 对角矩阵存在交换律，即 $\bigwedge_1 \bigwedge_2=\bigwedge_2 \bigwedge_1$​ 注意交换位置 对于 AB=C B & C均按列分块，则$A(\beta_1 \beta_2 \beta_3)=(\gamma_1 \gamma_2 \gamma_3)$，故B的列向量都是$AX=\gamma$ 的解，特别的，当AB=O即C=O时，B的列向量均是 $AX=0$ 的解。 B & C按行分块，则 AB的行向量均可由B的行向量线性表出。 A & C按列分块，则 AB的列向量均可由A的列向量线性表出。[2013] 规律1与解联系起来，尤其是AB=O推出B的列向量是Ax=0的解这一规律，除此之外AB=O也经常用r(A)+r(B)≤ n这个不等式。 “AB=O” 👉 方程的解(B的列向量是A的解) ​ 👉 秩 r(A)+r(B) ≤ n (n为A的列,B的行) 规律2,3与线性表出关联，进而可以跟秩，向量组等价(能互相线性表出则等价)联系起来。 几个特殊符号 $a(a_1,a_2,a_3)^T$ 矩阵: $ab^T$ = $(ba^T)^T$ $r(ab^T)$​​ ≤ $r(a)$​ ≤ 1 任何两行成比例 $aa^T$: 对称矩阵 数: $a^Tb = b^Ta$: $ab^T$ 或 $ba^T$​​​的绩(主对角线元素之和) https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E8%A1%8C%E5%88%97%E5%BC%8F/ Tue, 10 Aug 2021 00:00:00 +0000 https://blog.archai.space/p/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0%E8%A1%8C%E5%88%97%E5%BC%8F/ 计算※ 数字型 题型 注意“存在三条对角线的情况”，通过 逐行相加 的到 “三角型”计算 经典例题 2008-真题 抽象型 题型 行列式性质恒等变形 矩阵公式、法则恒等变形，E恒等变形 形特征值、相似 经典例题 思路：利用单位矩阵恒等变形 思路一：利用矩阵相似（$\alpha_1，\alpha_2，\alpha_3$无关，后面出现$A\alpha_1，A\alpha_2，A\alpha_3$想到相似） 利用乘法公式凑$PAP^{-1}=B$ 思路二：用行列式性质 思路：“不可逆”=>“行列式为0”=>观察看到为特征值形式$|\lambda E-A|=0$，利用特征值与行列式的关系求解 应用 特征值 思路 “消0且得公因式” 例题 对于特征多项式应两行（或列）加加减减，至多是三行（或列）的加加减减找出 $\lambda-a$ 的公因式，然后再解一个二次方程，就可求出矩阵A的三个特征值 克拉默法则 思路 不用来解大的方程组，常用小的证明题， 齐次方程AX=0有非零解→ |A|=0 齐次方程AX=0没有非零解→ |A|≠0 经典例题 image-20210811155745415 “AB=O” 👉 方程的解(B的列向量是A的解) ​ 👉 秩 r(A)+r(B) ≤ n (n为A的列,B的行) 矩阵秩 注意点 r(A) = r 👉A中有r阶子式不为0,任何r+1阶子式(若还有)必全为0. https://blog.archai.space/p/%E5%AF%BB%E5%9D%80%E6%96%B9%E5%BC%8F%E4%B8%8E%E5%AD%98%E5%82%A8%E6%A8%A1%E5%BC%8F/ Thu, 22 Jul 2021 00:00:00 +0000 https://blog.archai.space/p/%E5%AF%BB%E5%9D%80%E6%96%B9%E5%BC%8F%E4%B8%8E%E5%AD%98%E5%82%A8%E6%A8%A1%E5%BC%8F/ 寻址方式 基本寻址方式 特 征 优 点 缺 点 备 注 隐含寻址 操作数的存放地由操作码决定 立即寻址 操作数直接在指令中 加快执行速度 增加指令长度，不方便修改操作数 适用提供常数，设定初始值 寄存器寻址 操作数在指令指定的寄存器中 方便修改，访问寄存器加快指令执行，缩短指令长度，编程更灵活 直接寻址 操作数地址在指令中，操作数在主存单元中 指令字较长，不方便地址修改 间接寻址 操作数地址的地址在指令中，操作数在主存中 方便修改指针，编程更灵活 访问两次主存获取操作数，降低执行速度 形式地址，有效地址EA(=操作数地址) 寄存器间接寻址 操作数地址在指令指定的寄存器中，操作数在主存单元中 压缩指令长度，修改寄存器内容就可以修改主存地址指针 方便编写循环程序 相对寻址 操作数地址由PC和指令提供的地址偏移量决定,操作数在主存单元中 EA=PC+D，适用与地址无关的程序设计 基址寻址 操作数地址由基址寄存器(RB)和指令提供的地址偏移量决定，操作数在主存单元中 缩短指令长度，扩大寻址空间 大型计算机，用户的逻辑地址→主存的物理地址，EA=(RB)+D 变址寻址 操作数地址由变址寄存器(RI)和指令提供的地址偏移量决定，操作数在主存单元中 寻址到操作数RI内容(地址)自动修改，EA=(RI)+D 堆栈寻址 寻址方式由指令操作码决定 适用涉及堆栈操作的指令，EA=(SP) 基本寻址方式示意图 https://blog.archai.space/p/%E5%A4%96%E9%83%A8%E6%8E%92%E5%BA%8F%E7%9B%B8%E5%85%B3/ Thu, 10 Jun 2021 00:00:00 +0000 https://blog.archai.space/p/%E5%A4%96%E9%83%A8%E6%8E%92%E5%BA%8F%E7%9B%B8%E5%85%B3/ 由于数据元素太多，无法一次全部读入内存进行内部排序，这是就要通过外部排序来解决... https://blog.archai.space/p/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95%E7%9B%B8%E5%85%B3/ Thu, 10 Jun 2021 00:00:00 +0000 https://blog.archai.space/p/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95%E7%9B%B8%E5%85%B3/ 排序算法 平均时间复杂度 空间复杂度 稳定性 适用情况 插入排序 $O(n^2)$ O(1) 稳定 n较小，初始序列基本有序 希尔排序 $O(n^{1.3})$ O(1) 不稳定 冒泡排序 $O(n^2)$ O(1) 稳定 n较小，初始序列基本有序 快速排序 $O(n\log_2n)$ $O(nlog_2n)$ 不稳定 初始序列无序 简单选择排序 $O(n^2)$ O(1) 不稳定 n较小 堆排序 $O(n\log_2n)$ O(1) 不稳定 n较大或只排前几位 2-路归并排序 $O(n\log_2n)$ O(n) 稳定 n很大 链式基数排序 $O(d(n+rd))$ $O(rd)$ 稳定 n大，关键字值小 相关概念 1. https://blog.archai.space/p/%E6%9F%A5%E6%89%BE%E7%AE%97%E6%B3%95%E7%9B%B8%E5%85%B3/ Sun, 06 Jun 2021 00:00:00 +0000 https://blog.archai.space/p/%E6%9F%A5%E6%89%BE%E7%AE%97%E6%B3%95%E7%9B%B8%E5%85%B3/ 顺序查找 1 2 3 4 5 6 7 8 9 10 11 typedef struct{//查找表的数据结构（顺序表） int *elem;//动态数组基址 int TableLen;//查找表长度 }SSTable; int Seq_Search(SSTable ST,int key){ ST.elem[0]=key; int i; for (i = ST.TableLen;ST.elem[i]!=key ; i--) {}//从后往前查找，最终返回下标i return i;//返回0说明没找到 } 效率分析 对于长度为n的顺序表，如果查找成功 $$ ASL={\frac{1+2+…+n}{n}}=\frac{n+1}{2} $$ 若果查找失败，则 $ASL=n+1$ 总体上，该算法时间复杂度为 $O(n)$ 优化思路 1.如果使得表中的元素有序存放……，可以构造出一棵查找判定树 此时，查找失败时$ASL=\frac{1+2+…+n+n}{n+1}=\frac{n}{2}+\frac{n}{n+1}$ 优点： 容易查找失败时ASL更小 2.如果各元素被查找的概率不同……，可以把概率大的靠前 优点： 容易查找成功时ASL更小 折半查找 折半查找，又称“二分查找”，仅适用于有序的顺序表。 针对升序排列的顺序表，代码实现如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 typedef struct{//查找表的数据结构（顺序表） int *elem;//动态数组基址 int TableLen;//查找表长度 }SSTable; int BinarySearch(SSTable L,int key){ int low=0,high=L. https://blog.archai.space/p/%E5%9B%BE%E7%9A%84%E5%BA%94%E7%94%A8/ Fri, 04 Jun 2021 00:00:00 +0000 https://blog.archai.space/p/%E5%9B%BE%E7%9A%84%E5%BA%94%E7%94%A8/ 一、最小生成树 📌什么是生成树？ 连通图的生成树是包含图中所有顶点的一个极小连通子图，通俗地讲，就是“边尽可能少，但需保持连通”。 规律： 对于一个顶点数|V|=n的树，其生成树的边数|E|=n-1。如果将|E|+1，必然会形成回路；如果将|E|-1，则会成为非连通图。 📌什么是最小生成树？ 最小生成树，也称最小代价树(Minimum Spanning Tree，MST) 是带权连通无向图的生成树中边的权值之和最小的一棵树，联系实际问题不难理解其中“最小代价”的意味。 Prim（普利姆算法），Kruskal（克鲁斯卡尔算法）就是寻找最小生成树的常用算法。 1.Prim（普利姆算法） 从某一顶点开始，每次将代价最小的新顶点纳入生成树，直至所有顶点都纳入为止。 图示 截图_20210529120539 易知，此方法得到的最小生成子树是不唯一的。 代码实现 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 void MiniSpanTree_PRIMI(Graph G,int u){ //从顶点u出发找G的最小生成树 for (int i = 0; i <G.vexnum; ++i) {//辅助数组初始化 if(i!=u){ closedge[i]={u,G.arcs[u][i]}; } } closedge[u].lowcost=0; for (int j = 0; j < G.vexnum; j++) { k=minimum(closedge);//求生成树的下一个节点 cout<<cloedge[k]. https://blog.archai.space/p/%E5%9B%BE%E7%9A%84%E9%81%8D%E5%8E%86/ Thu, 03 Jun 2021 00:00:00 +0000 https://blog.archai.space/p/%E5%9B%BE%E7%9A%84%E9%81%8D%E5%8E%86/ 广度优先遍历（BFS） BFS(Breadth-First-Search)，参考对树的层序遍历 对上面的图从①出发进行BFS得到序列： ①②⑤ ⑥ ③⑦ ④⑧ 若采用不同的储存结构，可能会得到不同的遍历结果（这个差异主要来自寻找邻接点的过程），对于邻接矩阵存储的图，由于邻接矩阵是唯一的，所以BFS序列也是唯一的；同理，邻接表存储的图BFS序列不唯一。 BFS算法 与树的层序遍历不同的是，由于图中存在回路，遍历过程中会出现重复访问的问题，故可构造visited数组，用来标记已访问过的数组。 此外，还应针对非连通图做额外的判断，遍历完一个连通分量（极大连通子图）后，遍历查找visited数组中是否还存在未遍历的，如果有即为另一连通分量，继续调用BFS即可。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 void BFS(Graph G,int v); bool visited[MAX_VERTEX_NUM]; SqQueue Q;//辅助队列 void BFSTraverse(Graph G){ //初始化visited数组 for (int i = 0; i < G.vexnum; ++i) {//使下标从1开始 visited[i]=false; } //对非连通图的处理 for (int v = 0; v < G. https://blog.archai.space/p/%E5%9B%BE%E7%9A%84%E5%AD%98%E5%82%A8/ Wed, 02 Jun 2021 00:00:00 +0000 https://blog.archai.space/p/%E5%9B%BE%E7%9A%84%E5%AD%98%E5%82%A8/ 邻接矩阵 Vextex/Vertices 顶点; Martix 矩阵; Arc 弧. 代码实现 1 2 3 4 5 6 7 8 #define MaxVextexNum 100//容许存储的最大顶点数 typedef struct{ char Vex[MaxVextexNum]; //可以将定点之间的关系用int 类型01表示，也可定义为boolean/枚举类型，占空间更小 bool Edge[MaxVextexNum][MaxVextexNum]; int vexnum,arcnum;//顶点数和弧|边数 }MGraph; 即找度 根据邻接矩阵计算结点的度TD 无向图 有向图 $TD(V_i)$ 第i行（或i列）中非零元素的个数 $ID(V_i)$ : i行非零元素个数 $OD(V_i)$: i列非零元素个数 TD=ID+OD 对于带权图（网） 1 2 3 4 5 6 7 8 9 10 11 #define MaxVextexNum 100//容许存储的最大顶点数 #define INIFINITY //宏定义，表示无穷 typedef char VextexType;//顶点 typedef int EdgeType;//权值 typedef struct{ VextexType Vex[MaxVextexNum]; EdgeType Edge[MaxVextexNum][MaxVextexNum]; int vexnum,arcnum; }MGraph; 复杂度 空间复杂度来自数组Vex[]跟Edge[]，故空间复杂度为$|V|+|V|^2=O(|V|^2)$，即为顶点数量的二次方，故此方法更适合存储稠密图，不然有较多浪费。 https://blog.archai.space/p/avl%E6%A0%91/ Sun, 23 May 2021 00:00:00 +0000 https://blog.archai.space/p/avl%E6%A0%91/ 平衡二叉树是Adelson-Velsky和 Landis发明，故命名为AVL树。也称平衡二叉查找树。 ✨特点： ①左子树<根<右子树； ②任一节点，左右子树高度之差不超过1. 平衡因子 $平衡因子=左子树高-右子树高$ AVL树的插入操作 AVL树插入新结点导致不平衡之后，只需将最小不平衡子树平衡，其他祖先结点会随之恢复平衡。 调整最小不平衡子树 注意：调整过后必须保证其BST的特性，即“左子树1.LL 即在以A为根节点的树的左孩子B的左子树上插入新结点，导致A成为最小不平衡子树。 调整过程如下： 2.RR 即在以A为根节点的树的右孩子B的右子树上插入新结点，导致A成为最小不平衡子树。 调整过程如下： 3.LR 即在以A为根节点的树的左孩子B的右子树上插入新结点，导致A成为最小不平衡子树。 观察得知，所进行的调整就是保证$|平衡因子|<=1$，因此若插入操作使得 左 - 右 > 1 => 右旋 右 - 左 > 1 =>左旋 而当进行了LR插入操作之后，导致以A为根节点的树 左-右>1，理应右旋但是，由上述结果可知，经过右旋之后： 可以看到，为了保证其左子树<根<右子树的特性，经过调整后，依然存在右-左>1的问题； 因此，对于LR型不能简单进行右旋调整，应该先将其转化为LL型 (左旋)，再进行右旋； 为此，我们需要将BR结点展开，之后旋转成为LL型插入 可以看到，展开后又出现两种插入情况CL&CR，但其实两者处理大同小异： CR插入调整过程如下： 4.RL 即在以A为根节点的树的右孩子B的左子树上插入新结点，导致A成为最小不平衡子树。 参考LR型，其调整过程如下： 查找操作效率分析 Assuming that, $n_h$表示深度为h的平衡树中含有的最少结点，则 $n_0=0$,$n_1=1$,$n_2=2$…存在递归关系 $n_h=n_{h-1}+n_{h-2}+1$,即左右子树结点之和+根节点。 可以证明(AVL证明)，n个结点的平衡二叉树最大深度数量级为$\log_2n$，则其查找操作的复杂度为$O(\log_2n)$ https://blog.archai.space/p/%E5%93%88%E5%A4%AB%E6%9B%BC%E6%A0%91/ Sun, 23 May 2021 00:00:00 +0000 https://blog.archai.space/p/%E5%93%88%E5%A4%AB%E6%9B%BC%E6%A0%91/ 基本概念 1.结点的权 每个结点带有的具有某种现实意义的数值(比如代表重要性等) 2.结点的带权路径长度 从树的根到该结点的路径长度（经过的边数）与该结点上权值的乘积 3.树的带权路径长度 树中所有叶结点的带权路径长度之和（WPL, Weighted Path Length） $WPL=\sum_{i=1}^{n}w_il_i$ ✨4.哈夫曼树 在含有n个带权叶结点的二叉树中，其中带权路径长度（WPL）最小的二叉树称为哈夫曼树，也称最优二叉树 构造哈夫曼树 给定n个权值分别为 $w_1,w_2,…,w_n$ 的结点，其构造过程描述如下： ① 将这n个结点分别作为n棵仅含一个结点的二叉树，构成森林F ② 构造一个新结点，从F中选取两棵根结点权值最小的树作为新结点的左右子树，并且将新结点的权值置为左、右子树上根结点的权值之和。 ③ 从F中删除刚才选出的两棵树，同时将新得到的树加入F中。 ④ 重复步骤②和③，直至F中只剩下一棵树为止。 假设给定结点在经过步骤①之后如下 则其②③④步骤为： $WPL_{min}=1*7+2*3+3*2+4*1+4*2=31$ 或者 $WPL_{min}=1*7+3*(1+2+2+3)=31$ 👇👇👇👇👇👇 哈夫曼树特点： ① 每个初始结点最终都成为叶结点，且权值越小的结点到根结点的路径长度越大。 ② 哈夫曼树的结点总数为2n-1。 ③ 哈夫曼树中不存在度为1的结点。 ④ 哈夫曼树并不唯一，但WPL必然相同且为最优。 哈夫曼编码 固定长度编码 如ASCII码 可变长度编码 前缀编码 没有一个编码是另一个编码的前缀 哈夫曼编码 由哈夫曼树得到哈夫曼编码——字符集中的每个字符作为一个叶子结点，各个字符出现的频度作为结点的权值，根据之前介绍的方法构造哈夫曼树。 ✨ 应用 可用于数据压缩 如图，为英文字母使用频率表，若不进行压缩，第 i 个字母频率用$l_i表示$，路径长至少为5($2^4<26<2^5$)，则 $WPL=5×\sum_{i=1}^{n}l_i$=500 若通过构造哈夫曼树进行哈夫曼编码 则$WPL_{min}=$ $v=\frac{WPL_{min}}{WPL}$ https://blog.archai.space/p/%E6%A0%91/ Sat, 22 May 2021 00:00:00 +0000 https://blog.archai.space/p/%E6%A0%91/ 普通树 对于一棵普通类型的树形结构，可将其转化为二叉树之后再参考二叉树的方法进行相关操作。 孩子兄弟表示法（链式结构） 通过此方法可将普通树转化为二叉树 1 2 3 4 5 //孩子兄弟即Child, Sibling typedef struct CSNode{ Elemtype data; struct CSNode *firstchild,*nextsibling;//第一个孩子和右兄弟指针,等价于*lchild,*rchild }CSNode,*CSTree 图示如下 树的遍历 1.深度优先遍历（先根遍历&后根遍历） 先根遍历 若树非空，先访问根结点，再依次对每棵子树进行先根遍历(递归)。 对如上图所示的树进行先根遍历： A B C D A (BE ) (CF) (DG) A (BEH) (CF) (DG) 即先根遍历序列为A B E H C F D G 发现与通过“孩子兄弟法”将树转为二叉树后的先序遍历序列相同 后根遍历 若树非空，先依次对每棵子树进行后根遍历，最后再访问根结点。 对如上图所示的树进行后根遍历： B C D A (E B) (F C) (G D) A https://blog.archai.space/p/%E7%BA%BF%E7%B4%A2%E4%BA%8C%E5%8F%89%E6%A0%91/ Sat, 15 May 2021 00:00:00 +0000 https://blog.archai.space/p/%E7%BA%BF%E7%B4%A2%E4%BA%8C%E5%8F%89%E6%A0%91/ 线索二叉树 WHY 方便从任一个结点出发，找到其前驱、后继；方便遍历 普通二叉树中，对任意一个结点，若想找到其前驱/后继结点，只能再进行一次相应的前/中/后序遍历才行，复杂度太高。 为此，我们引入前驱线索，后继线索的概念。其中，前驱线索由左孩子指针充当，后继线索由右孩子指针充当。 1 2 3 4 typedef struct BiTNode{ ElemType data; struct BiTNode *lchild,*rchild; }BiTNode,*BiTree; 构建出如下图所示的结构： 但是， *lchild(*rchild)有可能指向存在的结点，为此我们引入线索标志。当线索标志为1时，表示孩子指针指向前驱后继，线索标志为0时，表示孩子指针指向左右孩子。此时 1 2 3 4 5 typedef struct ThreadNode{ ElemType data; struct ThreadNode *lchild,*rchild; int ltag,rtag;//左右线索标志 }ThreadNode,*ThreadTree; 这样，每一个线索链表中的结点就可以图示为: HOW 如何分别用代码实现前中后序遍历下的线索链表 1.中序线索化 其实中序线索化的过程就是再进行一遍中序遍历，为每个节点添加额外的信息(lchild, rcild, ltag, rtag). 🍔初始定义结构体 1 2 3 4 5 typedef struct ThreadNode{ ElemType data; struct ThreadNode *lchild,*rchild; int ltag,rtag; }ThreadNode,*ThreadTree; 🍔定义前驱指针 https://blog.archai.space/p/%E7%94%B1%E9%81%8D%E5%8E%86%E5%BA%8F%E5%88%97%E6%9E%84%E9%80%A0%E5%87%BA%E4%BA%8C%E5%8F%89%E6%A0%91/ Sun, 09 May 2021 00:00:00 +0000 https://blog.archai.space/p/%E7%94%B1%E9%81%8D%E5%8E%86%E5%BA%8F%E5%88%97%E6%9E%84%E9%80%A0%E5%87%BA%E4%BA%8C%E5%8F%89%E6%A0%91/ 由遍历序列构造出二叉树 仅知道一种遍历序列是无法确定唯一的二叉树的，以中序遍历为例，对于一个中序遍历序列“BDCAE”，其对应的树形结构可能有下面三种： 因此，至少需要两种遍历序列才可以推知树形结构。 1.前序+中序遍历序列 🎈基本步骤 由前序遍历的特性得知，前序遍历中第一个节点必然为根节点，因此根据中序遍历特性，根节点左边为左子树下的所有节点，右边为右子树下的所有节点，然后分别在左子树序列右子树序列中重复进行即可。 🎈示例 前序遍历序列：A D B C E 中序遍历序列：B D C A E 首先能确定根节点为A，根据中序遍历序列可以得到： 对于左子树BDC，根据前序遍历，此子树根节点为D，根据中序遍历序列： image-20210508165242806 至此，二叉树的还原工作就完成了！至于更复杂的序列，逐步推断即可😋 2.后序+中序遍历序列 🔑与1不用的是，后序遍历中根节点为后序遍历序列尾部的那个节点，其余参照1即可！ 3.层序遍历+中序遍历 🔑 根据层序遍历特性，层序遍历中根节点始终在子树前面，“根左右” 🎈示例 层序遍历序列：A D E B C 中序遍历序列：B D C A E 根节点为A，根据中序遍历序列可以得到： 对于左子树BDC，根据前序遍历，此子树根节点为D，根据中序遍历序列： 思考 如果前序，后续，层序两两组合能否确定唯一的树结构？ 假设给定序列如下： 前序：A B 后序：B A 层序：A B 其两两组合都满足两种结构： 因此前序，后续，层序两两组合不能确定唯一的树结构。 https://blog.archai.space/p/%E5%90%91%E9%87%8F%E7%A9%BA%E9%97%B4%E7%AE%A1%E7%90%86%E7%AD%96%E7%95%A5/ Mon, 16 Nov 2020 00:00:00 +0000 https://blog.archai.space/p/%E5%90%91%E9%87%8F%E7%A9%BA%E9%97%B4%E7%AE%A1%E7%90%86%E7%AD%96%E7%95%A5/ 向量的空间管理，有静态和动态两种策略 静态空间管理策略 开辟内部数组_elem[]并使用一段地址连续的物理空间，_capacity表示总容量 ，_size表示当前的实际规模n，示意图如下： 若采用静态空间管理策略，容量_capacity固定，则有明显的不足… 上溢/overflow： _elem[]不足以存放所有元素，尽管此时系统往往仍有足够的空间 下溢/underflow： _elem[]中的元素寥寥无几，装填因子 λ = _size / _capacity « 50% 动态空间管理策略 在即将上溢时，适当扩大内部数组的容量 递增策略 当需要扩容时，为_capacity追加固定大小的空间，即 1 T* oldElem = _elem; _elem = new T[ _capacity += INCREMENT ]; 考虑最坏情况，在初始容量为0的空向量中连续插入n = m*I个元素 那么，在第1，I+1，2I+1，3I+1…次插入元素时都需要扩容，表示为 递增策略 倍增策略 当需要扩容时，增加_capacity 为原来的两倍，即 1 T* oldElem = _elem; _elem = new T[ _capacity <<= 1 ]; 考虑最坏情况，在初始容量为1的空向量中连续插入n = 2^m个元素 那么，在第1，2，4，8…次插入元素时都需要扩容，表示为 倍增策略 两种策略的复杂度分析 考虑最坏的情况，两种策略的复杂度分别为 https://blog.archai.space/p/%E5%87%8F%E8%80%8C%E6%B2%BB%E4%B9%8B%E4%B8%8E%E5%88%86%E8%80%8C%E6%B2%BB%E4%B9%8B/ Sun, 15 Nov 2020 00:00:00 +0000 https://blog.archai.space/p/%E5%87%8F%E8%80%8C%E6%B2%BB%E4%B9%8B%E4%B8%8E%E5%88%86%E8%80%8C%E6%B2%BB%E4%B9%8B/ 减而治之(Decrease and conquer) 什么是“减而治之”？ 为求解一个大规模的问题，可以将其划分为两个问题，其一平凡，另一规模缩减 ，分别求解子问题，由子问题的解得原问题的解 减而制之 比如说，对于一个数组A的求和问题，可以设计如下的算法 1 2 3 4 5 sum( int A[], int n ) { return n < 1? 0 : sum(A, n - 1) + A[n - 1]; } 当规模缩减到一定程度后，抵达递归基，返回0 复杂度分析 1. 递归跟踪 绘出计算过程中出现过的所有递归实例（及其调用关系） ，那么它们各自所需时间之总和，即为整体运行时间 上例中，共计n+1个递归实例(分析)，各自只需O(1)时间 故总体运行时间为： T(n) =O(1) × (n+1) =O(n) 2.递推方程 对于大规模的问题、复杂的递归算法，递归跟踪不再适用 此时可采用另一抽象的方法… 在本例中，有T(n)=T(n-1) + O(1),T(0)=O(1) 则，T(n) = T(n-2)+O(2) = T(n-3)+O(3) = T(n-n)+O(n)=O(n) https://blog.archai.space/p/ds%E5%AF%BC%E8%AE%BA/ Tue, 10 Nov 2020 00:00:00 +0000 https://blog.archai.space/p/ds%E5%AF%BC%E8%AE%BA/ 导论 所谓算法，即特定计算模型下，旨在解决特定问题的指令序列。输入：待处理的信息（问题）输出：经处理的信息（答案） 正确性 的确可以解决指定的问题 确定性 任一算法都可以描述为一个由基本操作组成的序列 可行性 每一基本操作都可实现，且在常数时间内完成 有穷性 对于任何输入，经有穷次基本操作，都可以得到输出 ::: tip Algorithms + Data Structures = Programs (Algorithms + Data Structures) x Efficiency = Computation ::: 如何评判算法的其优劣(计算模型) 实验统计是最直接的方法，但足以准确反映算法的真正效率？不足够！ - 不同的算法，可能更适应于不同规模的输入 - 不同的算法，可能更适应于不同类型的输入 - 同一算法，可能由不同程序员、用不同程序语言、经不同编译器生成 - 同一算法，可能实现并运行于不同的体系结构、操作系统… 为给出客观的评判，需要抽象出一个理想的平台或模型 - 不再依赖于上述种种具体的因素 - 从而直接而准确地描述、测量并评价算法 1.图灵机模型(TM) 示意图 组成 说明 Tape 依次均匀地划分为单元格 各存有某一字符，初始均为'#' Head 总是对准某一单元格，并可 读取或改写其中的字符。每经过一个节拍，可 转向左侧或右侧的邻格 Alphabet 字符的种类有限 State TM总是处于有限种状态中的某一种 。每经过一个节拍 可按照规则转向另一种状态 。统一约定，‘h’ = halt(停止) 2. https://blog.archai.space/p/php%E8%AF%AD%E6%B3%95%E5%B0%8F%E7%BB%93/ Wed, 14 Oct 2020 00:00:00 +0000 https://blog.archai.space/p/php%E8%AF%AD%E6%B3%95%E5%B0%8F%E7%BB%93/ 基本语法 输出语句 语句 功能 echo 输出字符串类型 print_r 输出引用类型(对象,数组等) var_dunp 检测变量类型 ::: tip echo语句可用于给前端返回响应体。比如前端通过ajax请求，可以在xhr.response中直接得到echo的内容 ::: 变量&常量 👉🏼 变量 语句 功能 返回值 isset() 检测变量是否存在 boolean unset() 删除某个变量 none 👉🏼 常量 常量用const 或 define 定义，常量名一般全部大写，不受作用域的限制 ::: tip 一般是define在类外定义常量，const在类内定义常量，并且const必须通过类名::变量名来进行访问。但是php5.3以上支持类外通过const定义常量。 ::: :::danger const不能在条件语句中使用，必出错 ::: 参考文章 《PHP中define() 与 const定义常量的区别详解》 https://blog.archai.space/p/php%E5%BC%80%E5%8F%91%E9%AA%8C%E8%AF%81%E7%A0%81%E7%B1%BB/ Sat, 03 Oct 2020 00:00:00 +0000 https://blog.archai.space/p/php%E5%BC%80%E5%8F%91%E9%AA%8C%E8%AF%81%E7%A0%81%E7%B1%BB/ 利用php中的GD库可以完成验证码类的开发。后盾人教程 PHP创建图像步骤 发送HTTP头信息，声明内容为图像 1 2 3 header('Content-type:image/gif'); header('Content-type:image/jpeg'); header('Content-type:image/png'); 通过设置头信息让浏览器渲染出图像，而不是HTML等其他类型 创建画布 1 imageCreateTrueColor(width,height); width & height 画布宽高，即为输出图片的尺寸,返回为source 类型，后续操作都是针对这个资源展开。 创建绘图所需要的颜色 1 imageColorAllocate(img_resource,R,G,B); 颜色从属于创建画布产生的图像资源而存在，后面三个值分别为红绿蓝三个通道的值，为int类型,在0—255之间。 绘图（填充画布、画圆、画方块、画线条、画布上写字） 👉 填充画布(画布背景) 1 imageFill(img_resource,x,y,color); 👉 画圆 1 2 3 4 //绘制空心圆形 imageEllipse(img_res,x,y,w,h,color); //绘制填充好的实心圆 imageFilledEllipse(img_res,x,y,w,h,color); 绘制 圆心(x,y) 宽 x，高 h，的圆 👉 画方 1 2 3 4 //空心矩形 imageRectangle(img_res,x1,y1,x2,y2,color); //实心矩形 imageFilledRectangle (img_res,x1,y1,x2,y2,color); (x1,y1)为左上角坐标， (x2,y2)为右下角坐标 https://blog.archai.space/p/git%E7%9B%B8%E5%85%B3/ Tue, 29 Sep 2020 00:00:00 +0000 https://blog.archai.space/p/git%E7%9B%B8%E5%85%B3/ 基本命令 1 2 3 4 5 6 7 8 git config --global #全局配置 git config #当前仓库配置 mkdir #创建文件夹 ls #列出当前目录下(文件，文件夹) ls -a #所有all rm -rf * #删除当前目录下所有 touch #新建文件 cat #查看文件中的内容 不想`git add . 所有？ 配置.gitignore 定义忽略提交的文件，其中 所有空行或者以注释符号 ＃ 开头的行都会被 Git 忽略。 匹配模式最后跟反斜杠（/）说明要忽略的是目录。 可以使用标准的 glob 模式(php)匹配。 从版本库删除 1 2 git rm ... #从版本库中删除，本地也会删除 git rm --cached ... #只从版本库删除 从版本库改名 1 git mv . https://blog.archai.space/p/javascript%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/ Sun, 20 Sep 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/ 关于正则表达式的创建，就不做过多的赘述 ::: tip 由于不知名原因，span标签报错，因此全部替换为[sp] ::: 关于转义 1.字面量形式创建的RegExp 转义形式： \d, \., \s 等 1 2 3 let str='fintinger2592030861.com$323e' let reg=/\d+\.com/ str.match(reg);//2592030861.com 2.对象形式创建的RegExp 转义形式： \\d, \\., \\s等 1 2 3 let str = 'fintinger2592030861.com$323e' let reg = new RegExp('\\d+\\.com', 'g') str.match(reg)//2592030861.com 边界约束 利用^和$分别限制开头和结尾 1 2 3 4 5 let str = 'bdhw42556jbjkhb2592030861jrh4jbhkfehrbj43jk32kbbjhb' let reg = /\d{3,6}/ let reg2 = /^\d{3,6}$/ str.match(reg)//42556 str. https://blog.archai.space/p/es6%E4%B8%AD%E7%9A%84class%E7%B1%BB/ Wed, 09 Sep 2020 00:00:00 +0000 https://blog.archai.space/p/es6%E4%B8%AD%E7%9A%84class%E7%B1%BB/ class实质上是对js中继承的封装组合，用一种“语法糖”的形式实现原型链的继承 静态属性/方法 静态方法/属性是指，函数作为对象时，定义在其原型(__proto__)上的方法，而需要实例化继承的动态方法是定义在其原型对象(prototype) 中的，静态方法中的参数都是固定的，直接通过整个构造函数调用，实例化对象并不会继承；而动态方法中的参数会因为实例化对象的不同而产生改变，实例化对象默认是继承的。 1 2 3 4 function User(){} User.__proto__.show=function(){} console.dir(User) //这里的show()方法就属于静态方法 在class中，利用static定义静态属性/方法 1 2 3 4 5 class Admin{ static show(){}//__proto__中 show(){}//prototype中 } console.dir(Admin) 关于class一些注意点 class中声明的方法在prototype对象中，由于默认的属性特征设置，这些方法是不可遍历的！ 1 2 3 4 5 6 7 8 class Admin{ show(){} } console.log( Object.getOwnPropertyDescriptor( Admin.prototype,"show" )) //enumerable: false class中声明方法时，方法之间不用,隔开！ class中默认开启严格模式 class中的属性保护 主要可以通过三种途径实现属性保护：Symbol,weakmap,私有属性 1.Symbol 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 /*利用Symbol创建一个受保护的属性的集合对象,无法直接获取，只能通过自定义的get/set方法*/ const protects = Symbol('受保护的属性') class User { constructor(name) { this. https://blog.archai.space/p/javascript%E4%B8%AD%E7%9A%84%E7%BB%A7%E6%89%BF%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE%E5%88%86%E6%9E%90/ Fri, 04 Sep 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E4%B8%AD%E7%9A%84%E7%BB%A7%E6%89%BF%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE%E5%88%86%E6%9E%90/ 原型链自定义设置 原型链的设置可以通过Object.creative , __proto__, Object.setProperty三种方法 Object.creative () 说明： 该方法只能设置原型链，而不能获取 1 2 3 4 let a1 = {name: 'a1'} let b1 = Object.create(a1) b1.name = 'b1' console.log(b1); Object.creative()为创建对象的方法，第一个参数为其原型对象，第二个参数为其默认属性，这些属性默认是不可写，不可遍历，不可修改的 1 2 3 4 5 6 7 let b=Object.create(null,{ a:{value:'ohh', enumerable:true}, b:{value:'jqf'}, }) console.log(Object.getOwnPropertyDescriptors(b)); //a: {value: "ohh", writable: false, enumerable: true, configurable: false} //b: {value: "jqf", writable: false, enumerable: false, configurable: false} __proto__ 说明： 能设置，能获取，实质上是setter，getter https://blog.archai.space/p/%E5%85%B3%E4%BA%8Ejavascript%E6%A8%A1%E5%9D%97%E5%8C%96/ Wed, 02 Sep 2020 00:00:00 +0000 https://blog.archai.space/p/%E5%85%B3%E4%BA%8Ejavascript%E6%A8%A1%E5%9D%97%E5%8C%96/ 自定义一个模块引擎 要求： 能够让模块之间产生依赖关系 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 let _module = (function () { let moduleList = {} function define(name, modules, action) { modules.map((n, i) => { //将传入的只含名称的模块数组 => 指定名称模块的返回结果 modules[i] = moduleList[n] }) moduleList[name] = action.apply(null, modules) // console.log(moduleList); } return {define} })(); //定义一个工具库，暴露给外界使用，输出 _module. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%AF%B9%E8%B1%A1/ Mon, 31 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%AF%B9%E8%B1%A1/ 对象中参数获取和值的接收 1.对象中利用key获取value. | [] 1 2 3 4 5 let obj = {name: 'jqf', age: 19} for (let key in obj) { // console.log(obj.key);//会报undefined console.log(obj[key]);//jqf,19 } 👉 delete Object.key() 1 2 delete obj.name console.log(obj);//{ age: 19 } 2.参数/配置合并 👉 展开语法 利用展开语法合并对象，让后面传入的参数覆盖默认参数，完成合并 1 2 3 4 5 6 7 8 9 10 11 12 function upload(params) { let config = { url: '/images', type: '*. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%87%BD%E6%95%B0%E7%9B%B8%E5%85%B3/ Fri, 28 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%87%BD%E6%95%B0%E7%9B%B8%E5%85%B3/ 关于函数传参 当参数数量不确定时，通常用arguments 来统一接收 1 2 3 4 5 6 function sum() { return [...arguments].reduce((res, i,) => res + i, 0) } let res = sum(1, 2, 3) console.log(res);//6 可以用展开语法代替arguments接收所有的参数： 1 2 3 4 5 6 function sum(...args) { return args.reduce((res, i,) => res + i, 0) } let res = sum(1, 2, 3) console.log(res);//6 注意： 接收参数时展开语法放其他形参后面，做统一接收 递归函数 递归函数有两个关键点，一是要有退出执行的条件，二是要不断执行自身并返回 递归思想实现阶乘函数 1 2 3 4 5 6 function factorial(num) { if (num === 1) { return num } return num * factorial(--num) } 如果用到箭头函数，可以简写为： https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bmap%E4%B8%8Eweakmap%E7%B1%BB%E5%9E%8B/ Wed, 26 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bmap%E4%B8%8Eweakmap%E7%B1%BB%E5%9E%8B/ Map类型 1.属性 👉 set() 设置值 1 2 3 4 5 6 7 8 9 10 let map = new Map() let fn = function () {console.log('this is function')} let user = {name: 'jqf', age: 18} map.set('key', 'value') map.set(fn, 'function') map.set(user, 'object') console.log(map); /*Map(3){"key" => "value", ƒ => "function", {…} => "object"}*/ 注意： Map类型，字符串、函数、对象都可以作为key设置 👉 size Map长度 1 console.log(map.size);//3 👉get() 获取值 1 2 3 console. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bset%E4%B8%8Eweakset/ Wed, 26 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bset%E4%B8%8Eweakset/ Set类型 1.属性 👉 size ：数组长度 1 2 3 let set = new Set([1, 2, 3]) console.log(set.size);//9 👉 add() ：添加元素 1 2 console.log(set.add(99));//返回修改后的数组Set(4) { 1, 2, 3, 99 } console.log(set);//原数组已经被修改Set(4) { 1, 2, 3, 99 } 👉 delete() ：删除元素 1 2 console.log(set.delete(99));//true console.log(set);//Set(3) { 1, 2, 3 } 👉 has() ：有某个元素 1 console.log(set.has(3)); //true 👉 clear()：清空数组 1 2 set. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bsymbol%E7%B1%BB%E5%9E%8B/ Mon, 24 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bsymbol%E7%B1%BB%E5%9E%8B/ Symbol() 类型不能当做普通对象(不能加属性值)，只能当做一种永远都不会重复的字符串 定义 方法： Symbol(desc)、Symbol.for(desc) 1 2 3 4 5 6 7 8 let s1 = Symbol('d') let s2 = Symbol.for('d') let s3 = Symbol.for('d') console.log(s1.description);//d console.log(Symbol.keyFor(s2));//d console.log(s1 === s3);//false console.log(s2 === s3);//true 注意： 利用Symbol() 定义的值永远都不会相等，而Symbol.for() 定义的，如果描述相同，则值相等 定义对象时，key相同会覆盖的问题 普通方式定义： 1 2 3 4 5 6 7 8 9 10 11 let user1={ name:'李四' } let user2={ name:'李四' } let grade={ [user1.name]:{C:98,E:60}, [user2.name]:{C:99,E:59} } console.log(grade);//{'李四':{C:99,E:59}} 可以看到，后面的覆盖掉了前面的 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E6%95%B0%E7%BB%84%E6%B7%B1%E5%80%94/ Mon, 24 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E6%95%B0%E7%BB%84%E6%B7%B1%E5%80%94/ 数组是经常用到的一种数据结构 定义方法 1 2 let a = new Array(3) let b = [1, 2, 3] 如何定义一个只有一个元素的数组？ new Array(n)表示有n个空元素的的数组，利用Array.of(n),可以定义一个只有n元素的数组 类型转换 利用join 可以把数组转成字符串 1 2 3 let a = [1, 2, 3, 4, 5] let b = a.join('') console.log(b); 说明： join 的作用就是将数组中的所有元素用指定的符号连接，成为一个字符串 如何把DOM集合NodeList转换成普通数组形式？ Nodelist形式无法使用.map(),reduce()等方法(能用forEach())，处理不太方便，因此需要转换成普通数组类型 1 2 3 4 5 6 let titles = document.querySelectorAll('h1'); [...titles].map((v, i,titles) => { console. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%80%BC%E7%B1%BB%E5%9E%8B/ Sun, 23 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%80%BC%E7%B1%BB%E5%9E%8B/ 字符串 1.截取字符串 主要有slice()、substr()、substring() 三种方法 一个参数[i] 都是从i开始截取，返回n及其后面的全部字符串。 第二个参数[i,n] slice(i,n)和substring(i,n)表示从i开始截取到n；substr(i,n)，表示从i开始截取n个 负参数 slice()和substr()将最后一位记为-1，然后依次编号；substring()则会将任何负参数变为0，然后查找 1 2 3 4 5 6 let w = 'fintinger.xyz' let a = w.slice(-4, w.length) let b = w.substring(-1, 2) let c = w.substr(-4, 4) console.log(a, b, c);//.xyz fi .xyz 2.查找字符串 主要有indexof()、includes()、lastIndexof() 三种方法 共同点： 两个参数[searchString,position]，第一个为要检索的字符串，第二个为开始检索位置； 若position < 0，则position = 0 position可以省略 不同之处： lastIndexof()为从右往左找，找到第一个立即返回索引！其他两个都是从左往右 indexof(),lastIndexof()找不到则返回-1，includes()找不到返回false position 省略之后，includes(),indexof()默认值为0，lastIndexof()则为str. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bjs%E9%BB%91%E6%B4%9E/ Sat, 22 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bjs%E9%BB%91%E6%B4%9E/ JavaScript中最容易忽视的一些点 let和var 都用来定义变量，但二者之间有些细微的差别 区别1: 是否有块作用域 1 2 3 4 5 6 7 8 var a = 1 { // var a=2 let a = 2 } console.log(a); //output var:a=2 let:a=1 1 2 3 4 5 6 7 8 var i=1 // for (var i = 0; i <3; i++) { for (let i = 0; i <3; i++) { //..do something } console. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E8%BF%90%E7%AE%97%E7%AC%A6/ Sat, 22 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E8%BF%90%E7%AE%97%E7%AC%A6/ ++的前置与后置 1 2 3 4 5 6 7 8 9 let a1 = 1 let b1 = 2 let c1 = b1 + a1++ console.log(a1, b1, c1);//2,2,3 let a2 = 1 let b2 = 2 let c2 = b2 + ++a2 console.log(a2, b2, c2);//2,2,4 说明： 后置是先计算再++ 前置是先++再计算 短路运算 1 2 3 4 let a = 0; let b = 1; let c = a || b; console. https://blog.archai.space/p/es6%E4%B9%8Bpromise%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93/ Tue, 18 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/es6%E4%B9%8Bpromise%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93/ Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值。其目的主要是解决以往回调中嵌套回调的"嵌套地狱"问题，使代码可读性更好，更美观! 基本用法 对于一个标准的Prommise，其基本写法为: 1 2 3 4 5 6 7 8 9 10 11 12 13 new Promise(function (resolve, reject) { //do something... //success resolve('success') //fail & reject // reject('rejected') *resolve和reject只能出现一个 }).then( function (value) { //if succeed,do something... }, function (reason) { //if fail & reject,do something... } ) 如果采用ES6的箭头函数写法，则为: 1 2 3 4 5 6 7 new Promise((resolve, reject) => { resolve('success') //reject('rejected') }). https://blog.archai.space/p/%E7%BA%A2%E8%AD%A6%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E6%94%B6%E5%BD%95%E4%B8%AD/ Sat, 15 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/%E7%BA%A2%E8%AD%A6%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E6%94%B6%E5%BD%95%E4%B8%AD/ https://blog.archai.space/p/ajax%E9%87%8D%E5%A4%8D%E8%AF%B7%E6%B1%82/ Thu, 13 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/ajax%E9%87%8D%E5%A4%8D%E8%AF%B7%E6%B1%82/ 在发送某一次请求时，如果不对请求做去重处理那么，同一个请求有可能会发送很多次，一个个慢慢响应，这会很大程度影响性能以及页面的使用体验 全局变量 1 2 3 4 5 6 7 /** * baseURL 是每次请求的地址 * x 表示XMLHttpRequest实例，初始为null * isSending 是用来判断请求是否处于发送状态的标识 */ const baseURL = "http://127.0.0.1:8000/delay" let x = null, isSending = false 原生请求 1 2 3 4 5 6 7 8 9 10 11 12 13 14 if (isSending) x.abort() x = new XMLHttpRequest() //正处于发送状态，修改标识 isSending = true x.open("GET", baseURL) x.send() x.onreadystatechange = function () { if (x. https://blog.archai.space/p/%E8%B7%A8%E5%9F%9F%E5%8F%8Acors%E5%AE%98%E6%96%B9%E8%B7%A8%E5%9F%9F/ Tue, 11 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/%E8%B7%A8%E5%9F%9F%E5%8F%8Acors%E5%AE%98%E6%96%B9%E8%B7%A8%E5%9F%9F/ JSONP jsonp跨域的实现仅限于GET请求，不可用于POST 说明：实现的基本思路是利用html中script标签本身可跨域的特性，在发送请求时，在页面中创建script标签，追加到页面中。这实际上就像利用script标签引入外部资源 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /*main.js*/ //申明handle函数 function handle(data) { //do something.... } ele.onclick = function () { //1.创建script标签 const script = document.createElement("script") //2.修改script的src属性 script.src = "http://127.0.0.1:8000/jsonP" script.id="tempScript"//添加id方便移除 //3.追加到页面中 document.body.appendChild(script) } 1 2 3 4 5 6 7 8 9 10 11 12 /*server.js*/ app.get('/jsonP', (request, response) => { const data = { exist:1, msg:"用户名已经存在! https://blog.archai.space/p/ajax%E5%AD%A6%E4%B9%A0%E5%B0%8F%E7%BB%93/ Mon, 10 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/ajax%E5%AD%A6%E4%B9%A0%E5%B0%8F%E7%BB%93/ 学习地址:https://www.bilibili.com/video/BV1WC4y1b78y，主要通过express的简单功能来搭建本地的服务，进而更好地学习Ajax 发送Ajax请求的方式 原生Ajax 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 //1.创建对象 const xhr = new XMLHttpRequest() //2.初始化 xhr.open([type], [url])//xhr.open("GET","https://www.x.com") //3.发送 xhr.send() //4.处理返回结果 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { //...do something console.log(xhr.status)//状态码 console.log(xhr.statusText)//状态字符串 console.log(xhr.getAllResponseHeaders)//所有请求头信息 console.log(xhr.response)//响应体 } } } 说明： https://blog.archai.space/p/ajax%E5%9F%BA%E7%A1%80%E5%8F%8Aexpress%E6%A1%86%E6%9E%B6%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/ Thu, 06 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/ajax%E5%9F%BA%E7%A1%80%E5%8F%8Aexpress%E6%A1%86%E6%9E%B6%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/ Baike Ajax 即“AsynchronousJavascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。—百度百科 请求报文 格式以及参数如下 1 2 3 4 5 6 7 8 行 GET / HTTP/1.1 头 Host: fintinger.xyz Cookie: keyword=xyz Content-type: application/x-www-form-urlencoded User-agent: Chrome 83 空行 (必须有) 体 [GET]:空 [POST]:空/username=admin&password=admin 图示为Chrome浏览器请求报文 响应报文 格式以及参数如下 1 2 3 4 5 6 7 8 9 10 11 12 行 HTTP/1.1 200 Ok 头 Content-Type: text/html; charset=utf-8 Content-Length: 22 Content-encoding: gzip 空行 (必须有) 体 <html> <head> </head> <body> <h1>Hello! https://blog.archai.space/p/vue.js%E5%AD%A6%E4%B9%A0%E5%BF%83%E5%BE%97/ Sat, 18 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/vue.js%E5%AD%A6%E4%B9%A0%E5%BF%83%E5%BE%97/ 1. 关于元素显示与隐藏 # v-show="name" 说明： 如果data中name为true就显示，否则该元素display:none # v-if="name" 说明： 如果data中name为true就显示，否则该元素变成一段注释<!---->，就被删掉了! v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 2. 访问data 　# v-model 说明： 与data中的值绑定，会随着data中的值得改变而改变，如果是input则data中的值会随着input中的值的改变而改变 # v-if **说明：**用于条件性地渲染一块内容 在<template>元素上使用 v-if 条件渲染分组 因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换(隐藏或显示)多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含<template>元素。 这样做的好处就是不用再写一个<div>将需要隐藏的元素包裹 # v-show 说明： 条件切换display属性 # v-for 说明： 在data中定义一个数组arr，然后用v-for="val in arr"访问到 3. https://blog.archai.space/p/%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E6%89%A9%E5%B1%95%E5%90%8D/ Thu, 09 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E6%89%A9%E5%B1%95%E5%90%8D/ 该怎么去获得文件名字符串中的文件扩展名呢？ 一种较为强大的解决方法是利用String的slice、lastIndexOf方法： 1 2 3 4 5 6 7 8 9 function getFileExtension(filename) { return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2); } console.log(getFileExtension3('')); // '' console.log(getFileExtension3('filename')); // '' console.log(getFileExtension3('filename.txt')); // 'txt' console.log(getFileExtension3('.hiddenfile')); // '' console.log(getFileExtension3('hiddenfile.')); // '' console.log(getFileExtension3('filename.with.many.dots.ext')); // 'ext' 说明 filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2) 本方法中的>>>运算目的是 找到最后一个.所在索引，然后索引-1+2，相当于+1，则slice方法返回.后面的后缀名 .不会再开头，否则索引会是0，因为-1>>>0 = 4294967295，所不会匹配到 .出现在末尾，索引会等于length+1，也不会匹配到 slice(start,end) 说明：start必须指定，负值为从后往前数，若只指定start值，则返回start位置及后面一直到数组结尾所有的元素 **注意：**区别于删除数组中的一段元素的方法 Array.splice() lastIndexOf(searchvalue,fromindex) **说明：**如果要检索的字符串值没有出现，则该方法返回 -1，该方法对大小写敏感 使用： 1 2 3 4 var str="Hello world! https://blog.archai.space/p/%E4%B8%80%E7%BB%84%E5%BE%AA%E7%8E%AF%E6%95%B0%E7%BB%84/ Wed, 08 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/%E4%B8%80%E7%BB%84%E5%BE%AA%E7%8E%AF%E6%95%B0%E7%BB%84/ 做网页轮播图，或者音乐播放列表时经常要用到一组循环的数组，到最后一项返回第一项，第一项返回最后一项 利用两次判断 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 function doLoop( arr ){ arr.loop_idx = 0; // 返回当前的元素 arr.current = function(){ if( this.loop_idx < 0 ){// 第一次检查 this.loop_idx = this.length - 1;// 更新 loop_idx } if( this.loop_idx >= this.length ){// 第二次检查 this.loop_idx = 0;// 更新 loop_idx } return arr[ this. https://blog.archai.space/p/%E5%89%AA%E8%B4%B4%E6%9D%BF%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0/ Tue, 07 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/%E5%89%AA%E8%B4%B4%E6%9D%BF%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0/ 经常会用到指定内容的复制粘贴问题，用到document的execCommand 方法,为此，我将这个功能封装为一个简单的函数: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function doCopy($el, {deepCopy = false, copyTips = true, language = "Chinese", bgColor = "#ff6666", fontColor = "#fff"} = {}) { let tempEl = $("<input id='selectEl' type='text' value=''>").val($el.text()) if (deepCopy) { tempEl.val($el.html()) } tempEl.appendTo($("body")) document.querySelector('#selectEl').select(); document.execCommand('copy'); tempEl.remove() if (copyTips) { let tipEl = $("<div class='copyTips' >成功复制到剪切板</div>") tipEl. https://blog.archai.space/p/es6%E4%B8%AD%E6%96%B0%E5%A2%9E%E5%85%B3%E4%BA%8Earray%E7%9A%84%E6%96%B9%E6%B3%95/ Mon, 06 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/es6%E4%B8%AD%E6%96%B0%E5%A2%9E%E5%85%B3%E4%BA%8Earray%E7%9A%84%E6%96%B9%E6%B3%95/ 在javascript中，Array()经常用到，利用ES6中的一些新特性会让数组的处理更加方便快捷 1.迭代空数组 直接创建一个数组 1 2 const arr=new Array(4); //Output:[undefined，undefined，undefined，undefined] 利用map方法，转化成新的数组，企图得到 [0,1,2,3] 数组 1 2 3 const arr=new Array(4); arr.map((ele,index) => index); //Output:[undefined，undefined，undefined，undefined] 解决这个问题可以在创建数组时用到Array.apply apply与call类似，都是用来继承父类的方法的，不同之处是： call() 方法分别接受参数。person.fullName.apply(person1, ["Oslo", "Norway"]); apply() 方法接受数组形式的参数. person.fullName.call(person1, "Oslo", "Norway"); 如果要使用数组而不是参数列表，则 apply() 方法非常方便。 1 2 3 const arr = Array.apply(null, new Array(4)); arr.map((ele,index) => index); //Output:[0,1,2,3] 由此，我们可以创建一个指定最大值、最小值、或者长度生成指定数列的方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 /** * 生成自定义的连续数列 * @param{Number}min * @param{Number}max * @param{Number}len */ function newArr({min = null, max = null, len = null} = {}) { let newArray=[], skip = min if (len == null) {len = max - min + 1} if (min == null) {skip = -max} const arr = Array. https://blog.archai.space/p/%E9%81%BF%E5%85%8D%E5%A4%9A%E6%9D%A1%E4%BB%B6%E5%B9%B6%E5%88%97/ Mon, 06 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/%E9%81%BF%E5%85%8D%E5%A4%9A%E6%9D%A1%E4%BB%B6%E5%B9%B6%E5%88%97/ 开发中有时会遇到多个条件，执行相同的语句，也就是多个||这种： 1 2 3 if (status === 'process' || status === 'wait' || status === 'fail') { doSomething() } 这种写法语义性、可读性都不太好。可以通过switch case或includes这种进行改造。 1 2 3 4 5 6 7 8 9 10 11 switch case switch(status) { case 'process': case 'wait': case 'fail': doSomething() } includes const enum = ['process', 'wait', 'fail'] if (enum.includes(status)) { doSomething() https://blog.archai.space/p/javascript%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84json/ Sun, 05 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84json/ 在写小demo的过程中，经常需要把某个文件夹的图片文件的路径给引入，除非全部重命名成有序的数字，不然不好处理，这就用到了node中的fs和path模块，还没学… 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 const path=require("path"); const fs = require('fs'); fs.stat('../images',(err)=>{//图片文件所在目录 if (err)return; var result='{' fs.readdir("../images",(err,data)=>{//图片文件所在目录 for(var i=0;i<Object.keys(data).length;i++){ let ImgPath="\"images/"+data[i]+"\""; result+="\""+i+"\":"+ImgPath+","; } result=result.substring(0,result.length-1); let length="\""+"length"+"\""+":"+"\""+Object.keys(data).length+"\""//文件数量 result+=","+length+'}' fs.writeFile("../data/imgPath.json",result,(err)=>{ if(err)return; console.log("写入文件成功，一共"+Object.keys(data).length+"个文件"); }); }); }); 生成的文件大概就是这样的一个json数据 1 {"0":"images/1.jpg","1":"images/10.jpg","2":"images/100.jpg","3":"images/101.jpg","4":"images/102.jpg","5":"images/103.jpg","6":"images/104.jpg","7":"images/105.jpg","8":"images/106.jpg","9":"images/107.jpg","10":"images/108.jpg","length":"109"} https://blog.archai.space/p/javascript%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80/ Wed, 01 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80/ 什么是瀑布流？ 一种图片在网页的布局方式，具体要求为：从页面第二行开始，后续图片跟在页面中最矮的那张图片后面 瀑布流布局 用JavaScript怎么实现？ 为此我将整个过程封装为一个函数。 1 2 3 4 5 6 7 8 /*HTML部分*/ <head> <link rel="stylesheet" href="main.css"> </head> <div id="box"></div>//container和img由js动态加入 <script src="jquery.min.js"></script> <script src="loadFile.js"></script> <script src="main.js"></script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 /*CSS部分*/ /*首先清空默认样式*/ #box{ position: relative; } .container{ float: left; } .container>.pic{ width: 200px; } .container>.pic>img{ width: 100%; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 /*JS部分*/ /*loadFile. https://blog.archai.space/p/python%E4%B8%AD%E5%85%B3%E4%BA%8E%E6%96%87%E4%BB%B6%E7%9A%84%E7%A7%8D%E7%A7%8D%E9%97%AE%E9%A2%98/ Fri, 26 Jun 2020 00:00:00 +0000 https://blog.archai.space/p/python%E4%B8%AD%E5%85%B3%E4%BA%8E%E6%96%87%E4%BB%B6%E7%9A%84%E7%A7%8D%E7%A7%8D%E9%97%AE%E9%A2%98/ 在python中，我们可以将那些在运行时可能会出现状况的代码放在try代码块中，在try代码块的后面可以跟上一个或多个except来捕获可能出现的异常状况。 FileNotFoundError，文件找不到 LookupError指定了未知的编码 UnicodeDecodeError读取文件时无法按指定方式解码 def main(): f = None try: f = open('致橡树.txt', 'r', encoding='utf-8') print(f.read()) except FileNotFoundError: print('无法打开指定的文件!') except LookupError: print('指定了未知的编码!') except UnicodeDecodeError: print('读取文件时解码错误!') finally: if f: f.close() if __name__ == '__main__': main() finally块的代码不论程序正常还是异常都会执行到（甚至是调用了sys模块的exit函数退出Python环境，finally块都会被执行，因为exit函数实质上是引发了SystemExit异常），因此我们通常把finally块称为“总是执行代码块”，它最适合用来做释放外部资源的操作。 或者， with关键字指定文件对象的上下文环境并在离开上下文环境时自动释放文件资源 def main(): try: with open('致橡树.txt', 'r', encoding='utf-8') as f: print(f.read()) except FileNotFoundError: print('无法打开指定的文件!') except LookupError: print('指定了未知的编码!') except UnicodeDecodeError: print('读取文件时解码错误!') if __name__ == '__main__': main() https://blog.archai.space/p/%E7%BB%9F%E8%AE%A1%E5%AD%A6%E6%9C%9F%E6%9C%AB%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%93/ Wed, 17 Jun 2020 00:00:00 +0000 https://blog.archai.space/p/%E7%BB%9F%E8%AE%A1%E5%AD%A6%E6%9C%9F%E6%9C%AB%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%93/ 第一章 导 论 1.什么是统计学 统计学是收集、处理、分析、解释数据并从数据中得出结论的科学 数据分析所用的方法可分为描述统计方法和推断统计方法 2.参数和统计量 参数：总体特征，所关心的参数通常是总体平均数、总体标准差、总体比例等 由于总体数据通常是不知道的，所以参数是一个未知的常量- 统计量：个体特征，所关心的参数通常是样本平均数、样本标准差、样本比例等 由于样本是已经抽出来的，所以统计量总是知道的 第二章 数据的搜集 1.数据的来源 **间接来源（二手数据）**与研究内容有关的原信息已经存在，我们只是重新加工、整理，使之成为分析可用的数据，这称为间接来源的数据 **直接来源（一手数据）**通过调查方法获得的为调查数据，实验得到为实验数据，都是直接来源的数据 2.数据误差 抽样误差：由抽样的随机性引起的样本结果与总体真值之间的差异 非抽样误差：抽样框误差、回答误差、无回答误差、调查员误差、测量误差 第三章 数据的图表展示 1.数据预处理 原始数据：完整性、准确性 二手数据：适用性、时效性 2.分类数据图示 ​ 1> 组数 5≤ K ≤15 2> 组距 组距=(Max-Min)/K 3> 为解决不重的问题，统计分组习惯上规定“上组限不在内”，即当相邻两组的上下限重叠时，恰好等于某一组上限的变量值不算在本组内，而计算在下一组内。即a≤ x <b 第四章 数据的概括性度量 1.集中趋势的度量 不同分布的众数、中位数和平均数 $M_e表示中位数$ 众数不受极端值影响，具有不唯一性 中位数不受极端值影响，数据分布偏斜程度较大时 平均数易受极端值影响 2. https://blog.archai.space/p/%E5%85%B3%E4%BA%8Ejavascript%E6%A8%A1%E5%9D%97%E5%8C%96/ Fri, 29 May 2020 00:00:00 +0000 https://blog.archai.space/p/%E5%85%B3%E4%BA%8Ejavascript%E6%A8%A1%E5%9D%97%E5%8C%96/ 模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。 //profile.js export var firstName = 'Michael'; export var lastName = 'Jackson'; export function sayName () { return firstName + lastName; } export default function () { console.log('foo'); } // main.js import { firstName, lastName , sayName} from './profile.js'; 注意：在index.html中引入的时候需要给script加type=“module”,即 <script type="module" src="./profiles.js"></script> <script type="module" src="./main.js"></script> 本文来自公众号“前端者也” https://blog.archai.space/p/%E5%B8%B8%E7%94%A8%E7%9A%84%E4%B8%80%E4%BA%9Bhtml%E5%B0%8F%E9%97%AE%E9%A2%98/ Sun, 24 May 2020 00:00:00 +0000 https://blog.archai.space/p/%E5%B8%B8%E7%94%A8%E7%9A%84%E4%B8%80%E4%BA%9Bhtml%E5%B0%8F%E9%97%AE%E9%A2%98/ 1. 网页出现横向滚动条？ <body style=`overflow:-Scroll;overflow-y:hidden > </body> 让横条没有： <body style=`overflow:-Scroll;overflow-x:hidden> </body> 两个都去掉？更简单了 <body scroll="no" > </body> 火狐底部滚动条不显示： html { overflow:-moz-scrollbars-vertical; } 2. 网页图标？ <link rel="shortcut icon " href="images/favicon.ico"> 3. Height:100%失效？ <html style="height: 100%;"> <body style="height: 100%;"> <div style="height: 100%;"> <p> 这样这个div的高度就会100%了 </p> </div> </body> </html> 4. 设置一个元素不可见？ opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 注意： 1> display=none元素消失，不占位置 2> opacity =0、 visibility =hidden只是视觉上不可见，其实还在那里占位置 5.input无法输入？ ==> height:0; (将包裹提示的div高度设置为0，让其不再遮挡即可) https://blog.archai.space/p/jquery%E4%B8%80%E4%BA%9B%E6%93%8D%E4%BD%9C/ Thu, 23 Apr 2020 00:00:00 +0000 https://blog.archai.space/p/jquery%E4%B8%80%E4%BA%9B%E6%93%8D%E4%BD%9C/ Jquery属性操作 1.属性 attr(attrName [,attrValue]) 操作所有属性（自定义和内置的） prop(attrName [,attrValue)) 操作HTML元素内置属性 removeAttr(attrNam)删除属性 removeProp(attrName) 并不能删除HMTL元素上的属性 2.CSS类 addclass()添加一个class值 removeClass()删除一个class值 toggleClass()切换一个class值(有则删掉该class，没有则加上，其他class不动) hasClasss() 判断是否有指定class 3.HTML代码/文本/值 html([html]) 相当于innerHTML text([text)相当于innerText val([value]) 设置/获取表单控件的值 Jquery样式操作 1.CSS操作 css(atr,[value])设置/获取CSS值 参数可以是一个对象的形式css({atr: value,}) 2.位置 offset()[.left/.top]元素在页面中的坐标 设置只需要传一个对象即可 {"left:num,top:num"} position()[.left/.top] 元素在第一个定位的祖先元素内的坐标 (只读！) scollTop … scollLeft … 3.尺寸 width()/height()内容尺寸 innerwidth()/ innerHeight()内容尺寸+ padding outerWidth()/ outerHeight() 盒子的尺寸 Jquery筛选操作 1. 过滤操作 first () last() eq() not() filter() slice () has() 3.串联 add()把选中的元素加入当前集合 addBack()把调用该方法的元素加入当前集合 end()返回最后一次破坏性操作之前的DOM contents()返回所有子节点的集合 https://blog.archai.space/p/javascript%E4%B8%80%E4%BA%9B%E6%93%8D%E4%BD%9C/ Thu, 02 Apr 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E4%B8%80%E4%BA%9B%E6%93%8D%E4%BD%9C/ 1.通过id获取元素 1 2 3 function $(id) { return typeof id === 'string' ? document.getElementById(id): null; } 2.日期格式化 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function formatDate(cDate) { //1.判断 if (!cDate instanceof Date){ return; } //2.转化 var year=cDate.getFullYear(); var month=cDate.getMonth(); var date=cDate.getDate(); var hour=cDate.getHours(); var minute=cDate.getMinutes(); var second=cDate.getSeconds(); //2.1 补0 month=month<10? '0'+month:month; date=date<10? https://blog.archai.space/p/%E5%B8%B8%E7%94%A8%E7%9A%84%E4%B8%80%E4%BA%9Bhtml%E4%BB%A3%E7%A0%81/ Sat, 21 Mar 2020 00:00:00 +0000 https://blog.archai.space/p/%E5%B8%B8%E7%94%A8%E7%9A%84%E4%B8%80%E4%BA%9Bhtml%E4%BB%A3%E7%A0%81/ 1. 获取网页logo 京东 : www.jd.com 后面加 “/favicon.ico"即可 京东logo : www.jd.com/favicon.ico 2. webstorm网页logo简易写法 link:favicon 按Tab键 3.meta标签 为搜索引擎提供的关键字列表( name=“keywords”)： 各关键词间用英文逗号“,”隔开。META的通常用处是指定搜索引擎用来提高搜索质量的关键词。 <meta name="keywords" content="牙疼怎么办，智齿是什么，拔牙多少钱，矫正多少钱，九院医生，北大口腔，瑞尔口腔，拜耳口腔"> 用来告诉搜索引擎你的网站主要内容(name=“description”)： <meta name="description" content="有牙齿问题,找河马牙医,儿童口腔，全国儿童口腔在线咨询，牙疼怎么办，拔牙多少钱，矫正多少钱，种植牙，有牙齿问题"> 优先以webkit内核渲染页面(“renderer”)： <meta name="renderer" content="webkit" /> 4.复合选择器 div#main{ color:green} 表示选中div中id为main的元素 5.标签居中 水平居中 行内标签/行内-块级标签: text-align:center 块级标签: margin:0 auto 2)垂直居中 行内标签/行内-块级标签: 设置行高为盒子高度line-hight:50px; 图片加文字时:vertical-align:middle; 块级标签: 设置“子绝父相” ==> top，left设置为50% ==> margin-left和nargin-top设置为负的盒子对应宽高的一半 https://blog.archai.space/p/css%E6%8F%AD%E7%A7%98%E4%B8%80%E4%B9%A6%E4%B8%AD%E7%9A%84%E7%9F%A5%E8%AF%86/ Mon, 23 Dec 2019 00:00:00 +0000 https://blog.archai.space/p/css%E6%8F%AD%E7%A7%98%E4%B8%80%E4%B9%A6%E4%B8%AD%E7%9A%84%E7%9F%A5%E8%AF%86/ 1.backgrouond简写 在background简写属性中指定background-sizing时，需要提供一个background-position值，而且要使用/作为分隔。 1 background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip]; —–P13—– 2.background-clip 规定背景的绘制区域：得到一个白色背景并且有白色边框的盒子： 1 2 3 border:10px solid hsla(0,0,100%,.5); background:white; background-clip:padding-box 若不设置background-clip，背景会延伸至边框，边框的透明无法显示 ——P18——- 3.双重边框 box-shadow background:orange; box-shadow:0 0 010px #655 , 0 0 0 15px deeppink; /*可以加任意层数边框*/ outline 1 2 3 4 5 6 7 8 9 width:180px; height:90px; margin:30px auto; text-align:center; padding:10px; background:##655; outline: ##fff dashed 1px; outline-offset: -15px; /*设置outline向内缩进*/ border-radius:8px; 得到简单的缝边效果 注意： outline可能会产生不贴合border-radius圆角的情况 —-P20—- https://blog.archai.space/p/%E6%89%81%E5%B9%B3%E8%AE%BE%E8%AE%A1%E5%92%8C%E6%8B%9F%E7%89%A9%E8%AE%BE%E8%AE%A1/ Tue, 12 Nov 2019 00:00:00 +0000 https://blog.archai.space/p/%E6%89%81%E5%B9%B3%E8%AE%BE%E8%AE%A1%E5%92%8C%E6%8B%9F%E7%89%A9%E8%AE%BE%E8%AE%A1/ 什么扁平和拟物设计？ 扁平化设计(Flat design) 完全属于二次元，这个概念最核心的地方就是放弃一切装饰效果，诸如阴影，透视，纹理，渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净利落，没有任何羽化，渐变，或者阴影。 拟物设计(Skeuomorph) 正好相反，他需要加入各种元素的效果，通过不同的效果组合达到模拟要呈现物件外观的目的，以使新的外观让人感觉熟悉和亲切。 扁平化与拟物化的优缺点: 扁平化设计单独设计起来更容易，突出内容主题，减弱各种渐变、阴影、高光等视觉效果对用户视线的干扰，让用户更加专注于内容本身，并且容易统一设计风格，调整设计方案更加方便。而现在手机平板电脑"横行"的今天，扁平化设计更能支持手势交互，而且它占用系统空间相对较少。 拟物化设计更适合初级人员了来做，这并不表示拟物化设计简单，而正是因为它的复杂所以更适合初级人员来做，可以让设计人员短时间内熟悉各种效果的实现，更好掌握色彩搭配等。并且拟物化设计认知和学习成本低，更能直接的表现出想表现的事物。 相对于它们的优点多多，它们的缺点却是一目了然。拟物化设计更倾向于视觉效果，功能实现很少。扁平化所能承载的信息量太少，会提高用户的学习成本。