一些coding知识记录

原创 Webstorm-恢复默认UI布局

步骤二:搜索Restore Default,找到快捷键设置[Restore Default Settings],这里可以自行设置快捷键组合(如Shift+P,尽量不要跟系统其他快捷键冲突),设置好后点击[Apply]步骤三:关闭[Setting],使用步骤二设置的快捷键[Shift+P],调出快捷键重制窗口,点击[Restore and Restart],重启后的Webstorm即恢复为安装时的默认设置.但是设置后的效果不理想,想要重新设置回原来的模样,却找不到设置项.步骤一:打开setting。

原创 javascript-手写实现instanceOf

instanceof判断右边元素的prototype是否在左边元素的原型链上,左边元素沿着原型链不断往上查找,直到结束,如果查找期间找到原型链中存在左边元素的prototype,返回true,查找完都没有找到,返回false.

原创 javascript-手写实现reduce

简单实现reduce方法。

原创 javascript-实现深拷贝deepClone

深拷贝，解决嵌套循环问题。

原创 javascript-实现二分查找

【代码】javascript-实现二分查找。

原创 javascript-实现new运算符

【代码】javascript-实现new运算符。

原创 javascript-实现选择排序算法

【代码】javascript-实现选择排序算法。

原创 javascript-实现冒泡排序算法

【代码】javascript-实现冒泡排序算法。

原创 javascript-实现快速排序算法

【代码】javascript-实现快速排序算法。

原创 javascript-实现归并排序算法

【代码】javascript-实现合并排序算法。

原创 toC/toB/toG的理解

toB，即to business，面向的是组织，如公司、企业，比如erp系统。toG，即to goverment，面向的是政府，是toB衍生出来的特殊部分。toC， 即to customer，是面向的是消费者，是一个个个体。toC/toB/toG是三种商业模式。toC/toB/toG是什么？

原创 React使用Ant Design

参考文章：https://blog.youkuaiyun.com/weixin_43824116/article/details/124020810。，安装最新版本的node，此处sudo是Mac使用最高权限去操作文件，有些文件如果不使用最高权限，不允许写操作，故加上。PS：官网使用教程 https://2x.ant.design/docs/react/introduce-cn。发现是因为node版本过低，此时我的node是v14.17.1，通过安装node版本管理工具n，安装命令行为。

原创 IDEA新建文件，自动生成备注信息

步骤二：找到Editor->File and Code Templates->Files->Javascript Files，把对应的注释内容放进去，点击【Apply】在使用IDEA新建文件的时候，有时候需要在文件顶部添加备注，方便后续自己和团队成员对文件和代码功能的理解。如何在IDEA新建文件的时候，添加备注呢？步骤三：新建JS文件的时候，即可生成带有预先编辑好模版内容的JS文件。步骤一：打开IDEA的设置窗口。

原创 VUE2项目使用typescript

3. 项目根目录添加tsconfig.json文件。4. 重启项目，让webpack配置生效，我们即可新建ts文件，使用ts了。

原创 Javascript解析URL参数

Javascript实现获取URL地址上携带的参数值。

原创 Javascript计算字符串长度

HTML页面中的字符，中文/英文和字符，所占的宽度不同，一个中文字符的间距 约等同于 两个英文或字符 的宽度，所以在计算字符串展示在页面中的真实宽度时候，需要区分中文/英文和字符。在开发中，可能会遇到动态计算字符串的长度的需求，根据容器宽度和字符串的长度，判断是否需要在字符串后拼接省略号展示。

原创 Mac如何创建txt文件

对于使用window系统的同学，通过在桌面右键即可创建文本文件，对于使用mac的同学，鼠标右键已经没有创建文本文件的功能，那应该如何操作？四、在弹出的文档编辑器中，点击上方的【未命名】，在【名称】后边的输入框中输入文件名称，【回车】确认更改名称。二、输入TextEdit，下方出现【文本编辑】，点击打开文本编辑器。六、文件的格式变成.txt，可以在里面编辑自己的文字了～五、在工具栏中找到【格式】，选择【制作纯文本】。三、选择保存文件的目录，并点击【新建文稿】。方法一：快捷键【Command+空格】

原创 浏览器的线程有哪些

XMLHttpRequest在连接后，浏览器会新开一个线程请求，等检测到请求状态改变后，将对应执行函数推入执行栈中，等待JS引擎线程执行。负责计时，等setInterval、setTimeout等待时间结束后，将执行函数推入执行栈。负责渲染HTML、CSS，二维视图，三维视图，GUI内部的线程是多线程。如click、resize等事件触发后，将触发后的执行函数，推入执行栈。负责执行执行栈最顶端的JS代码，与GUI线程互斥。

原创 Javascript实现数组行列反转

【代码】Javascript数组行列反转。

原创 Javascript中Map使用

map类似于object，也是通过key->value的方式保存数据，不同的是，map的key可以是任意值。map可以通过set()添加一个值，通过get()获取对应key的值。1、通过forEach遍历。

原创 Javascript手写实现call

