自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

小虾的博客

小前端一枚,分享、记录一下自己所学,加深认识。

  • 博客(43)
  • 资源 (1)
  • 收藏
  • 关注

原创 TS问题之class

类派生类包含了一个构造函数,它 必须调用 super(),它会执行基类的构造函数。 而且,在构造函数里访问 this的属性之前,我们 一定要调用 super()。 这个是TypeScript强制执行的一条重要规则。public在TypeScript里,成员都默认为 public。private当成员被标记成 private时,它就不能在声明它的类的外部(也就是实例、派生类)访问。私有属性不能从外部获取,但是可以通过内部方法让实例可以获取,(js中静态私有属性也是如此)protec

2024-12-01 18:45:44 342

原创 一次搞懂this指向问题

【代码】一次搞懂this指向问题。

2024-12-01 18:40:34 873

原创 全局查找与nginx相关的文件

.全局查找与nginx相关的文件sudo find / -name nginx*

2021-03-29 05:20:33 787

原创 .gitignore中的文件不生效怎么办

原因:是因为gitignore中的配置肯定是在后面添加的,该文件已经commit过,在缓存中已经存在解决办法:git rm -r --cache xxx.js清除该文件的缓存,然后commit,在修改xxx.js该文件就不会在git中提示了...

2020-12-22 19:38:16 245

原创 package-lock.json的作用

package-lock.json的作用今天工作中碰到一个问题,就是把package-lock.json上传了它应不应该上传呢?答案是不应该。它是用来所用当前电脑环境跟依赖包的关系的,保证不会因为包更新导致项目启动不起来,如果上传了,别人拉下来的包不一定能适应自己的电脑环境,项目不一定能起来。所以不能上传。...

2020-12-22 19:33:32 414

原创 js进制转换

普通数字转2、8、16进制js数字默认是10进制的,想要转成其他进制 var num = 102; console.log(num.toString(2)); console.log(num.toString(8)); console.log(num.toString(16)); 2、8、16进制转化10进制 var num2 = 1100110; var num8 = 146; var num16 = 66; console.log(parseInt(num2, 2)) //

2020-12-22 19:07:11 137

原创 阻止屏幕滚动

mousewheelwindow.addEventListener('mousewheel', (e) => { e.preventDefault() }, {passive: false})参考MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

2020-11-19 19:50:17 255

原创 复制文本到粘贴板

