好记性不如烂笔头

协议Protocol

一、ISO七层协议模型应用层Application：网络服务与最终用户的一个接口表示层Presentation：数据的表示、安全、压缩。JPEG/ASCII/EBCDIC/加密格式等会话层Session：建立、管理、终止会话传输层Transimission：定义传输数据的协议端口号，以及流控和差错校验。网络层Network：进行逻辑地址寻址，实现不同网络之间的路径选择。数据链路层DataLink：建立逻辑连接、进行硬件地址寻址、差错校验等。物理层Physics：建立、维护、断开物理连接。二、TCP/IP五层协议模型应用层：HTTP/HTTPS/FTP/TFTP/SMTP/SNMP/DNS/TELNET/POP3/DHCP传输层：TCP/UDP网络层：ICMP/

js

Array数组展平

多维数组数据展平：let arr = [1,[3,2,[4]]]let arr = [1,[3,2,[4]]] let flatten = (arr)=>{ // '1,3,2,4' => ['1','3','2','4'] => [1,3,2,4] return (arr + '').split(',').map(str=>parseInt(str)) } let flatten

node

Buffer

一、buffer创建 Buffer.alloc( initBypeLength, fillDefValue = 0 )let buf1 = Buffer.alloc(6, 2) // <Buffer 02 02 02 02 02 02>Buffer.allocUnsafe( initBypeLength )let buf2 = Buffer.allocUnsafe(6) // <Buffer 00 00 03 00 01> 不清除原来内在中的数据Buffer.from('您好')let buf3 = Buffer.

js

js事件循环机制Event Loops

关键名词主执行栈：会一直执行同步任务到结束，异步任务会通过任务队列Event Queue机制来进行协调异步任务又分为微任务micro task和宏任务macro task总结：任务优先级：先执行同步任务 > 微任务 > 宏任务微任务：browser环境(Promise.then catch finally、MutationObserver)、node环境(Promise.then catch finally、process.nextTick)宏任务：browser环境(setTimeout、setInterver、requestAnimationFrame)、node环境(setImmediate)注意：new Promise(resolve=>{ console.log('我是同步的') })

es6

ES6 let&const

js只存在全局作用域和函数作用域。var声明变量存在的三个问题可以重复声明：var a=1; var a=2; //不会报错没有块级作用域：if(true){ var a=10; } console.log(a); //输出a=10不可以定义常量：var PI=3.14; PI=3.15; //赋值成功，不会报错

js

insertBefore、insertAfter

insertBefore：在已有元素前插入一个新元素新元素：插入的元素（newElement）目标元素：新元素插入到哪个元素（targetElement）之前父元素：目标元素的父元素调用语法：targetElement.parentNode.insertBefore(newElement, targetElement) insertAfter实现：在现有元素后插入一个新元素 function insertAfter(newElement, targetElement){ var parentElement = targetElement.parentNode; // 获取父元素 // 判断targetElement是否为父元素最后一个子元素 if(parentElement.lastChild === targetElement){ // 父元素直接插入新元素 parentElement.appendChild(newElement); }else{ // 往目标元素的下一个兄弟元素前面插入新元素 parentElement.insertBefore(newElement, targetElement.nextSibling); } }

js

window.onload优化

当一个页面挂载多个onload事件时，只有最后一个会执行。 // 挂载window.onload函数 function addLoadEvent(fun){ var oldLoadFun = window.onload; //缓存onload函数 if(typeof window.onload === 'function'){ // 存在onload函数，则新创建一个匿名函数并先后执行旧onload函数、新onload函数 window.onload = function(){ oldLoadFun(); fun(); } }else{ // 直接挂载onload函数 window.onload = fun; } }

js

requirejs简易实现

// define 声明模块 require使用模块 function define(moduleName, dependList, factory){ if(!this[__filename]){ this[__filename] = {} } // 依赖缓存 this[__filename][moduleName] = {moduleName: moduleName, depends: dependList, factory: factory} } function require(moduleList, callback){ var dependModules = [] for(var i=0; i<moduleList.length; i++){ var module = this[__filename][moduleList[i]

dom

javascript DOM 001

W3C对DOM的定义是：一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态的访问和修改文档的内容、结构和样式。 1998年10月完成了"第一级DOM"（DOMLever1）兼容性查询：caniuse.com/ 一、节点：<p class="属性节点">文本节点<p> 元素节点(p标签节点)文本节点属性节点二、常用方法： document对象方法：getElementById(ie6+)/getElementsByTagName(ie6+)/getElementsByClassName(ie9+)// className查找的类名：不支持多类名、node查找的指定范围：不传则从html开始查找 function getElementsByClassName(className, node){ if(typeof className !== 'string')

docker

Docker Engine

docker国内镜像源Docker中国区官方镜像：https://registry.docker-cn.com网易：http://hub-mirror.c.163.comustc ：https://docker.mirrors.ustc.edu.cn中国科技大学：https://docker.mirrors.ustc.edu.cn阿里云容器服务：https://cr.console.aliyun.com/daocloud：http://f1361db2.m.daocloud.io{ "registry-mirrors": [ "https://registry.docker-cn.com", "http://hub-mirror.c.163.com", "https:

other

inter s2600主板说明说

在线PDF https://www.intel.com/content/dam/support/us/en/documents/motherboards/server/s2600cp/sb/g26942005_s2600cp_p4000cp_tps_rev19.pdf

node

nvm使用

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

css

line-height问题解决

概念行高是指文本行基线间的垂直距离。基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高，上行的底线和下一行顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距。设置高度和行高相等，但是无法垂直居中（文案偏上）一、使用padding代替line-height line-height: 0; padding: 20px 0;//相当于line-heigh: 40px; 或者 line-height: normal; padding: 20px 0;二、利用flex布局中的垂直居中属性 .parent{ border: 1px solid blue; display: flex; height: 40px; align-items: center; font-size:

ie

IE hack汇总记录

一、css hack 1）条件注释法<!–[if !IE]> 除IE外都可识别 <![endif]–> <!–[if IE]> 所有的IE可识别 <![endif]–> <!–[if IE 6]> 仅IE6可识别 <![endif]–> <!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–> <!–[if gte IE

python

python matplotlib绘图模块

数据可视化：matplotlib.pyplot文档一、引入模块 import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt二、使用plt.plot方法 plot([x], y, [fmt], *, data=None, **kwargs)plot([x], y, [fmt], [x2], y2, [fmt2], ..., **kwargs)### 一维数据集 y = np.array([-1,1,3,-2,2,-3]

js

光标操作

// 获取光标位置 function getCursorPosition(dom) { var cursorPos = 0; if (document.selection) { // IE Support dom.focus(); var range = document.selection.createRange(); range.moveStart ('character', -dom.value.length); cursorPos = range.text.length; } else if (dom.selectionStart || dom.selectionStart == '0'){ // Firefox support cursorPos = dom.selectionStart; } return cursorPos; } // 设置光标位置

python

python基础

数据类型和结构1）基本数据类型（三种）：int整数、float浮点数、str字符串 2）基本数据结构（六种）一、int整数：ptyhon整数可以为任意大。解释程序简单地使用所需的位/字节数表现数值 a = 10 ### 获得类型 type(a) # int ### 获得所需的位数 a.bit_length() # 4 a = 100000 a.bit_length() # 17二、float浮点数：注意整数运算和浮点数运算可能有差异 import decimalfrom decimal import Decimalf = 1. # 1.0 f = 0.1

db

mongodb

一、安装mongodb 二、创建数据目录 c: mkdir mongoData cd mongoData mkdir db三、命令行下运行mongodb服务器 cd C:\Program Files\MongoDB\Server\4.4\bin\ mongod --dbpath c:\mongoData\db

docker

基本环境win 10企业版：Windows 10 Enterprise LTSC 2019 (x64) - DVD (Chinese-Simplified)docker官网：docker desktop community: version 2.3.0.3(45519) stable入口教程：跳转相关文档一、注意事项： 1）开启虚拟化（Hyper-V）2）创建免费的 Docker 帐户（如果还没有该帐户）3）在安装过程中，将默认容器类型设置为 Windows 容器二、正确配置环境后，运行第一个docker容器 1）选择安装容器基础映像：请参阅容器基础映像2）官方的仓库下载很慢，配置docker国内镜像加速：

Vue3学习之路一

一、@vue/cli安装Vue3 // 设置淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org // 全局安装@vue/cli 4.4.6 cnpm i -g @vue/cli // 初始化vue3项目 vue create vue3 cd vue3 // 添加vue3依赖库vue-next vue add vue-next 启动项目 npm run dev二、vue-vite-app安装Vue3 // 全局安装create-vite-app cnpm i -g

git

git常用命令

一、忽略本地文件使用 git update-index --skip-worktree [file] 修改本地文件不会被提交，可以提取最新代码。适用于不经常变动，但是必须本地化设置的文件使用 git update-index --assume-unchanged [file] 该命令只是假设文件没有变动，使用reset时，会将文件修改回去注意：该方法在使用add .命令添加所有文件到暂存区,commit提交到版本库,修改内容依然会被加入到版本库中命令：skip-worktree和assume-unchanged // 设置标识、取消标识、查看标识、清除所有标识 // skip-worktree git update-index --skip-worktree path git update-index --no-skip-worktree path git ls-files -v | grep -i ^S git ls-files

vue

Vue Class Component

一、vuex定义 import Vue from 'vue' import Component from 'vue-class-component' import { mapGetters, mapActions } from 'vuex' // post接口 import { Post } from './post' @Component({ computed: mapGetters([ 'posts' ]), methods: mapActions([ 'fetchPosts' ]) }) export default class Posts extends Vue { // 在类属性声明映射的getter和action // 你可能需要添加 `!` 在类属性后面 // 为了避免编译错误（需要明确的赋值断言）. // 映射getter posts!: Post[] // 映射action fetchPosts!

vue

Vue Class Component使用三

一、extends扩展 // super.js import Vue from 'vue' import Component from 'vue-class-component' // 超类必须继承于Vue @Component export default class Super extends Vue { superValue = 'Hello' } // HelloWorld继承于超类 @Component export default class HelloWorld extends Super { created() { console.log(this.superValue) // -> Hello } }二、mixins混合 // mixins.js import Vue

vue

Vue Class Component使用二

一、vue router hooks路由钩子 import Component from 'vue-class-component' // 注册路由钩子，必须在任何组件定义之前注册它们 Component.registerHooks([ 'beforeRouteEnter', 'beforeRouteLeaver', 'beforeRouteUpdate' ]) 二、类组件将它们实现为类原型方法 import Vue from 'vue' import Component from 'vue-class-component' @Component export default class HelloWorld extends Vue{ beforeRouteEnter(to, from, next){ console.log('beforeRouteEnter') next() } beforeRouteLeaver(to, from, next)

vue

Vue Class Component使用一

一、模板定义 import Vue from 'vue' import Component from 'vue-class-component' // HelloWorld class will be a Vue component @Component export default class HelloWorld extends Vue {}二、data数据 import Vue from 'vue' import Component from 'vue-class-component' @Component export default class HelloWorld extends Vue { // 请避免使用undefined作为初始值，class属性不具有反应性（检测能力）

刘俊帆

欢迎来到，我的博客

协议Protocol

Array数组展平

Buffer

js事件循环机制Event Loops

ES6 let&const

insertBefore、insertAfter

window.onload优化

requirejs简易实现

javascript DOM 001

Docker Engine

inter s2600主板说明说

nvm使用

line-height问题解决

IE hack汇总记录

python matplotlib绘图模块

光标操作

python基础

mongodb

docker

Vue3学习之路一

git常用命令

Vue Class Component

Vue Class Component使用三

Vue Class Component使用二

Vue Class Component使用一