- 博客(27)
- 收藏
- 关注
RSS订阅原创 理解JavaScript之js数据类型
由于 JavaScript 是弱类型语言。声明变量的时候并没有预先确定的类型，变量的类型就是其值的类型。这种特性既带来了便利，也带来了问题。本文将对 JavaScript 数据类型进行一点总结。
2023-11-17 11:31:13
98
原创 node开发环境多版本配置
工作和学习过程中，我们很大概率会遇到不同项目需要不同的node版本支持，否则无法正常跑起项目的问。为了解决次问题，本文将描述如何安装多个node版本以及几种安装的方式。
2023-11-16 14:37:49
838
原创 WebSocket 和 Socket
WebSocketWebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。目的：即时通讯，替代轮询应用场景：网站上的即时通讯是很常见的，比如网页的QQ，聊天系统等。按照以往的技术能力通常是采用轮询、Comet技术解决。HTTP协议是非持久化、单向的网络协议。在建立连接后只允许浏览器向服务器发出请求后，服务器才能返回相应的数据。http作为即时通讯的缺点：过多不必要的请求 需要不
2020-06-22 12:34:54
1866
转载 函数防抖与函数节流
函数防抖（debounce）函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。即：当一个动作连续触发，则只执行最后一次。函数节流（throttle）限制一个函数在一定时间内只能执行一次。应用场景函数防抖连续的事件，只需触发一次回调的场景有：搜索框搜索输入。只需用户最后一次输入完，再发送请求 手机号、邮箱验证输入检测 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。函数节流间隔一段时间
2020-06-19 15:03:11
185
原创 HTTP性能优化
HTTP请求的过程1.DNS解析2.TCP连接3.发送HTTP请求4.服务器处理请求并返回HTTP报文5.浏览器解析渲染页面6.连接结束通信性能区别HTTP1.0与HTTP1.1HTTP1.1持久化连接 HTTP1.1管线化技术HTTP2.0与HTTP1.1HTTP2.0多路复用 HTTP2.0HTTP协议头部压缩HTTP/1.1中的Web优化HTTP/1.1中大多数的网站性能优化技术都是减少向服务器发起的HTTP请求数。浏览器可以同时建立有限个TCP连接
2020-06-18 10:16:52
493
原创 理解框架之观察者模式 vs 发布-订阅模式
观察者模式观察者模式，是为了实现松耦合（loosely coupled），也就是为了解耦。观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。发布订阅模式发布订阅模式中，称为发布者的消息发送者不会将消息直接发送给订阅者，这意味着发布者和订阅者不知道彼此的存在。在发布者和订阅者之间存在第三个组件，称为消息代理或调度中心或
2020-06-18 09:03:03
334
原创 hash模式 vs history模式
hash模式hash 就是指 url 尾巴后的 # 号以及后面的字符。hash 模式背后的原理是onhashchange事件。hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件// 设置 url 的 hash，会在当前url后加上 '#test' window.location.hash = 'test' // '#test'var hash = window.location.hash// 监听hash变化，点击浏览器的前进后退
2020-06-18 09:00:19
242
原创 移动端适配
1. 百分比布局，固定宽度优点：原理简单，不存在兼容性问题缺点：如果屏幕尺度跨度太大，相对设计稿过大或者过小的屏幕不能正常显示，在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。设置盒模型的不同属性时，其百分比设置的参考元素不唯一，容易使布局问题变得复杂2. 弹性布局，固定宽度3. rem方案实现：先获取文档根元素和设备dpr，设置 rem，在html文档加载和解析完成后调整body字体大小； 在页面缩放 / 回退 / 前进的时候， 获取元素的
2020-06-18 08:56:00
104
原创 js正则表达式
1、基本概念正则表达式：使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。即：按照某种规则去匹配符合条件的字符串2、RegExp对象js通过内置对象RegExp支持正则表达式，有两种方法实例化RegExp对象。字面量 构造函数案例1：匹配字符创中小写的is变为大写的is// 字面量方式let reg = /\bis\b/g; "He is a boy. This is a dog. Where is she?".replace(reg, "IS");//控制台
2020-05-26 22:32:42
826
原创 理解框架之Vue组件通信
组件通信方式：props / $emit $emit / $on vuex $attrs / $listenters procvide / inject $parent / $children $root & refsprops / $emit最常用的父子组件通信方式。父组件通过props传递数据给子组件，子组件通过emit发送事件传递数据给父组件。父组件向子组件传值，通过绑定属性来向子组件传入数据，子组件通过 Props 属性获取对应数据。特点：符合单向数...
2020-05-22 13:49:39
209
原创 WebSocket
为什么需要 WebSocket？HTTP协议请求具有单向通信的特点，服务器无法主动向客户端发送信息，如果服务器有连续的状态变化，只能通过轮询进行查询，但是轮询的效率非常低，且浪费资源。WebSocket协议便为解决这种问题而发明。WebSocket是伴随HTML5发布的一种新协议。能够实现浏览器与服务器全双工通信(full-duplex)特点：允许服务器和客户端进行双向的平等对话 建立在TCP协议之上，服务器端实现简单 与HTTP协议有良好的兼容性，默认端口也是80和443，并且握手阶段
2020-05-20 14:45:26
1390
原创 理解框架之响应式原理(Vue)
Vue不支持IE8一下的浏览器，是因为vue是基于Object.defineProperty来实现数据响应的。而Object.defineProperty是ES5中无法shim的特性。Vue通过Object.defineProperty的getter/setter对收集的依赖项进行监听，在属性被访问和修改时通知变化，进而更新视图数据。受现代javascript的限制（废弃了Object.observe），Vue不能检测到对象属性的添加和删除。由于Vue会在初始化实例时对属性执行getter/sette.
2020-05-20 08:43:16
348
转载 理解框架之MV*
mvc架构mvc(modal-view-controller)是比较常用的框架，也是早期的后端服务框架，后来随着富客户端的发展，在前端也使用了起来。mvc的目的是把软件分成三个部分，这样关注点分离，便于更好的维护代码，方便进行业务扩展。其各部分的通信如下。特点： 每个层的通信都是单向通信的。优点：职责分离：模块化程度高、Controller可替换、可复用性、可扩展性强。 多视...
2020-05-06 23:31:23
299
原创 理解JavaScript之函数式编程（概念）
定义"函数式编程"是一种"编程范式"（programming paradigm），也就是如何编写程序的方法论。它属于"结构化编程"的一种，主要思想是把运算过程尽量写成一系列嵌套的函数调用。举例来说，现在有这样一个数学表达式：(1 + 2) * 3 - 4传统的过程式编程，可能这样写：var a = 1 + 2; var b = a * 3; var c = b - 4;...
2020-05-05 22:17:47
1200
原创 理解JavaScript之Event Loop（JavaScript和node环境下区别）
javascript是一门单线程语言，按照语句出现的顺序执行的。执行和运行JavaScript 的执行和运行是两个不同概念的，执行，一般依赖于环境，比如 node、浏览器、Ringo 等， JavaScript 在不同环境下的执行机制可能并不相同。而Event Loop 就是 JavaScript 的一种执行方式。而运行，是指JavaScript 的解析引擎。这是统一的。事件循环（Ev...
2020-05-05 21:07:50
416
原创 理解JavaScript之深浅拷贝
JavaScript的数据类型分为基本数据类型和引用数据类型。对于基本数据类型的拷贝，并没有深浅拷贝的区别，我们所说的深浅拷贝都是对于引用数据类型而言的。浅拷贝只是对指针的拷贝，拷贝后两个指针指向同一个内存空间，深拷贝不但对指针进行拷贝，而且对指针指向的内容进行拷贝，经深拷贝后的指针是指向两个不同地址的指针。浅拷贝浅拷贝的意思就是只复制引用，而未复制真正的值。const or...
2020-05-05 19:08:08
160
原创 理解JavaScript之Promise
在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。Promise 是异步编程的一种解决方案： 从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 promise有三种状态：pending(等待态)，fulfiled(成功态)，re...
2020-05-05 18:23:59
219
原创 理解JavaScript之构造函数、原型和原型链
构造函数构造函数模式的目的就是为了创建一个自定义类，并且创建这个类的实例。构造函数模式中拥有了类和实例的概念，并且实例和实例之间是相互独立的，即实例识别。constructor返回创建实例对象时构造函数的引用。这个属性是对函数本身的引用，而不是一个包含函数名称的字符串。function Parent(age){ this.age = age;}var p = new P...
2020-05-05 16:37:34
182
1
原创 理解JavaScript之模拟call()、apply()、bind()
call()特点：被函数调用（函数也是对象），相当于 call 和 apply 是函数的属性 如果没有传入需要 this 指向对象，那么 this 指向全局对象 函数执行了 最后改变了 this 的指向Function.prototype.newCall = function(context){ //判断context是否为object，如果是object就代表可能是Obje...
2020-04-28 22:59:35
153
原创 理解JavaScript之this
ECNAScript规范中这样描述this:this 关键字执行为当前执行环境的 ThisBinding。MDN上这样描述this:In most cases, the value of this is determined by how a function is called.在绝大多数情况下，函数的调用方式决定了this的值。在JavaScript中，this的指向是调用...
2020-04-28 22:30:57
110
原创 理解JavaScript之作用域、作用域链和闭包
作用域作用域是指程序源代码中定义变量的区域。决定这个变量的生命周期及其可见性。作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域。PS：通过var创建的变量只有函数作用域，而通过let和const创建的变量既有函数作用域，也有块作用域。var value = 1;fun...
2020-04-26 23:25:07
142
转载 理解JavaScript 之执行上下文和执行栈
执行上下文简而言之,执行上下文就是评估和执行JavaScript代码的环境的抽象概念.执行上下文类型全局执行上下文默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的window对象（浏览器下） 设置this的值等于这个全局对象一个程序只有一个全局执行上下文。函数执行上下文每当一个函数被调用时，都会为该函数创建一个新的执行上...
2020-04-25 22:43:54
203
原创 vue笔记 - 导航钩子(路由守卫)
守卫分类全局守卫： router.beforeEach全局解析守卫：router.beforeResolve全局后置钩子：router.afterEach路由独享守卫：beforeEach组件内的守卫：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate（vue2.2+）作用通过跳转或取消的方式守卫导航。PS：参数或查询的改变不...
2020-04-15 23:17:20
252
原创 vue笔记 - render函数
虚拟DOM虚拟DOM就是在js中模拟DOM对象树来优化DOM操作的一种技术和思路。可以提高DOM操作的性能。虚拟DOM不是真正意义上的DOM，它是一个轻量级的JavaScript对象，在状态发生变化时，会进行Diff运算，仅更新发生变化的DOM，由于不完全重绘的效果，可以大大提高更新渲染性能。当render函数描述虚拟DOM时，vue提供一个函数(createElement)，这个函数就是构...
2020-04-14 11:13:27
215
原创 vue笔记 - 异步路由懒加载
异步组件指只有页面需要的时候才从服务器加载的组件。懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。通过异步加载的方式, 可以实现按需加载组件, 这样可以提高页面的加载速度, 提高用户体验,解决白屏问题。在webpack + vue中实现异步组件的方法不止一种。方法一:import方法二:resolve方法三:require.ensure(...
2020-04-08 13:40:22
200
转载 vue笔记 - 声明周期和钩子函数
生命周期生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数。 实例化的时特定阶段调用特定方法，调用的这个方法就是钩子函数。钩子函数 钩子函数功能类似于回调函数, 但是又有区别. 区别:钩子函数: js派发函数监听事件 => 监听函数(钩子函数) => 函数主动寻找事件 => 钩子函数 回调函数: js为dom事件预留的函数 => ...
2020-04-07 11:21:48
236
原创 js笔记 - 数组和伪数组
数组和伪数组伪数组是一个Object，数组是Array。对象和数组之间的关系JavaScript的内置函数继承与 Object.prototype。可以认为new Array()和[]创建出来的数组对象， 都拥有Object.prototype属性值。var obj = {}; //拥有Object.prototype的属性值var arr = []; //由于Array.pr...
2020-04-05 15:05:15
570
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人