![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
梦醒在笑
只有自己能拯救我的快乐。
展开
-
认识网站隐私
本文将系统化的介绍网站隐私。原创 2023-06-16 16:06:43 · 417 阅读 · 0 评论 -
windows下node版本管理工具nvm
1、下载nvmhttps://github.com/coreybutler/nvm-windows/releases2、使用nvm2.1. 查看安装过的node版本打开cmd 或者 git bash 窗口都行。输入 nvm list 可以查看你本地安装好了的node版本。2.2. 安装某个node版本使用 nvm install [arch] 安装某个版本的node。version表示你要安装的版本号;arch(可选)指定安装32位或64位版本(默认为系统arch)。2.3. 使用某个原创 2022-02-02 11:53:36 · 1599 阅读 · 0 评论 -
Web前端面试题集锦
喜马拉雅音频学习地址:http://m.ximalaya.com/album/41688615目录待更新:已完成:JS中for of和for in的区别ES6中常见语法package. json中版本管理,~和^的区别JS中有哪些数据类型CSS中的BFCCSS盒模型讲讲JS中的事件机制闭包及其应用浏览器中的HTTP缓存讲一下httpsJS中的作用域JS中的原型和原型链...原创 2021-08-02 19:27:52 · 69 阅读 · 0 评论 -
JS取URL中的参数
平时写前端逻辑,很多时候会遇到,需要取url中参数的情况,这个时候我们可能会取url后面的参数一顿匹配。1、通过serach取到参数// http://127.0.0.1/index?id=999&name=888const {serach = ''}=window.location;// 取到的值就是 ?id=999&name=8882、匹配取参数平时普通的办法,就是取到的值通过正则匹配到id和name。如下。const getvl=(name) => {原创 2021-03-04 09:53:17 · 588 阅读 · 1 评论 -
不错的学习网站
深度剖析:如何实现一个 Virtual DOM 算法https://github.com/livoras/blog/issues/13原创 2021-02-05 11:44:06 · 72 阅读 · 0 评论 -
ES6中常用语法
ECMAScript 6.0(也可以称为ECMAScript2015),ECMAScript 6.0简称 ES6,是 JavaScript 语言的标准。出来的时间已经很久了,但是我们在工作中,有时候也不会使用。今天我们就来介绍一下。1、块级作用域(let、const)块级作用域,就是有{}括号中可用范围,不像之前var定义的变量都是函数作用域。let定义的变量可以改变值,const定义的都是静态变量,不可以修改的。但是像数组,只对数据进行push操作的话,也可以定义成const的。2、模版字符串原创 2021-01-10 18:02:48 · 5344 阅读 · 2 评论 -
如何写出优雅的React代码Clean Code vs. Dirty Code
如何写出优雅的React代码Clean Code vs. Dirty Code不要写重复的代码// Dirtyconst MyComponent = () => ( <div> <OtherComponent type="a" className="colorful" foo={123} bar={456} /> <OtherComponent type="b" className="colorful" foo={123} bar={456} /原创 2020-12-04 17:06:19 · 508 阅读 · 0 评论 -
电脑初始化,前端开发要做的事
不管是新入职公司,还是换新电脑,这种情况下,都会涉及到,电脑被初始化了,我们需要安装一堆新的环境。安装node环境1、安装node环境。这时候会自动安装上npm环境。就可以通过npm 安装其他的依赖了。要是涉及到node版本管理,就需要安装nvm,在mac电脑上安装上就能用,很方便。windows电脑上支持的好像不太好。我用的windows安装上之后不好使。2、通过npm 安装typescript。3、安装cnpm。安装软件1、开发工具vscode,去官网下载对应的版本安装上就可以了。然后在v原创 2020-11-20 14:51:58 · 161 阅读 · 0 评论 -
JS中有哪些数据类型
ES5中, 6种:Number、String、Boolean、undefined、object、NullES6 中新增了一种 Symbol 。这种类型的对象永不相等,即始创建的时候传入相同的值,可以解决属性名冲突的问题,做为标记。本质上是一种唯一标识符,可用作对象的唯一属性名,这样其他人就不会改写或覆盖你设置的属性值。谷歌67版本中还出现了一种 bigInt。Javascript 中的任意精度整数,可以安全存储和操作大整数。(但是很多人不把这个做为一个类型)。JS的基本类型和引用类型有哪些呢?基本类原创 2020-10-23 22:47:43 · 152 阅读 · 0 评论 -
对CSS中的BFC的理解
CSS中的BFC详解一、何为BFC二、形成BFC的条件三、BFC的特性四、实践是检验真理的唯一标准(1)解决外边距合并问题(2)制作自适应宽度的布局(3)清除元素内部浮动一、何为BFCBFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件1、浮动元素,float 除 none 以外的值2、定位元素,position(absolute,fixed)3、display 为以原创 2020-10-16 13:39:02 · 205 阅读 · 0 评论 -
说一下https
https是一种安全版的http,传输的数据是通过 TLS(安全传输层协议)或其前辈 SSL(安全套接层)加密的。显而易见,https比http更加安全,那这种安全是怎么实现的呢?先了解一下加密算法,对称加密和非对称加密。对称加密加密和解密都是使用的同一种密钥。优点:算法公开、计算量小、加密速度快、加密效率高,适合加密比较大的数据。缺点:交易双方需要使用相同的密钥,也就无法避免密钥的传输,而密钥在传输过程中无法保证不被截获,因此对称加密的安全性得不到保证。非对称加密加密和解密需要使用两个不同原创 2020-10-09 13:45:06 · 282 阅读 · 2 评论 -
作用域和闭包理解
作用域作用域为可访问变量,对象,函数的集合。局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁。在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。闭包闭包可以让你从内部函数访问外部函数作用域。function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName;}原创 2020-09-10 18:31:59 · 414 阅读 · 0 评论 -
讲讲JS中的事件机制
1.addEventLsteneraddEventListener拥有userCapture参数,当该参数为true时执行事件捕2.attachEvent3.内联事件写法οnclick=“xxx()”前两种实际上是相同的函数在不同浏览器的写法而已。两者都是为元素注册事件,但是有区别:i.addEventLstener符合W3C标准,因而大部分浏览器会支持attachEvent是IE专有,在IE9以下浏览器中得使用他,IE9+已经转而支持addEventLstener,放弃了attachEve原创 2020-09-10 18:02:54 · 272 阅读 · 0 评论 -
js中箭头函数和this
1、箭头函数理解箭头函数内的this对象,就是定义时所在的对象,而不是使用时所在的对象。function foo() { setTimeout(() => { console.log('id:', this.id); }, 100);}var id = 21;foo.call({ id: 42 });// id: 42上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执原创 2020-09-10 17:55:50 · 2903 阅读 · 0 评论 -
对JS中原型的理解:原型,原型链
原型其中每个函数对象都有一个prototype 属性,这个属性指向函数的原型对象,所有对象实例可以共享它所包含的属性和方法。原型链1)原型链解决的主要是继承问题2)每个对象拥有一个原型对象,通过 proto 指针指向其原型对象,并从中继承方法和属性,同时原型对象也可能拥有原型,这样一层一层,最终指向 null(Object.proptotype.__proto__指向的是null)。这种关系被称为原型链(prototype chain),通过原型链一个对象可以拥有定义在其他对象中的属性和方法3)构原创 2020-09-10 15:52:42 · 161 阅读 · 0 评论 -
css中垂直居中方法总结
1、verticle-align:middledisplay:inline-block2、display:flex3、display:table-cell已知父元素高度通过transform实现CSS垂直居中position:relativetransform: translateY(50%);原创 2020-09-10 12:37:22 · 119 阅读 · 0 评论 -
GIT常用方法总结
GIT常用方法总结删除提交删除最近一次提交git reset --hard HEAD~1删除某次提交git rebase -i xxxx版本号修改commit 前面的pick为drop,然后保存退出。恢复删除提交的误操作git relog它会记录所有HEAD的历史,也就是说当你做 reset,checkout等操作的时候,这些操作会被记录在reflog中。git reset ...原创 2020-04-02 14:19:04 · 444 阅读 · 0 评论 -
对VUE双向绑定的理解
说一下VUE双向绑定的原理?答:vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。通过Object.defineProperty()来实现数据劫持,这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。代码演示:defineProperty的用法var Book = {}//var name = '';//第一个参数:定义属性的对象。//第二个参数:要定义或修改的属性的名称。//第三个参数:将被定义或修改的属性描述符。Object.define原创 2020-09-07 23:30:10 · 221 阅读 · 0 评论 -
浏览器本地存储(Application\Storage\Cache)
浏览器本地存储1.Application Cache应用程序缓存(manifest)2. Web Storage(Session Storage和Local Storage)3. 数据库(Web SQL Database和Indexed Database)4. Cache Storage1.Application Cache应用程序缓存(manifest)为了支持Web App离线而开发的应用程序缓存(Application Cache,App Cache)。该缓存类似于浏览器缓存,都是进行文件缓存,而原创 2020-07-22 18:41:02 · 3101 阅读 · 0 评论 -
浏览器缓存(强缓存和协商缓存)
1、概念浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。2、优点减少了冗余的数据传输,节省了网费减少了服务器的负担,大大提升了网站的性能加快了客户端加载网页的速度3、两种缓存机制强缓存不会向服务器发送请求,直接从缓存中读取资源,在chrome控制台的network选项中可以看到该请求返回200的状态码; 并且Size显示from disk cache或from memory cache原创 2020-07-10 19:12:27 · 245 阅读 · 0 评论 -
前端项目中用vue-i18n实现国际化
1、在项目中安装国际化包的依赖npm i vue-i18n --save2、配置文件作为独立的i18n文件,在main.js中引入。要是国际化文件不多,建议用非异步方式引入。异步方式引入,一次只加载一种国际化包lang/index.jsimport Vue from 'vue';// import Cookies from 'js-cookie'import VueI18n from 'vue-i18n';Vue.use(VueI18n);class I18n extends原创 2020-06-08 18:50:31 · 1598 阅读 · 0 评论 -
CSS之flex弹性盒子布局
CSS之flex弹性盒子布局1、简介2、基本概念3、父容器属性 6个3.1 flex-direction属性决定主轴的方向3.2 flex-wrap 主轴上排不下怎么换行3.3 flex-flow 上面两个属性的简写3.4 justify-content 子容器在主轴上的排列对齐方式3.5 align-items 子容器在侧轴上的排列对齐方式3.6 align-content4、子容器属性 6个4.1 order 排列顺序。数值越小,排列越靠前4.2 flex-grow 放大比例4.3 flex-shri原创 2020-06-02 15:49:40 · 327 阅读 · 0 评论 -
Cypress前端测试框架使用教程
Cypress前端测试框架使用教程一、简介cypress是即end to end(端到端)功能测试框架,它基于node js,Jquery。开箱即用,不仅支持本地浏览器直接模拟测试,也支持终端测试。还有测试录屏功能,方便在测试失败的时候,查看当时的失败的场景,方便定位。二、安装通过npm来安装Cypressnpm install cypress --save-dev直接下载Cypres...原创 2020-04-30 17:05:47 · 4441 阅读 · 2 评论 -
前端测试框架Jest和 Cypress
Jest 单元测试Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具。可以在REACT或VUE前端项目中使用。1、 安装npm i -D jest vue-jest babel-jest @vue/test-utilsnpm i babel-core@^7.0.0-0 eslint-plugin...原创 2020-04-30 16:53:59 · 2678 阅读 · 0 评论 -
JavaScript 装逼指南(实用技巧写法)
JavaScript 装逼指南转Boolean类型转Number类型parseInt短路表达式,弃用if-else另外一种undefined保留指定位数的小数点单行写一个评级组件金钱格式化标准JSON的深拷贝数组去重取数组中的最大值和最小值如何写JavaScript才能逼格更高呢?怎样才能、让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在J...原创 2020-04-07 12:47:46 · 5652 阅读 · 16 评论 -
如何成为一名前端开发工程师
如何成为一名前端开发工程师先不考虑计算机基础知识的话,从下列几个方面开始学习。1. HTML这是里面最基础的部分,官方解释定义如下:什么是 HTML?HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言,而是一种标记语言 (markup language)标记语言是一套标记标签 (m...原创 2020-04-02 15:29:13 · 596 阅读 · 0 评论 -
JS中数组与对象的遍历方法实例小结
JS中数组与对象的遍历方法实例小结这篇文章主要介绍了JS中数组与对象的遍历方法。包括for、forEach、map、filter、some、every、find、for…in、entris、keys。首先定义一个数组arr=['snow','bran','king','nightking'];1、for循环,需要知道数组的长度;2、foreach,没有返回值,可以不知道数组长度;返回...原创 2020-04-02 14:12:23 · 576 阅读 · 0 评论