自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(143)
  • 收藏
  • 关注

原创 leetcode-两数之和js版本

示例 1:输入:nums = [2,7,11,15], target = 9输出:[0,1]解释:因为 nums[0] + nums[1] == 9 ,返回 [0, 1]。示例 2:输入:nums = [3,2,4], target = 6输出:[1,2]

2024-04-11 17:26:16 220

原创 Vue.js设计与实现阅读-3

编译器能识别出哪些是静态属性,哪些是动态属性,因此可以在生成代码的时候,标志出哪些是动态的属性。上面只是创建节点,渲染器的精髓在更新节点的阶段,需要精确找啊到 vnode对象的变更点,并且只更新变更的内容。**定义一个函数来代表组件,函数的返回值代表组件要渲染的内容。框架的错误处理做的好坏决定了用户程序的健壮性,因此需要为用户提供统一的错误处理接口,这样用户可以通过注册自定义的错误处理函数来处理异常。可以看到组件的 返回值也是虚拟 DOM,代表了组件要渲染的内容,那么我们就可以使用下面的方式来描述组件。

2024-01-10 20:39:37 1059 1

原创 Vue.js设计与实现阅读-2

上一篇我们了解到了命令式和声明式的区别,前者关注过程,后者关注结果了解了虚拟dom存在的意义,使找出差异这个过程消耗的性能最小化学习了进行时、编译时、编译时+进行时的特点,初步知道了vue3是采用编译时+进行时的框架。

2024-01-08 21:14:47 1070

原创 Vue.js设计与实现阅读-1

阅读Vue.js设计与实现的一些总结

2024-01-04 17:07:45 864

原创 剑指 Offer 46. 把数字翻译成字符串

我们可以使用动态规划来实现这个函数,定义dp[i]为前i个数字的翻译方法数,对于第i个数字,如果它和第i-1个数字组成的数字在10到25之间,那么它们就可以一起翻译成一个字母。因此,dp[i] = dp[i-1] + dp[i-2]。否则,它们必须分别翻译成字母,因此dp[i] = dp[i-1]。0 翻译成 “a” ,1 翻译成 “b”,……3种情况 -- 只需要计算 123的翻译情况 + 123和4组合的时候的翻译情况。3种情况 -- 只需要计算 12的翻译情况 + 12和3组合的时候的翻译情况。

2023-04-04 15:52:24 137 1

原创 剑指Offer 数组中重复的数字

