前端
独酌101112
热爱前端的一个小白
展开
-
使用nvm更换node版本
背景是这样的:今天在下载whistle的时候,无论使用哪种方式,都无法成功下载,表现为执行w2命令时,报bash: w2: command not found错误,经过leader指导,更换node版本解决。之前写过一篇博客简单快速更换node,现在觉得利用nvm可以更快地做到,当然我的笔记本时win10,具体步骤如下:1、在github上下载nvm,nvm下载地址,建议下载nvm-setup.zip,下载后直接点击运行exe文件即可。2、安装之后输入nvm查看是否安装成功,当然这里也会给出nvm操作原创 2021-07-01 20:09:08 · 1336 阅读 · 0 评论 -
css设置背景颜色透明度
使用 opacity属性,参数从0到1.0,完全透明是 0.0,完全不透明是 1.0,参数越小越透明,举个简单的例子:<!DOCTYPE html><html lang="en"><head> <title>Document</title></head><style> .test { background-color: red; opacity: 0.2; .原创 2021-03-31 09:37:50 · 1567 阅读 · 0 评论 -
简单快速更换node版本
我是win10的笔记本,最近接到的需求是依赖于低版本的node,但是我的node版本太高,需要卸载后重新安装低版本,网上搜了很多教程,不过大多数对我帮助不大,不过最后还是成功了,直接进入正题:点击左下角开始栏,输入node并查找(这应该是windows比较友好的一点了),右键查看文件位置,会看到:然后点击uninstall node.js卸载node;这种方式卸载还是比较干净的,不同担心残留问题;进入node官网,node下载,划到底部,选择以往版本下载:进入之后,可以看到之前所有的node版原创 2021-03-30 09:41:19 · 1805 阅读 · 0 评论 -
解决H5中同页面跳转数据不更新
前段时间接到这么一个需求,大体实现为同页面进行跳转:即相同的页面结构,但是所请求的数据不同,所以渲染出来的具体页面也不同,在RN端完成之后,进行RN转H5,测试时发现触发跳转事件之后,虽然url已经改变了,但是页面数据也没有变,抓包查看也没有发现新的请求,于是请教组里的大佬后,先通过对reder进行打断点的方式排查问题,发现页面并没有进行重新渲染,于是进行强制页面刷新,伪代码如下:componentWillReceiveProps(nextProps) { if (nextProps.pr原创 2021-03-02 09:09:13 · 717 阅读 · 0 评论 -
VScode如何在终端运行js文件
之前一直使用webstorm,运行单调的js文件shift+F10即可,后来因为发现做项目还是VScode更好用,于是又转用了VScode,今天在学习TS的时候发现自己居然不会运行js文件,查找了一下成功运行,在这里做下记录:查找安装Code Runner插件,安装完毕之后会在右上角出现三角形符号的按钮,打开指定的js文件,点击该按钮即可运行,并在终端输出结果...原创 2021-02-25 17:07:12 · 6164 阅读 · 0 评论 -
神奇的&&与||运算符
学习RN的过程中发现了一段很有意思的代码: <Text style={{padding: 10, fontSize: 42}}> {text.split(' ').map((word) => word && '????').join(' ')} </Text>大意是将text中的元素全部转为????,但是其中的&&转换方式还是第一次见,于是自己尝试着试验一下,发现还是之前接触到的一个零碎知识点,在红宝书也有过说明,简单来引入一原创 2021-02-24 09:04:03 · 329 阅读 · 0 评论 -
如何在Html中显示‘<‘和‘>‘
html超文本标记语言,由于底层的编译器依照尖括号(< >)来识别标签,因此直接在html中显示尖括号可能会报错的,解决方式是使用“&”开头,“;”结尾,中间加上字符对应的编码拼接的字符串即可: <!-- 显示为小于号(<) --> <div><</div> <!-- 显示为大于号(>) --> <div>></div>...原创 2020-12-31 16:41:52 · 5999 阅读 · 0 评论 -
以时间戳的形式进行加一天操作
最近接到一个需求,在需求里面有个小任务是获取当天日期和次日日期+1两个时间点,当天日期可以从后端接口获取,时间戳格式,但是次日日期是需要前端来计算的,要求也是时间戳格式返回后端。初始的思路是将时间戳转换为Date格式,然后通过getDate加一,再转换为时间戳格式,但这种方式过于繁琐。后来找到一种方法,将当天时间戳+86400,注意要是Number格式,因为经过一天的时间,时间戳的变化是606024,这样就可以简单快捷地得到次日的时间戳。同样的思路计算下一个月,下一年的时间戳也是可以的。...原创 2020-12-31 16:01:35 · 6744 阅读 · 0 评论 -
使用whistle进行API代理
在项目中,前后端通过API进行数据传输,这样就造成了很多很多需求很依赖后端提供的API,如果API数据提供得不及时,对于前端同学来说,无疑是非常难受的,那么如果暂时脱离后端进行本地模拟开发呢?第一种方法是构造伪数据,比如前端使用get请求某项数据,必然会申请一个空间来存放请求到的数据,来看这样一个例子:c_get('请求数据的functionId', data).then(res => {let Arr = res.body ? res.body : []; this.setState(原创 2020-11-30 10:16:05 · 1919 阅读 · 0 评论 -
关于手机代理的走坑记录
开始的时候使用手机连接上笔记本热点,运行项目没有问题,但是因为笔记本是公司配置的,热点名称和密码很麻烦,于是我进行了下个性化修改,完成之后再次使用手机连接,结果无法项目运行,如下报错:很是崩溃,即使重启也没有解决问题,后来博哥给我指出,我的手机未设置代理,于是我设置了一下,因为最开始的时候我是已经设置好了,但是并不知道修改热点账号和密码会导致代理恢复默认,设置如下图所示:需要注意的是,服务器主机名和端口要和自己的笔记本设置一致,最后重启项目,运行成功。...原创 2020-11-19 10:54:16 · 234 阅读 · 0 评论 -
简单快速安装并使用whistle
首先确保本地已安装node.js,可以通过win+r或者git打命令窗口,输入命令node -v,查看node.js版本。输入命令npm install whistle,下载whistle。下载成功之后,输入命令行w2 start -p 8899启动whistle,一般来说whistle的默认端口是8899,如果端口被占用,可以在启动时通过 -p 来指定新的端口。如果输入端口号不存在或者已被占用,whistle会开启默认的8899端口。启动成功之后,可以根据提示进入展现的三个网..原创 2020-11-18 17:09:22 · 947 阅读 · 0 评论 -
扩展运算符转Map结构为数组形式
前面提过,只要是具有遍历器的类数组对象,都可以利用扩展运算符转为真正的数组,同样Map也可以,来看这样一个例子:let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'],]);let arr = [...map.keys()];let arr1 = [...map.values()];console.log(arr);//[ 1, 2, 3 ]console.log(arr1);//[ 'one', 'two', '原创 2020-10-23 22:05:26 · 169 阅读 · 0 评论 -
利用扩展运算符转数组
阮一峰的ES6指出任何定义了遍历器接口的对象,都可以用扩展运算符转为真正的数组。以遍历到DOM节点为例:let nodeList = document.querySelectorAll('div');let array = [...nodeList];但是对于没有部署遍历器Iterator的对象,扩展运算符则束手无策:let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3};let arr = [..原创 2020-10-22 22:26:08 · 506 阅读 · 0 评论 -
手写一发深拷贝
var deepCopy = function (obj) { if(typeof obj !== 'objedct'){ return ; } var newObj = (obj instanceof Array) ? {} : []; for(var key in obj){ if(obj.hasOwnProperty(key)){ newObj[key] = (obj[key] instanceof Object)原创 2020-10-19 21:54:29 · 72 阅读 · 0 评论 -
JS中两种定时器
JS中的的定时器setTimeout()在指定的毫秒后调用函数或者计算表达式传入三个参数code 必需 要调用的函数后要执行的JS代码串millisec 必需 在执行代码前需等待的毫秒数lang 可选一般不写, 选择脚本语言类型setInterval()按照指定周期来调用函数或者计算表达式。方法会不停地调用函数,直到clearInterval调用或者窗口关闭传入三个参数code 必需 要调用的函数或者执行的代码串millisec 必需 周期性执行或者调用code之间的时间间隔lang 可原创 2020-10-18 22:11:10 · 582 阅读 · 0 评论 -
React中两种类组件的最大区别
传送门:React中创建简单的类最大的区别:class关键字创建的组件是有状态组件,而function创建的组件时无状态组件原创 2020-10-17 22:07:51 · 165 阅读 · 0 评论 -
viscode折叠语法
用过viscode和webstorm的同学们可能知道,viscode并不像webstorm那样可以进行代码片段的折叠,但是我们可以为它设置一下://#region//折叠代码内容//#endregion这样就可以方便地进行代码折叠了。原创 2020-10-16 21:39:05 · 349 阅读 · 0 评论 -
采用闭包的思想手写一发防抖和节流
防抖function f(fn, delay){ let timer; return function () { let context = this; let args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); } ,delay); }原创 2020-10-15 21:42:00 · 160 阅读 · 0 评论 -
简述css盒模型
css盒模型就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括标准的W3C盒子模型和IE盒子模型(别称 怪异盒模型)。弹性盒模型是CSS3新增的属性,不要和这两个搞混了。总体来说,盒模型如下如所示,别骂了别骂了,绘画能力有限:这两种盒子模型最主要的区别就是width的包含范围:在标准的盒子模型中,width指content部分的宽度;在IE盒子模型中,width表示content+padding+border这三个部分的宽度。当然height也有所区别,在标准的盒子模型中,height指con原创 2020-10-14 22:21:11 · 525 阅读 · 0 评论 -
HTML元素的分类
关于HTML元素的分类可以说是前端里面一个比较重要的知识点了,面试中,我至少四次被问到了这部分的内容,这里做一下简单的总结。第一种分类是分为块级元素和行内元素:块级元素常见的块级元素:<h1><h6> <p> <div> <ul> <ol> <li>特点:(1)块级元素会独占一行(2)宽度、行高、外边距和内边距都可以单独设置(3)宽度默认是容器的100%(4)可以容纳内联元素和其他的块级元素行内元素原创 2020-10-13 21:55:33 · 186 阅读 · 0 评论 -
JS求树的深度
学无止境const root = { val: 4, left: { val: 2, left: { val: 1 }, right: { val: 3 } }, right: { val: 5, right: { val: 6, righ原创 2020-10-12 21:30:53 · 907 阅读 · 0 评论 -
JS函数的几种声明方式
函数声明function sum(a, b) { return a + b;}console.log(sum(1, 2));函数表达式var sum = function (a, b) { return a + b;};console.log(sum(1, 2));构造函数var sum = new Function("a", "b", "return a+b");console.log(sum(1, 2));需要注意的是,第三种构造函数的写法是不常用的,.原创 2020-10-10 22:06:27 · 1608 阅读 · 0 评论 -
使用viscode编写前端代码的快捷方式
由于之前一直偏向于webstorm,最近一段时间才逐渐上手使用vscode,所以并不知道一些提高编码效率的方法,在这里进行总结一下:初始化,新建一个html文件,敲出一个感叹号(!)然后回车,编辑器就会自动为该文件补全代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic原创 2020-10-09 22:13:15 · 1074 阅读 · 0 评论 -
扩展运算符结合解构赋值生成数组
思考这样一个问题,给定一个数组,将其分为两部分,第一部分是首部元素,第二部分是剩余的部分,如何实现呢?最基本的ES5写法:var list = [0, 1, 2, 3]var a = list[0]var rest = list.slice(1);//ES5console.log(a);console.log(rest);那位for循环遍历的同学先坐下相对来说还是比较麻烦的,来看一下ES6的写法:var list = [0, 1, 2, 3];var a, rest=[];[a, .原创 2020-10-03 16:32:34 · 343 阅读 · 0 评论 -
使用arguments.callee消除函数递归中的紧密耦合
准备好,开始出题了,手写一发简单的阶乘,暂时不用考虑大数溢出的问题:相信同学们很快就能敲出一发:function factorial(num){ var sum = 1; if(num <= 1){ return sum; } else { for(let i=2;i<=num;i++){ sum *= i; } return sum; }}console.log(fa原创 2020-10-02 10:59:41 · 127 阅读 · 0 评论 -
手写一发bind()模拟
Function.prototype.my_bind = function(context) { var args = Array.prototype.slice.call(arguments, 1); var self = this; return function () { var innerArgs = Array.prototype.slice.call(arguments); var finalArgs = args.concat(inner原创 2020-09-28 19:53:56 · 87 阅读 · 0 评论 -
<a>标签中的选择器及其触发顺序
<a>标签中的四个选择器link 设置a对象未被访问前的样式属性visited 设置a对象在其链接地址已被访问过时的样式属性hover 设置鼠标悬停时的样式表属性active 设置对象在被用户激活时的样式表属性触发的正确顺序,CSS遵循“就近原则”:link visited hover active...原创 2020-09-26 21:40:45 · 364 阅读 · 0 评论 -
笔试合集7
题目描述:计算n!末尾包含0的个数。具体描述记不太清了,因为是在线编程,不允许使用本地的代码编辑器,还是比较难受的,话不多说,先上代码:function foo(n) { if(n<0){ return "Error"; } else if(n>=0 && n<5){ return 0; } else { var arr = [0,0,0,0,0,0]; for(var i=6;i&原创 2020-09-25 21:54:23 · 97 阅读 · 2 评论 -
简述深浅拷贝
1、深拷贝,复制目标元素,当该元素与目标元素其中有一个发生变化,另一个不会变化;拷贝得太深了,都有了自己的地址,两个内存地址不相干了;比如小明买了台笔试本电脑,小刚比较喜欢,也买了一台,小刚不小心摔坏了自己的笔记本,但是小明的笔记本是没事的。2、浅拷贝,复制目标元素,当该元素与目标元素其中有一个发生变化,另一个不会变化;拷贝得比较浅,还是要依赖于源地址,两个元素指向得是同一个内存地址;比如小明买了条笔记本电脑,小刚借去玩,结果小刚不小心摔坏了,结论是小明的笔记本坏了。深拷贝是一种赋值浅拷贝是一种赋址原创 2020-09-23 21:27:24 · 174 阅读 · 0 评论 -
正则表达式字面量与构建函数创建的每一个新RegExp实例
小红书上有这样一段代码:var re = null;for (let i = 0; i < 10; i++) { re = /cat/g; console.log(re.test("catastrophe"));}for (i = 0; i < 10; i++) { re = new RegExp("cat", "g"); re.test("catastrophe");}表示第一个for循环输出结果为:truefalsetruefalse原创 2020-09-22 15:34:04 · 120 阅读 · 0 评论 -
五大浏览器及其内核
浏览器名称 所用内核 IE Trident Chrome Webkit->Blink Firefox Gecko Safari Webkit Opera Presto->Webkit->Blink 参考博客:https://www.jianshu.com/p/f4bf35898719...原创 2020-09-14 10:47:23 · 127 阅读 · 0 评论 -
前端笔试题13 Function.prototype.call.bind
下面这段代码输出结果是什么呢?Function.prototype.san = function () { return Function.prototype.call.bind(this);};console.log(Array.prototype.push.san()([], 1, 2));答案:2解析:在做这道题之前,一定要保证自己明白什么是原型,什么是call、apply、bind,如果不太明白或者没有听说过的话,那赶快去恶补一下吧,接下来进入正题,很多同学可能没有见过将原创 2020-09-13 11:34:36 · 540 阅读 · 0 评论 -
JS十进制转为16进制
这是一篇水文console.log(n,toString(16));原创 2020-09-12 21:47:43 · 611 阅读 · 0 评论 -
简单介绍CSP
前面的文章里,提到过什么是XSS攻击及,感兴趣可以去看一下关于XSS攻击的一些总结对于其防御有两种方式,第一种是在客户端进行编码,第二种是在HTTP首部配置set-cookie两个属性httponly和secure两个属性,其实还有另外一种方式,在...原创 2020-09-11 20:23:54 · 415 阅读 · 0 评论 -
React中使用setState修改state的值并输出其修改后的结果
export default class BindEvent extends React.Component{ constructor(){ super() //私有数据 this.state = { msg:'嘿嘿', name : 'zs', age : 22, gender : '男' } } render(){原创 2020-09-11 11:05:27 · 1930 阅读 · 0 评论 -
React中绑定事件
首先来看一个很简单的例子:<button onClick={function() { console.log('Hello') } }>按钮</button>这样写是没问题的,可以注意到,点击事件onClick的写法,其中的c是大写,如果改为了onclick,则会无效,因为react有一套自己的事件绑定机制,不同于原生JS,其事件名是小驼峰命名。如果将函数置于外部,增强其可复用性,则有两种引用方式:普通引用,代码如下:<button onClick={this.原创 2020-09-11 10:27:56 · 167 阅读 · 0 评论 -
前端笔试题12 JS的解析顺序
以下代码执行后, num 的值是?var foo=function(x,y){return x-y;}function foo(x,y){return x+y;}var num=foo(1,2);答案:-1解析:JS中变量声明、函数声明都会被提升到作用域顶处;当出现相同名称时,优先级为:变量声明< 函数声明 < 变量赋值;这里的第一个foo是变量赋值,第二个foo是函数声明,在JS的解析过程中,会优先处理第一个foo...原创 2020-09-09 21:17:14 · 768 阅读 · 0 评论 -
前端笔试题11 立即执行函数
假设 output 是一个函数,输出一行文本。下面的语句输出结果是什么?output(typeof (function() {output(“Hello World!”)})());答案:Hello World! undefined解析:看到结尾有(),这是个立即执行函数,所以先输出数据,在这个立即执行函数执行完毕之后,没有返回值,或者或默认返回undefined,所以判断为undefined。任何函数执行完一次,如果没有 return 返回值和声明变量接受返回值,都会立即消失,永远找不到原创 2020-09-09 16:44:50 · 280 阅读 · 0 评论 -
React搭配bootstrap并为scss或less文件启动模块化
React的灵活性可以很好地与已知库或框架搭配,以bootstrap为例,首先进行bootstrap的安装:cnpm i bootstrap@3.3.7 -S然后再所需文件内导入该框架:import bootobj from 'bootstrap/dist/css/bootstrap.css'由于该包被安装到了node_modules目录下,因此可以省略该目录,直接以包名引入自己的模块或样式表...原创 2020-09-08 16:02:44 · 284 阅读 · 0 评论 -
前端笔试题10 原型链
提示:这是一道很比较绕的题目。。。下面结果为不为真的表达式是A null == undefinedB [1,2,3].splice(1,1,1) == [2]C let Mi = new Function();Mi.proto.proto == Object.prototypeD ‘1’ === true答案:B [1,2,3].splice(1,1,1) == [2]‘1’ === true解析:A是true,因为判断符号不是全等,但是如果是全等的话,得到的会是falsecons原创 2020-09-06 11:13:02 · 341 阅读 · 0 评论