Mangooxx-CSDN博客

原创【背题记录】算法基础-岛屿的数量（200）

人太蠢，每天背点题，居安思危LeetCode 200 -岛屿的数量题目描述：LeetCode 200 -岛屿的数量-题目地址给你一个由 ‘1’（陆地）和 ‘0’（水）组成的的二维网格，请你计算网格中岛屿的数量。岛屿总是被水包围，并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。代码记录function islandNums(grid) { // 先获取到数组的长、宽 const m = grid.length, n = grid[0].length .

2022-05-09 22:56:36 1151

原创【web】图片加载失败,重试三次, 若失败则使用占位图片

需求描述:加载图片过程中,可能遇见网络不好第一次加载不出来,那么此时,需要重复加载三次,若还是失败就使用默认的占位图解决思路监听图片的error事件, 当图片上的error事件被触发,就进入我们自定义的重新加载方法, 其实方法中, 就是需要一个定时器,在规定的时间内, 去给img的src重新赋值, 每一次赋值就相当于刷新图片一次, 当重试的次数,达到我们规定的次数,就将img的src设置为我们默认的占位图, 然后, 这里需要取消定时器.基本实现1. 监听图片的error事件2. 开启一个

2022-05-09 22:39:20 1455

原创 [js设计模式]行为型设计模式--观察者模式(订阅发布者模式

观察者模式在《javascript设计模式》这本书中, 在写到观察者模式的时候, 上来就第一句就是, 观察者模式又称发布订阅者模式.说实话, 作为一个设计模式小白,我不太能分清楚他们到底是不是一种模式, 那就从先实现一个观察者模式开始.在平时的开发过程中, 使用过EventBus,其实EventBus就是一种观察者模式的实际应用.初步实现1. 观察者模式, 需要定一个装注册事件容器,这里使用一个对象, 然后, 需要订阅、发布、取消订阅的三个方法.class Observer {

2021-05-19 12:15:05 203 1

原创 [Node系列] 模块机制一

1. CommandJS的出发点1.1. CommandJS的模块规范CommandJS的模块规范分为三个部分: 模块引用、模块定义、模块标识.模块引用模块引用的方式:const fs = require('fs')// Node核心模块// 用户定义文件模块const add = require('./add.js') // 这里的.js可以省略(后续会说到模块的定义/模块的导出导出文件通过exports对象导出当前模块中的方法或者变量.//math.js exports

2021-05-19 12:14:10 113 1

原创 javascript继承篇

theme: cyanosis继承的7种方式原型链继承构造函数继承组合继承原型式继承寄生式继承寄生组合式继承Es6 class extends 继承原型链继承:将父亲的实例作为孩子的原型.优点: 父亲的方法可以被子类复用缺点:父类的所有属性都会被子类进行共享, 更改了一个子类的属性, 其他的子类的属性也一起变了.子类的实例不能给父类进行参数的传递.function father (){}function son (){}// 原型指向被继承的实例化上s.

2021-05-19 12:13:18 67

原创一年前端(实际还不到, 面试题

A 公司面试笔试题:input中新增的type.css中上下垂直居中.css中postiton的几个值和各自的作用自己手写一个ajax.js的柯里化实现.手写js中的bind方法.数组的排序和去重.逻辑题: 就是类似考公那种题吧.面试: 自己说一下vuex基础吧.然后小哥开始讲公司的发展,还有现在在做的项目.B公司笔试题:html5/css3有哪些新特性, 移除了哪些元素.css常见的选符. 哪些属性可以继承.优先级怎么计算.em和px的区别sass/less

2021-04-29 16:17:23 284

原创面试官: 你会手写实现PromiseA+么? 小白的我: 这......, 要不我试试(系列三

问题描述在之前的手写Promise中, 我们已经完成了resolve,reject,then,all方法.下面我们继续完成一下race等方法.解决思路首先race方法, 和名称一样, 比赛嘛, 那就是看第一名喽????, 所以, race的处理逻辑就是, 谁第一个执行完成, 就输出那个. 其他的不管.下面我们就来初步实现一下race这个方法.初步实现定义一个类方法race, 传递的参数是一个数组类型, 如果不是数组类型就需要进行报错提示.然后, 遍历这个数组中的对象, 然后, the

2021-04-23 11:38:43 80

原创面试官: 你会手写实现PromiseA+么? 小白的我: 这......, 要不我试试(系列二

问题/需求:话接上回, 面试官已经让我们实现了基本的Promise, 其中包括promise中的回调resolve和reject, 还有处理完状态返回的.then方法, 那么下面,我们将继续实现Promise中处理多个异步请求/处理完成后, 再一次输出的方法all解决/处理步骤分析过程:首先老样子先分析一下all方法中, 需要传递的参数, 其实all方法的参数就是一个数组, 这个数组中按理说, 需要存储的都是promise类型的数据, 但是(都知道, 这世间不是所有的情况都是理想状态, 所以,

2021-04-23 11:37:53 126

原创面试官: 你会手写实现PromiseA+么? 小白的我: 这......, 要不我试试(系列一

问题/需求:手写Promise A+规范. 啥是A+其实我也不是很懂, 好像就是平时用的那一种? 不管了, 先上了再说.解决/处理步骤:分析过程:Promise, 先得想清楚, 这玩意儿能干啥, 可以干啥, 才能反向推出, 我们该咋写.Promise有可以传递参数, 参数一个, 而且是个函数, 准确的说是两个函数, 而且是钩子函数(hook 就是resolve和 reject, 我们平时在使用的时候, 如果内部处理完成符合我们的预期就resolve, 不符合或者报错就使用reject.pr

2021-04-23 11:37:07 105

原创 Vue中基于Axios的封装及使用

问题/需求描述:在项目开发过程中, 如果每一次调用网络请求都去写一次请求的配置参数, 例如: header中的属性(比如需要携带token、cookie等身份识别信息, 或者传递参数的格式content-type, 就比较麻烦. 所以,这里就在axios上对需要固定配置或者不经常改动的信息进行一下初始化.初步实现首先导入axios包, 使用npm命令: npm i axios -S然后在项目中导入: import axios from ‘axios’, 这里使用的是ESM导入方式.然后就是针

2021-04-23 11:35:59 118

原创 Vue-style中的scope属性

scope出现的原因:在组件的style中, 可以使用scope属性, 限制当前的样式只作用于当前的组件.实现原理:使用这个属性后,Scoped Vue CSS被postcss工具构建成.{className}[data-v-{componentHash}]这样的属性, 然后这个componentHash值将作用于当前组件的所有元素.但是, 这样又有一个问题, 引用的组件内的样式就无法修改了. 所以, 可以有两种方式对带有scope的组件样式进行修改(样式穿透):.containe

2021-04-23 11:35:21 1547

原创 Promise.all()实现根据传入url顺序, 返回按序结果

问题描述:网络请求是异步的, 如果使用for循环, 进行好多的数据请求, 返回的数据, 很可能不是按照用户输入的顺序返回的.解决方法:这里可以使用Promise.all()方法实现, 异步网络请求, 返回的数据也是按序的.export default functionlaodFiles(dataFiles) { return new Promise(((resolve, reject) => { // promise.all保证了, 输出的顺序和输入的是一致的

2021-04-16 15:20:02 1660 2

原创 postman请求可以, 微信小程序请求就不行, 问题出在哪?

这段时间做了个项目, 遇见了一个问题(也不是问题, 是本菜鸡太渣了问题描述:请求一个后端post接口, 当在postman调试工具里面, 传递参数到后端, 是可以的, 但是, 小程序带的参数, 后端就获取不到, 自然获取不到想要的返回结果.问题解决:后来发现, 其实就是post接口在使用的时候有问题,get请求是可以的, 因为, 小程序使用的默认传参方式是appliaction/json格式的,这里, 我们将header里面的参数的传递格式改变一下, 改为'content-type':

2021-04-15 17:53:21 2485 1

原创微信小程序获取手机号码(仅前端部分

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>第一步,获取手机号码之前, 需要调用wx.login()方法去获取到code(当然, 如果你放在getPhoneNumber里面也是可以的.第二步,需要用户手动点击获取手机号的按钮, 触发getPhoneNumber方法.// 放在onload()方法中, 在页面一加载完成就调用 wx.login({

2021-04-15 17:42:43 1028

原创 Js面试手写系列

手写call手写Promise手写call手写apply手写bind手写instanceof数组的复合和拍平手写Ajax节流和防抖手写EventEmitter函数柯里化手写LRU缓存机制手写router路由手写图片懒加载手写node获取当前目录下的文件手写Promise.all()// 手写promise.allfunction PromiseAll(promises) { return newPromise((resolve, reject) => { .

2021-04-08 13:17:28 129

原创 Css 帧动画实现魔术小球

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt

2021-04-07 14:45:37 128

原创 css 帧动画实现从中间向两边延伸

css 帧动画实现从中间向两边延伸html <div id="box"> <div class="border"></div> </div>css#box{ width: 10vw; height: 10vw; background-color:pink; position:relative; }

2021-04-07 14:43:30 2732

原创 Js函数参数, 传递的是值还是地址? 都是传值!!!

普通数据类型传递的是值/** * 全局作用域、函数变量、函数内部作用域 * */let a = 10let b = 1function sum(a, b){ a = 11 b = 2 console.log(a) // 11 console.log(b) // 2}console.log(a) // 10console.log(b) // 1// 记住，普通数据类型传递的是参数的值，不是参数的地址，所以，不会修改参数真正的数据sum(a.

2021-03-09 16:41:08 1171

原创 Js求两个数组的并集、交集

求并集方法一/** * 求两个数组的并集 * */const a = [1, 2, 3, 4, 5, 19, 10]const b = [2, 3, 4, 7, 90, 19, 89]// 求并集// 方法一: function sum(a, b) { let newArr = [] // 两边循环找到，两者共同的，然后删掉一个，最后，两个合并一下. for (let i = 0; i < a.length; i++) { for

2021-03-03 00:03:16 1086

原创 Symbol到底是个啥玩意

Symbol基础:Symbol是唯一的数据结构, 只要你声明了Symbol, 那么就是唯一的了.直接声明: let ck = Symbol('ck') // 后面的‘ck’不是Symbol存储的值, 只是为了区别不同的Symbol的描述. let kb = Symbol('kb') console.log(ck); console.log(kb);2.通过for声明let ck1 = Symbol.for('ck1')let kb1 = Symbol.for('kb

2021-03-02 14:35:07 2807 3

原创数组转二维数组, 数组拍平

先将数组转成二维数组// 原数据: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]// 这是将一维数组转成二维数组let newArr= []function arr2(){ for(let i = 0; i<arr.length;){ newArr.push(arr.slice(i, i+=5)) }}// 输出结果: [ [ 1, 2..

2021-03-02 14:26:47 571

转载面试遇见了手写Promise, 记录一下

class PromiseV2 { static PENDING = 'pending' static FULFILLED = 'fulfilled' static REJECTED = 'rejected' // 构造器，会在类被创建的时候自动执行 constructor(exector) { //设置初始化状态 this.value = null this.status = PromiseV2.PENDING

2021-03-02 14:22:20 107

原创 js函数柯里化

函数的柯里化第一次听这玩意儿, 感觉很高级, 以为是类似数字图像处理里面的什么什么化处理. 学习了一下原来是, 函数里面套函数, 然后返回函数, 就是函数的参数是函数.直接上个简单的例子:function add(x,y) { // 直接接收两个参数, 然后返回即可. return x + y}function currying(x) { // 里面是一个匿名函数, 接收第二个参数 return function (y) { return x + y }}

2021-02-22 12:09:13 50 1

转载 webpack结构梳理

WebpackWebpack的基本结构:entry: 默认值是 ./src/index.js, 是用来告诉工具, 应该从那里进入.单个文件入口:entry: './path/to/my/entry/file.js'多个文件入口:entry: { pageOne: './src/pageOne/index.js', pageTwo: './src/pageTwo/index.js', pageThree: './src/pageThree/index.js'

2021-02-20 22:26:50 410

原创 git 保存当前修改, 切换分支, git 新建分支并提交到远程

如果开发着业务, 另一个分支有bug要改, 怎么办:如果当前分支上有修改但是没有提交, 切换到其他分支就会报错: error: Your local changes to the following files would be overwritten by checkout然后会有提示: Please commit your changes or stash them before you switch branches**解决方法**也给了:方法一: 直接将现在修改的内容commit..

2021-02-20 15:28:00 1609 1

原创 Vue2中, 监听对象的某个属性

监测对象{}中的某个属性.方法一: 只使用 watch方法 new Vue({ el: '#app', data(){ return { // 初始的数据对象 rowObj:{ rowUrl:'', // 其他数据 name: 'kobe', age:43 } } },

2021-02-18 21:01:44 3600

原创 Vue2项目, 打包后, 页面显示空白

在Vue2项目打包后, 发现生成的index页面为空白这里的解决办法修改router文件中的mode, history模式, 会让访问路径变得简洁, 没有#, 不过, 需要后端的处理, 也可能导致访问有问题, 所以, 还是使用了h5的hash.const router = new Router({ routes, // mode: 'history', // 将mode模式改为hash. mode: 'hash'})这里只是这一次遇见的问题, 具体问题还是需要具体对待, 其他

2021-02-18 11:12:58 1183

原创 Es6中Proxy使用

Es6中Proxy使用var obj = new Proxy( // 第一个参数, 是一个对象参数target, 其中的内容就是参数的名称和原始值. { count: 10 }, // 第二个参数,handler, 参数的内容是处理的方法, 这里为get、set两个方法. { get: function (target, propKey, receiver) { console.log(`getting ${p

2021-02-12 23:22:37 136

原创 Vue2与Vue3的数据双向绑定的监听方法

Vue2中使用的是Es中的对象Object的definePrototypeobject的definePrototype方法????这里方法.let counter = {} let val = 100let newVal = 100Object.defineProperty(counter,'val',{ get(){ console.log('数据被获取') return val }, set(){ console.log('数据被修改/设置') val = new

2021-02-12 23:00:00 278

原创 js时间字符串比较大小

时间字符串比较大小原理:借用Date.parse()方法, 将‘年/月/日’ 转化成距离 1970 年 1 月 1 日的毫秒数. 然后比较大小.下列方法直接使用了sort()函数, 也可以自己使用冒泡或者快排.方法:>// 使用Date.parse()方法, 参数是‘年/月/日’格式, 所以获取到的‘年-月-日’需要进行转化. function timeStringSort() { let arr = ['2020-1-11', '2020-12-11', '2020-10-11'

2021-02-10 23:30:12 1171

原创 Mac修改截屏文件存储位置

Mac修改截屏文件存储位置defaults write com.apple.screencapture location ~/Desktop/screenShoot

2021-02-02 16:05:25 329

原创 js对象排序

js对象, 里面的所有数据都是键值对, 怎么排序let summaryArr = []// 先将对象都转成一个个对象, 然后放进数组 for(let k in summary) { summaryArr.push({ prop: k, value:summary[k] }) } // 再对数组中的值value进行排序. summaryArr.sort((a, b) => b.value - a.value)排序前排序后:

2021-01-30 13:00:50 148 2

原创 js基本数据类型判断

// 注意, 这里使用typeof 输出的都是小写的基本数据类型, 而且都是字符串的格式, // 所以, 在判断一个数据的数据类型的时候, 后面的判断值是小写的字符串类型 var un = null console.log(typeof un) //object var unde = undefined console.log(typeof unde); // undefined var bool = true console.log( typeof bool); /

2021-01-28 16:18:16 72 1

原创小男孩对小女孩说出那句话了么

setTimeout(() => { alert('???? ???? ????')}, 0);let lifefor(let min of life ) { spend(min)}

2021-01-28 15:57:02 104

原创 Js call、 apply、 bind

js 中的call apply bind的学习function add(a, b) { console.log( a + b); }function sub(a, b) { console.log(a - b); }// 最外面是谁, 或者是谁调用的了什么方法就是哪个. // call 可以改变一下 this的指向问题. // 参数: this指向的对象, argument1、argument2、argument3、、、add.call(sub, 3, 4) //

2021-01-27 17:40:21 128 4

原创 Vuex3(对应Vue2.x) & Vuex4(对应Vue3.x)

VueX 的学习瞎叨叨: 通过长时间的学习和搜索过程中发现, 好多人对Vue, Vuex,Veu-router, Vue-cli之间的版本有很多混淆, 看到标题是Vue3.x, 点进去, 发现还是new Vue({}), 其实, Vue3.x应该是createApp(App).还是稍微整理一下, 贴在下面:vue-versionnameversionVue2.xVuex3.xVue2.xVue-router3.xVue2.xVue-cli3.x 4.x

2021-01-27 16:21:32 3207

原创关于Vue、Vue-router、Vuex、Vue-cli版本

关于Vue、Vue-router、Vuex、Vue-cli版本瞎叨叨: 通过长时间的学习和搜索过程中发现, 好多人对Vue, Vuex,Veu-router, Vue-cli之间的版本有很多混淆, 看到标题是Vue3.x, 点进去, 发现还是new Vue({}), 其实, Vue3.x应该是createApp(App).还是稍微整理一下, 贴在下面:vue-versionnameversionVue2.xVuex3.xVue2.xVue-router3.x

2021-01-27 16:19:34 3656

原创 SSH连接服务器、查看端口占用、杀死端口占用

SSH连接服务器ssh 用户名@IP地址 -p 端口号查看端口被占用lsof -i:8888(port)杀死占用端口进程kill xxxx(这里是port的PID, 不是端口号)

2021-01-27 14:22:01 2047

原创前端简单几个算法

/** * 不借助变量交换两个数的值 */ function swap(x, y){ x = x - y // 5, 2 x = 3 y = x + y // 3 2 y = 5 x = y - x // 5 3 x = 2 return [x, y] } const res = swap(1, 2) console.log(res);

2021-01-27 11:23:16 128 1

原创 leetcode 674-最长连续递增序列

/** * 简单题难度: * 给定一个未经排序的整数数组，找到最长且连续递增的子序列，并返回该序列的长度。* 连续递增的子序列可以由两个下标 l 和 r（l < r）确定，如果对于每个 l <= i < r，都有 nums[i] < nums[i + 1] ，那么子序列 [nums[l], nums[l + 1], ..., nums[r - 1], nums[r]] 就是连续递增子序列。来源：力扣（LeetCode）链接：https://leetcode-cn.com

2021-01-27 10:33:31 70 1

基于web的购物商城及微信小程序开发设计

空空如也