
前端知识总结
Homyee King
这个作者很懒,什么都没留下…
展开
-
github gitlab
ssh-keygen -t rsa -C "注册 gitlab 账户的邮箱"把路径改成默认路径后 id_rsa_gitlabgithub 同理打开~/.ssh/config文件(没有就新建一个),并在文件中加入以下内容# default Host github.comHostName github.comUser githubuser@xyz.com(GitHub邮箱)IdentityFile ~/.ssh/id_rsa_github# two Host gitlab.com(这里注原创 2021-07-06 20:44:28 · 278 阅读 · 0 评论 -
typescript: 类可以作为类型
class Test{}const test: Testtest = Test // wrong当类作为类型的时候,他是其构造函数的类型作为赋值的时候, 不仅包含构造函数,还包含了静态方法,所以不能赋值原创 2021-02-04 15:40:00 · 624 阅读 · 0 评论 -
nvm 常用命令
nvm常用命令nvm ls-remote 查看 Node 远程版本库nvm install node 将安装最新版本的 Nodenvm install v12.7.0 将安装 12.7.0 版本的 Nodenvm uninstall v12.7.0 卸载 12.7.0 版本的 Nodenvm ls 查看已经安装的 Node 版本nvm use v12.7.0 切换 12.7.0 为当前使用的版本nvm alias default v12.7.0 将 12.7.0 设置为 Node 的原创 2021-02-03 17:34:52 · 336 阅读 · 0 评论 -
git 合并多个历史提交
之前由于忘了在当前项目配置user信息,导致github和gitlab信息混了,所以修改过之后,想要把之前的提交全部合并了经过一番探索 发现 git rebase -i xxx 可以这个-i就是用来可视化操作的xxx就是你想要rebase到的目标提交 比如是这个项目的第一次提交,那么最终结果就只剩一个提交了,之间所有的提交都会应用到这第一个提交上。因为这个可视化的界面的顺序 从上到下依次是 第一次提交 到当前提交rebase执行顺序也是从上到下如果想只保留最初的提交,name就把后面的提交全部执原创 2021-01-17 18:06:46 · 1204 阅读 · 0 评论 -
测试
快照测试会把第一次的测试用例生成快照后续的有何快照对比的 直接比较 快照就相当于缓存嘛后续修改测试用例的时候 ,有些地方需要修改快照,直接-u可以更新一波快照原创 2021-01-06 22:31:06 · 104 阅读 · 0 评论 -
fork的仓库和源仓库创建关联 , 更新代码
获取原仓库最新代码git remote add upstream [origin repo]git fetch upstreamgit pull upstream [target branch]git push原创 2021-01-05 18:33:55 · 455 阅读 · 0 评论 -
vscode.setting.json
{ "editor.fontSize": 18, "window.zoomLevel": 1, "workbench.tree.indent": 16, "prettier.useTabs": true, //使用制表符缩进 "editor.tabSize": 2, //制表符符号eslint "editor.formatOnSave": true, //每次保存自动格式化 "files.autoSave": "afterDelay", "files.autoSaveDelay": 3000原创 2020-08-14 17:28:41 · 262 阅读 · 0 评论 -
axios发送form-data格式的数据
let fd = new FormData(); fd.append('file', file); let config = { headers: { 'Content-Type': 'multipart/form-data' } }; axios.post(url,fd,config)原创 2020-08-10 20:31:59 · 1961 阅读 · 0 评论 -
各种配置文件如.gitignore的作用
gitignore: git上传要忽略的文件.npmrc: 配置npm源editorconfig: 帮助开发者在不同的编辑器和ide之间维护相同的代码风格,EditorConfig 包含一个用于定义代码格式的文件和一批编辑器插件,这些插件可以让编辑器读取配置文件并依此格式化代码。EditorConfig 的配置文件十分易读,并且可以很好的在 VCS(Version Control System)下工作。alloyteam关于editorconfig的博客.eslintrc.js: 配置代码书写的规原创 2020-08-03 20:53:37 · 307 阅读 · 0 评论 -
关于IOS300ms点击延迟的解决方案
起因大多数移动端浏览器会在点击之后有一个300ms的延迟,因为用户可能会进行一些双击放大的操作,300ms可能有时候我们感觉不到,但是在一些应用中(比如网页游戏),我们可能需要它最好做到实时反应。一些解决方案1.禁止放大缩小我们可以禁止用户做那些缩放操作,这样我们就不用担心会有双击操作了。通过设置一下代码来实现(chrome & firefox)<meta name="viewport" content="width=device-width, user-scalable=no"&g原创 2020-06-09 22:44:13 · 704 阅读 · 0 评论 -
viewport与移动端布局
viewport : 视口,代表当前可见的计算机图形区域。在 Web 浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI, 菜单栏等——即指你正在浏览的文档的那一部分。web浏览器的视口通常分为两部分:布局视口和视觉视口布局视口通常是指整个浏览器的大小,包括页面的内容以及上下固定的窗口(搜索框 菜单栏等),视觉视口浏览器中可见的部分。视觉视口可以变化,当双指缩小,键盘弹出,隐藏的搜索框显示等等,会让视觉视口变小,但是布局视口不会变化。当你向下滚动的时候,视觉视口的内容就会改变。css原创 2020-06-09 22:05:33 · 1412 阅读 · 0 评论 -
为什么要用setTimeout来模拟setInterval
setTimeout(fn,time): 等待time时间后执行fnsetInterval(fn,time) 每隔time时间执行fn我们希望setInterval是每隔一段时间自动执行,但是实际应用中,setInterval并不会按照我们预想的那样,它通常存在如下两个缺点。在执行的时候可能会跳过指定时间间隔多个定时器函数会立刻执行我们就实际场景来说一下这两个缺陷时间间隔首先明确一个概念,定时器的时间间隔指的是什么?它不是指函数的执行时间,而是函数被推入到消息队列的时间。也就是说每隔t原创 2020-06-09 11:29:52 · 703 阅读 · 1 评论 -
JSONP实现跨域
参考链接https://www.jianshu.com/p/e1e2920dac95受于同源策略的限制,当然是为了更好的提高网站的安全,我们被禁止进行跨域通信。跨域的方法有包括设置同源请求头,jsonp,iframe,poseMessage,当然最常用的还是前两个。今天主要介绍JSONP。我们目前在和服务端通信传输数据的时候,首选的方式还是json,用jsonp来跨域,引用上面参考的博客的一句话来说,json就好比地下情报人员用来交换情报的暗号,jsonp则是用来交换情报的接头方式一个用来规.原创 2020-06-02 22:21:40 · 155 阅读 · 0 评论 -
你知道优化网站性能从哪入手吗?
参考 雅虎开发文档https://developer.yahoo.com/performance/rules.html?guccounter=1入手点数据显示,80%的用户会花费时间在前端页面,也就是说一个好的UI设计能够抓住用户的眼球,而好的UI性能会抓住用户的心。而影响页面渲染的原因是什么呢?当我们打开一个网页的时候,文档开始解析,大多数时间都花费在下载css script images等资源,所以我们应该从此入手。所以减少这些组件的体积和数量就能减少http请求的数量,进而就能优化网站性.原创 2020-06-02 20:12:58 · 160 阅读 · 0 评论 -
轻松实现给vue单页面绑定快捷键
我想给整个页面添加一个键盘事件,也就是快捷键,于是我在当前页面根元素上绑定了keyup事件,ps:div 的 事件不像表单,我们需要在标签上添加tableIndex = "0"这个属性但是每次还是得点一下页面才有用,那大大削弱了快捷键的作用,最后找来找去,终于找到了答案。因为vue是很少直接操作dom的,所以我在写vue的时候,很少往原生dom事件那里去碰,但是,原生就是基础,基础还是...原创 2020-05-07 22:37:41 · 1467 阅读 · 0 评论 -
一分钟解决this.$refs.xxx 取值为undefined问题
问题场景是这样,我们设定一个组件的ref = ‘a’,根据生命周期,我们是可以在mounted中访问的,但是console.log(this.$refs.a)是undefined,而我们this.$refs打印出来,这个a是存在的,这是为什么呢?可能你还没有注意到,Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果...原创 2020-05-07 22:29:29 · 5458 阅读 · 0 评论 -
我们该如何书写更高效的css选择器
1 浏览器如何识别你的选择器首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应的样式附于对应的HTML元素,达到美化页面的效果。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“浏览器读取你的选择器,遵循的原则是从选择器的右边到左边读取。换句话说,浏览器读取选择器的顺序是由右到左进行”。比如说:div.nav < ul li a[t...转载 2020-05-07 10:40:26 · 196 阅读 · 0 评论 -
Vue中必须掌握的的虚拟Dom(精炼版)
最近回看自己写的Vue中必须掌握的的虚拟Dom,感觉有点啰嗦,于是特作此篇,提炼出重点,方便回看。为什么要采用虚拟dom?因为vue是数据驱动的,数据改变就要引发视图更新,但如果操作真实的dom,对内存消耗较大,于是我们用js对象来模拟真实的dom节点,通过操作虚拟dom,来实现对真实dom 的改变。虚拟dom如何工作?首先,vue中存在一个VNode类,通过它可以实例化各种类型的节点,包...原创 2020-04-27 11:31:05 · 223 阅读 · 0 评论 -
轻松玩转JS的类型转换(下)
我们在轻松玩转JS的类型转换(上)这篇博客中曾提到过隐式转换,这篇博客,我们就来揭开隐式转换的面纱。一元操作符+console.log(+"1");当 + 运算符作为一元操作符的时候,查看 ES5规范1.4.6,会调用 ToNumber 处理该值,相当于 Number(‘1’),最终结果返回数字 1。console.log(+[]); //0console.log(+['1']); /...原创 2020-04-24 13:01:35 · 135 阅读 · 0 评论 -
轻松玩转JS的类型转换(上)
将一种类型转换为另一种类型,便是类型转换,其中包括显示转换和隐式转换。显示转换当然是用户自发调用API进行转换,隐式转换常常在我们意想不到的时候进行,当然,看完本篇博客,你就可以拥有洞察隐式转换的能力了。在 JavaScript 中,当我们进行比较操作或者加减乘除四则运算操作时,常常会触发 JavaScript 的隐式类型转换机制;而这部分也往往是令人迷惑的地方。譬如浏览器中的 console...原创 2020-04-24 11:22:15 · 237 阅读 · 0 评论 -
图解 前序、中序、后序、深度、广度遍历二叉树(js 递归 非递归实现)
后序遍历较为详细,配有图解,想看图解的,转到后序遍历,画图太麻烦了。。。 所以只画了后序的,欢迎评论区交流。初始化树结构 var nodes = { node: 6, left: { node: 5, left: { node: 4 ...原创 2020-04-22 13:22:35 · 1420 阅读 · 0 评论 -
轻松了解Vue的数据监听
我们使用过vue都知道,vue的数据是双向绑定的,Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据。典型的例子就是v-model。其中,View 变化更新 Data ,可以通过事件监听的方式来实现,所以 Vue 的数据双向绑定的工作主要是如何根据 Data 变化更新 View。于是乎:问vue实现双向绑定,拢共分几步?分四步:第一步实现事件监听Observe:通过Obje...原创 2020-04-15 22:44:21 · 1142 阅读 · 0 评论 -
十分钟掌握vue的生命周期
官方生命周期图压场图中多少说的不够具体,我们一个一个用代码的形式来理解。生命周期组件状态最佳实践beforeCreate实例初始化之后,this指向创建的实例,不能访问到data、computed、watch、methods上的方法和数据常用于初始化非响应式变量created实例创建完成,可访问data、computed、watch、methods上的方法和...原创 2020-04-13 17:56:14 · 262 阅读 · 0 评论 -
Vue中必须掌握的的虚拟Dom
Vue是数据驱动的,一旦数据改变,我们就要更新视图,但是操作真实的DOM是很消耗性能的,那么我们如何处理呢?答案就是用虚拟DOM虚拟DOM就是用JS对象来模拟dom节点<div class="vdom" id="id">I'm the content</div> { tag:"div",//标签名 attrs:{//属性 ...原创 2020-04-13 13:46:18 · 228 阅读 · 0 评论 -
ES6之 Object.defineProperty 和 Proxy
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。Object.defineProperty(obj, prop, descriptor)obj是目标对象prop 是要添加或要修改的属性值描述符是对要添加的属性进行配置,可配置的项有:writable, enumerable, configurable, ...原创 2020-04-12 20:35:36 · 314 阅读 · 0 评论 -
前端不可不知的 Event loop
javascript是一门非阻塞单线程语言,执行js代码时,会创造一个执行环境,也就是执行上下文,不了解这部分的可以看一下这一篇博客js基础 执行上下文栈遇到异步任务的时候,会挂起,放到task队列中,等同步代码执行完毕后再回过头执行task中的任务。console.log('script start')setTimeout(function() { console.log('se...原创 2020-04-12 10:15:58 · 210 阅读 · 0 评论 -
前端攻城狮必须了解的浏览器渲染机制
作为前端工程师,我们不仅要写出漂亮的页面,美中也要注重性能,注重用户体验,没有一个用户愿意在一个页面面前等待几秒钟,要想提高性能,我们就要从根本入手。首先了解一下一个页面是如何呈现出来的,也就是渲染机制,渲染通常分为以下几个步骤:HTML -----> DOMCSS -----> CSSOMDOM + CSSOM -----> 渲染树(render tree)根...原创 2020-04-12 09:10:01 · 109 阅读 · 0 评论 -
不可不知的有关css选择器的知识点
选择器的种类(按权重从高到低)!important行内样式id选择器 100class选择器 | 伪类选择器 | 属性选择器 10标签选择器 | 伪元素选择器 1伪元素和伪类css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。伪类: 伪类用于当一个元素处于某种状态...原创 2020-04-11 19:42:15 · 187 阅读 · 0 评论 -
ES6之Promise
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。三种状态pending(就绪)fullfilled(成功)rejected(失败)两种状态转变pending----> fullfilledpending----> reject...原创 2020-04-11 13:28:01 · 100 阅读 · 0 评论 -
ES6之Generator函数
Generator函数返回一个可遍历对象,该对象可遍历函数内部的状态,我们可以将Generator函数理解为一个状态机。书写形式Generator函数和普通函数的区别就是 在function和函数名之间有个*,而且内部可以书写yield表达式。next方法next方法控制这个函数的指针不断向后移动,遇到yield就停止,返回一个对象 {value:xxx,done:true|false}...原创 2020-04-11 10:42:49 · 97 阅读 · 0 评论 -
js基础之 执行上下文栈
javascript语句并非按顺序执行的,而是一段一段执行的。那么这一段一段是如何划分的呢?首先js中可执行语句的类型包括:全局代码,函数代码,eval代码比如当执行一个函数的时候,就会停下来进行准备工作,这个准备工作也就是“执行上下文”。当然我们的程序中会包含各种各样的函数,那么我们就需要用执行上下文栈(Execution context stack,ECS) 来管理这些函数的执行上下文...原创 2020-04-08 15:16:42 · 131 阅读 · 0 评论 -
js基础之原型链
每一个js对象(除了null)都有__proto__这个属性,这个属性会指向该对象的原型,每个实例的__proto__属性都指向它构造函数的prototype,也正是因为建立起这样的关系,实例可以访问原型上的属性那么原型的原型是什么呢?我们知道原型是个对象,那么很容易想到,构造函数的原型的原型就是Object.prototype,即 Constructor.prototype.proto =...原创 2020-04-08 12:15:49 · 129 阅读 · 0 评论 -
前端必须要掌握的知识点——认识同源和跨域
s原创 2020-04-03 21:01:54 · 464 阅读 · 0 评论 -
前端必须要掌握的知识点——cookie sessionStorage以及localStorage的区别
下边分类来讲,方便记忆作用域cookie 和 localStorage 都是在同源窗口中共享sessionStorage只可在当前会话窗口中访问,即使打开两个相同的页面,也不可共享,即不在两个不同的浏览器窗口之间共享。存储量cookie 限制存储4k,因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识webStorage 存储要大得多 ,可以达到...原创 2020-04-03 20:57:11 · 150 阅读 · 0 评论 -
一起了解RESTful架构
RESTful架构,就是目前最流行的一种互联网软件架构。它结构清晰、符合标准、易于理解、扩展方便,所以正得到越来越多网站的采用。原创 2020-04-03 19:43:51 · 139 阅读 · 0 评论