- 博客(155)
- 资源 (1)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 随笔——诗与远方-回首向来萧瑟处
2020年转瞬即逝,好像从去年直接过渡到了今年年尾。马上就快真正的毕业三年了,突然觉得三年很短暂,以前总是觉得三年这么久的时间肯定能做很多事情。还在学校的时候和同学感慨:为什么人越长大越会觉得时间过得快而且能记住的东西越少?同学举例子说:**人6岁的时候他只经历了从懂事到6岁的一些事情,而人30岁的时候他经历了从懂事到30岁的一些事情,就好比分配内存,一个是6等分,一个是30等分。自然30等分的得到的可存储空间越小,越容易被遗忘和忽视。** 会习惯每一小刻度的生活,就像没有经历一样,太轻了。
2021-01-08 01:03:21
340
7
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 随笔——诗与远方-一蓑烟雨任平生
时间过得真快,2020年四月份了,回想去年感觉仿佛就在昨天,三月份的事情历历在目。去年的时候我做了一个错误的决定,当然,到目前为止还无法挽回。“清明时节雨纷纷,路上行人欲断魂”,这句话对于土生土长的南方妹陀来说真的耳濡目染,印象中南方的清明好像没有一次不下雨的。不仅仅是清明,几乎全年都在下雨,毫不夸张地说,在北方每一次我打开手机查看天气北方总是艳阳高照,而翻到长沙,每次都是在下雨。每次和家里人通...
2020-04-05 10:31:51
712
7
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 随笔——诗与远方-竹杖芒鞋轻胜马
以前老钟的秒针“嗒”“嗒”嗒“地转着,可能是大家都怕听到时间流逝的声音吧,现在的钟表都有静音处理。——世间何物催人老,半是鸡声半马蹄。转眼已经毕业一年多,一年里发生了很多开心的事和不开心的事,不过一切都在向着自己努力的方向发展。又是一年盛夏,屋外的知了拼了命的叫着像极了————爱情(手动滑稽)。“竹杖芒鞋轻胜马,一蓑烟雨任平生”,不知道从什么时候开始喜欢这一句诗,大概是看了某篇小说觉得我和里面...
2019-08-19 01:26:55
1373
7
原创 记录一些杂碎
前端搜索高亮:highlight(str) { let keyWord = this.keyWord.split(' ') let newStr = str keyWord.forEach(item => { const reg = new RegExp(item, 'ig') newStr = newStr.replace( reg, `<span style="color: #0672FF">${item}</span>
2021-12-30 23:57:28
705
原创 代码初学者可以看看这样可不可以快速理解链表
如果用js来模拟链表操作,我们应该怎样理解?网上大部分就是贴一下概念,一张图,一篇代码,但是对于小白来说还是很抽象。什么指针?什么next?为什么一会儿next=值一会儿next=next?令很多初学代码的人很困惑,而且JavaScript是弱类型语言,没有“指针”这一概念,导致对很多文章里说的指针不太不理。链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的。链表由一系列结点(链表中每一个元素称为结点)组成,结点可以在运行时动态生成。每个结点包括两个部
2021-12-30 23:24:58
309
原创 Leetcode 2、141:两数相加-环形链表
两数相加```javascript var addTwoNumbers = function (l1, l2) { let cur1 = l1; let cur2 = l2; let newLinkHead = new ListNode(0); let result = newLinkHead; let yu = 0; // 余数 let carrybit = 0; // 进位 let val1; let val2;
2021-12-09 01:01:55
377
原创 Leetcode 92、206:反转链表-反转链表 II
反转链表 IIvar reverseBetween = function (head, left, right) { let cur = head; let pre = null; let i = 1; if (left === right) { return head; } while (i < left) { pre = cur; cur = cur.next; i++; } let newCur = cur; let n
2021-11-23 00:56:55
283
原创 Leetcode 32、509:最长有效括号-斐波那契数
最长有效括号var longestValidParentheses = function(s) { if (!s) { return 0; } let stack = []; let maxLen = 0; let start = 0 for (let i = 0; i < s.length; i++) { if (s[i] === '(') { stack.push(i); } else if (s[i] === ')') {
2021-11-23 00:46:51
119
原创 css 实现页面区域分栏左右拉伸调整布局
想要实现如下图效果,红色可拉动的线往左边拉右边内容区域变大左边内容区域变小,往右边拉右边内容区域变小左边内容区域变大。我们先来了解一下 css 的resize属性直达w3s,resize: none|both|horizontal|vertical;可以调整元素是否可左右拖动。把 W3s 中的 resize 改为resize:horizontal;点击运行一下,就只可左右拉动。接下来我们把 w3s 里代码改为如下内容,然后点击运行<!DOCTYPE html><html>
2021-11-23 00:46:04
3137
1
原创 从日常应用例子defineProperty到vue.js computed实现
相信很多人知道 defineProperty ,或者在面试的时候被问过“vue(2)实现双向数据绑定的原理”呀“vue3 与 vue2 实现双向绑定的区别”呀等类似问题了。官方描述:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。大白话就是说可以通过这个方法在 a 对象上定义一些属性更改 a 对象的可读/写和值的操作。懒得写了,复制的官方示例 ????:往 object 上添加了个值为 42 不可赋值的 prope
2021-11-01 00:28:05
186
原创 JavaScript数据转换一些小技巧
有时候后端返回的数据格式不能直接使用,这时前端就需要额外处理,我记录了一些常见的数据处理方式,如果有其他的小伙伴们可以下方评论。1.a对象数组对象映射为b对象数组,map方法多快好省const a = [ { name: "li", age: 24, sex: "女" }, { name: "lizi", age: 24, sex: "女" },];const b = a.map((item) => item.name); // [ 'li', 'lizi' ]const c
2021-09-17 00:27:48
324
原创 原生 js、html 写一个有固定列滚动的 table
像 element-ui 和 ant-ui 这些 UI 库他们提供的 table 组件都是可以设置固定列的,比如左边固定则滚动的时候左边不会随着滚动而看不见,右边固定则右侧一列是固定住不动的。接下来直接用 html 和 js 来尝试一下这种 table 的效果。- 一:固定列 这里我想使用`position: sticky;`直接达到相对 table 列的固定效果,不需要改变 dom 的结构。- 二:阴影 阴影的效果是,当 table 往右边滚,则左固定列显示阴影效果;当 table 往
2021-08-25 01:38:14
2752
2
原创 在vue3项目中配置eslint
eslint 相关配置创建好 vue3 项目后,安装npm install --save-dev eslint eslint-plugin-vue ,执行命令初始化 eslint 配置:eslint --init接下来看命令行执行,根据自己习惯选择相应配置选项。执行完成后目录下会新增.eslintrc.js文件,同时新安装了几个插件,在package.json中可以看到。这时候可以开始配置 eslint 具体项了。比如我们不选用刚刚 init 时选择的规范包,那么可以修改 extends 为e
2021-08-22 00:43:34
3559
原创 vue3 + ant-design3(2.2.6+) + vite
上次体验了一下vue3+element-plus,总体感觉element-plus比element(vue2)好使且多一些功能。这次体验一下vue3+ant-design2(vue3)安装好之后按需引入 ant 组件ant.congig.js:import "ant-design-vue/dist/antd.css";import { Button, Menu, SubMenu, MenuItemGroup, Row, Col, Radio, RadioGro
2021-08-22 00:43:02
707
原创 Leetcode 3、4、8:无重复最长子串-中位数-字符串转换整数
请你来实现一个 myAtoi(string s) 函数,使其能将字符串转换成一个 32 位有符号整数(类似 C/C++ 中的 atoi 函数)。函数 myAtoi(string s) 的算法如下:读入字符串并丢弃无用的前导空格检查下一个字符(假设还未到字符末尾)为正还是负号,读取该字符(如果有)。 确定最终结果是负数还是正数。 如果两者都不存在,则假定结果为正。
2021-06-16 00:07:14
146
原创 Leetcode 11、26、27:盛水最多容器-删除有序数组重复项-移除元素
给你 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点(i,ai) 。在坐标内画 n 条垂直线,垂直线 i的两个端点分别为(i,ai) 和 (i, 0) 。找出其中的两条线,使得它们与x轴共同构成的容器可以容纳最多的水。
2021-05-31 20:05:44
143
原创 Leetcode 5、14、20:最长回文子串-最长公共前缀-有效括号
给你一个字符串 s,找到 s 中最长的回文子串。编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀,返回空字符串 ""。给定一个只包括 '(',')','{','}','[',']' 的字符串 s ,判断字符串是否有效。
2021-05-28 16:02:52
174
原创 Leetcode 12、13:整数转罗马数字-罗马数字转整数
通常情况下,罗马数字中小的数字在大的数字的右边。但也存在特例,例如 4 不写做 IIII,而是 IV。数字 1 在数字 5 的左边,所表示的数等于大数 5 减小数 1 得到的数值 4 。同样地,数字 9 表示为 IX。这个特殊的规则只适用于以下六种情况:I 可以放在 V (5) 和 X (10) 的左边,来表示 4 和 9。X 可以放在 L (50) 和 C (100) 的左边,来表示 40 和 90。 C 可以放在 D (500) 和 M (1000) 的左边,来表示 400 和 900。
2021-05-28 11:18:26
159
原创 使用vue+element开发一个谷歌插件
简单功能:点击浏览器右上角插件icon弹出小弹窗,点击设置弹出设置页,并替换背景颜色。这里使用vue+element并不是说写插件引用各种库才好,而是为了演示而使用。开始1.本地创建文件夹testPlugin并新建manifest.json文件2.添加插件的小icontestPlugin下创建icons文件夹,可以放入一些不同尺寸的icon,测试
2021-05-10 21:21:03
3777
22
原创 写一个导航锚点-固钉Anchor
写一个锚点-固钉AnchorAnt Design 中有一个“固钉”组件,使用它能后做一个锚点滚动导航。当点击文字时页面滚动到相应位置,当滚动页面时导航高亮跟随,当复制链接在新窗口访问时能滚动到相应地方。<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" /><a-anchor-link href="#components-anchor-demo-static" title="Static dem
2021-03-29 09:32:31
1232
2
原创 vue3 + element-plus + vite 注意事项
vue3 + element-plus + vite 注意事项vue3发布以来很多ui库都做了跟进,比如vant、ant、element…各个项目还在探索阶段,所以如果使用的话得做好迎接各个库bug的准备~element-plus原element库很久很久没有人维护了,不知道这个element-plus会维护多久。安装啥的步骤element-plus网站都有。需要注意的是,按需引用时记得引入样式文件import 'element-plus/lib/theme-chalk/index.css';按
2021-03-08 00:25:32
4457
1
原创 vue3+vant3初步搭建项目(一)
vue3+vant3仿微信读书app准备vue3环境安装vue3使用npm install vue@next命令安装vue3版本可以安装vue-clinpm install -g @vue/cli,通过脚手架来选择构建vue3项目:选择:Default (Vue 3 Preview) ([Vue 3] babel, eslint)也可以使用vite快速构建一个vue3项目,具体步骤和其他内容官网上都有。npm init vite-app <project-name>cd &
2021-03-06 18:00:49
4279
1
原创 vue中forEach修改数组里的对象视图不刷新,但map却可以?
前景vue2.+工作中我们经常需要修改某个数组里的某个属性并且希望视图数据刷新,但是vue2中如果直接通过下标修改数组属性值或新增属性则不会响应,如:data() { return { arr: [ { a: 0 } ] }}此时如果直接这样arr[0] = {a: 999, b: 'bbb'}进行修改,视图不会改变。vue官方提供了set、set、set、forceU
2021-01-24 18:05:46
2678
原创 镂空遮罩(新手指引解决方案)
1.使用svg的方式,画个圆网上示例(遮罩图层).container { position: relative; .svg { position: absolute; } .rect1 { stroke:none; fill: #ccc; } .rect2 { stroke: none; fill: #ccc; mask: url(#mask3); }}<div class="container">
2020-12-29 00:54:35
805
原创 前端项目常用的一些规范
前端项目规范摸爬打滚这些年,总结一下前端合作开发中的一些规范,涵盖了js、css、HTML。不管是独立开发还是团队一起协作,都最好是有一套比较严格的代码规范,这样代码看起来更清晰可维护性也好。js缩进:4个空格2个空格都可以,看自己团队的喜好,如果确定了,则配置tab也为相应的空格数。字符串使用单引号:let a = '123456'运算符左右两边空格:建议有空格:let c = a + b行尾建议无空格分号:个人习惯无分号结尾变量声明:建议全部使用es6中l
2020-12-24 01:17:36
451
原创 协商缓存与状态码304
协商缓存与状态码304304有时候我们访问某些网站会发现在控制台中,网络状态码返回的是304。(更多状态码相关-http必备知识点:http请求与js及状态码)304(Not Modified)状态码在网络请求中的意思是:所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源。大白话是:你这客户端需要的资源没有被修改,还是原来的老数据,我服务端不会返回给你(你自己有干嘛还要我的),你用原来的数据就行了。
2020-12-22 01:10:47
1153
原创 另一种画同心圆的方法
平常我们画同心圆可能是大圆套小圆,然后里面小圆居中背景颜色设为白色。今天在鼓捣某功能时,发现一个好玩的用法:使用box-shadow。先来看看box-shadow的相关属性:画的同心圆:.page-wrapper { width: 40px; height: 40px; box-shadow: rgb(243 32 32 / 60%) 0 0 0 50px; border-radius: 50%; margin-left: 100px; margin-top:
2020-11-26 00:54:10
595
原创 vue源码讲解系列之四------在render中创建节点和使用组件发生了什么
上一篇我们了解了创建vue实例时调用了_update方法,_update又调用了实例上的__patch__方法,它接收DOM元素、vnode、hydrating和removeOnly这几个参数。createChildren递归调用createElm创建真实DOM,最后使用原生appendChild方法将节点插入到DOM树中。接下来我们来了解vue组件化的过程。通过组件化的思想,我们可以将界面拆分为多个独立的模块,可以复用和嵌套使用。上一篇我们了解到了在render函数中直接创建节点的方法:var .
2020-10-26 00:59:15
358
原创 2020年面试随想&记录
前段时间在看工作机会,发现找工作就像找对象一样,每次都是这样感慨。找到合适的不太容易。总结前面“被渣”的经历,更加挑剔。以前找工作没有注重公司的规模发展和经济情况,导致“被渣”的情况出现,导致后来在找工作的时候不太顺利,因为还是有不少公司看重在公司所待的时间长短。就像谈恋爱,可能和前任谈时没有经验或者闹出了很多矛盾造就了很多不合适,再找对象时就会总结以前和对象相处出现的问题,时间越长随着年龄的增长社会经历的增长,考虑的因素也就越多:距离、年龄、条件等等。我看上了那个“工作”,那个工作没看上我,那个“工
2020-10-23 23:51:27
221
原创 vue3新特性实践——南征北战
Composition API实践上一篇我们『纸上谈兵』了一番,但是纸上得来终觉浅,我们还需要实践,实践过了才是真正的掌握。纸上谈兵地址:vue3新特性理论——纸上谈兵让我们来写一段为了用API而用API的辣鸡代码:HelloWorld每秒钟变换颜色,点击则停止变换颜色。在App.vue中,引入reactive, ref, toRefs, onMountedAPI,我们将需要响应的数据写在reactive里面或者用ref包裹,将方法写在自定义的methods对象里,在onMounted的时候每秒执行
2020-07-24 01:22:27
339
原创 vue3新特性理论——纸上谈兵
几天前you大大发布消息说vue3已经处在cr阶段了,也就是说,新加的功能已经确定,接下来就是查改bug了。前不久公司人员分享了一些关于vue3相关的知识,刚好我也对vue3很感兴趣并且之前就进行了了解,所以在这里记录一下。这篇文章主要以理论为主,代码实践请移步:首先来说说you大大最为自豪的改进:Composition APIyou大大说以前在2点几的版本中我们使用mixin来混入公用方法或者其它内容,这样做混入的对象来源不明,相同功能代码陈列杂乱,修改起来上翻下翻,对开发者造成困扰。而使用Co
2020-07-24 01:17:02
1704
原创 vue中使用svg-sprite-loader处理svg图片
网上已经有很多文章写了相似的例子,不过自己实践之后还是把过程记录下来,这样知识就是自己的了。版本:@vue/cli 4.4.1实现内容:1.vue载入svg 2.能够更改svg样式 3.svg无限旋转1.使用的loader:svg-sprite-loader、svgo-loader我们在vue.config.js文件里找到chainWebpack属性,添加如下代码:chainWebpack: config => { // ...... config.module
2020-07-20 22:21:17
8931
9
原创 在路由守卫之前拿到vuex中异步请求数据——vuex中watch方法
vuex中watch的使用问题:在全局路由守卫中想要通过store拿到异步请求的数据,无法拿到。我们常见使用vuex,一般是这样的:store模块文件写相关的数据信息,模块一test.js:export default { state: { obj: { count: 2 } }, mutations: { add(state){ return state.obj.count + 1 } }, actions: {
2020-07-12 11:47:58
2955
1
原创 移动/PC端的一些适配方案
一.多种屏幕(响应式)响应式是一种在多种设备(比如pc端 移动端)不同分辨率情况下使界面展现最大程度适应尺寸的手段。响应式包含了移动端适配,也可以使移动端不同分辨率展现不同样式。移动端适配则相对精准,是指仅针对移动端的适配方案。1.百分数最原始我们可以使用百分数来让界面达到适配效果。*,html{ margin: 0; padding: 0;}html,body{ height: 100%; width: 100%;}header{ width: 10
2020-06-17 00:56:58
2331
原创 设置全局css/less/sass样式and优化与style-resources-loader的理解
css全局样式设置问题描述:一个项目往往是有非常多的界面组成,当我们在编写代码的时候,这些界面就会有很多重复使用的/公共的样式重叠。这时候,可以将这些样式抽离出来放在一个共享文件里,将样式作用到各个界面。使用方法:1. 最直接方便的方法是在assets里面写好公用样式文件,然后在main.js引入:import './assets/css/common.less';2. 上述方法虽然能够使样式文件全局作用,但是对于一些我们定义的变量、函数,则不会在全局起作用,也就是说当我们在A.less文件中要
2020-06-06 00:57:41
3446
5
原创 vue中scoped的实现以及如何使用PostCSS转义css使其成为局部作用样式
scoped我们在vue中写css样式时,有时候会在style标签上添加scoped属性,这样这个vue组件里的样式就不会污染到其他组件中了。<style scoped></style>但是这时候如果引用了第三方库,比如element、ant-design啥的,这时候修改他们的样式就需要增加额外的符号或命令去更改:比如,我们可以使用deep,或者>>>符号:<style lang="less" scoped>.this-page {
2020-06-04 01:25:41
1173
原创 vue-cli3 新建的项目jest 运行报错
问题描述:npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! test@1.0.0 unit: `jest --config test/unit/jest.conf.js --coverage`npm ERR! Exit status 1npm ERR! npm ERR! Failed at the test@1.0.0 unit scri...
2020-04-30 00:49:55
1084
原创 git常用命令的一些记录
git常用命令1.通过git log查看提交信息git branch -a查看全部分支,git branch查看分支git checkout -b develop创建分支2.通过git reset --soft <版本号>重置至指定版本的提交达到撤销提交的目的。git reset --soft aa990cff24534frg345greg435rh3.通过git commi...
2020-04-29 23:59:43
1094
原创 使用笛卡尔积实现商品颜色材质等的组合SKU
实现一个函数`function generateItems(specs)`,接受类似如下的输入数组(例子):```javascript[{"id":"17","caption":"颜色","types":["黑","棕"]},{"id":"23","caption":"材质","types":["牛皮"]},{"id":"24","caption":"尺码","types":["40","...
2020-04-25 23:51:04
643
原创 移动端vue仿安卓系统日历选择器
终于坑坑坑上了…描述这是一个基于vue的日期选择组件,支持按周和按月份显示(默认按周显示,下滑按月显示)。安装npm install vv-calendar -s使用属性nametypeValuetypestringmonth / week,分别代表显示周、月,和只显示周。configDayDataarray在某些天上需要加上的标识数据...
2020-04-12 23:43:04
764
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人