基于以上的理解，我们可以有一个call实现的基本思路，在Cat中动态添加一个key，key指向Dog中的eat方法，之后再把这个唯一key删除，那就可以实现call的效果。Dog.eat.call(Cat, ‘鱼肉’, ‘牛肉’);调用了Dog的eat方法，并把eat方法中的this，指向了Cat，执行了方法eat()，输出Cat的内容；在原生的基础上，我们知道call改变了Dog中eat的指向，但是它的效果，是不是和在Cat中添加eat的方法是一样的？call可以执行该方法，并改变this的指向。

原创 Javascript中call apply bind的区别

Cat中没有eat方法，如果想要实现eat动作，可以在Cat中写自己的eat方法，但是既然Dog中已经有，能不能直接调用呢，答案是可以的，通过call改变Dog中的this指向为Cat即可；执行Dog的eat方法，但是绑定的this指向Cat，并传递参数’鱼肉‘和‘牛肉’，输出为‘喵喵吃鱼肉和牛肉’。执行Dog的eat方法，this.name为向Dog的‘旺财’，输出为‘旺财吃骨头和鸡肉。bind函数会改变this的指向，但并不执行当前函数，而是返回函数，需要手动执行返回的函数，如例的。

原创 javascript手写高并发控制

【代码】javascript手写高并发控制。

原创 Javascript手写防抖和节流

举个通俗易懂的例子，电梯1秒内没有检测到有人经过门口，即开始关闭，如果在一秒内有新的人进入电梯，则电梯重新开始计时，时间间隔仍为1秒，1秒后，无人进入电梯，则电梯门开始关闭。防抖，以最新的事件触发为时间起点，在固定时间后执行方法。节流，指固定时间内，只执行一次。且执行第一次触发的函数。如1秒内有3次执行，但是最终只能执行一次。

原创 原型和原型链

原型又可以看做是另一个构造函数的实例，那原型也会有__proto__，指向构造函数的原型Prototype，如图中的Person.Prototype，这种层层递进的关系，就称为原型链。一个实例属性或方法的调用，如果在当前实例对象没有找到，会顺着原型链一层层查找，直到抵达null，才会终止。每个实例都有一个__proto__属性，指向构造函数的原型Prototype。同一个构造函数new出来的所有实例，都可以访问，原型里的属性和方法。每个构造函数，都会有一个Prototype属性，指向原型。

原创 Javascript几种判断 数据类型 的方法

2、instanceof，简单来说就是判断instance 左侧实例的__proto__原型链上是否存在 右侧构造函数的prototype，常用于判断引用数据类型。缺陷：null、date、object、array几种数据类型都会判断为object。3、Object.prototype.toString.call()，比较通用。通过简单的例子对比JavaScript各种数据类型判断的差异。1、typeof，常用于判断基本数据类型。官方解释： instanceof。简单实现instanceof功能。

原创 Web攻击类型

原创 vuex的理解

官网给出的工作流程图，可以很清晰看清楚，整个vuex的工作流程，但是还缺少一个步骤，就是可以通过Vue Components直接调用Mutations，从而实现数据的提交。我在后面添加了调整后的流程图。

原创 javascript实现json数据转文件，并下载

将获取到的json数据，使用JSON.stringify转化为字符串，并以data:的形式传给a标签，通过触发a标签的点击事件，最终实现文件下载。简单实现前端json数据，以文件的形式，下载到本地。

原创 响应式布局和自适应布局的区别

常用的实现方式是，使用@media媒体查询，配合vh/vw/%/em/rem等不同单位计算方式来实现，或者使用UI框架（Bootstrap、ElementUI、Ant Design等）响应式栅格布局。：页面适配的分辨率跨度相对较小，展示的内容和设计更加灵活，可以关注到细节上的处理。：对开发人员的技术要求更高，需要反复测试调整，以适配各分辨率设备。只需要编写一套代码，根据设备分辨率，进行页面排版布局调整。开发多套代码，根据设备分辨率，返回适合当前设备的页面内容。平板（768-1024）pc端（>1024）

原创 toC/toB/toG的理解

toB，即to business，面向的是组织，如公司、企业，比如erp系统。toG，即to goverment，面向的是政府，是toB衍生出来的特殊部分。toC，即to customer，是面向的是消费者，是一个个个体。toC/toB/toG是三种商业模式。toC/toB/toG是什么？

原创 package.json和package-lock.json的区别

【代码】package.json和package-lock.json的区别。

原创 Mac修改hosts

打开终端，输入sudo vi /etc/hosts，回车。输入密码，回车，hosts文件就打开了。输入i，即insert，进入编辑模式，输入需要映射的ip和域名。待编辑完毕后，按esc键结束编辑模式，输入:wq保存并退出。

原创 谈谈requestAnimationFrame

在做动画的时候，很多程序员会选择使用requestAnimationFrame，和setTimeout、setInterval不同，它不需要设置执行的时间频率，因为它是根据浏览器的渲染频率执行的。一般浏览器的渲染频率为60HZ，即每秒重绘60次，执行时间间隔为1000ms/60，约等于16.66667ms。requestAnimationFrame接受的参数是一个callback函数。