- 博客(109)
- 收藏
- 关注
RSS订阅原创 移动端适配常见坑
一、iphoneX刘海和底部遮挡问题：iphoneX的刘海会遮挡页面，底部的滚动条也可能会遮挡页面。横屏时除了左侧和右侧有遮挡，底部也有遮挡。解决：给被遮挡处留出一小块空白区域。实现：meta标签里content属性中添加viewport-fit=v=cover，配合给body加上样式：二、1px适配方案...
2021-09-25 15:53:27
372
原创 LeetCode链表刷题
一、判断是否为环形链表LeetCode141题：解题思路 ：快慢指针设置两个指针，一个每次走一步称为慢指针，另一个每次走两步称为快指针。当链表无环的时候，快指针会先到达链表末尾。当链表有环的时候，两个指针走着都会在环里循环的走，终会相遇于某个节点。代码实现/** * Definition for singly-linked list. * function ListNode(val) { * this.val = val; * this.nex.
2021-09-25 15:51:01
2370
原创 递归与栈刷题
一、化栈为队列LeetCode03.04题：化栈为队列解题思路设置两个栈s1和s2来模拟一个队列，s2负责入队，s1负责出队；当s1为空时，如果s2不为空，则将s2中的内容出栈，再入栈到s1；代码实现// 实现一个栈class Stack { constructor() { this.stack = [] } push(x) { this.stack.push(x); } pop() { .
2021-09-25 15:49:14
211
原创 vue-cli2添加骨架屏
一、安装配置骨架屏插件1.安装插件page-skeleton-webpack-pluginnpm i --save page-skeleton-webpack-plugin 2.配置插件在webpack.base.conf.js文件中引入文件，进行配置：const { SkeletonPlugin } = require("page-skeleton-webpack-plugin");module.exports = { plugins: [ new SkeletonPlugin({
2021-09-02 19:24:19
595
原创 定位中margin-top和top设为百分比的参照物
1.relativetop:根据自身高度计算。margin-top：根据自身宽度计算。div { width: 400px; height: 600px; position: relative; top: 10%; /* 60px */ margin-top:10%; /* 40px */}2.absolutetop:根据上游非static元素高度计算。margin-top：根据上游非static元素宽度计算。<!DOCT.
2021-07-08 16:49:01
662
1
原创 手写koa2源码
一.node创建http服务./create-node-server.js：const http = require("http");const server = http.createServer((req, res) => { res.end("hello node");});server.listen(3001, () => { console.log("server at 3001");});二.使用koa2创建服务./index.js:con
2021-06-28 18:54:56
225
1
原创 手写redux源码及其中间件
一、redux的使用1.redux的工作流程：通过createStore创建一个store仓库，用来存储状态； store接收的第一个参数reducer，初始化state并定义state修改规则； 页面中通过dispatch⼀个action来提交对数据的修改； action提交到reducer函数⾥，根据传⼊的action的type，返回新的 state。2.相关代码：创建项目，安装reduxnpx create-react-app write-reduxnpm i --s.
2021-06-23 16:27:29
186
原创 手写Vue3初始化源码
一、Vue3优点1.类型支持更好：vue2中使用new Vue的方式会产生动态的东西，像this 使用函数的方式，函数方式减少this的使用，有益于对ts的支持2.利于tree-shaking:vue2中很多组件与vue实例连在一起，即便没有使用，还是会被打包，没法优化 vue3中通过命名导出导入其中的大多数 API，以便打包器可以检测出未使用的代码并删除它们3.API简化、一致性：render函数、sync修饰符，指令定义等4.复用性：composition API5.性能优化
2021-05-25 16:17:01
229
2
原创 Vue2中MVVM框架
代码仓库地址：https://github.com/141110126/write-vue/tree/main/jvue一、Vue响应式原理利用Object.defineProperty()劫持data数据,里面每个属性都定义了get和set方法 监听属性的变化，依赖收集：每个属性也都有个数组 保存着谁（视图watcher）依赖了它，当获取属性触发get时，收集了依赖，依赖更新：当属性变化触发set函数时，通知依赖，通知视图（watcher），视图（watcher）开始更新。Vue.
2021-05-19 16:52:43
349
1
原创 vue批量异步更新策略源码解析
一、事件循环、宏任务、微任务1.事件循环Event Loop:浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务而定制的工作机制。2.宏任务Task: 代表一个个离散的、独立的工作单位。浏览器完成一个宏任务，在下一个宏任务开始执行之前，会对页面重新渲染。主要包括创建文档对象、解析HTML、执行主线JS代码以及各种事件如页面加载、输入、网络事件和定时器等。3.微任务：微任务是更小的任务，是在当前宏任务执行结束后立即执行的任务。如果存在微任务，浏览器会在完成微任务之后再重新渲染。微任务的例子有P
2021-05-13 23:42:24
1047
9
原创 分析vue2.6.12源码
一、调试环境搭建1.拉取源码git clone https://github.com/vuejs/vue.git2.全局安装rollup：vue打包用rollup，开发时打包用webpacknpm i -g rollup3.安装依赖npm i4.在package.json中scripts.dev中添加--sourcemap，用于调试代码时查找源码"dev": "rollup -w -c scripts/config.js --sourcemap --environm.
2021-05-11 18:42:27
750
3
原创 手写vuex源码
一、项目准备创建vue项目vue create projectName进入项目cd projectName安装vuexvue add vuex在store/index.js中写上测试代码：import Vue from "vue";import Vuex from "./jvuex";Vue.use(Vuex);export default new Vuex.Store({ state: { count: 1 }, mutations:
2021-05-07 18:04:30
183
1
原创 手写vue-router源码
一、项目准备创建vue项目vue create projectName进入项目cd projectName安装vue-routervue add router手写vue-router:在router文件夹中创建jvue-router.js文件。将index.js文件中引入VueRouter地址改为jvue-router.js的地址// import VueRouter from "vue-router";import VueRouter from "./jvu
2021-05-07 15:34:14
268
2
原创 redux和react-redux
一、redux工作流程：首先，用户发出 Action。store.dispatch(action);然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。let countReducer = (state = 0, action)=>{ switch(action.type) { case 'ADD': return sta
2021-04-13 14:56:13
438
原创 Vue2.0修饰符
一、修饰符修饰符有五种类型：二、表单修饰符1.trimtrim:去除数据头尾的空格<input type="text" v-model.trim="value">2.lazylazy:光标离开标签的时候，会赋值给变量，也就是在change事件之后再进行信息同步<input type="text" v-model.lazy="name">3.numbernumber：将数据转化成数字类型，当无法被parseFloat解析时返回原值（即字符
2020-12-29 20:59:46
2380
2
原创 Vue2.0模板编译原理
一、模板编译Vue.js通过编译将模板转换成渲染函数（render），执行渲染函数就可以得到一个虚拟节点树，使用这个虚拟节点树就可以渲染页面。模板编译成渲染函数分为三部分（解析器、优化器、代码生成器）：将模板解析成AST（Abstract Syntax Tree,抽象语法树） 遍历AST标记静态节点。这样在虚拟DOM中更新节点时，如果发现有静态标记，则不会重新渲染它。 使用AST生成渲染函数二、解析器解析器内部分了好几个子解析器，比如HTML解析器、文本解析器以及过滤...
2020-12-29 16:53:37
631
1
原创 Vue2.0变化侦测
一、虚拟DOM为什么要引入：访问DOM是非常昂贵的，会造成相当多的性能浪费。引入前：Vue.js 1.0中，当状态发生变化时，它在一定程度上知道哪些节点使用了这个状态，从而对这些节点进行更新操作，根本不需要比对。但因为粒度太细，每一个绑定都会有一个对应的watcher来观察状态的变化，这样就会有一些内存开销以及一些依赖追踪的开销。当状态被越多的节点使用时，开销就越大。引入后：Vue.js 2.0中，组件级别是一个watcher实例，就是说即便一个组件内有10个节点使用了某个状态，但其实也只有..
2020-12-28 18:40:22
158
1
原创 排序算法
一、排序算法排序算法有：冒泡排序、选择排序、插入排序、归并排序、计数排序、基数排序、希尔排序、堆排序、桶排序。二、冒泡算法function ArrayList() { var arr = []; // 数组中插入数据 this.insert = function(num) { return arr.push(num); } // 打印arr this.print = function() { console.l
2020-12-10 16:40:54
101
原创 数据结构对比
一、数组数组的优点数组按索引查找，效率非常高。数组的缺点数组的创建通常需要申请一段连续的内存空间（一整块的内存），并且大小是固定的（大多数编程语言数组都是固定的），所以当前数组不能满足需求时，需要扩容。一般情况下是申请一个更大的数组，比如2倍，然后将原来数组中的元素复制过去。 数组开头或中间插入、删除数据的成本较高，需要大量元素的位移。 数组按内容查找，效率非常低。总结：当频繁用下标访问时选择数组。二、链表链表的优点链表中的元素在内存中不必是连续的空间，可充分利用计算机.
2020-12-07 18:43:28
309
原创 this指向（全）
一、this的默认绑定1.web全局环境下的this指向windowconsole.log(this); // window2.函数独立调用非严格模式下，函数内部的this指向window严格模式下，为undefinedfunction fn() { console.log(this);}fn(); // windowwindow.fn();'use strict'function fn() { console.log(this);}fn();
2020-12-02 17:26:07
9930
2
原创 Vue3.0理解
一、vue3.0亮点Performance:性能比Vue 2. x快1.2-2倍 Tree shaking support:按需编译,体积比Vue2. x更小 Composition API:组合API (类似React Hooks) Better TypeScript support:更好的Ts支持 Custom Renderer API:暴露了自定义道染API Fragment, Teleport (Protal), Suspense:更先进的组件二、Vue3.0是如何变快的1.
2020-11-27 17:14:34
1066
原创 自动部署（GitHub + Jenkins + Vue）
目标：vue项目上传github后，服务器上自动拉取代码，并自动编译部署代码。工具： Jenkins。jenkins是当前比较流行的一款持续集成&持续部署(CI & CD)的工具，可以实现代码上传仓库(代码更新)后自动部署到需要部署的位置(服务器等)。一、安装Jenkins1.安装Java环境Jenkins是使用Java编写的持续集成的工具，所以需要先安装Java环境.(1)查看可安装的java版本：yum -y list java*（2）选择一个版本安装
2020-07-09 16:34:31
545
原创 Docker基础入门
一、概念Docker的作用：打包应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。
2020-07-01 17:47:19
226
原创 扫小程序码的开发与测试
扫小程序码后，参数是在扫码进去后的页面的onLoad生命周期中的scene字段获取使用decodeURIComponent()对scene字段进行解码，解码后是字符串解码后的值的小程序后台设置的二维码值// 假设后台设置的字符串为 user_id=2var codeStr = decodeURIComponent(options.scene); // user_id=2// 解码后的值为user_id=2// 如果要获取2，则使用一些字符串方法修改var codeId = codeS
2020-06-10 14:56:16
261
原创 图结构
一、实现邻接表代码实现：var Graph = function() { var vertices = []; // 初始化顶点 var adjList = {}; // 初始化边 // 添加顶点 this.addVertices = function(v){ vertices.push(v); // 添加顶点 adjList[v] = []; // 初始化顶点对应的边 ...
2020-05-27 18:13:43
227
原创 树结构
一、插入insert 添加node,先判断是否有根节点，如果没有则直接插入根节点，如果已经有根节点，则调用isertNode方法。代码实现：var Tree = function() { var root = null; var Node = function(val) { this.val = val; this.left = null; this.right = null; } // inse...
2020-05-27 16:42:30
155
原创 哈希表（散列表）
一、散列表基本实现根据键名，通过散列函数（转换成哈希值并相加% 37)，得到散列值，将散列值作为键名，与值组成键值对，存入散列表。代码实现：var HashTable = function() { var items = []; // 散列函数：将key转化为哈希值再相加，返回散列值 var loseloseHashCode = function(key) { var hash = 0; for(var i = 0; i &l..
2020-05-26 17:46:45
383
原创 字典数据结构（Map、WeakMap）
代码实现：var Dictionary = function() { var items = {}; // has 判断是否有某属性 this.has = function(key) { // return items.hasOwnProperty(key); return key in items; } // set 添加新的键值对 this.set = function(key, value) { ...
2020-05-26 11:00:01
359
原创 集合类数据结构(Set、WeakSet）
一、集合集合特性：（1）元素无重复性： A = {1,2,3}（2）空集： A= {}（3）子集： A = {1,2,3}， B = {1,2}，B是A的子集二、模拟实现ES6中的Set数据结构实现Set中的方法：（1）has(value):查询集合中是否存在某元素（2）add(value):向集合中添加某元素（3）remove(value): 移除元素（4）clear()清除所有元素（5）value():提取集合所有值合并成数组（6）getIte...
2020-05-25 18:13:49
173
原创 链表（JavaScript）
1.链表结构实现：（1）append:尾部添加：分两种情况：一、链表为空，head设为node；二、链表不为空，获取到链表尾添加元素；注意：链表添加后长度要手动增加append代码实现：var LinkList = function() { var head = null; var length = 0; // 辅助类：用于创建链表项 function Node(ele) { this.ele = el...
2020-05-25 15:21:31
331
原创 栈和队列（JavaScript）
一、栈：后入先出（）栈结构实现： function Stack() { var items = []; // 使用私有变量，避免被外部操作 // push 栈顶添加元素 this.push = function(ele) { items.push(ele); } // pop 移除栈顶元素 需返回移除的元素 因为可能要用到 this.pop = function()..
2020-05-22 19:09:45
226
原创 TypeScript基础练习
// 一、原始数据类型var str1: string = '我是小明';var num1: number = 1;var nan: number = NaN;var bool1: boolean = true;// undefined和null是所有类型的子类型// 所以undefined和null类型的变量，可以赋值给其他类型的变量var u: undefined = undefined; var n: null = null; var num2: number = u;v.
2020-05-19 15:23:23
634
原创 Vue插件（概念、功能、开发）
一、组件和插件1.组件：是对某些功能或某模块的封装2.插件：是对一系列组件的封装二、插件的功能插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种： 添加全局方法或者 property。如：vue-custom-element 添加全局资源：指令/过滤器/过渡等。如vue-touch 通过全局混入来添加一些组件选项。如vue-router 添加 Vue 实例方法，通过把它们添加到Vue.prototype上实现。 ...
2020-05-13 18:25:21
489
原创 JS异步底层
一、Js异步的执行异步队列里包括微任务和宏任务。微任务：Promise,Process.nextTick.宏任务：整体代码Script，setTimeout,setInterval异步队列中会先执行完微任务再执行宏任务
2020-05-08 21:36:53
165
原创 uni-app起步（用vue写微信小程序）
一、开发方式1.使用DCloud公司提供的HBuildX快速开发2.使用脚手架快速搭建和开发(1)全局安装@vue/cli：npm i -g @vue-cli(2)创建项目vue create -p dcloudio/uni-preset-vue 项目名(3)启动项目（微信小程序）npm run dev:mp-weixin(4)微信开发者工具导入小程序：...
2020-05-08 16:18:03
1622
原创 Vue源码解析
一、源码目录二、dist目录输出格式说明：带有common的文件是为browserify、webpack1准备的，带有vue.esm的文件是为webpack2+准备的，带有common的文件是兼容带有common的文件和AMD的（可在node端和浏览器里用）带有runtime的文件仅包含运行时，无编译器...
2020-04-30 17:49:06
439
原创 React后台实战（react+antd）
一、项目概述1.github地址:https://github.com/141110126/react-admin二、项目1.创建项目：npx create-react-app react-admin2.引入antd（1）安装cnpm i --save antd（2）对antd进行按需引入：安装插件：cnpm i --save react-app-r...
2020-04-10 15:09:51
396
原创 redux起步（简单易懂）
一、概念1.文档：https://www.redux.org.cn/http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html2.redux的作用：处理应用的共享数据。以有条理的方式存储数据，使我们能够在应用的任何组件中快速获取该数据。3.redux的工作流程：（1）用户触发...
2020-04-04 19:56:57
193
原创 React起步
一、安装1.使用 create-react-app 快速构建 React 开发环境，并启动npx create-react-app hello-reactcd hello-reactnpm start2.注意：创建项目反应慢，是因为在寻找相关配置registry时失败了，默认使用了npm安装解决方法如下：将npm的register设置为cnpm：npm config...
2020-04-01 14:39:54
198
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人