- 博客(73)
- 资源 (15)
- 收藏
- 关注
RSS订阅原创 前端提升之——chrome浏览器插件开发指南——chrome插件介绍及入门
有一天突发奇想，想要自己写一个浏览器插件玩一玩，并不做用于商业或者其他方面，仅仅用于自我技术的练习和提升。这里的浏览器我选择Chrome，当然chrome插件同样适用于微软自带的 Microsoft Edge在当今发达的互联网环境下，也找到了诸多的资料教程。个人也有个习惯，学习一个新的东西，虽然说前人已经有诸多的文章，但是我还是会将自己对于这个技术的一些个人感悟加上前人们写的很好的东西重新整理一次。我所有的参考文章均在本文的最后。
2024-08-26 19:26:01
1823
原创 vue鼠标悬停事件监听
前言开发框架为 vue2.x情景描述需求是这样的：页面在鼠标悬停（不动）n秒之后，页面进行相应的事件。比如在我的需求下，是鼠标悬停15秒之后，页面上三个数据弹窗轮询展示。解决方法我的思路中 涉及到了三个变量data(){ return { polling: null, timeCount: 0, judgeTimer: null, }}polling： 是 轮询的时候的一个计时器timeCount： 是 判断鼠标是否移动的一个控制变量jud
2022-05-16 11:56:55
12196
原创 前端须知-MVVM
前言Model–View–ViewModel(MVVM) 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于2005年在他的博客上发表。MVVM 源自于经典的 Model–View–Controller（MVC）模式（期间还演化出了 Model-View-Presenter（MVP）模式，可忽略不计
2021-12-22 16:39:55
555
原创 阿里云 + Ubuntu + WordPress 建造个人博客网站
前言需要准备的东西：需要注册一个域名域名需要备案需要购买一个ESC服务器上述的操作，非常的简单，就不多叙述了一、阿里云ESC服务器配置1.首先远程连接服务器输入用户名密码根据提示输入，Linux 用户名一般为 root，密码如果忘记了，可以修改2.系统升级和更新源sudo apt-get updatesudo apt-get upgrade3. 配置apache2apt-get install apache2 -y在本地计算机（您自己使用的电脑打开浏览器）输入h
2021-12-20 11:50:24
1122
原创 uni-app 长按事件无法被页面滚动或滑动阻止问题解决
问题描述uni-app 中 长按事件使用的是 @longpress或者 @longtap需要触发该事件的 element 位于一个能够上下滚动的页面中长按的元素在长按期间有页面滚动或者页面滑动时不触发长按解决@longpress或者 @longtap这两个事件 的触发时间是在 350ms查阅了一些资料，发现无法更改这两个事件的 触发时间所以我们希望在长按触发前如果有页面滑动或者滚动时阻止长按触发有这么一个事件 @touchmove其功能描述如下手指触摸后移动解决代码<te
2021-12-03 16:11:29
3063
2
原创 JavaScript常用工具——深度克隆（可直接复制）
前言在项目中，一些对象数据我们不能直接拿来赋值的使用，否则可能引起原对象的变化，不符合开发的规范。例如vuex中存储的一些对象这时候我们需要进行深度克隆关于深度克隆和浅层克隆的知识点，可以看我之前的博客JavaScript之克隆（浅层克隆，深度克隆）以下是我所些的深度克隆函数，可以直接copy使用deepCopy.js// deepCopyfunction typeOf(obj) { const { toString } = Object.prototype; const ma
2021-11-05 16:48:07
645
原创 设计模式总结项目练习——贪吃蛇
前言通过设计模式写出的 demo可拓展性强GitHub链接utils.js// 符合单一职责原则const tool = { inherit: function (target, origin) { const Fun = function () { }; Fun.prototype = origin.prototype; target.prototype = new Fun(); // 让子类的constr
2021-10-28 18:49:25
314
原创 前端须知——行为型模式——观察者模式
定义： 观察者模式，属于行为型模式的一种，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。举个栗子： 以学生为例，上课和下课的铃声就是被观察者，学生就是观察者，当下课铃声响了，学生就知道下课了，就出去跑着玩了，然后过了10分钟，上课铃声又响了，然后学生听到上课铃，又开始从外面往教室跑，去上课。1、DOM事件 其实我们在平时也用到过观察者模式，只是我们没有注意到而已，举一个简单的例子：我们曾
2021-10-28 18:47:53
486
原创 前端须知——行为型模式——策略模式
策略模式是JavaScript设计模式中行为型的设计模式白话解释实际上所谓的策略模式就是指根据不同的策略来执行不同的方法，是不是很类似与if-else分支判断；但是策略模式是用来解决多重条件判断语句的；详解例子 年终将至，某公司决定提前发年终奖，但是年终奖的计算是有一定的规则的，年终奖的多少跟绩效考核密切相关；所以某公司的年终奖方案是这样的：绩效考核为S的员工，年终奖是个人月工资的4倍；绩效考核为A的员工，年终奖是个人月工资的3倍；绩效考核为B的员工，年终奖是个人月工资的.
2021-10-28 18:47:08
289
原创 前端须知——结构型模式——装饰者模式
定义在不改变元对象的基础上，通过对其进行包装拓展（添加属性方法）装饰者模式可以动态的给某个对象添加一些额外的职责，而不会影响从这个类中派生出的其他对象 装饰者(decorator)模式能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。可以当脚本运行时，在子类中增加行为会影响原有类所有的实例，而装饰者却不然。取而代之的是它能给不同对象各自添加新行为模拟传统面向对象语言的装饰者模式 首先要提出来的是，作为一门解释执行的语言，给Jav
2021-10-28 12:19:31
284
原创 前端须知——结构型模式——代理模式
代理模式代理模式属于设计模式中结构型的设计模式；定义为一个对象提供一种代理以控制对这个对象的访问白话解释： 很多明星都是有经纪人的，如果要联系明显进行商演或者开演唱会之类的商业活动通过是需要先跟经纪人取得联系的，跟经纪人谈好了合作事宜之后经纪人再转达给某明星，然后某明星才会去参加活动；同样租房也是一个同样的道理，我们不管是租房还是买房，第一反应肯定是找链家这类的平台，因为我们只需要跟链家进行沟通，而链家去跟房东沟通，省去了我们直接和房东沟通的步骤；因为链家就是一个代理模式，它代理了这个房东
2021-10-28 12:08:26
169
原创 前端须知——创造型模式——单例模式和工厂模式
单例模式定义保证一个类仅有一个实例，并提供一个访问它的全局访问点。数学与逻辑学中，singleton定义为“有且仅有一个元素的集合”。为什么要用单例模式 想象一下某些web应用，当点击登录按钮时，会弹出一个登录框，无论你点击多少次这个登录按钮，登录框都只会出现一个，不会出现多个登录框。同时不会频繁的进行删除和添加，而是同一个登录框进行隐藏和显示，因为删除和添加十分耗费性能，所以单例可以达到最大化的效能利用。 登录框这个例子就是单例模式最典型的应用，符合业务的需求，又能够提高性能详解 在
2021-10-28 11:55:15
436
原创 JavaScript——继承
JS继承1.传统形式 ==> 原型链问题：过多的继承了没用的属性Grand.prototype.lastName = 'Ji';function Grand() {}var grand = new Grand();Father.prototype = grand;function Father() { this.name = 'hehe';}var father = new Father();Son.prototype = father;function Son
2021-10-28 11:53:53
203
原创 前端必须知道——设计模式六大原则
六大原则1. 单一职责原则 single Responsibility principle一个方法只做一件事情，请求数据的函数你就不要渲染数据了，吃饭上厕所别用同一个地方 假设我们涉及的一个函数，不按照单一职责原则来写，代码的复杂度会提高，因为一个函数内部含有多个功能，而实际上，每个功能都可以独自拆分程一个独立的函数。 也就是说，每个函数来写一个功能。诸多函数汇总起来，就要形成耦合，也就是以牺牲耦合度的代价来降低复杂度。2.开闭原则 OCP 开闭原则 OCP 一个软件实体如类、模块和函
2021-10-28 11:28:53
1683
原创 前端必须知道——什么是设计模式
什么是设计模式设计模式（Design Pattern）是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。 设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题，毕竟这是前人无数经验总结成的最佳实践，而代码实现则是对加深理解的辅助。用人话来讲，就是想出套路做事情模式是什么 模式是指从生产经验和生活经验中经过抽象和
2021-10-28 11:23:18
250
原创 关于vue在PC端，对不同屏幕进行适配，未使用媒体查询（大小的自适应）的问题（ant-design-vue，element-ui 均可使用）
前言 前端项目中，难免会遇到这种问题，你根据UI的设计图在本机搭建页面，显示比例或许会是正常的，但是你将页面缩放，或者说，你将页面移植到其他尺寸的屏幕中，显示的UI效果就会变形。 所以，我们需要对我们的项目进行多屏幕适配 以下是我个人在 vue 项目中的适配方法，亲测在 使用 ant-design-vue 和 element-ui 组件库时任然有效。 不过这个方法无法更改行间样式，例如 element-ui 的 form 组件 的 label 添加行间样式，此时，就无法通过下面的方法进行适配
2021-10-27 14:26:25
4358
2
原创 21.合并两个有序链表——JavaScript
原题描述原题链接将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。示例 1：输入：l1 = [1,2,4], l2 = [1,3,4]输出：[1,1,2,3,4,4]示例 2：输入：l1 = [], l2 = []输出：[]示例 3：输入：l1 = [], l2 = [0]输出：[0]提示：两个链表的节点数目范围是 [0, 50]-100 <= Node.val <= 100l1 和 l2 均按 非递减顺序
2021-06-11 14:30:20
367
3
原创 20. 有效的括号——JavaScript
原题描述原题链接给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。示例 1：输入：s = “()”输出：true示例 2：输入：s = “()[]{}”输出：true示例 3：输入：s = “(]”输出：false示例 4：输入：s = “([)]”输出：false示例 5：输入：s = “{[]}”输出：true提示
2021-06-11 12:00:19
132
3
原创 14.最长公共前缀——JavaScript
原题描述原题链接编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀，返回空字符串 “”。示例 1：输入：strs = [“flower”,“flow”,“flight”]输出：“fl”示例 2：输入：strs = [“dog”,“racecar”,“car”]输出：""解释：输入不存在公共前缀。提示：0 <= strs.length <= 2000 <= strs[i].length <= 200strs[i] 仅由小写英文字母组成
2021-06-11 11:50:27
142
3
原创 GitHub官网访问慢的解决问题
1.首先我们进行DNS查询2.输入github.com进行检测3.查询后，会有如下的列表集合4.看后面TTL值较小的，把IP地址复制。5.找到本地的hosts文件记事本打开, 位置如下6.用记事本等工具打开在后面换行追加 IP地址 github.com 这里的IP地址就是上面检测TTL比较小的IP地址，例如：7.修改完保存保存后就可以访问github了，不出意外的话，现在的访问速度应该边快递。如果改完之后不好用的话，再换一个其他的地址。8.还是慢，怎么办这里提供两个最常用的镜
2021-05-22 21:10:28
1600
原创 前端网络技术提升
3次握手，4次挥手 在讲三次握手和四次挥手之前，我们要了解一个东西 首先，我们网络请求的过程中，我们网络请求的发送方和接收方，之间的通讯，应该是没有障碍的 通信的过程，如果想要建立稳定的链接的条件：通信双方都要有接收信息和发送信息的能力 客户端需要明确 ： 服务器端要有接收信息的能力 以及给予回应的能力 服务器端需要明确：客户端需要有接受信息和 发送信息的能力 所以我们的三次握手，主要就是为了建立一个稳定的连接那么我们来思考一下，为什么要三次握手才能证明建立稳定的连接呢？假设，
2021-05-20 13:58:21
128
1
原创 前端网络——get和post的区别
面试常问！！！基于什么前提 ？如果什么前提也没有，不适用任何的规范，只考虑语法和理论上的http协议GET 和 POST 几乎没有区别，只有名字不一样，仅此而已如果是基于RFC规范的。（1） 理论上的（Specification）：GET 和 POST具有相同语法的，但是有不同的语义。GET是用来获取数据的，POST是用来发送数据的，其他方面没区别（2）实际上的（Implementation）：各个浏览器，就是这个规范的实现者。所以才有常见的不同： 1）GET的数据在URL是可见的
2021-05-20 09:20:06
762
原创 ajax获取图片数据，实现瀑布流功能
封装 AJAX// ajax: async javascript and xml (json) "{}"// 异步的JavaScript 和 xml（json）// 同步：一行一行 （按顺序执行）// 异步：同时进行的// 用途： 数据交互// 用 问问题来举例 类比 网络请求// 问问题：// 问的问题内容： ---> 请求参数// 问的是谁： ---> 接口// 通过什么方式去问
2020-12-04 13:35:45
363
1
原创 3.LeetCode（无重复字符的最长子串）——JavaScript
题目描述原题链接给定一个字符串，请你找出其中不含有重复字符的 最长子串 的长度。示例 1:输入: s = "abcabcbb"输出: 3 解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。示例 2:输入: s = "bbbbb"输出: 1解释: 因为无重复字符的最长子串是 "b"，所以其长度为 1。示例 3:输入: s = "pwwkew"输出: 3解释: 因为无重复字符的最长子串是 "wke"，所以其长度为 3。 请注意，你的答案必须是 子串 的长
2020-12-04 12:33:20
160
原创 4.LeetCode（寻找两个正序数组的中位数）——JavaScript
题目描述原题链接给定两个大小为 m 和 n 的正序（从小到大）数组 nums1 和 nums2。请你找出并返回这两个正序数组的中位数。进阶：你能设计一个时间复杂度为 O(log (m+n)) 的算法解决此问题吗？示例 1：输入：nums1 = [1,3], nums2 = [2]输出：2.00000解释：合并数组 = [1,2,3] ，中位数 2示例 2：输入：nums1 = [1,2], nums2 = [3,4]输出：2.50000解释：合并数组 = [1,2,3,4] ，中位数
2020-12-03 18:54:50
426
原创 9.LeetCode（回文数）——JavaScript
题目描述原题链接判断一个整数是否是回文数。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。示例 1:输入: 121输出: true示例 2:输入: -121输出: false解释: 从左向右读, 为 -121 。 从右向左读, 为 121- 。因此它不是一个回文数。示例 3:输入: 10输出: false解释: 从右向左读, 为 01 。因此它不是一个回文数。进阶:你能不将整数转为字符串来解决这个问题吗？我的解法日常暴力解题。。。/** * @pa
2020-12-02 20:54:04
149
原创 976.LeetCode（三角形的最大周长）——JavaScript
题目描述原题链接给定由一些正数（代表长度）组成的数组 A，返回由其中三个长度组成的、面积不为零的三角形的最大周长。如果不能形成任何面积不为零的三角形，返回 0。示例 1：输入：[2,1,2]输出：5示例 2：输入：[1,2,1]输出：0示例 3：输入：[3,2,3,4]输出：10示例 4：输入：[3,6,2,3]输出：8提示：3 <= A.length <= 100001 <= A[i] <= 10^6本人解法/** * @par
2020-12-01 08:36:44
216
原创 7.LeetCode（整数反转）——JavaScript
题目描述原题链接给出一个 32 位的有符号整数，你需要将这个整数中每位上的数字进行反转。示例 1:输入: 123输出: 321 示例 2:输入: -123输出: -321示例 3:输入: 120输出: 21注意:假设我们的环境只能存储得下 32 位的有符号整数，则其数值范围为 [−231, 231 − 1]。请根据这个假设，如果反转后整数溢出那么就返回 0。本人写法/** * @param {number} x * @return {number} */var
2020-11-30 20:50:48
151
原创 1370.LeetCode（上升下降字符串）——JavaScript
题目描述给你一个字符串 s ，请你根据下面的算法重新构造字符串：从 s 中选出 最小 的字符，将它 接在 结果字符串的后面。从 s 剩余字符中选出 最小 的字符，且该字符比上一个添加的字符大，将它 接在 结果字符串后面。重复步骤 2 ，直到你没法从 s 中选择字符。从 s 中选出 最大 的字符，将它 接在 结果字符串的后面。从 s 剩余字符中选出 最大 的字符，且该字符比上一个添加的字符小，将它 接在 结果字符串后面。重复步骤 5 ，直到你没法从 s 中选择字符。重复步骤 1 到 6 ，直
2020-11-26 13:29:11
122
原创 2.LeetCode（两数相加）——JavaScript
题目描述原题链接给出两个 非空 的链表用来表示两个非负的整数。其中，它们各自的位数是按照 逆序 的方式存储的，并且它们的每个节点只能存储 一位 数字。如果，我们将这两个数相加起来，则会返回一个新的链表来表示它们的和。您可以假设除了数字 0 之外，这两个数都不会以 0 开头。输入：(2 -> 4 -> 3) + (5 -> 6 -> 4)输出：7 -> 0 -> 8原因：342 + 465 = 807个人解法 + 分析/** * Definition
2020-11-26 13:09:45
177
原创 1.LeetCode（两数之和）——JavaScript
题目描述原题连接给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]个人解法 + 分析解法比较暴力使用两层循环/** * @param {number[]} nums * @
2020-11-24 19:19:45
154
原创 数据结构实验——表达式二叉树（ 以递归方式建立表达式的二叉树状结构，再分别输出前序 、中序及后序遍历结果，并计算表达式的结果。）
实验要求实验实现语言Javascript + HTML + CSSindex.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表达式二叉树</title&g
2020-11-17 08:59:14
1441
原创 数据结构实验——年级学生成绩管理系统
实验需求index.html<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2020-10-24 12:35:48
579
1
原创 原生JS实现——flappy bird 像素小鸟 项目总结
项目展示项目准备images中所用到的图片index.html用一个 div 来 包裹游戏内容区域<div id="game"> <!-- 小鸟div --> <div class="bird"></div> <!-- 开始游戏按钮 --> <div class="start start-white">开始游戏</div> <!-- 最上层分数 --> <di
2020-10-09 15:01:03
1825
2
原创 原生JS实现扫雷——项目总结
项目展示图项目准备一样的，我们先是准备出三个文件夹，以及根目录下的index.html 文件然后是两张图片（地雷 和 旗子）之后是html结构html首先是最外层的 游戏内容区域的div 取名id为mine<div id="mine"></div>之后是游戏内容区域中最上面的四个按钮，我们用四个button标签来表示，并且用一个div来包裹起来并且给初级按钮一个最初的选中的样式<div class="level"> &l
2020-09-22 19:30:58
719
1
原创 班级抽签小程序——项目总结
项目展示项目中假设一个班只有三十个人html结构<div class="outerContainer"> <div class="question">请问你要抽几个xx班的小宝贝呢？</div> <div class="number"> <input type="text" style="color: #999;" value="请输入需要的人数" onblur="if (this.value == '')
2020-09-12 16:52:58
5026
1
原创 原生JS实现贪吃蛇——项目总结
项目准备项目展示图建立新文件夹，新建出images CSS JS 三个文件夹，并在根目录下创建出index.html将下列素材图片转到images文件中接下来可以开始着手操作了HTML结构游戏内容区域 （content）游戏开始按钮 （btn startBtn）游戏暂停按钮 （btn pauseBtn）游戏进行区域 （snakeWrap）可以构造出如下的结构<div class="content"> <div class="b
2020-09-11 10:26:21
1580
原创 JavaScript(1)——基础语法部分（优快云）
web 发展史Mosaic，是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器。于 1993年问世。1994 年 4 月，马克.安德森和 Silicon Graphics（简称为 SGI，中译为“视算科技”或“硅 图”）公司的创始人吉姆·克拉克（Jim Clark）在美国加州设立了“Mosaic Communication orporation”。Mosaic 公司成立后，由于伊利诺伊大学拥有 Mosaic 的商标权，且伊利诺伊大学已将技术转让给 Spy Glass 公司，开发团队必.
2020-09-02 08:59:31
785
原创 Javascript贪吃蛇小游戏（直接复制可用 含详细注释）
前言原生JavaScript实现贪吃蛇小游戏GitHub地址直接复制可用index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪吃蛇</title&g
2020-08-25 17:01:53
703
1
自助点餐系统.zip
2020-07-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人