Forina_Han-CSDN博客

Forina_Han

码龄5年

IP 属地：广东省

查看详细资料

个人成就

获得3次点赞
内容获得4次评论
获得33次收藏

TA的专栏

兴趣领域设置

前端

javascriptcssvue.jsreact.jses6webpackxhtml前端框架
后端

node.js
移动开发

flutter
网络与通信

https
微软技术

typescript
网络空间安全

web安全
学习和成长

面试

创作活动更多

HarmonyOS开发者社区有奖征文来啦！

用文字记录下您与HarmonyOS的故事。参与活动，还有机会赢奖，快来加入我们吧！

0人参与去创作

搜TA的内容

vue3 + ts 开发系统 -- table分页/一些小坑

table组件分页封装希望以表格方式展示列表数据，但数据量较大，应使用分页加载Table组件和Pagination组件可以很方便实现这点，因有多组数据需要通过该方式加载，将其封装为TablePagination组件。最初table以插槽形式注入，因为对于不同数据集来说，表格列必然不同，这与数据集，以及页面期望展示的数据相关，所以不采用table放在TablePagination中，props传入属性的形式。后续发现Table数据是以props.data的方式传入，为了方便控制分页，将

发布博客 2022.02.20 ·

数结lc刷题复习 - 1

217. 存在重复元素存在重复元素使用Set的size和Array的length进行判断即可。最初试图采用分治解决，但该题无法分解为最小子问题，因为左侧数组不存在重复元素，右侧不存在重复元素，并不代表原数组不存在重复元素（即左右数组含有相同元素的情况，如[1,2,3,1]可遍历数组，使用hashMap对值做标记，如果发现重复标记则退出遍历。可针对数组排序，扫描相邻元素是否存在相同值，时间换空间。53. 最大子数组和最大子数组和动规，dp[i]为输入数组中下标为i的包含末尾位的子数

发布博客 2022.02.13 ·

设计模式复习 -solid

前言曾读过刘伟老师的设计模式，并实现过一个小购物系统，但感觉设计模式这类型的知识还是不能够熟练运用到代码设计中，重新复习下。设计模式原则 — SOLIDSingle: 单一功能，各个部分保持独立，避免一个程序负责大于等于两个以上的功能// bad casefunction add2ThenMult3(x: number) { return (x + 2) * 3;}// good casefunction add2(x: number) { return x + 2;

发布博客 2022.02.13 ·

vue3+ts开发系统 --setup

vue3 中，使用setup语法糖显然在很大程度上简便了开发，不需要那么多的return啦，引入components不需要再次导出等等。在使用过程中，有一些与createApp不同的地方，做个记录。迷惑的definePropsdefineProps 是在setup中获取props的内置方法，不需要import就可以直接使用。使用方式为const props = defineProps<{msg: string}>()。这种方式要求有类型定义，即上方的<{msg: string}&g

发布博客 2022.02.08 ·

vue3+ts 开发系统 -- 评论列表

写评论组件，希望实现失焦时评论回复框折叠如图所示问题：如何使得Comment组件失焦时，回复面板折叠？监听textarea的blur，在点击提交按钮时，会直接执行面板折叠操作，从而导致未执行提交评论方法。监听外部div的blur事件。div 无focus,blur 事件，查找了下资料，提到，设置tabIndex 属性为0，css中outline为none，tabIndex为tab键聚焦顺序，默认值为-1,即无聚焦事件。详情参考MDN tabIndex。但回复面板内部有输入框，当内部输入框聚焦时将.

发布博客 2022.02.08 ·

vue3+ts 开发系统 -目录结构

开发系统的部分问题与笔记系统使用vue3+ts进行开发，ui库使用element-ui，系统需求，使用echarts进行图表绘制。构建目录结构assets: 静态目录，存放图标与必需小图iconsimagecomponents: 组件目录publiclayout: 页面公共header / footerplugins: 插件列表router: 路由store: 全局存储type: 全局类型utils: 工具目录services: fetch apihelper:

发布博客 2022.02.03 ·

上传/下载进度条实现

上传下载进度事实上是使用到了xmlhttprequset对象中的progress事件。对于下载，可在xhr.onprogress上做监听。对于上传，可在xhr.upload.onprogress上做监听。监听事件要在xhr.open(method,url)前进行绑定。为了保证正确执行，必须在调用 open()之前添加 onprogress 事件处理程序。–《JavaScript高级程序指南v4》究其原因，可能是由于，xhr.open实现的功能是定义本次请求，xhr.send仅仅是将定义好的请求

发布博客 2021.09.20 ·

请求图片列表，并发请求限制在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 ·

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 ·

lazyMan:事件队列结合链式调用

参考资料：面试题-lazyMan实现非常有意思的一道链式调用。参考资料中使用async和await语法糖完成，更加简介。此处笔者使用promise的写法。class _Lazyman { constructor(name) { this.taskQue = []; // 储存任务队列 this.timer = null; } run() {

发布博客 2021.08.13 ·

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 ·

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 ·

练习部分手写题（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 ·

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 ·

关于双向绑定-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 ·

关于双向绑定

参考如何理解vue数据双向绑定原理打在开头。参考大佬的理解自己写了一遍加了点注释而已。做个笔记记录。关于compile的部分没写。// Observer 监听器对象，监听对象上的属性是否发生了改变 class Observer { // 观察data对象上属性的变化，一旦变化，通知Dep constructor(data) { this.data = data; //维护data对象

发布博客 2021.08.05 ·

关于面试题之js变量作用域与提升

简介这段时间一直在准备秋招，在这个过程中学习了非常多知识，如果不整理下来的话未免太过零散，于是笔者决定做个简单的面试相关知识点整理。原理啥的就不细写，有非常多大佬的文章写到了，此处主要是对部分题目的解析。涉及变量提升与函数提升，变量作用域。例题1.关于变量的作用域 // 会输出什么？ let x = 5; function fn(x) { // var x; //（1） // var x = 10;

发布博客 2021.08.04 ·

字符串算术运算

题目：k * [codedString] = k个codeString相加。其中k位正整数。样例： “3*[a2*[c]]”输出：“accaccacc”思路：看到括号匹配首先用栈。再对可能遇到的情况进行分类。function computeString(str) { // write code here // 准备两个栈，一个数字栈，一个字符栈 let stack = [], numStack = [], res = '';

发布博客 2021.08.02 ·

判断树子结构

// 剑指-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 ·

最长回文子串，等题目

最长回文子串采用中心扩散的方法。/** * @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 ·