选中特定的文本window.getSelection().toString()复制到粘贴板const copyToClipboard = str => { const el = document.createElement('textarea'); el.value = str; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; doc

2020-11-19 15:55:31 183

原创 普通事件代理和jQuery事件代理比较

普通事件代理 <div class="box"> <li>1</li> <li>2</li> <li>3</li> </div> var box = document.querySelector('.box') function delegate (target, selector, type, cb) { ta

2020-10-06 23:36:29 139

原创 js汉诺塔攻略

汉诺塔 tower of hanoi目的:把所有圆盘从第一个移动到第三个上rule 1:一次只能移动一块rule 2:大片不能放在小片上面三个柱子分别叫abc把最下面一块(m)以上的打包看成一块(n)处理把n放到b把m放到c把n放到c完成对于第二步和第四步,我们可以拆解成上述1234不用关心具体怎么实现的,拆分到一块的时候就出效果了,具体拆分过程就交给递归吧 // abc // n个 (n-1)打包从a放到b上 n从a放到c上 把(n-1)打包从b放到c .

2020-09-20 03:59:08 701

原创 前端 尾递归

上回相比于循环,递归的缺陷说到,尾递归,那么什么是尾递归呢?百科中这么解释:说一个函数中在函数末尾调用自己,并且该调用不是在表达式中,就可以称为是尾递归。现在来实现一个尾递归: function tailrecsum(x, sum = 0) { if (x === 0) { return sum } return tailrecsum(x - 1, sum + x) } console.log(tailrecs

2020-09-20 02:01:28 301

原创 相比于循环,递归的缺陷

上回说到,递归和循环的转换问题从斐波那契数列看递归,那么常常有人提到递归的缺陷,说性能不好,真的是这样吗?举个???? function sum (n) { if (n === 1) { return 1 } return n + sum(n-1) } console.log('开始1') let t1 = +new Date() console.log(sum(10000)) // cons

2020-09-20 01:58:16 164

原创 从斐波那契数列看递归

斐波那契数列:0,1, 1, 2, 3, 5, 8,13,21…第一种递归写法弊端:50往后超级慢 function fibonacci (n) { if (n === 1) { return 0 } else if (n === 2) { return 1 } else { return fibonacci(n-1) + fibonacci(n-2) } }第二种写法弊端:没有弊端,100个都非常快.

2020-09-20 01:38:42 138

原创 babelrc 和 babel.config.js区别

babelrc 只会影响本项目中的代码babel.config.js会影响整个项目中的代码,包含node_modules中的代码推荐使用babel.config.js

2020-09-10 10:19:47 4873

原创 antdesign vue select选中问题

<select name="public-choice" v-model="couponSelected" @change="getCouponSelected"> <option :value="coupon.id" v-for="coupon in couponList" >{{coupon.name}}</option>

2020-09-04 15:56:14 3122

原创 输入npm i 后 npm干了些什么

npm 包更新机制语义化版本1更新机制^1.2.3 版本兼容 会更新到1.2.3 到 2.0.0之间的版本,不包含2.0.0~1.2.3 大致相当于同一个版本 会更新到1.2.3 到1.3.0之间的版本,不包含1.3.01.2.3 确定版本 只会下载1.2.3版本npm i输入后的包更新顺序从项目package.lock.json中查看依赖版本的integrity属性,比对是否跟本地版本一致如果一致,就跳过这个包的安装如果不一致走3参考package.json中包的版本,然后

2020-09-03 12:55:36 2299

原创 手写深拷贝and why

// 1. 判断是数组就遍历数组,如果是普通的(非对象或数组)就直接赋值,// 2. 判断是对象就遍历对象,判断每一个属性,如果是普工值,就直接赋值,// 3. 不是普通值就调用自己// 4. 最终返回一个对象或数组var obj = { p1: [ { p10: 10 }, { p11: 11 }, { p12: 12 }, 234, 'sss', false, {

2020-08-17 10:33:34 127

原创 什么是闭包

什么是闭包因为一个函数不管该函数在词法作用域中被调用,或者是函数在词法作用域中被返回,然后在词法作用域外部被调用都可以访问其所在词法作用域中的变量函数和对其词法作用域的引用捆绑在一起构成闭包好处:可以实现数据隐藏和封装eg:在函数内部返回对象,通过把闭包函数放在返回对象中的写法,可以实现方法的私有化,也就是数据隐藏。eg:通过闭包可以构造工厂函数,实现封装。如果某一类操作需要传两个参数,第一个参数一样,第二个参数不一样,我就可以把第一个参数放在工厂函数中构造出一个闭包函数,并将其返

2020-08-02 22:29:23 121

原创 原型链面试回答

什么是原型链一个对象有原型对象,它的原型对象也有自己的原型对象,一直往上找,找到Object对象,Object对象的的原型对象是null,在往上就没了。这个像链式一样的结构称为原型链。其本质描述的是对象的一种继承关系。就是说一个对象是怎么来的,是继承自它的原型对象。所以说绝大多数对象,其实都是继承自Object对象,为什么是大多数,因为我们可以通过修改构造函数的原型来破坏这种继承关系,可以,但没必要看图 –> 代表 继承自继承关系:o --> Object.prototype --&

2020-08-02 04:09:13 7086

原创 工作日常--video自动播放

自动播放策略分为3条:静音自动播放是可以的非静音自动播放需要用户有交互操作嵌套iframe页面内部的是否可以自动播放,取决于iframe标签上是否有allow="autoplay"属性,有的话iframe按照上述两条来决定自动播放策略,没有的话内部无法自动播放。当然上述情况发生在iframe中的src非同源的情况下。因为同源情况下,iframe中的autoplay是默认allow的。问题:产品需要视频自动播放,添加autoplay属性,刷新页面,没有自动播放解决方案:1. 第一步就是想到

2020-07-30 20:04:55 725

原创 工作日常--v-for中v-if引起的问题

今天找bug找了好长时间,线上bug问题:列表中左边部分没有显示,有的有显示,没有报错信息解决方法:1. 先是查看列表返回数据,发现全部都有返回数据2. 然后比对数据的条目和没有数据条目区别,发现都一样,只有两个数据略有不同3. id一个3位,一个4位,还有一个渠道列表字段一个为空数组,一个有数据。4. 咋一看都不像会引起错误的5. 把配置的关掉报错关掉,让报错信息暴露出来,通过看是否有报错来定位问题6. 翻看代码找到循环渠道列表字段位置,发现在v-for中有v-if判断,这种是不被.

2020-07-30 19:44:30 355

原创 在线编辑器实现原理

左侧写代码,点击运行,将写好的代码放入右侧写好的iframe中,看效果

2020-07-28 20:21:21 726 3

原创 video自动播放问题(autoplay)

自动播放策略分为3条:静音自动播放是可以的非静音自动播放需要用户有交互操作嵌套iframe页面内部的是否可以自动播放,取决于iframe标签上是否有allow="autoplay"属性,有的话iframe按照上述两条来决定自动播放策略,没有的话内部无法自动播放。当然上述情况发生在iframe中的src非同源的情况下。因为同源情况下,iframe中的autoplay是默认allow的。第一条很好理解第二条不是很好理解:跟用户有交互了还叫自动播放吗?分为两种情况:本页面中切换播放列表点击

2020-07-28 20:11:33 8881

原创 为什么在nodejs环境下执行esModule的方法会报错

es2015是2015年出的标准,在node没有支持的情况下肯定是不能运行的,大概率就是node版本过低导致的,建议更新node版本。经过实验,8.x的node依然不支持一些esModule用法

2020-07-17 12:02:12 673

原创 npm包package和模块modules 的区别

package官方解释A package is a file or directory that is described by a package.json file. A package must contain a package.json file in order to be published to the npm registry.翻译:npm包可以是通过一个package.json描述的一个文件或者文件夹。一个npm包中必须包含package.json文件,因为这样才能发布到npm的官网

2020-07-16 21:22:50 1560

原创 dependencies 和 devDependencies 区别

问:dependencies 和 devDependencies 区别依赖就是一定会用到的东西,开发依赖就是在开发中用到的,发布到线上不一定会用到的问:会有这种场景吗?能举个例子吗比如用我用一个gulp打包一个项目,开发的时候我就需要本地起一个服务来便于开发,就会需要一个gulp-connect的包,但是我线上打包的时候是不需要启动服务的,只需要压缩(gulp-uglify)、转换(gulp-babel)就行了。此时就可以把,gulp-connect放入开发依赖中,把gulp-uglif

2020-07-16 20:55:14 706

原创 什么是eval

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。console.log(eval('2 + 2'));// expected output: 4console.log(eval(new String('2 + 2')));// expected output: 2 + 2console.log(eval('2 + 2') === eval('4'));// expected output: trueconsole.log(eval('2 + 2') === e

2020-07-04 18:00:58 2490

原创 git 全部流程

本地创建仓库git initgit clone 仓库地址本地关联远端仓库git remote add origin master 仓库地址拉取远端更新本地为最新版本git pull本地不是最新版本git pull origin 分支名 --allow-uprelated-histories提交本地为最新版本git push本地不是最新版本git push --set-upstream origin 分支名git push -u origin 分支名创建分支ss

2020-07-04 17:37:34 99

原创 什么是语义化版本

参考npm中关于语义化版本的讲解:第一次发布 1.0.0修改bug,或者增加一些小功能, 补丁发布,1.0.1—1.0.100增加大功能,但不修改原有功能 次要发布,1.1.0—1.100.0颠覆式修改或者很大的更新, 主要发布, 2.0.0...

2020-06-23 14:31:11 301

原创 关于在npm上发布自己的包,详细讲解

请问发布一个npm包需要几步,答:3步首先你要有自己的npm账号,否则发布了包这包的归属人是谁呢?本地有个npm包发布准备自己的npm账号npm官网注册https://www.npmjs.com/signup或者使用命令行注册 npm adduser 然后依次填写:用户名,密码,邮箱 建议使用官网注册,密码规则限制10位,同时可以校验用户名是否可注册注册成功后npm会给邮箱发一个验证地址,复制在浏览器打开即可验证邮箱可用,账号注册完成准备本地的npm包npm in.

2020-06-23 13:49:46 533

原创 一文读懂js中import export module.exports require 区别与联系,附demo

用法npm i anywhere -ganywhere 1234说明ECMAScript的官方语法,在浏览器端使用,主要用来解决js模块化的问题,script上module属性可以用于模块隔离全局变量主要用到export,import(),importexport 导出直接导出 export default ,引入的时候可以自定义接收对象导出 exprt { a: afun, b: bfun}import 静态引入 必须放在含有type=module的script中才能

2020-06-21 14:51:50 604

原创 js时间,倒计时,格式化

// 2小时倒计时function clock (time, fmt) { let h = Math.floor(time / (60 * 60)); let hRemain = time % (60 * 60); let m = Math.floor(hRemain / 60); let mRemain = hRemain % 60; let s = mRemain; let obj = { "h+": ('00' + h).subst.

2020-06-18 18:45:43 570

原创 js时间戳格式化过滤器

先上代码function DATE (timestamp, fmt) { if (!timestamp) { return ''; } let date = new Date(timestamp); // 第一步先替换年份 因为年份跟其他不一样是四位 // let pat = if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, date.getFullYear()).

2020-06-18 18:18:51 592

原创 es5方法遍历对象

var obj = { a: 1, b: 2, c: 3}Object.getOwnPorpertyNames(obj)// ['a', 'b', 'c']ES6 中的方法for … inObject.keys

2020-06-18 01:20:25 3160 1

原创 what is npx (npx 和 npm的区别)

npx 的原理很简单,就是运行的时候,会到node_modules/.bin路径和环境变量$PATH里面,检查命令是否存在。由于 npx 会检查环境变量$PATH,所以系统命令也可以调用。由于这种原因可以调用全局的方法eg: npx ls正是由于这种会到node_modules/.bin路径中的变量,可以使用node_modules中安装的局部包的命令eg: npx gulp test如果不是npx使用npm使用局部node_modules中的命令的话,需要配置在package..

2020-06-17 22:49:11 284

原创 npm 设置淘宝镜像源

查看当前源npm config get registry配置淘宝npm config set registry https://registry.npm.taobao.org配置回npm官方npm config set registry https://registry.npm.org

2020-06-17 22:05:50 449

原创 原生js音频实现

第一步:获取音频元素this.audioEle = document.getElementById('audio')第二步:监听加载完成事件,获取音频时长,监听时间更新,进一步操作this.audioEle.addEventListener('durationchange', (e) => { // e.target.duration 获取 this.maxSliderValue = Math.floor(e.target.duration)});// current.

2020-06-16 14:24:40 595

原创 总结Markdown个人理解

一级标题一级标题二级标题二级标题三级标题四级标题五级标题六级标题如何换行后面跟两个以上的空格加回车换行或者空一行来换行新的一行字体-分割线斜体文本斜体文本粗体文本粗体文本粗斜体文本粗斜体文本三个或三个以上的(—)(- - -)( ___ )( _ _ _ )( *** )( * * * )标识一条下划线删除线下划线注脚使用位置一: 1注脚使用位置一: 2注脚使用位置一: 3引用+号无序列表-号无序列表*号无序列表有序列表

2020-06-11 22:48:36 324

原创 不使用原生bind、call、apply,自定义实现bind、call、apply

bindmdn 解释:返回一个原函数的拷贝,并拥有指定的 this 值和初始参数。Function.prototype.myBind = function (context, ...args) { return (...rest) => { return this.call(context, ...args, ...rest) }}function test (a, b, c) { return a + b + c}test.bind(this

2020-06-11 20:04:31 178 1

原创 前端转码中 escape和encodeURI、encodeURIComponent区别

escape之前的版本的web标准,已经废弃,有些浏览器依然能使用,不建议使用encodeURI现行web转码标准encodeURIComponent现行web转码标准 var set1 = ";,/?:@&=+$"; // 保留字符 var set2 = "-_.!~*'()"; // 不转义字符 var set3 = "#"; // 数字标志 var set4 = "ABC abc 123"; //..

2020-06-11 15:52:00 588

module.zip

关于js模块化的demo,浏览器模块化,node模块化,引入,导出的区别于联系。

2020-06-21

空空如也

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

TA关注的人

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