Claiyre-CSDN博客

原创白话JavaScript原型链和继承

原型基础每个函数都有一个prototype属性，指向函数的原型对象每个对象都一个私有属性 __proto__，默认指向其构造函数的prototype在JS中所有函数都是Function构造出来的一种特殊对象，包括Function本身；因此所有函数的__proto__，指向Function.prototype除函数外的所有对象都是由Object构造的，函数的原型对象也是；所以其__proto__ 指向Object.protptype。但Object这个函数的原型对象比较特殊，其__proto__指

2021-08-07 11:03:20 158

原创 css 层叠上下文和层叠顺序

层叠上下文是css中的一个三维概念，拥有层叠上下文的元素在z轴上比普通元素要高，而且其内部的所有内容是自成体系的，其后代都是在它的层叠顺序中哪些元素拥有层叠上下文1、根元素，也就是html默认拥有“根层叠上下文”2、定位元素（position: absolute/relative/fixed）的z-index不为auto，而是有具体数值时3、拥有某些css3属性的元素z-index不为auto的 flex itemopacity的值小于1的元素transform不为nonefilter不

2021-07-17 16:00:43 430

原创 JS获取对象属性的各种方式和区别（自身/原型属性、可枚举/不可枚举）

对象的属性有自身属性和原型属性之分，自身属性是对象自己的属性，原型属性是存在于原型链上的属性。可以用Object.prototype.hasOwnProperty()判断是自身属性还是原型属性。（in操作符只可以判断对象是否有某个属性，不能判断是自身的，还是原型上的）对象属性也有可枚举和不可枚举之分，可枚举属性的属性描述符enumerable为true，不可枚举属性的为false。原生对象的大多数属性都是不可枚举的，比如数组和字符串的length，对象原型上的一些方法和属性，比如toString、co

2021-07-16 22:27:47 1479

原创 http连接复用进化论

HTTP协议是应用层协议，它定义万维网客户端如何与服务器进行通信。它在传输层的TCP协议的基础上进行数据传输HTTP 1.0在HTTP 1.0时代，默认一个http请求对应一个TCP连接，没有任何复用。也就是每发起一个http请求，就会创建一个TCP连接，请求完成后，TCP连接便会断开。可以通过Connection和Keep-Alive两个头部字段配置使用持久连接。HTTP 1.1到了http1.1，底层的TCP默认是持久连接，前后串行的请求可以复用一个TCP连接。对后面的http请求来说，节约了

2021-07-10 18:45:59 620 2

原创关于https

http是明文通信，所以第三方可以窃听并获取通信内容，甚至是篡改，甚至冒充他人身份参与通信，通信安全没有任何保障。SSL/TLS就是为了解决着三个问题设计的，在HTTP的基础上加上TLS就是https协议，对应到OSI模型上，就是在应用层(http协议)和传输层（TCP协议）中间增加了一个SSL/TLS子层，保障通信安全。具体的实现是：在TCP握手完成后，进行SSL握手，通过握手，双方会彼此确认身份，并协商出一个密钥和加密方法，之后的数据收发都会用协商的加密方法和密钥进行加密解密。SSL/TLS 四次

2021-07-10 18:44:49 92

原创为什么命名interface时不推荐添加I前缀？

很多最佳实践和 ts interface的命名规范中都强调过这样一句话：Do not use “I” as a prefix for interface names起初很困惑，I前缀能让他人立即分辨出这个类型是否是一个接口，为何要禁止使用？后来渐渐有了答案，特此记录：原因一：I前缀违反了封装原则在TS中，类可以实现接口，接口可以继承接口，接口可以继承类。类和接口都是某种意义上的抽象和封装，继承时不必关系它是一个接口还是一个类。如果用I前缀，当一个变量的类型更改了，比如由接口变成了类，那变量名称

2021-05-07 13:56:05 2967 3

原创 editorconfig、eslint、prettier三者的区别、介绍及使用

每次搭建新项目都少不了这些工具，但时间一久就忘记了，下次搭新项目时又要四处查官方文档，因此特此记录，主要内容是对这三个工具的理解，以及具体使用方式editorconfig理解先看官网的定义：EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.EditorConfig 帮助使用

2021-04-22 14:19:03 1949

原创使用webpack打包JS依赖库

这里的依赖库是指给第三方平台使用的JS库文件。与普通的web应用代码不同，依赖库要正确设置导出的内容配置项主要有三个配置项library生成库的名称（非文件名）libraryTarget配置以哪种方式暴露libraryvar / assign: 暴露为一个变量this / window / global / commonjs：在对象上赋值暴露commonjs2 / amd / umd：指定兼容特定的模块系统libraryExport配置哪个模块将被暴露，可以是字符串或字符串数组。默

2020-12-15 16:57:47 770

原创 Node.js、npm、npx、nvm、 Node的定义和区别

Node.jsNode.js 是一个基于Chrome V8引擎的JS运行环境，npm是它的包管理器。https://nodejs.org/zh-cn/npmnpm是node.js默认的、用JavaScript编写的包管理系统，全称是Node package Manager。npm 会随着 node 一起安装npxnpm从v5.2开始，新增了npx命令npx有三个使用场景：一是直接调用项目内安卓的模块。其原理是会到 node_modules/.bin/路径下和$PATH下，寻找命令二是避免全

2020-10-30 14:47:41 572

原创 git学习之本地分支与远程分支

