- 博客(121)
- 收藏
- 关注
RSS订阅原创 初识kubernetes
kubernetes的本质是一组服务器集群，它可以在集群的每个节点上运行特定的程序，来对节点中的容器进行管理。自我修复：一旦某一个容器崩溃，能够在1秒中左右迅速启动新的容器弹性伸缩：可以根据需要，自动对集群中正在运行的容器数量进行调整服务发现：服务可以通过自动发现的形式找到它所依赖的服务负载均衡：如果一个服务起动了多个容器，能够自动实现请求的负载均衡版本回退：如果发现新发布的程序版本有问题，可以立即回退到原来的版本存储编排：可以根据容器自身的需求自动创建存储卷。
2023-05-15 12:25:41
416
原创 回流和重绘
1.页面渲染过程解析HTML构建 DOM Tree解析CSS构建 CSSOM Tree构建渲染树（Render Tree）根据Render Tree渲染网页节点实现布局2.什么是回流和重绘2.1回流当渲染树render tree中的一部分因为元素的规模尺寸，布局，隐藏等，而需要重新构建。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘回流代价远大于重绘，回流必然发生重绘，而重绘不一定发生回流回
2022-03-02 10:23:26
171
原创 浏览器中的URLSearchParams
let query = `q=2333&order=asc`; const params = new URLSearchParams(query); console.log(params.get("q")); console.log(params.has("q")); console.log(params.toString()); params.set("q", "123"); params.append("nam...
2022-01-10 10:27:55
378
原创 初识Vue3—与Vue2的不同
Vue3与Vue2的区别Vue3向下兼容一.从options API到Composition APIvue3具有的composition API实现逻辑模块化和重用vue3中使用setup函数（比beforeCreated更早执行）接收两个参数 props（响应式不能用ES6结构）和context（普通JavaScript对象）生命周期改变setup语法糖1.组件自动注册<template> <Child /></template><
2021-12-16 18:18:27
879
原创 Cocos-js快速上手
1.访问节点和组件节点（active）：在层级管理器中创建UI组件，空节点等。组件（enabled）：资源管理器上创建的TS,JS脚本，物理材质，动画片段（不仅限于脚本）节点本身没有类型，显示的类型由组件实现this.node 获得组件所在的节点getComponent 获取同一个节点上的其他组件2.常用节点和组件API2.1 节点API说明API激活关闭节点this.node.active更改节点父节点this.node.parent=parentNode
2021-12-16 18:17:13
3217
原创 快速上手Vue3
一.快速上手Vue31.使用Vue3的CDN<script src="https://lib.baomitu.com/vue/3.0.2/vue.global.js"></script>2.vue-cli升级到vue-cli v4.5 (删除后再安装)npm i -g @vue/cli@next3.使用Vite利用ES6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省区webpack冗长的打包时间// npm$ npm init vite
2021-12-16 18:15:15
470
原创 keep-alive实现原理
LRU缓存-keep-alive实现原理keep-alive是Vue.js的一个内置组件。它能够将不活动的组件实例保存在u内存中，而不是直接销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。简单地说，keep-alive用于保存组件的渲染状态，避免组件反复创建和渲染，有效提高系统性能。keep-alive的max属性，用于限制可以缓存多少组件实例，一旦这个数字达到了上限，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉LRU缓存淘汰算法LRU缓存淘汰算法：根据数
2021-12-14 13:53:21
1445
原创 Node事件循环机制
Node的事件循环机制一、什么是事件循环在node应用程序启动后，并不会立即进入事件循环，而是先执行输入代码，从上到下开始执行，同步API立即执行，异步API交给C++维护libuv的线程执行，异步API的回调函数被注册到对应的poll事件队列中。当所有输入代码执行完成后，开始进入事件循环 ┌───────────────────────┐┌─>│ timers ││ └──────────┬────────────┘│ ┌──────────┴───
2021-12-08 17:06:41
1173
原创 TypeScript入门级教程
TypeScript参考：最全的TypeScript学习指南 - 掘金 (juejin.cn)一，TS类型1.布尔类型const flag:boolean = true;2.Number类型const number:number = 1;3.String类型const str:string = 'hello';4.Enum类型enum Color{ RED, PINK, BLUE,}const pink:Color = Color.PINK5.数组
2021-11-29 11:39:48
409
原创 express中间件原理
一.中间件 middleware1.中间件作用一个请求发送到服务器后，他的生命周期是：收到request（请求）服务端处理发送response（响应）如果业务逻辑复杂，为了明确和便于维护，需要把处理的事情分配成几个部分来做，而每个部分就是一个中间件（在实际请求发生之前hack req和res对象来实现一些功能）2.中间件是什么中间件其是一个函数，在响应发送之前对请求进行一些操作function middleware(req,res,next){ // 做该干的事 //
2021-11-21 16:48:35
802
原创 关于HTTP和HTTPS
一. 计算机网络模型1 五层模型物理层，数据链路层，网络层，传输层，（会话层，表示层），应用层。物理层：处理通信连路上原始 比特 的传输数据链路层：收集比特流形成 帧（以太网协议）网络层：处理分组交换网中节点之间的路由选择和 数据报 转发（IP协议）传输层：两个端系统中的进程之间的通信提供端到端的服务，报文 （TCP协议，UDP协议）应用层：直接为用户应用进程提供服务（传输单元不确定）数据链路层a.封装成帧：实现可靠传输（在一段数据的前后分别添加首部和尾部）b.
2021-10-24 23:26:55
2824
原创 关于浏览器
浏览器多进程到JS单线程（JS运行机制）1.进程和线程进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）2.浏览器进程（多进程）Browser进程（管理资源），第三方插件进程，GPU进程（3D绘制），浏览器渲染进程3.浏览器内核（渲染进程）1.GUI渲染线程（构建DOM树和Render树，布局绘制回流重回等）2.JS引擎线程（处理js脚本）3.事件触发线程（用来控制事件循环）
2021-10-24 23:25:34
2295
原创 对于闭包的更深理解
闭包深入理解1.执行上下文（执行环境）全局环境，函数环境，Eval环境栈stack存储执行环境2.闭包运行机制把一个可以访问到main函数的作用域的函数返回出去<script> function main() { var a = 1; return (function () { return a })() } let a = main() console.log(a);for (var i =
2021-10-20 23:20:24
72
原创 Vue中$nextTick原理
1.$nextTick作用如下图例子，文本改变后，响应式数据处理后，在mouted中获取到box高度都是0 <div id='app'> <div class='box'> {{msg}} </div> </div> <script> let app = new Vue( { el: '#app', data: { msg: ''
2021-10-20 22:51:45
1620
原创 JavaScript数组详解
1.数组的特点1.1 概念：数组是一组数据的集合，在内存中是一段连续的内存空间。1.2 定义数组let arr1 = [];let arr2 = new Array();1.3 特点：无需指定数组长度，存储数据类型不限2.数组常用API1.push：数组后端插入，返回数组长度2.pop：数组后端删除，返回删除项3.unshift：数组前端插入，返回数组长度4.shift：数组前端删除，返回删除项5.slice(i,j)：截取数组从i到j（不包括j）6.join：转字符串（
2021-10-13 13:49:26
182
1
原创 day4---排序算法
//冒泡排序function bubbleSort(arr){ for(let i=0;i<arr.length;i++){ for(let j=0;j<arr.length;j++){ if(arr[j]>arr[j+1]){ let k = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = k; } } } return arr}//选择排序functio.
2021-10-07 16:02:27
100
原创 day3---关于数字
//大数和 function bigNum(num1, num2) { let len = Math.max(num1.length, num2.length); num1 = num1.padStart(len, '0'); num2 = num2.padStart(len, '0'); let t, f = 0; let sum = ''; for (let i = len - 1; i >= 0; i--) ...
2021-10-07 15:37:28
67
原创 Vue响应式数据原理
在学习Vue响应式数据原理之前，需要先了解一下 Object.defineProperty() 这个方法1.Object.defineProperty()参数一：要定义属性的对象参数二：要定义或修改的属性的名称参数三：要定义或修改的属性描述符注意：get和set不能和其他属性一起使用var obj = {};var val = null;Object.defineProperty(obj ,'a',{ //value:10, //设置值 //configurable:true, //
2021-10-07 15:35:24
185
原创 Vue解析指令源码
使用new来实例化vue对象时，去compile解析指令从而初始化视图//实例化vue对象class MVue{ constructor(options){ this.$el = options.el; this.$data = options.data; this.$options = options; if(this.$el){ //1.实现一个数据观察者 //2.实现一个指令解析器 new Compile(this.$el,
2021-10-06 11:05:58
225
原创 day2--链表
1.链表是什么？一组不必相连的内存结构，按特定顺序链接在一起的抽象数据类型1.不必相连2.节点2.链表种类单向链表：内存结构由数据域next指针域组成（单向遍历）双向链表：通过指针Next 和指针 Prev 链接在一起组成循环链表：每一个内存结构都有前驱后继3.链表算法//数组转链表 function createLinkedList(arr) { let linkNode = []; function Node(val) { this.va
2021-10-03 10:19:46
112
原创 day1--关于递归
关于递归两个特点1.递归的逻辑2.递归的边界算法实例1.求累加，求阶乘//累加function main1(n){ if (n <= 1) { return 1; } return main1(n - 1) + n;}//阶乘function main2(n){ if (n <= 1) { return 1; } return main2(n - 1) * n;}2.菲薄那西数列function Fib
2021-10-02 22:14:19
88
原创 JavaScript常见手写方法
1.手写instanceof function myInstanceof(A, B) { a = A.__proto__; b = B.prototype; while (true) { if (a == b) { return true; } else { return false; } a = A.__proto__; } }2.手写
2021-09-10 11:02:06
287
原创 封装axios
/**@param 封装ajax请求以及其他的操作axios 专门处理cros跨域的**/import axios from ‘axios’//引入全局状态管理import store from ‘…/store/index’//引入路由import router from ‘…/router/index’//引入缓存文件import storage from ‘…/storage/storage’//设置axios 请求超时/**@param 设置超时**/axio
2021-07-04 11:40:22
113
原创 JS中的深浅拷贝
JS中的深浅拷贝1.浅拷贝和深拷贝区别浅拷贝就是两个对象经过拷贝后公用一个内存地址，修改其中一个另一个也会改变深拷贝是开辟新的内存空间，两个对象互不影响2.浅拷贝实现1.使用=号实现2.使用for in循环实现3.使用Object.assign()4.使用new Object()3.深拷贝实现1.使用JSON.parse(JSON.stringify())实现2.使用Object.create()3.使用遍历+forin循环//遍历+forin循环function deep
2021-07-04 11:39:37
108
原创 JavaScript中的防抖和节流
防抖：事件被调用后，在执行之前无论被调用多少次都会从头开始计时节流：不管事件被调用多少次，总是按规定时间间隔执行//防抖let title = document.getElementById('title')function move(){ console.log(1)}function demomove(fn,time){ var timer //闭包 return function(){ if(timer){ clearTimeout(timer) timer =
2021-05-07 22:15:48
124
原创 Vuex全局状态管理
Vuex（全局状态管理）组件之间传值子父组件传值：1.父=>子 props 2.子=>父 this.$emit()非子父组件传值：1.事件车通信eventEmitter 2.Vuex1.安装Vuex#vue 3.x版本以上安装vuex 4.x以上cnpm install --save-dev vuex@4#vue 2.x版本cnpm install --save-dev vuex2.使用Vuex创建Vuex整个store(初始化store)import {createS.
2021-04-28 11:09:54
184
原创 Vue-router路由
Vue-router1.使用Vue-router1.1安装路由npm install -s -g vue-router@41.2使用步骤注意:vue-router必须是4版本以上的否者不能用1.2.1 创建router.js文件配置//import引入路由方法//createRouter创建路由//createWebHistory路由模式路径（不带#号）//createWebHashHistory路由模式路径（带#号）import { createRouter,createWebH.
2021-04-28 11:06:48
319
1
原创 Vue组件
Vue 组件学习1.注册组件1.1 两种注册方法：全局注册和局部注册局部注册：在父组件文件中import引入组件，只能在父组件内使用<template> <div id='app'> <h1>组件的使用</h1> <!-- 3.使用组件 --> <com1 /> </div></template><script>//1.引入模板文件import com
2021-04-28 11:03:04
115
原创 Vue中的动画
1.使用过渡类名实现动画v-enter[时间点]是进入之前元素的其实状态此时还没有进入v-enter-active[入场动画的时间段]v-leave-active[离场动画的时间段]v-leave-to[时间点]是动画离开之后，离开的终止状态，此时元素动画已经结束<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-
2021-04-28 10:51:28
157
原创 Vue过滤器
Vue中的过滤器1.过滤器的全局定义语法Vue.filter('过滤器的名称',function(){})2.过滤器中的fn第一个参数：过滤器管道符前面传递过来的数据后面可以一直添加传入参数Vue.filter('过滤器的名称',function(data,str1,str2,...){ return data+'123'})3.过滤器使用<div id="box"> <p>{{message|msg('邪恶')}}</p> &l
2021-04-28 10:50:44
119
原创 Vue生命周期
Vue实例的生命周期1.什么是生命周期:从Vue实例创建,运行,到销毁期间,总盘随着各种各样的事件,这些事件,统称为生命周期!2.生命周期钩子=生命周期函数=生命周期事件3.主要的生命周期函数分类:创建期间的生命周期函数:beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好data和methods属性created:实例化已经在内存中创建OK,此时data和methods已经创建OK,此时还没有开始编译模板mounted:此时,已经将编译好的模板,挂载到了页面指定的容
2021-04-28 10:37:55
754
原创 Vue自定义指令
1.自定义Vue指令1.使用Vue.directive定义全局指令//注册一个全局自定义指令 v-focusVue.directive('focus'，{//绑定元素插入到DOM中 inserted:function(el,binding){ //聚焦元素 el.focus() }})参数1：指令名称（不用添加v-）参数2：对象，存放指令相关函数（钩子函数）bind：立即执行，只调用一次inserted：元素插入到DOM中时执行，只执行一次
2021-04-28 10:34:22
78
原创 Vue元素样式
用v-bind来进行属性绑定（简写:属性名），来实现对元素样式的修改 Vue中class样式1.数组<h1 :class="['red','thin']"></h1>2.数组中使用三元表达式<h1 :class="['red','thin',isactive?'active':'']"></h1>3.数组中嵌套对象<h1 :class="['red','thin',{'active':isactive}]"></
2021-04-28 10:26:16
159
原创 Vue基本指令
1.v-cloak解决插值表达式闪烁问题<style> [v-cloak] { display: none; }</style>v-text，v-html和{{}}的区别：{{}}渲染界面会有闪烁问题，但是v-text，v-html不存在2 v-text1.v-text指令的作用：设置标签的内容2.默认写法会替换全部内容，使用**插值表达式{{}}**可以替换指定内容3.内部支持写表达式（字符串拼接）3 v-html1.v-htm.
2021-04-28 10:22:36
727
1
原创 ES6中的迭代器
迭代器Iterator是一种新的遍历机制两个核心：1.迭代器是一个接口，能快捷访问数据，通过Symbol.iterator来创建迭代器通过next()获取迭代后的结果2.迭代器是用于遍历数据结构的指针（数据库的游标）//Symbol.iterator部署遍历器const items = ['one', 'two', 'three']//1.创建新的迭代器const ite = items[Symbol.iterator]()console.log(ite.next());//{value
2021-03-22 09:46:03
122
原创 ES6中扩展的对象功能
ES6中扩展的对象功能1.ES6中对象简写//对象属性和方法可以简写let a = 10let b = 20let obj = { a, b, say() { console.log(this.a); }}console.log(obj);obj.say()2.setter，getter访问器如果get访问器return的名字和get方法名一样会不停执行let Obj = { name: '张三', get _name() { console
2021-03-22 09:40:33
136
原创 ES6中的async
async使得异步操作更加方便，基本操作async他会返回一个Promise对象基本操作async他会返回一个Promise对象 then catchasync特点：1.函数前添加async 2.函数内部await等待async 函数返回的是promise对象用then接收async是Generator的一个语法糖async function f() { // return await 'hello async' let s = await 'hello async'
2021-03-22 09:38:38
117
原创 ES6中的Promise
promisepromise深入理解then 方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。相当于一个容器，保存着未来才会结束的事件（异步操作）的一个结果各种异步操作都可以用同样的方法进行处理axios特点：1.对象的状态不受外界影响，处理异步操作三个状态（Pending进行 Resolved成功 Rejected失败）2.一旦状态改变，就不会再变，任何时候都可以得到这个结果使用Promis
2021-03-22 09:38:00
114
原创 ES6中的class
class类ES5造类function Person(name, age) { this.name = name this.age = age } Person.prototype.sayName = function () { return this.name } let p1 = new Person('张三', 28) console.log(p1); console.log(p1.sayName());ES6
2021-03-19 22:03:38
73
原创 ES6中的模块化规范
模块化相关规范1.AMDRequire.js()2.CMDSea.js()3.CommonJS模块分为单文件模块与包模块成员导出：module.exports和exports模块成员导入：require(‘模块标识符’)*4.ES6模块化在ES6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD，CMD，CommonJS等模块化规范但是这些社区提出的模块化标准，还是存在一定的差异性与局限性，并不是浏览器与服务器通用的模块化标准AMD和CMD适用于浏览器端的J
2021-03-19 21:51:37
384
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人