克里斯蒂啊-CSDN博客

原创 html table导出为excel

// 导出单个sheet excelexport const exportSingleSheet = function(tableSelector, fileName) { var excelContent = document.getElementById(tableSelector).innerHTML; var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:sc

2021-10-14 14:43:28 385

原创手写-字符串最长的不重复子串

给定一个字符串 s ，请你找出其中不含有重复字符的最长子串的长度。示例 1:输入: s = “abcabcbb”输出: 3解释: 因为无重复字符的最长子串是 “abc”，所以其长度为 3。示例 2:输入: s = “bbbbb”输出: 1解释: 因为无重复字符的最长子串是 “b”，所以其长度为 1。示例 3:输入: s = “pwwkew”输出: 3解释: 因为无重复字符的最长子串是 “wke”，所以其长度为 3。请注意，你的答案必须是子串的长度，“pwke” 是一个子序列

2021-09-24 18:02:27 140

原创手写-查找数组公共前缀

编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀，返回空字符串 “”。示例 1：输入：strs = [“flower”,“flow”,“flight”]输出：“fl”示例 2：输入：strs = [“dog”,“racecar”,“car”]输出：""解释：输入不存在公共前缀。function longestCommonPrefix(strs) { // 求出字符串最小长度 let minLength = Math.min.apply( null,

2021-09-24 14:01:39 195

原创手写-判断括号字符串是否有效

给定一个只包括 ‘(’，’)’，’{’，’}’，’[’，’]’ 的字符串 s ，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。示例 1：输入：s = “()”输出：true示例 2：输入：s = “()[]{}”输出：true示例 3：输入：s = “(]”输出：falsefunction isValid(string) { if (string.length % 2 === 1) { return false;

2021-09-24 13:29:17 142

原创 setTimeout模拟setInterval

setTimeout模拟setInterval核心：采用闭包，返回了清除函数function mySetInterval(fn, time) { let timer = null; let isClear = false; function interVal() { if (isClear) { isClear = false; clearTimeout(timer); return; } fn(); timer = set

2021-09-23 14:47:52 115

原创手写javascript的bind函数

手写javascript的bind函数核心：需要考虑作为构造函数时，绑定的是实例this而不是传入的obj对象Function.prototype.myBind = function (context, ...args) { if (!context || context === null) { context = window; } let fn = Symbol(); const _this = this; let result = function (...innerAr

2021-09-23 14:01:44 118

原创 javascript继承

原型链继承function Parent() { this.name = "tom"; this.info = { age: 18, sex: "男", };}Parent.prototype.getInfo = function () { console.log(this.info);};function Child() {}// 创建父类的实例并赋值给子类的prototype，Child.prototype.construtor也一同被重写Child.pr

2021-09-22 17:53:27 110

原创 css卡顿，开启GPU加速

css卡顿，开启GPU加速具体方法如下：transform: translate3d(xx,xx,xx);rotate3d(xx,xx,xx,xxdeg)scale3d(xx, xx,xx);transform: translateZ(0);以上方法均可以触发GPU渲染加速，但是需要注意开启后会增加内存消耗，手机还会增加电量消耗...

2021-09-16 13:49:58 715

原创 css3 Transition动画执行时有可能会出现闪烁的bug

css3 Transition动画执行时有可能会出现闪烁的bug添加下面的代码即可backface-visibility: hidden;transform-style: preserve-3d;

2021-09-16 13:41:39 356 1

原创手写javescript的防抖与节流函数

防抖函数短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行立即执行的防抖函数是指触发后，立刻执行函数，然后time秒内不触发事件才能继续执行函数/** * 防抖函数 * @param {Function} fn 函数 * @param {number} time 延迟执行毫秒数 * @param {boolean} immediate 是否立刻执行函数 */function debounce(fn, time, immediate) { let time

2021-09-08 17:38:49 56

原创手写javascript发布订阅系统

发布订阅系统class EventCenter { eventList = new Map(); // 1 // 绑定 on(name, fn) { let eventInfo = this.eventList.get(name); if (!eventInfo) { // 2 eventInfo = { data: {}, callback: new Set(), }; this.eventList.set(

2021-09-08 17:03:43 60

原创实现js的new语法

前言使用new调用一个函数，或者当class的constructor调用时，以下的操作将会被自动执行。创建一个新的空对象obj让obj继承构造函数的原型绑定构造函数的this为空对象，并执行。如果执行构造函数后返回了实例则返回这个实例，否则返回obj具体的代码实现如下function createNew() { let obj = Object.create(null); let con = [].shift.apply(arguments); obj.__proto__ =

2021-08-02 09:50:21 90

原创从零手写js的Promise

从零手写Promise前言Promise是ES6异步编程的一种解决方式。这篇文章从最基本的概念，一层一层分析，一步一步实现Promise。希望大家看完能都能轻松掌握Promise的原理。概述Promise是一个异步编程的方法。与传统的callback实现异步相比，Promise能使你的代码更具可读性。在ES6中Promise被加入到javascript中，它主要有以下两个主要特征：Promise有三种状态：pending、fulfilled、rejected。并且它的状态不受外界的影响P

2021-07-28 11:55:24 86

原创 0-1背包问题

0-1背包问题0-1版本只能往背包里装完整的物品，而分数背包问题则允许装入分数物品背包问题是一个组合优化问题。它可以描述如下：给定一个固定大小、能够携重W的背包，以及一组有价值和重量的物品，找出一个最佳解决方案，使得装入背包的物品总重量不超过W，且总价值最大。给定一个固定大小的背包，背包的容量为 w，有一组物品其价值和重量分别是 (2,3)，(3,4)，(4,5)，存在对应的价值和重量，要求找出一个最佳的解决方案，使得装入背包的物品总重量不超过背包容量 w，而且总价值最大。我们来看看下面这

2021-07-22 10:50:13 127

原创最少硬币找零问题（js实现）

最少硬币找零问题例如，有以下面额（硬币）：1，5，10，5。如果要找36的零钱，我们可以用1个25的硬币、1个10的硬币和1个1的硬币。如何将这个解答转化成算法？今天我们只要采用两种方法来解决这个问题动态规划法是一种将复杂问题分解成更小的子问题来解决的优化技术，主要采用递归来解决。贪心算法遵循一种近似解决问题的技术，期盼通过每个阶段的局部最优选择（当前最好的解），从而达到全局的最优（全局最优解）。它不像动态规划算法那样计算更大的格局。接下来我们就来看看具体的代码实现吧

2021-07-21 10:38:50 1245

原创 javascripte二分搜索

function binarySearch(item, array) { array.sort((a, b) => a - b); let left = 0, right = array.length - 1, middle, middleItem; while (left <= right) { console.log(left, right, "left,right"); middle = Math.floor((left + right)

2021-07-20 17:10:58 47

原创 javascript常见的排序方法

冒泡排序(O(n2))冒泡排序比较任何两个相邻的项，如果第一个比第二个大，则交换它们。元素项向上移动至正确的顺序，就好像气泡升至表面一样，冒泡排序因此得名。function bubbleSort(list) { let length = list.length; for (let i = 0; i < length; i++) { // 从内循环减去外循环中已跑过的轮数，就可以避免内循环中所有不必要的比较 for (let j = 0; j < length - 1

2021-07-20 16:49:53 326

原创 js实现Floyd-Warshall算法详解

Floyd-Warshall算法Floyd-Warshall算法是一种计算图中所有最短路径的动态规划算法。通过该算法，我们可以找出所有从所有源到所有顶点的最短路径：考虑下图：首先，我们需要声明表示上图的邻接矩阵，如下所示：注意此图是有向图(图这种数据结构，可以参考我之前的文章ES6实现图的数据结构)，A与B是相邻的，而B与A是不相邻的，array[i][j] === 0 这里我们用来表示距离为0，也就是同一个点，array[i][j] === INF 表示两个点不相邻。剩下就是具体的权值let

2021-07-14 18:08:47 255

原创 js实现Dijkstra算法详解

Dijkstra算法Dijkstra算法是一种计算从单个源到所有其他源的最短路径的贪心算法考虑下图：如果索引为i的节点和索引为j的节点相邻，则array[i][j] === 1，否则array[i][j] === 0，注意此图是有向图，A与B是相邻的，而B与A是不相邻的我们来看看如何找到顶点A和其余顶点之间的最短路径。但首先，我们需要声明表示上图的邻接矩阵，如下所示：let graph = [ [0, 2, 4, 0, 0, 0], [0, 0, 2, 4, 2, 0],

2021-07-14 17:28:30 1392

原创 ES6实现图的数据结构

图的相关术语图是网络结构的抽象模型。图是一组由边连接的节点（或顶点）。学习图是重要的，因为任何二元关系都可以用图来表示。任何社交网络，例如Facebook、Twitter和Google plus，都可以用图来表示。我们还可以使用图来表示道路、航班以及通信状态，如下图所示：让我们来学习一下图在数学及技术上的概念。一个图G = (V, E)由以下元素组成。V：一组顶点E：一组边，连接V中的顶点下图表示一个图：在着手实现算法之前，让我们先了解一下图的一些术语。由一条边连接在一起的顶点称

2021-07-12 16:19:24 186

原创 ES6实现二叉树、二叉搜索树（BST）、自平衡树

树的相关术语根节点：位于树顶部的节点叫作根节点，它没有父节点，树中的每个元素都叫作节点。内部节点：至少有一个子节点称为内部节点外部节点或叶节点：没有子元素的节点称为外部节点或叶节点节点的深度：节点的深度取决于它的祖先的节点的数量。树的高度：取决于所有节点深度的最大值二叉树与二叉搜索树二叉树：二叉树中的节点最多只能有两个子节点：一个是左侧子节点，另一个是右侧子节点。二叉搜索树：是二叉树的一种，但是它只允许你在左侧节点存储（比父节点）小的值，在右侧节点存储（比父节点）大（或者等于）的值

2021-07-09 17:45:35 255

原创 vue-router hooks源码实现原理

vue-router hooks实现原理首先分析一下hook实际就是回调函数，然后在特定的时机，按照顺序依次执行，并且可以中断路由的跳转hooks种类路由实例上的hooks包括beforeEach、beforeResolve路由配置文件也就是routes包括beforeEnter销毁vue实例里的beforeRouteLeave更新状态的vue的beforeRouteUpdate新实例化的vue的beforeRouteEnterhooks执行顺序beforeRouteLeave（当有

2021-07-07 13:35:07 435

原创 vue-slot

VUE插槽在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute插槽内容它允许你像这样合成组件：<navigation-link url="/profile"> Your Profile</navigation-link>然后你在 <navigation-link> 的模板中可能会写为：<a

2021-07-05 13:15:16 73

原创 vuex的使用

Vuex学习手记1、为何使用Vuex使用Vue开发的过程中，我们经常会遇到一个状态可能会在多个组件之间使用，比如我们在做项目时使用到的用户的信息，什么昵称、头像这些，这些信息会在不同的组件用到，一旦改变这些状态，我们希望其他组件也跟随变化，比如用户充值了100元，或者改变了昵称，所以这个时候就需要状态管理模式来集中管理，关于Vuex的详细介绍可以移步到官网。2、学习之前的准备本次我的学习都是在官方提供的脚手架搭建的项目下学习的，关于脚手架的使用本次就不再赘述，可以移步到Vue CLI，在使用Vue

2021-07-05 13:14:15 91

chris1299的博客