Git是目前最先进的分布式版本控制系统，常被用于代码版本管理。在实际使用中，分支是Git一个十分常用的特性，相较于其他版本控制系统（Version Control System, VCS ），git的分支管理十分轻量且快速。这主要得益于其底层的设计，很多旧的VCS的分支是对某个版本的整个拷贝，因此新增、删除、更改分支的速度十分缓慢；而Git的分支实际上是一个指向某个版本的指针，对分支的增删改操作就相当于对指针的增删改，因此十分快速轻量。git是分布式的，每一份clone都是一个完整的版本库，因此可以把当前

2020-08-16 15:35:11 5362

原创细说websocket快速重连机制

引言在一个完善的即时通讯应用中，websocket是极其关键的一环，它为web应用的客户端和服务端提供了一种全双工的通信机制，但由于它本身以及其底层依赖的TCP连接的不稳定性，开发者不得不为其设计一套完整的保活、验活、重连方案，才能在实际应用中保证应用的即时性和高可用性。就重连而言，其速度严重影响了上层应用的“即时性”和用户体验，试想打开网络一分钟后，微信还不能收发消息的话，是不是要抓狂？因此，如何在网络变更时快速恢复websocket的可用，就变得尤为重要。快速了解websocetWebsocke

2020-07-23 19:47:08 978

原创从理论到实践全面理解HTTP/2

前言为了降低加载时间，相信大多数人都做过如下尝试Keep-alive: TCP持久连接，增加了TCP连接的复用性，但只有当上一个请求/响应完全完成后，client才能发送下一个请求Pipelining: 可同时发送多个请求，但是服务器必须严格按照请求的先后顺序返回响应，若第一个请求的响应迟迟不能返回，那后面的响应都会被阻塞，也就是所谓的队头阻塞请求合并：雪碧图，css/js内联、css/...

2020-02-29 17:19:00 328

原创从网络通信角度谈web性能优化

博客原文地址：Claiyre的个人博客 https://claiyre.github.io 如需转载，请在文章开头注明原文地址衡量一个网站的性能有多个指标，DNS解析时间，TCP链接时间，HTTP重定向时间，等待服务器响应时间等等，从用户角度来看，就可以归结为该网站访问速度的快慢。也就是说性能等于网站的访问速度。早些年Amazon曾经做过一个统计：网页加载时间每延长1秒钟，一年将减少16

2017-04-25 18:22:18 1185

原创 JavaScript对象的深浅复制

前言从层次上来看，对象的复制可以简单地分为浅复制和深复制，顾名思义，浅复制是指只复制一层对象的属性，不会复制对象中的对象的属性，对象的深复制会复制对象中层层嵌套的对象的属性。

2017-03-29 22:56:15 275

原创 js中创建对象的几种方式

博客原文地址：Claiyre的个人博客 https://claiyre.github.io/ 博客园地址：http://www.cnblogs.com/nuannuan7362/ 如需转载，请在文章开头注明原文地址士不可以不弘毅，任重而道远。前言不管是哪门语言，千变万化不离其宗，深入理解其本质，方能应用自如。对应到js，闭包，原型，函数，对象等是需要花费大功夫思考、理解的。本文

2017-02-05 16:54:21 340

原创 JavaScript慨念

js概念 js存储获取属性值的两种方法及区别offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别XMLHttpRequest通用属性和方法===运算符判断等的规则javascript有哪些方法定义对象评价一下三种方法实现继承的优缺点,并改进应用程序存储和离线web应用js概念js存

2017-02-03 16:01:34 287

原创三栏布局总结

博客原文地址：Claiyre的个人博客 https://claiyre.github.io/ 如需转载，请在文章开头注明原文地址人无远虑，必有近忧。中间宽度自适应，两边宽度固定的三栏布局，是前端页面开发中极为常见网站布局方式。博主认为，一名合格的前端工程师总是会将之熟记于心。以下是博主总结的五种三栏布局的常用方法，与大家分享。正文1、浮动布局浮动布局是一种极易理解，也是初学者首先

2016-12-18 18:57:26 558

原创 css居中小结

从css入门就开始接触，无所不在的，一直备受争议的居中问题。 css居中分为水平居中和垂直居中，水平居中方式也较为常见和统一，垂直居中的方法就千奇百怪了。本文一下代码中 .outer是父元素的类名，.inner块级代表子元素,span代表行内子元素水平居中1. 行内元素的水平居中直接设置其父元素.ourter{text-align: center;} 不管有几个行内元素，一行代码即可

2016-12-09 22:12:23 275

原创 JavaScript中的open（）方法

open（）方法用于导航到一个特定的URL或者打开一个新的浏览器窗口。它接收4个参数：要加载的URL，窗口名称，特性字符串和一个布尔值。参数一：要加载的URL（可选）当该参数为空时，打开一个空白网页；若不为空，则导航到改URL所指的网页或者打开一个新的浏览器窗口显示该URL所指网页参数二：窗口名称（可选）指被打开窗口的名称参数三：特性字符串（可

2016-08-02 11:16:12 16532

原创如何从github上下载源代码

首先要说明的是在github上只能clone一个完整的项目。为了保证一个项目的完整性，github不允许仅clone单个文件或文件夹。有三种方法从github上clone克隆项目：一、在线浏览并赋值想要的代码直接点开赋值粘贴即可二、直接下载压缩包点击项目名称（红色圈圈内），进入项目主页，看到红箭头所指“Download ZIP”点击即可下载该项目的压缩包到本地三、用git clone源代码

2016-04-13 22:04:00 88035 2

暖暖2333的专栏