- 博客(36)
- 收藏
- 关注
RSS订阅原创 vue3 + ts 开发系统 -- table分页/一些小坑
table组件分页封装希望以表格方式展示列表数据，但数据量较大，应使用分页加载Table组件和Pagination组件可以很方便实现这点，因有多组数据需要通过该方式加载，将其封装为TablePagination组件。最初table以插槽形式注入，因为对于不同数据集来说，表格列必然不同，这与数据集，以及页面期望展示的数据相关，所以不采用table放在TablePagination中，props传入属性的形式。后续发现Table数据是以props.data的方式传入，为了方便控制分页，将
2022-02-20 01:06:06
1342
原创 数结lc刷题复习 - 1
217. 存在重复元素存在重复元素使用Set的size和Array的length进行判断即可。最初试图采用分治解决，但该题无法分解为最小子问题，因为左侧数组不存在重复元素，右侧不存在重复元素，并不代表原数组不存在重复元素（即左右数组含有相同元素的情况，如[1,2,3,1]可遍历数组，使用hashMap对值做标记，如果发现重复标记则退出遍历。可针对数组排序，扫描相邻元素是否存在相同值，时间换空间。53. 最大子数组和最大子数组和动规，dp[i]为输入数组中下标为i的包含末尾位的子数
2022-02-13 22:12:48
353
原创 设计模式复习 -solid
前言曾读过刘伟老师的设计模式，并实现过一个小购物系统，但感觉设计模式这类型的知识还是不能够熟练运用到代码设计中，重新复习下。设计模式原则 — SOLIDSingle: 单一功能，各个部分保持独立，避免一个程序负责大于等于两个以上的功能// bad casefunction add2ThenMult3(x: number) { return (x + 2) * 3;}// good casefunction add2(x: number) { return x + 2;
2022-02-13 16:33:10
393
原创 vue3+ts开发系统 --setup
vue3 中，使用setup语法糖显然在很大程度上简便了开发，不需要那么多的return啦，引入components不需要再次导出等等。在使用过程中，有一些与createApp不同的地方，做个记录。迷惑的definePropsdefineProps 是在setup中获取props的内置方法，不需要import就可以直接使用。使用方式为const props = defineProps<{msg: string}>()。这种方式要求有类型定义，即上方的<{msg: string}&g
2022-02-08 23:52:29
1996
原创 vue3+ts 开发系统 -- 评论列表
写评论组件，希望实现失焦时评论回复框折叠如图所示问题：如何使得Comment组件失焦时，回复面板折叠？监听textarea的blur，在点击提交按钮时，会直接执行面板折叠操作，从而导致未执行提交评论方法。监听外部div的blur事件。div 无focus,blur 事件，查找了下资料，提到，设置tabIndex 属性为0，css中outline为none，tabIndex为tab键聚焦顺序，默认值为-1,即无聚焦事件。详情参考MDN tabIndex。但回复面板内部有输入框，当内部输入框聚焦时将.
2022-02-08 15:07:12
1108
原创 vue3+ts 开发系统 -目录结构
开发系统的部分问题与笔记系统使用vue3+ts进行开发，ui库使用element-ui，系统需求，使用echarts进行图表绘制。构建目录结构assets: 静态目录，存放图标与必需小图iconsimagecomponents: 组件目录publiclayout: 页面公共header / footerplugins: 插件列表router: 路由store: 全局存储type: 全局类型utils: 工具目录services: fetch apihelper:
2022-02-03 01:13:42
1629
原创 上传/下载进度条实现
上传下载进度事实上是使用到了xmlhttprequset对象中的progress事件。对于下载，可在xhr.onprogress上做监听。对于上传，可在xhr.upload.onprogress上做监听。监听事件要在xhr.open(method,url)前进行绑定。为了保证正确执行，必须在调用 open()之前添加 onprogress 事件处理程序。–《JavaScript高级程序指南v4》究其原因，可能是由于，xhr.open实现的功能是定义本次请求，xhr.send仅仅是将定义好的请求
2021-09-20 10:36:27
1600
原创 请求图片列表，并发请求限制在3个以内
promise45道面试题promise的题目对于深刻理解事件队列，异步调用，有非常大的帮助。记录下链接中以自己的方式处理的8-3问题（即题目所示），并思考是否有更优解法。function loadImage(url) { return new Promise((res, rej) => { let img = new Image(); img.onload = function () { console.log('complete
2021-09-09 15:46:33
284
原创 vue响应式原理理解（data,computed,watch）
摘要双向绑定之前写过一次了。本文从data,watch,comuted的实现原理出发，并根据自己的理解进行了总结。先贴个大佬文章链接：实现一个最精简的响应式系统来学习Vue的data、computed、watch源码讲的非常清晰，让我对响应式有了更深刻更清晰的理解。vue2响应式原理解析data的响应vue2中的简单而言就是object.defineProperty劫持get和set，对于数组直接赋值等操作不能实现响应式，对于data中新增的属性也不支持响应，必须用vue.$set设置。vu
2021-08-29 19:45:08
948
原创 lazyMan:事件队列结合链式调用
参考资料：面试题-lazyMan实现非常有意思的一道链式调用。参考资料中使用async和await语法糖完成，更加简介。此处笔者使用promise的写法。class _Lazyman { constructor(name) { this.taskQue = []; // 储存任务队列 this.timer = null; } run() {
2021-08-13 18:13:27
172
原创 vuex四属性手写（SGMA）
注释写在源代码里了。参考资料：从0到1手写一个vuex手写Vuex核心原理// https://juejin.cn/post/6844904066246508551 从0到1手写一个vuex// https://juejin.cn/post/6855474001838342151 手写Vuex核心原理/* - src/store/index.js中引入vuex。 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue
2021-08-11 23:25:26
145
原创 js私有变量设置与部分内存泄露处理（weakmap相关）
红宝书中weakmap一节提及函数私有的操作，使用了闭包和weakmap实现。let wm = new WeakMap(); class User { constructor(id) { this.idProperty = Symbol("id"); this.setID(id); } setID(value) { let that = wm.get(this) || {}; // {
2021-08-10 23:11:25
262
原创 练习部分手写题（call/apply/bind）
做个总结贴。call/apply/bind Function.prototype.apply = function (obj, args) { // 参数处理 if (!obj) obj = window; else obj = Object(obj); args = Array.from(args); // 绑定this const test
2021-08-09 23:18:44
137
原创 promise.all && promise.race
promise.all Promise.prototype.all = function (...iterators) { let res = []; let arr = Array.from(iterators); // 可迭代对象转化 return new Promise((resolve, reject) => { arr.forEach((v, i) => {
2021-08-06 23:51:12
159
原创 关于双向绑定-2
完善了一下compile部分，还是有问题。在此简要记录下。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal
2021-08-06 18:38:13
89
原创 关于双向绑定
参考如何理解vue数据双向绑定原理打在开头。参考大佬的理解自己写了一遍加了点注释而已。做个笔记记录。关于compile的部分没写。// Observer 监听器对象，监听对象上的属性是否发生了改变 class Observer { // 观察data对象上属性的变化，一旦变化，通知Dep constructor(data) { this.data = data; //维护data对象
2021-08-05 23:34:58
143
原创 关于面试题之js变量作用域与提升
简介这段时间一直在准备秋招，在这个过程中学习了非常多知识，如果不整理下来的话未免太过零散，于是笔者决定做个简单的面试相关知识点整理。原理啥的就不细写，有非常多大佬的文章写到了，此处主要是对部分题目的解析。涉及变量提升与函数提升，变量作用域。例题1.关于变量的作用域 // 会输出什么 ？ let x = 5; function fn(x) { // var x; //（1） // var x = 10;
2021-08-04 11:05:54
187
原创 字符串算术运算
题目：k * [codedString] = k个codeString相加。其中k位正整数。样例： “3*[a2*[c]]”输出：“accaccacc”思路：看到括号匹配首先用栈。再对可能遇到的情况进行分类。function computeString(str) { // write code here // 准备两个栈，一个数字栈，一个字符栈 let stack = [], numStack = [], res = '';
2021-08-02 11:33:17
328
原创 判断树子结构
// 剑指-26 B 是否为 A 的子结构var isSubStructure = function (A, B) { function fn(A, B) { // 剪枝 if (flag || !A || !B) return; // 找到该节点，从本节点判断是不是其子结构 if (A.val == B.val) { let que = [A, B]; let tmp = true;
2021-07-29 22:16:10
157
原创 最长回文子串，等题目
最长回文子串采用中心扩散的方法。/** * @param {string} s * @return {string} */var longestPalindrome = function (s) { function fn(s, i) { let p = i - 1, q = i + 1; // 单中心扩散 while (p >= 0 && q < s.length) { if (s[p]
2021-07-28 18:03:32
107
原创 vue实现树形标题（组件自递归）
被问道了，当时只是简单设计了一下，type等都没加上，重新实现了一下。效果// 数据结构nodes: [ { label: 'title 1', content: 'hello world', children: [ {
2021-07-28 14:41:43
234
原创 简单备忘录spa实现（基于vue）
摘要本项目实现目的为巩固vue学习成果。通过实现一个简单的备忘录，复习vue的生命周期、vue组件间通信、router路由与vuex存储，并使用webpack进行项目构建。页面设计来自他人，代码设计均由本人独立完成。样式（写了适应性，但有句话说的好，用户买大屏是为了看更多内容而不是看更大的字，所以事实上最好还是分成两个媒体查询文件写比较好，1024大屏一个，往下平板手机一个。本demo由于时间关系，目前只以媒体查询+栅格+rem的方式来进行适配）主页面： todo页面 显示用户名与今日的未完成的任
2021-07-26 23:55:14
297
原创 栈的压入、弹出序列
改了两行，比之前快了不少，稍微记录下本题就是模拟出栈入栈的过程。// t-31 /** * @param {number[]} pushed * @param {number[]} popped * @return {boolean} */var validateStackSequences = function(pushed, popped) { let stack = []; // 思路很简单，popped首元素即先出栈的元素 // 该元素能出栈，按照入栈顺序，
2021-07-24 11:49:39
93
原创 js实现轮播图组件-显隐切换
摘要面试时，面试官要求设计并实现一个图片轮播 Carousel 组件 说出html/css/js的设计思路要求有自动切换、手动切换上一个面板、下一个面板、指示器提示和点击切换、渐隐切换效果当时回答用定时器、css过渡实现，面试完自己上手写了些，做了一些优化，也学到了很多。样式（注：图片来源自网络，仅做学习用，侵删）demo功能设计一个轮换图组件。过渡效果为显示隐藏。要有底下控制条与左右前进回退按键。本demo控制按键仅在moveover时显示。主要实现方式实现轮播图并不复杂，显隐效果控
2021-07-22 20:15:33
910
原创 2048小游戏js实现
摘要2048小游戏，采用原生js的dom操作和css的animation，做的比较粗糙，目的是练习原生js的常用操作。游戏功能与界面均为他人设计，本demo具体代码实现由本人独立实现。样式demo功能：常见的2048游戏功能，通过键盘上下左右键控制格子的移动。游戏结束时alert(“游戏结束”)主要实现方式设置媒体查询，横屏设备以视口宽度设置rem，竖屏设备以视口高度设置rem@media screen and (min-width: 768px),screen and (orient
2021-07-21 14:49:14
783
3
原创 水果掉落小游戏（原生js+css动画）
摘要水果下落小游戏，采用原生js的dom操作和css的animation，做的比较粗糙，目的是练习原生js的常用操作。游戏功能与界面均为他人设计，本demo具体代码实现由本人独立实现。样式demo功能：水果随机位置下落水果图片随机在水果下落至底部前点击它，加 1 分在水果下落到消失前没有点击到，扣 1 分随时完成分数的统计当水果被点击时产生抖动效果，随后消失点击”开始“进入游戏，再次点击按钮，游戏结束结束游戏时清空游戏界面，即使还有正在下落的水果主要实现方式页面总体布局采用
2021-07-20 16:45:11
1367
1
原创 字符串相加与字符串相乘
字符串相加与字符串相乘题目字符串相加字符串相乘// t415-字符串相加 92 ms 40.3 MB/** * @param {string} num1 * @param {string} num2 * @return {string} */var addStrings = function (num1, num2) { if (num2 === "0") return num1; if (num1 === "0") return num2; // 首先转置，方便
2021-07-20 16:10:31
223
原创 树遍历等复习
很基础的知识，简单复习，做个记录/* 中序遍历 */// t94 - 中序遍历 - 递归 68 ms 37.7 MBvar inorderTraversal = function(root,res = []) { if(!root) return res; inorderTraversal(root.left,res); res.push(root.val); inorderTraversal(root.right,res);
2021-07-19 16:11:44
81
原创 20210719-t101-对称二叉树
采用两种解法。两树是否镜像对称，取决于其左树与右树。1.左树的根节点 = 右树的根节点2. 左树的左树与右树的右树镜像对称。3. 左树的右树与右树的左树镜像对称。递归解法：/** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.val = (val===undefined ? 0 : val) * this.left = (left===undefine
2021-07-19 13:18:59
121
原创 关于防抖与节流
防抖触发事件以后等待delay的时长，执行处理函数；在delay时限内再次触发事件，会重新进行等待；直到在delay时间内没有再次触发事件，函数执行。类型有的文章提到分为两类，有的干脆只有一类。我个人认为应用进行区分。1.延迟版。严格等待delay后才会执行。在delay时间中再次触发事件，重新设定定时器。函数执行条件是触发事件后delay时长中不再次触发事件。2.立即执行版。触发事件后立即执行函数，再进行delay等待。若是在delay时间内再次触发函数，依旧立即触发函数，同时重置定时器。
2021-07-17 16:54:13
83
原创 简单菊花加载图css动画实现
效果：// LESS代码main { display: grid; /* 简单栅格布局 */ grid-template: repeat(3, 1fr)/repeat(3, 1fr); div.container {/*居中设置*/ grid-row: 2/3; grid-column: 2/3; display: flex; justify-conten
2021-05-26 10:33:30
534
原创 两个简单h5小页面布局-练习弹性盒模型
效果（chrome环境下）页面1：仿小米分类导航布局 点击导航可达对应目录页面2：仿公众号效果 底部点击显示弹窗<!-- 页面1 实现导航页面 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
2021-05-19 01:10:24
384
原创 谷歌浏览器中，页面最小化和页面展开时定时器时间问题
练习js中，写了一个轮播图事件，轮播四个div，间隔2s自动切换。为了div之间的过渡不要那么生硬，我设置了0.5s过渡时间，在这0.5s中，我抛出5个settimeout任务，并通过promise保证顺序执行。之后就出现了很诡异的事情，当我显示着页面时，console.log的时间时很均匀的0，-500px,-1000px（打印了left值，一个轮播div宽度为500），但当我最小化页面在打开时，console.log的打印非常混乱。找了几个答案都没有满意的，后来看到一篇文章，说明谷歌浏览器再页
2021-05-16 22:51:51
1945
原创 理解Functon.prototype的__proto__是Object.prototype
这几天看原型链，看的整个人云里雾里。_ _ proto_ _,prototype,constructor等内容混乱非常。然后便看到了一篇非常优秀的讲解，大致搞清楚了，在这篇讲解中原型链的图示上，理清楚了一些问题，做个记录。先贴个原讲解的链接：帮你彻底搞懂JS中的prototype、__proto__与constructor大佬讲的非常清楚！非常感谢！下面是个人理解记录：首先，prototype 和 _ _ proto _ _的关系非常密切。prototype是函数内部有的属性，指向本构造函数
2021-05-13 17:22:00
1014
原创 js (主要为ES6) 的学习笔记
js (主要为ES6) 的学习笔记1.let/const/var都可声明变量，但各有不同，建议少用var。const常量是保证映射不变，有需要要加上object.freeze()。基本量传值，对象传址。2.模式字符串 ${stringA},${stringB}模式字符串中可以是JS表达式/函数调用等等。3.标签模板标签模板tag (可以不以tag来命名)function tag(strings, …vars){console.log(strings);console.log(vars)
2021-04-28 12:46:39
148
原创 win10 Qt 5.12.1 + openCV3.4.12+msvc2015编译器 踩坑简要记录
学业需要学习opencv，找了本《opencv3和Qt5计算机视觉》学习，结果单单在安装时就踩了不少坑。以下是简要记录。安装软件及其版本在官网上下了QT5.12.1，opencv3.4.12，又通过镜像文件安装了vs2015。在安装过程中还下了cmake，为的是进行opencv的编译。又下了windows10 的SDK。很多教程写QT安装MSVC2015编译器是不用安装vs2015的，下环境包就行，工作环境不用安装。但后面需要编译opencv，还是需要VS2015的工作环境进行编译的。所以建议还是直
2020-11-23 23:00:16
737
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人