找出数组中重复的数字。在一个长度为 n 的数组 nums 里的所有数字都在 0~n-1 的范围内。数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。示例 1:输入:[2, 3, 1, 0, 2, 5, 3]输出:2 或 3 解法1:利用Map结构遍历nums,如果map中存在,直接返回该数字,如果不存在,将该数字存储在map中var findRepeatNumber = function(nums) { ..

2022-02-16 21:50:17 232

原创 elasticsearch查看分析器分词效果

低版本的elasticsearch查看分词器效果可以直接在URL中指定分词器和查询词es6.x查看分词效果,可以使用GET或者POST方法,但是分词器和查询词需要以json的形式写在body里。如下所示:

2021-01-18 15:30:58 1499

原创 elasticsearch 报错Types cannot be provided in put mapping requests, unless the include_type_name param

使用postman向es库中添加数据,出现以下错误,解决办法:在url中添加?include_type_name=true

2021-01-05 14:32:36 4541 1

原创 JS 剑指 Offer 33. 二叉搜索树的后序遍历序列

输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历结果。如果是则返回 true,否则返回 false。假设输入的数组的任意两个数字都互不相同。参考以下这颗二叉搜索树:示例 1:输入: [1,6,3,2,5]输出: false示例 2:输入: [1,3,2,6,5]输出: true二叉搜索树的后序遍历的特点:当前的最后一个数就是该二叉树的根节点,并且左子树的值<根节点<右子树的值。根据这个特点:找到该数组的最后一个数即为根节点。遍历该数组,找到第一个大于根节点的数

2020-09-12 18:59:34 205

原创 Vue.js仿饿了么外卖App--(6)商家详情页实现

文章目录一、内容介绍1、内容2、效果二、具体实现1、布局2、滚动实现三、源码一、内容介绍1、内容商家详情页主要包括商家的具体信息、公告与活动、商家实景和商家信息。其中商家实景这里实现了纵向滚动,将scrollX设置为true。这一部分利用到了split组件和star组件2、效果二、具体实现1、布局<template> <div class="seller" ref="seller"> <div class="seller-content">

2020-09-12 09:51:08 2244

原创 Vue.js仿饿了么外卖App--(5)评价列表页实现

文章目录一、内容介绍1、内容2、效果二、具体实现1、数据的获取2、具体布局3、star组件4、ratingSelect组件三、源码一、内容介绍1、内容本篇文章主要介绍的是评价列表的实现。由于评价列表中包含的内容在前面的学习过程中我们都开发过其中的组件,例如星星组件和评价筛选组件。因此在这一部分我们只需要对组件进行复用,然后稍作改动即可。2、效果二、具体实现1、数据的获取在评价列表展示页实现过程中我们要从服务器端获取评价信息,并且评价列表展示页是可以滚动的,因此使用better-scroll

2020-09-11 21:27:09 1143

原创 Vue.js仿饿了么外卖App--(4)商品详情页实现

文章目录一、内容介绍1、内容2、效果二、具体实现1、组件传值2、点击事件3、图片展示4、加入购物车5、分隔条组件一、内容介绍1、内容本篇文章主要实现的是商品详情页的展示,主要包括商品图片展示、商品信息展示和商品评价展示2、效果二、具体实现1、组件传值goods.vue <Food :food="selectedFood" ref="food"></Food>food.vue通过props属性接收 props: { food: { type:

2020-09-10 23:56:26 1730 2

原创 Vue.js仿饿了么外卖App--(3)商品相关的组件的实现一

文章目录一、内容介绍1、内容2、效果展示二、详细设计:1、商品展示1)、布局页面布局数据获取和绑定2)、页面滚动安装引入使用3)、左右联动计算索引的高度实时获取滚动的高度左侧点击2、购物车组件1)、重点说明2)、具体实现页面布局组件传值接收数据计算属性3、cartcontrol组件布局增加和减少一、内容介绍1、内容本篇文章主要实现的是Vue.js仿饿了么外卖App商品相关的组件的实现,主要包括商品菜单和商品列表的展示(左右联动),shopcart组件,和cartcontrol组件,使用到了better

2020-09-09 23:11:53 1807

原创 JS 剑指 Offer 32 - III. 从上到下打印二叉树 III

