- 博客(115)
- 收藏
- 关注
RSS订阅原创 canvas图片文字合成（小程序分享）
写这个的原因是在写一个小程序的需求的时候用到了，在此记录一下。需求需要实现的点就是：在分享小程序个人资料页面的时候将个人信息和个人头像进行重叠放在一起然后分享出去，大概样子如下：不同的用户头像不同，个人信息不同。写一个函数传入这两个信息，动态合成一张图片，然后再进行分享。实现的完整代码如下：// 图片文字合成// 绘制文字function canvasWraptitleText(ctx, text, x, y, maxWidth, lineHeight, maxRowNum,font,colo
2022-02-28 17:57:59
1552
1
原创 HTML: 前端页面结构和加载过程
前端页面结构和加载过程页面结构举例说明：HTML 与 DOM 有什么不同操作 DOM虚拟 DOM页面结构最基本的页面结构：<html> <head></head> <body></body></html>< html>元素是页面的根元素，它描述完整的网页；< head>元素包含了我们想包含在 HTML 页面中，但不希望显示在网页里的内容；< body>元素包含了我们访
2021-06-08 16:17:57
864
2
原创 JavaScript中常说的四种模块规范
JavaScript中常说的模块规范CommonJS 规范AMD 规范UMD 规范ES6 模块 规范CommonJS 规范CommonJS 规范定义了模块应该怎样进行编写，从而各个模块系统之间可以进行相互操作。var beta = require('beta');function verb { return beta.verb();}module.exports = { verb: verb};CommonJS 有以下特点：一个文件就是一个模块；使用requir
2021-05-27 18:07:28
508
1
原创 代码构建与webpack知识点
代码构建与webpack知识点1、Webpack 工具都做了些什么2、常见的前端构建工具3、了解Webpack（1）入口（entry）（2）输出（output）（3）Loader（4）插件（plugins）总结Webpack 到底对项目代码做了什么？1、Webpack 工具都做了些什么如今前端项目大多数都使用了模块化，而如果想要将多个文件的代码打包成最终可按照预期运行的代码，则需要使用到代码构建工具。不管项目代码是如何进行组织的，项目中又有多少个文件，最终浏览器依然会从 HTML 内容进行解析和加载
2021-05-27 18:04:44
631
4
原创 前端进阶者面试重点汇总
前端进阶者面试重点汇总一、前端三件套 HTML/CSS/JavaScript二、与 JavaScript 运行环境相关的浏览器和 Node.js：三、前端开发通用领域、网络、安全、算法和计算机通用知识。1、浏览器相关2、Node.js 相关3、网络相关4、安全相关5、算法与数据结构6、计算机通用知识四、知识汇总一、前端三件套 HTML/CSS/JavaScript面试官在面试 1~3 年经验的前端岗位候选人时会更多倾向于考察对页面布局原理的掌握，包括盒子模型、文档流、浮动布局等，以及常见页面布局的技巧
2021-05-26 11:37:20
454
2
原创 git remote: HTTP Basic: Access denied报错解决
git error: git remote: HTTP Basic: Access denied问题原因： 可能是刚改过远程仓库密码，造成本地git配置的用户名、密码与gitlab上注册的用户名、密码不一致。1、解决方法一：跟着图示步骤走然后继续使用soucetree 会弹窗 提示输入用户名密码 就好了2、解决方法二：如果账号密码有变动 用下面命令 重新输入账号密码git config –system –unset credential.helper用了第一个命令 还不能解决问
2021-05-12 15:53:23
1233
原创 Error: PostCSS received undefined instead of CSS string
新拉下来的项目，启动项目 npm run serve 的时候就报错：Error: PostCSS received undefined instead of CSS string1、我的项目问题原因：我的node的版本影响了node-sass的应用。2、解决办法：卸载当前版本，安装最新版本的node-sassnpm uninstall node-sassnpm install node-sass --save-dev删除依赖，重新安装又依赖rimraf node_modulesnpm
2021-05-07 14:28:59
11160
2
原创 写出更优雅的react组件（避免重复渲染）
写出更优雅的react组件一、存在问题二、解决办法类组件的解决方法1、 shouldComponentUpdate（React 类组件的一个生命周期）2、PureComponent + Immutable.js（进阶版）（1）为什么有了PureComponent这个方法（2）PureComponent 与 Component 的区别点（3）PureComponent用法（4）Immutable.js函数组件的解决方法1、React.memo：“函数版”shouldComponentUpdate/PureCo
2021-04-25 15:03:29
1295
原创 深度理解并使用react的useEffect()
深度理解并使用react的useEffect()useEffect()是React 16.8 的新增特性，它的出现是为了弥补只能在react中的类组件中使用的的生命周期函数：componentDidMount、componentDidUpdate、componentWillUnmount（和vue中的mounted、destoryed生命周期函数有异曲同工之妙，其实都是相通的）。下面这段代码是直接从react文档中拷贝过来的，写的是在类组件中当我们想在文档更新时和在组件消失时执行一些逻辑时，是有相关生命
2021-04-06 18:28:53
1202
原创 深度理解react的useState()
理解并使用react的useState1、为什么有了这个方法useState()是专门用在函数组件中的，因为函数组件本来是没有状态的组件，而类组件中可以通过 this.state和this.setState来更新组件状态，于是 React 16.8 就新增useState这个特性，用来提升函数组件的性能。函数组件import React, { useState } from 'react';function ChangeAge() { // 声明一个叫 "name" 的 state 变量
2021-04-02 18:00:13
1434
原创 react创建一个组件（函数组件和类组件及区别）
函数组件和class组件1、函数组件：编写 JavaScript 函数，返回一个react元素（组件名首字母要大写）function Welcome(props) {// 此处可以写入你想写的一些逻辑语句// 最后只需要return出react元素 return <h1>Hello, {props.name}</h1>;}// 或者const Welcome = (props) => {// 此处可以写入你想写的一些逻辑语句//最后只需要return出r
2021-03-24 17:16:22
317
原创 初学react实现列表处理功能
通过上的react课程实现一个对列表相关的处理功能，涉及到的react知识点有：建立react组件，引入react组件、react绑定事件、react循环渲染组件、react写样式、es6语法。1、首先熟悉下这个项目的文件夹，方便开发2、我写的文件包含下面几个其中todolist.js文件是主文件（vue的内容文件都是以.vue为后缀；react是以.js为后缀），todoitem.js是todolist.js的一个组件，todolist.css是样式文件。3、todolist.js文件的内.
2021-03-24 15:38:38
523
原创 初学者：创建一个react项目
1、去react官网:https://editor.csdn.net/md/?not_checkout=1’点击文档部分找到下面的模块。（或者直接看我写的第二步执行相关命令）2、使用命令行进入到你想创建react项目的一个目录，分别执行下面的命令（react的脚手架命令）npx create-react-app my-appcd my-appnpm start其中的my-app是你的项目名字，可以自行更改。（我取得项目名子为todolist）执行完上面命令以后我的目录里面首先会出现一个t
2021-03-23 11:36:13
151
1
原创 prettier安装和配置
prettier安装和配置1、prettier安装（1）命令安装（2）插件安装2、prettier配置1、prettier安装（1）命令安装（2）插件安装2、prettier配置module.exports = { "printWidth": 100, // 超过最大值换行 "overrides": [ { "files": ".prettierrc", "options": { "parser": "json" }
2021-03-20 16:07:31
4933
原创 理财课程干货总结二：债券入门
本节主要内容是理财的一些观念，以及债券入门。理财不是赌博，安全才是基础真正的安全不是躲理财躲得远远的，而是掌握背后的知识和逻辑1、如果有一款app，它告诉你把钱给它，你可以完全不用动脑子，它就可以给你8%以上的收益，那这个99.99%是骗子。（没有一款产品，不用让你动脑子，就可以保证让你获得比较高一点的收益）。收益率8%是分水岭，低于8%的有可能可以靠别人；高于8%的，只能靠自己2、既然是想靠钱生钱，就要学会选择安全的高收益产品。如果只要求低收益，你完全可以把钱放余额宝，放银行。收益低
2021-01-27 17:33:47
1508
1
原创 理财课程干货总结一
1、年利率/年化收益/存款年利率/七日年化含义：你存钱存一年可以获得的利息举例：年化收益2%（年利率2%）时，你投入100元，每年可以赚2元；投入10万元，每年可以赚2000元。根据上面这张图，根据收益率把人分成了很多个级别，我们可以得知的是：理财最重要的不是本金，而是收益率，收益率决定了你财富的等级。理财不是赌博，安全才是基础（理个财不要弄得自己提心吊胆，每天饭吃不好，睡不好觉）2、余额宝的本质是什么？货币基金3、什么是基金？举个例子：出去旅游的时候两种旅行方式，一种是自己包办一切，
2021-01-26 11:22:25
1490
1
原创 监听页面隐藏掉的事件
1、visibilitychange事件：当document.visibilityState == hidden的时候可以监听到页面被隐藏。（当你在移动端直接从一个app页面划到主页面或者跳转到其它页面就会监听到该事件）document.addEventListener("visibilitychange", function() { if (document.visibilityState == 'hidden') {...}}})2、pagehide事件：当你在移动端从一个app页面划到
2021-01-25 17:46:28
1013
原创 彻底删除node_modules
出现问题：有时候安装了新的模块或者改了什么配置，都是需要重新的安装依赖的（node_modules），但是在安装前需要先提前彻底删除node_modules,手动删除一般没效果。使用npm上面的rimraf模块,用这个模块可以直接删除node_modules里面的深层依赖。首先安装rimraf模块，使用命令：npm install -g rimraf使用删除命令：rimraf node_modules...
2021-01-22 10:15:45
1281
1
原创 用vant实现下拉刷新和上拉加载功能(vue项目)
我这次的详细做法是：1、首先在下面显示的文件下建立了一个list.js文件（要做分页加载的页面都可以引入使用）。2、list.js文件的内容如下：export default { data() { return { //三个判断 loading: false,//是否在加载中 finished: false,//是否加载完成 refreshLoading: false, pageSize: 20, // 列表请求数 p
2020-12-01 11:18:19
2464
3
原创 第一次做比较大的前端需求的自我总结
问题点：1、需求给的时间是很长的，一开始看到这个需求的时候看到很多个页面，就觉得需求量挺大的，虽然时间很长但开始的时候觉得很不熟悉，完全没进入状态，有些东西没有头绪，就浪费了很多时间。所以说这次需求是没把握好时间，以至于没有更多的时间做一些细节上的东西2、有些自己没办法实现的东西自己一直在那里探索和纠结，没有考虑到上线时间的问题和稳定性的问题，应该提前给自己确定下来是否可以按期完成，完成不了应该尽早把问题丢出来，让大佬帮忙解决。3、UI开始没有完全按照设计稿执行，不够严谨，有些东西做出来是凭借自我感觉
2020-11-26 16:31:04
426
1
原创 npm ERR! Failed at the [email protected] postinstall script. npm ERR! This is probably not a problem
npm run dev的时候不成功，然后我就删除node_module文件，npm install 重新安装依赖，结果报错说：npm ERR! Failed at the [email protected] postinstall script.npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! [email protected] postinstall: `node scripts/build.js`npm ERR! Exit status 1npm ERR
2020-09-14 17:44:02
854
原创 mac安装报错Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules
关于权限问题的报错：意思是你没有权限访问这个文件解决办法：在安装命令前面加一个sudo例如我原先的命令是npm install -g cnpm --registry=https://registry.npm.taobao.org然后把它换成sudo npm install -g cnpm --registry=https://registry.npm.taobao.org然后再输入电脑开机密码，输入的时候它是不会显示出来的，正常输入就好。...
2020-09-14 17:40:31
631
原创 详解深拷贝和浅拷贝以及如何深拷贝
深拷贝和浅拷贝一、如何区分深拷贝和浅拷贝二、举例加深理解深拷贝和浅拷贝三、图文理解四、哪些方法是浅拷贝，如何进行深拷贝一、如何区分深拷贝和浅拷贝内在的区别：浅拷贝就是简单的把指向别人的值的一个指针给复制过来，深拷贝就是实实在在的把别人的值给复制过来。直接显示出来的区别：浅拷贝就是双方不是独立的，还会互相影响；深拷贝是不会影响到彼此，是独立的个体。深拷贝与浅拷贝的存在主要还是受拷贝的数据类型所影响的。当拷贝的是js基本数据类型时，都会是深拷贝；如果拷贝的是js引用数据类型时，简单的赋值过来的时候就
2020-09-10 10:50:17
4008
原创 理解js栈内存和堆内存
内存分配与垃圾回收：在编译阶段，除了声明变量和函数，查找环境中的标识符这两项工作之外，还会进行内存分配。不同类型的数据会分配到不同的内存空间一般来说栈内存线性有序存储，容量小，系统分配效率高。而堆内存首先要在堆内存新分配存储区域，之后又要把指针存储到栈内存中，效率相对就要低一些了。垃圾回收方面，栈内存变量基本上用完就回收了，而推内存中的变量因为存在很多不确定的引用，只有当所有调用的变量全部销毁之后才能回收。栈内存：引擎执行代码时工作的内存空间，除了引擎，也用来保存基本值和引用类型值的地址。堆
2020-09-09 11:46:24
378
原创 限制input输入长度与内容
如果输入的是数字，通过监听input事件再通过slice进行截取限制长度<input type="number" oninput="f(value.length>6)value=value.slice(0,4)">如果输入的是文字或者字符，就会有一个maxlength属性进行限制长度<input type="text" placeholder="只能输入六个字符" maxlength="6">...
2020-09-07 20:02:48
13458
原创 vue获取input值的方法总结
1、v-model：使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据 <template> <input placeholder="请输入你的手机号码" type="number" v-model="number" /> <input placeholder="请输入密码"
2020-09-07 16:57:17
4707
原创 前端验证码倒计时的实现（实战）
是用vue写的，但是逻辑基本上都是一样的。效果如下：验证码倒计时： codeTimer() { this.timer = 60; let _this = this;//setTimeout里面的this不一样,所以在这里先保存好 if (this.timer >= 1) { //this.$refs.eleCode是vue获取dom元素的一种方法 this.$refs.eleCode.setAttribut
2020-09-07 13:56:47
2400
原创 前端验证码登陆模块的实现(vue实现)
实现效果如下：用vue写的，但实现逻辑都是一样的。摘取出来的输入框的html部分： //号码输入框 <input class="login-input login-phone" placeholder="请输入你的手机号码" type="number" v-model="loginNumberVal" @input="lenControl"
2020-09-07 11:53:12
1851
原创 安装完PS要首先要有的一步操作
打开PS，按快捷键ctrl + k，弹出首选项框点击性能选项显示如下图：进行的操作是第一个框框进度条拉到90%的样子，往右的第二个框框的历史纪录步数调到50左右，下边第三个框框的暂存盘勾选除C盘以外的其它盘。这是使用建议使用ps时的一个初始设置。...
2020-09-06 19:59:34
820
原创 详解slice，substring，substr的区别
slice,substring和substr的区别都接收两个参数，slice和substring接收的是起始位置和结束位置(不包括结束位置)，而substr接收的则是起始位置和所要返回的字符串长度。其中substring是以两个参数中较小一个作为起始位置，较大的参数作为结束位置，slice是将后面小的参数转化为0slice是数组和字符串都可以使用，返回截取到的值，不影响原数组和字符串；substring和substr只有字符串可以使用，返回截取到的字符串。//参数都是比较正常的情况下var st
2020-08-26 16:28:01
889
原创 瞄点到某个具体位置的实现方式
1、给要瞄点文本添加id属性（id属性针对任何标签都生效）,通过a标签href属性的hash值进行跳转<body> <div id="go-here">待瞄点文本</div> <div> <span><a href="#go-here"></a><\span> </div></body>2、给要瞄点文本添加name属性（name属性针对a标签生效）,通过a标签h
2020-08-14 17:51:28
250
原创 css实现标签固定悬浮在某个位置(position:fixed)
关键用到的就是固定定位（position:fixed）和层叠属性（z-index）<div class="fix-box"></div><style> .fix-box{ text-align: center; top:35px; position:fixed; z-index:100; }</style>知识点详细解析position:fixed：盒子将脱离原来的文本流，进入到新
2020-08-12 17:58:40
12386
原创 vue阻止事件冒泡@click.stop、默认行为@click.prevent、按键修饰符@keyup.enter
1、@click用法 @click="fun" @click="fun(参数)" v-on:click="fun"//完整写法2、@click.stop 阻止事件冒泡//点击child区域时只会执行函数sayChild，不会执行函数sayFather<div class="father" @click="sayFather"> <div class="child" @click.stop="sayChild"> </div></div>
2020-08-06 18:08:09
1344
原创 前端路由hash、history、location总结
一、理解前端路由，前端路由都有哪些？1、理解路由2、前端路由方法（1）history对象（window.history）（2）location对象（Hash）3、hash(locstion对象属性) 和 pushState (history对象属性)对比1、理解路由直接可理解为根据不同的url地址来显示不同的页面或内容的功能，最开始的后端路由有一个很大的缺点就是每次路由切换的时候都需要去刷新页面，然后发出ajax请求，然后将请求数据返回回来，那么这样每次路由切换都要刷新页面对于用户体验来说就会不太友好。
2020-07-29 18:11:45
475
原创 前端环境搭建
前端环境搭建一、node.js安装1、windows安装node.js2、Mac上安装node.js先安装nvm一、node.js安装1、windows安装node.js（1） 百度搜索node.js进入node.js官网进行下载安装,一步步的点击next就可以安装完成。（2）测试是否按照完成：在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口（3）在cmd窗口输入以下命令，如果显示版本号则表示按照成功。node -vnpm -v注释：Node.js中自带npm，安装Nod
2020-07-23 18:20:12
2224
2
原创 强大的电脑快捷键
1、让电脑锁屏：windows + L (lock锁住)2、步骤记录器：先按windows + R;再输入psr.exe;然后点击开始记录，它会记录下你做的所有操作，然后生成一个图文并茂的详细文档，单击停止记录以后，会将详细文档保存到一个压缩文件中。3、快速显示桌面：windows + D。当你正在浏览其它窗口时想要快速回到桌面而不是一个个的缩小，就用这个快速回到桌面。4、屏幕放大镜：按住...
2019-12-07 15:35:09
203
原创 js实现小球随机运动
HTML <div class='box'> <div class='ball'></div> </div>style:.box{ width:300px; height:400px; background-color:green; opacity:0.5; margin:auto; position:r...
2019-09-29 00:09:24
2475
1
原创 为什么要设置短信验证码倒计时和图片验证码(登录原理)
1、短信验证码倒计时的作用：主要是为了防止用户频繁的点击，获取短信验证码是有时间限制的，这样就可以让用户在规定的时间内只能点击一次，在客户端就只是告知用户这个什么时候可以点击，在服务端就可以更少的调用这个接口，不去影响服务器的性能每点击一次都会发送一条短信，也是会收费用的，限制用户点击次数也可以节省费用设置短信验证码可以定位到目标用户，提高安全性2、设置图片验证码的作用：防止有人...
2019-08-23 18:09:47
1121
原创 闭包面试题之闭包解决for循环打印
闭包的作用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的 变量,在函数执行完之后依旧保持没有被垃圾回收处理掉1、正常的for循环打印for (var i = 0; i < 4; i++) { console.log(i);输出的是0、1、2、32、加了延迟的for循环打印for (var i = 0; i < 4; i++) { ...
2019-08-21 11:27:41
1388
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人