请实现一个函数按照之字形顺序打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右到左的顺序打印,第三行再按照从左到右的顺序打印,其他行以此类推。例如:给定二叉树: [3,9,20,null,null,15,7],返回其层次遍历结果:[[3],[20,9],[15,7]]在JS 剑指 Offer 32 - II. 从上到下打印二叉树 II的基础上加一个翻转的判断条件即可:/** * Definition for a binary tree node. * function

2020-09-09 20:25:13 161

原创 JS 剑指 Offer 32 - II. 从上到下打印二叉树 II

从上到下按层打印二叉树,同一层的节点按从左到右的顺序打印,每一层打印到一行。例如:给定二叉树: [3,9,20,null,null,15,7],返回其层次遍历结果:[[3],[9,20],[15,7]]思路:该题和JS 剑指 Offer 32 - I. 从上到下打印二叉树题目类似,只是在最后结果输出的时候相对复杂一些。定义count来表示当前遍历的树的层数list用来保存树的节点result用来保存最终的结果countNum用来表示第count层节点的数量count =

2020-09-09 16:04:30 277

原创 JS 剑指 Offer 32 - I. 从上到下打印二叉树

从上到下打印出二叉树的每个节点,同一层的节点按照从左到右的顺序打印。例如:给定二叉树: [3,9,20,null,null,15,7],返回:[3,9,20,15,7]思路:广度优先遍历当节点不存在时,返回 []当节点存在时,定义两个数组,list数组用来保存树的节点,result数组用来保存最后的结果。每次取出list的第一个节点保存在temp中,将它的value值push进result数组中,然后判断该节点左右子节点是否存在,存在就push进入list的最后面。重复进行,直到

2020-09-09 15:28:06 167

原创 Vue.js仿饿了么外卖App--(2)头部相关的组件的实现

本篇文章主要实现的是App.vue组件、头部组件header、蒙层组件detal和Modal以及路由切换router文章目录一、App.vue组件1、重点说明2、具体实现(1)、整体布局(2)、数据获取3、源码二、header.vue组件1、重点说明2、具体实现(1)、整体布局(2)、父子组件传值(3)、商家头像展示(4)、商家内容展示(5)、字体图标的使用3、源码三、蒙层组件1、detal组件2、Modal组件(1)、整体布局3、蒙层的展示和隐藏4、源码四、路由切换一、App.vue组件1、重点说明

2020-08-29 22:46:10 568

原创 Vue.js仿饿了么外卖App--(1)概述和项目准备

文章目录一、概述1、项目简介2、技术分析二、项目准备1.效果展示2、组件拆分3、安装4、制作图标字体文件5、项目目录构建6、写mock数据接口一、概述1、项目简介本项目主要实现的是高仿饿了么外卖App的商家模块2、技术分析 axios实现和后端的数据交互 Vue-router路由实现页面切换 Vue-cli 使用better-scroll第三方库实现页面滚动 css sticky footer布局 flex弹性布局 组件化开发 webpack构建工具 ES6+eslint规范代码

2020-08-26 23:05:42 1870

原创 Canvas和SVG

文章目录1.Canvas2.SVG3.不同之处1.CanvasCanvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。控制每一个像素进行渲染在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。2.SVGSVG 是一种使用 XML 描述 2D 图形的语言,可缩放矢量图形。SVG 基于 XML,可以为某个元素附加 JavaScript 事件处理器。在

2020-08-25 17:40:48 106

原创 HTML5 -- SVG

文章目录1.优点2.SVG形状(1)、矩形 rect(2)圆形 circle(3)椭圆 ellipse(4)线条 line(5)多边形 polygon(6)折线 polyline(7)路径 path3.高斯模糊4.渐变(1)线性渐变(2)放射性渐变SVG 是使用 XML 来描述二维图形和绘图程序的语言。1.优点SVG 可被非常多的工具读取和修改(比如记事本)SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印

2020-08-24 11:34:39 118

原创 HTML5 -- Canvas

文章目录1.定义2.常用属性和方法3.步骤4.矩形(1)方法一:(2) 方法二: rect()(3)方法三:strokeRect()(4)使用fillRect()方法:5.线条的属性(1).lineCap()6.圆形7.二次贝塞尔曲线 quadraticCurveTo8.三次贝塞尔曲线 bezierCurveTo9.图形变换(平移缩放)10.状态保存:save restore11.线性渐变 LinearGradient12.放射状/圆形渐变13.图片填充14.文字渲染canvas 元素用于在网页上绘

2020-08-22 23:10:17 94

原创 HTML5 --拖放

文章目录1、拖放2、浏览器支持3、可拖放属性draggable4、事件对象dataTransfer5、拖放事件拖放(Drag 和 drop)是 HTML5 标准的组成部分。1、拖放拖放是一种常见的特性,即抓取对象以后拖到另一个位置。2、浏览器支持IE9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。3、可拖放属性draggable把 draggable 属性设置为 true,就使元素变成了可拖放的。默认情况下,图像、链接、文本是可以拖动的,文本只有在被选中的

2020-08-20 22:45:26 183

原创 HTML5 -- 视频音频

文章目录1.video2.audio1.videoHTML5 规定了一种通过 video 元素来包含视频的标准方法。视频格式当前video支持三种视频格式Ogg Firedfox 3.5以上Opera 10.5以上支持,Chrome支持MPEG 4 IE 9.0以上Chrome Safari3.0以上支持WebM Firefox 4.0以上Chrome Opera10.6以上支持video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个

2020-08-18 22:29:47 135

原创 原生JS实现Flappy Bird小游戏(本地化存储)

文章目录1.准备2.难点(1)、创建柱子(2)、柱子移动(3)、碰撞检测(4)、本地存储(5)、成绩展示1.准备该游戏主要涉及的知识:JavaScript基础ES6基础(模板字符串,箭头函数,模块化)H5 Web Storage知识2.难点(1)、创建柱子由于两根柱子之间的距离是150,柱子的最小长度为50,页面的大小为600,(600-150)/2 = 225, 因此柱子的长度范围为50-275.通过Math.random函数来实现随机生成长度不同的柱子。createEle()函数用

2020-08-18 12:22:38 383

原创 ES6之解构

文章目录一、对象解构1.对象解构2.解构赋值3.解构中默认值4.为非同名局部变量赋值5.多重解构二、数组解构1.数组解构2.解构赋值1) 实现变量的交换3.默认值4.多重解构5.展开运算符(不定元素)1)实现数组复制三、参数解构ECMAScript5及早期版本从数组和对象中获取特定的数据let options = { repeat: true, save: false}let repeat = options.repeat, save = options.save;从option

2020-08-11 21:35:07 315

原创 ES6字符串模板

ES6之前处理字符串繁琐的两个方面:多行字符串 字符串拼接ES6引入了字符串模板,通过``进行操作,在字符串的开头和结尾加上`即可,如果要在字符串中拼接js表达式,只需要在模板字符串中使用${JS表达式} let name = 'galaxy'; let age = 18; let school = '天天大学' let test = `${name}今年${age}岁了,在${school}上学 哈哈哈哈哈 安吉和继承 超激动了卡平均成本 ` console.log(test);

2020-08-11 14:05:02 168

原创 ES6之async和await

文章目录1.含义2.返回Promise对象3.await命令1.含义ES2017 标准引入了 async 函数,使得异步操作变得更加方便。async 函数就是 Generator 函数的语法糖。Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用yield语句注明。使用Generator函数实现文件读取 //封装成Promise对象 const fs = require('fs'); const readFile = function(fileN

2020-08-11 13:51:23 188

原创 ES6 模块化

文章目录1.模块化2.模块化的好处3.ES6模块化语法4.导出的基本语法(export)5.导入的基本语法(import)1.导入单个绑定2.导入多个绑定3.导入整个模块6.导入和导出式重命名7.模块的默认值1.导出默认值2.导入默认值8.export 与 import 的复合写法9.浏览器的模块加载1.模块化将一个大的程序文件拆分成许多小的文件,然后再将小的文件组合起来。2.模块化的好处防止命名冲突实现代码复用高维护性3.ES6模块化语法 模块化功能主要由2个命令构成 export

2020-08-10 16:40:56 252

原创 ES6 Class基本语法

文章目录1.类的声明2.类与自定义类型3.常量类名4.类表达式5.命名类表达式6.静态成员7.类的继承8.子类对父类方法的重写9.Class的取值函数(getter)和存值函数(setter)1.类的声明最早期的JavaScript中没有类的概念,最相近的思路是创建一个自定义的类型:首先创建一个构造函数,然后定义另一个方法并赋值给构造函数的原型。<script> function Person(name){ this.name = name; } Person

2020-08-09 23:49:49 199

原创 ES6之Promise

1.异步编程的背景知识JavaScript引擎是基于单线程时间循环的概念构建的,同一时刻只允许一个代码块在执行。当多个代码块同时访问并改变状态的时候,程序很难维护并保证状态不会出错。因此引入了回调函数来改进异步编程模型。2.回调模式异步代码都会在未来的某个时间点执行。const fs = require('fs');fs.readFile("example.txt", function(err, contents){ if(err){ console.log(err) ; } co

2020-08-07 15:36:50 96

原创 ES6中Set和Map方法

文章目录1.Set2.Map1.SetSet集合是一种无重复元素的列表声明一个set集合let s = new Set();let s1 = new Set([1,2,3,4,5]);求元素的个数console.log(s1.size);添加元素s1.add('55');删除元素s1.delete(1);检测set集合中是否存在某个值,存在返回true,不存在返回falseconsole.log(s1.has('55'))清空元素s1.cl

2020-08-06 15:22:33 437

原创 ES6 let和const的使用

文章目录1.var声明和提升机制2.块级声明3.let声明4.const声明1.var声明和提升机制JavaScript中在函数作用域或者全局作用域中通过关键字var 声明的变量,会被提升到当前作用域的顶部声明的变量(提升机制)例如下列代码<script> function getValue(item){ if(item){ var value = "1"; return value; }else { return null } } &

2020-08-06 10:49:15 85

原创 面向对象编程--继承

目录1、类式继承2、构造函数继承1、类式继承<script type="text/javascript"> //声明父类 function SuperClass () { this.superValue = true; } // 父类原型 SuperClass.prototype.getSuperValue = function () { return this.superValue; } // 声明子类 function SubClass ()

2020-08-02 17:52:07 86

原创 JavaScript定义一个既可以为函数原型添加方法又可以为自身添加方法的addMethod的方法

<script> // 抽象出一个统一添加方法的功能方法 Function.prototype.addMethod = function(name,fn){ this[name] = this.prototype[name] = fn; return this; } var methods = new Function(); // 给自身添加方法 methods.addMethod('sayName', function(.

2020-07-30 13:46:05 485 2

原创 JavaScript定义一个可以为函数添加多个方法的addMethod方法

<script> // 抽象出一个统一添加方法的功能方法 Function.prototype.addMethod = function(name,fn){ this[name] = fn; } var methods = new Function(); methods.addMethod('checkName', function(){ // 验证姓名 }) methods.addMethod('checkEmai

2020-07-30 13:31:15 591

原创 JS 剑指 Offer 11. 旋转数组的最小数字

把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素。例如,数组 [3,4,5,1,2] 为 [1,2,3,4,5] 的一个旋转,该数组的最小值为1。示例 1:输入:[3,4,5,1,2]输出:1示例 2:输入:[2,2,2,0,1]输出:0二分法numbers[mid] > numbers[right] 表明最小值在当前区间右半边,因此left右移numbers[mid] < numbers[ri

2020-07-22 12:05:59 159

原创 JS 剑指 Offer 57 - II. 和为s的连续正数序列 滑动窗口法

输入一个正整数 target ,输出所有和为 target 的连续正整数序列(至少含有两个数)。序列内的数字由小到大排列,不同序列按照首个数字从小到大排列。示例 1:输入:target = 9输出:[[2,3,4],[4,5]]示例 2:输入:target = 15输出:[[1,2,3,4,5],[4,5,6],[7,8]]分析定义两个指针,left和right指向数组的第一位,定义一个mid=target/2,由于序列内的数字由小到大排列,如果在mid之前都没有满足条件的那么在m

2020-07-14 21:31:17 127

原创 JS 剑指 Offer 59 - I. 滑动窗口的最大值

给定一个数组 nums 和滑动窗口的大小 k,请找出所有滑动窗口里的最大值。示例:输入: nums = [1,3,-1,-3,5,3,6,7], 和 k = 3输出: [3,3,5,5,6,7]解释:滑动窗口的位置 最大值[1 3 -1] -3 5 3 6 7 31 [3 -1 -3] 5 3 6 7 31 3 [-1 -3 5] 3 6 7 51 3 -1 [-3 5 3] 6

2020-07-14 21:05:36 101

原创 JS 剑指 Offer 64. 求1+2+…+n

求 1+2+…+n ,要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句(A?B:C)。示例 1:输入: n = 3输出: 6示例 2:输入: n = 9输出: 45不能使用for、while、if、else、switch、case等关键字及条件判断语句(A?B:C)那么求和公式 (n(n+1))/2 不可取,可以使用&&的短路运算来进行求解 0 && n =0,1&&1 =1, 2&

2020-07-14 16:17:40 130

原创 JS 剑指 Offer 53 - II. 0~n-1中缺失的数字 二分法

一个长度为n-1的递增排序数组中的所有数字都是唯一的,并且每个数字都在范围0~n-1之内。在范围0~n-1内的n个数字中有且只有一个数字不在该数组中,请找出这个数字。示例 1:输入: [0,1,3]输出: 2示例 2:输入: [0,1,2,3,4,5,6,7,9]输出: 8二分法情况1:数组中都是有序的,例如[0,1,2] 那么缺少的是3,这种情况只需要return nums.length情况2:数组中间有缺失的数字,可以通过二分法找出缺失的数字,根据数组的下标是连续且递增的,通过判断

2020-07-11 17:33:54 182

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除