javascript
小北lulu
做一只前端小精灵吧
展开
-
js的几种常见的算法排序总结
冒泡排序思想:比较相邻的两个元素的大小,顺序如果相反的话则进行交换,这样的话每次循环都可以将最小的或者最大的元素放到后面,最终达到排序的效果(可升序可降序)代码实现var array = [3, 4, 1, 5, 2, 45, 1, 23]function bubbleSort(arr) { // 数组的长度小于或等于1,或不是一个数组时不需要排序 ,直接返回数组 if (arr.length <= 1 || !Array.isArray(arr)) return arr原创 2021-02-23 21:28:35 · 167 阅读 · 1 评论 -
服务端渲染
随着前端技术的不断发展,涌现了许多客户端渲染的前端框架,这些框架所构建的单页面应用的优点为:用户体验好开发效率高渲染性能好可维护性好缺点为:单页面应用的首屏渲染时间过长,与服务端渲染好的页面返回前端所不同的是,单页面应用是等待前端js编译完成才渲染页面,所以出现了首屏加载时间过长的问题单页面不利于 SEO解决方案:同构应用通过服务端渲染首屏直出,解决spa页面首屏渲染慢以及不利于seo通过客户端渲染接管页面内容交互得到更好的用户体验这种方式通常被称为现代化的服务端渲染,也原创 2020-12-17 10:29:43 · 317 阅读 · 1 评论 -
Nuxt.js 基本使用
介绍官网介绍:Nuxt.js 是一个基于 Vue.js 的通用应用框架,通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染,我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js,Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置,除此之外,我们还提供了一种命令叫:nuxt generate ,为基于 Vue.js 的应用提供生成对应的静态站点的功能。我们相信这个命原创 2020-12-17 10:21:35 · 609 阅读 · 2 评论 -
javascript 发布订阅模式和观察者模式
发布订阅模式三要素:订阅者,发布者,信号中心我们假定存在一个信号中心,某个任务完成就向信号中心发布一个信号,其他任务可以向这个信号订阅这个模式,从而知道自己什么时候可以开始执行,这样的模式叫做发布订阅模式代码实现:<body> <script> // 事件触发器 class EventEmitter { constructor() { this.subs = Object.crea原创 2020-09-15 21:43:55 · 147 阅读 · 0 评论 -
Vue2.x和3.x的响应式原理
vue2.x 数据响应式核心原理官网描述:当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。实现对一个属性进行监听转换<script>原创 2020-09-15 09:52:29 · 347 阅读 · 0 评论 -
Promise源码实现原理
1. promise基本用法的简单实现promise就是一个类,在执行这个类的时候需要传递一个执行器过去,这个执行器会立刻执行promise中有三个状态,分别为 等待-pending,成功-fulfilled,失败-rejected。状态只可以 pending–>fulfilled, pending–>rejected,一旦状态确定就不可以更改promise中resolve和reject是用来更改状态的,resolve:fulfilled,reject:rejectedthen方法内原创 2020-07-26 18:06:25 · 284 阅读 · 0 评论 -
Promise,Generator,async/await学习总结基本用法
promise首先,promise是一种更优的异步编程解决方案,如果我们直接使用传统的回调方式去解决异步流程,就会避免不了大量的回调函数嵌套,形成回调地狱,ajax.get(url,function(data1){ ajax.get(url,data1,function(data2){ ajax.get(url,data2,function(data3){ ajax.get(url,data3,function(data4){原创 2020-07-25 11:26:27 · 165 阅读 · 0 评论 -
谈谈你是如何理解JS异步编程的,EventLoop、消息队列都是做什么的,什么是宏任务,什么是微任务?
1.javascript为什么是单线程?与javascript的设计初衷有关,最早javascript是运行在浏览器中的脚本语言,目的是为了实现页面上的动态交互,实现页面的核心是dom操作,所以决定了javascript是单线程,否则会出现线程同步的问题:比如多个线程同时操作一个dom元素,这时浏览器不知道要以谁的操作为准,造成代码执行顺序混乱javascript是单线程也就意味着浏览器有多个任务的时候要排队依次进行,一个一个完成,这种模式的优点是比较安全。缺点是如果我们遇到一个特别消耗时间的任务原创 2020-07-22 21:20:38 · 702 阅读 · 0 评论 -
web性能优化---js篇
1:垃圾收集日常中的某些情况下垃圾收集器无法回收无用变量,导致的一个结果就是——内存使用率不断增高,以下为对应的情况以及处理方法。①对象相互引用会导致引用计数始终为2,所以用完对象后应将引用设为null,例子如下:let element = document.getElementById("test");let myObject = new Object();myObject.element = element;element.someObject = myObject;用完后需要加如下代码转载 2020-07-06 21:15:36 · 134 阅读 · 0 评论 -
原生ajax请求过程
创建ajax对象,创建XMLHttpRequest对象,也就是创建一个异步调用对象.var xhr = new XMLHttpRequest();创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息xhr.open('GET', url, true);发送请求xhr.send(要发送的数据);接收响应//服务器响应状态(readyState)改变时都会被执行xhr.onreadystatechange = function(){ //0 (未初始化)对象已经创建,但还.原创 2020-07-05 22:07:32 · 147 阅读 · 0 评论 -
js中的原型和原型链--学习笔记
构造函数:function Foo ( ) { };实例对象:let f1=new Foo;let o1=new Foo;每个函数都有 prototype 属性,除了 Function.prototype.bind(),该属性指向原型。每个对象都有 __proto__ 属性,指向了创建该对象的构造函数的原型。其实这个属性指向了 [prototype],但是[prototype]是内部属性,我们并不能访问到,所以使用 _proto_来访问。对象可以通过 __proto__来寻找不属于该对象的属性,_转载 2020-07-05 19:13:04 · 158 阅读 · 0 评论 -
js中if判断条件的小技巧,判断存在的条件
if条件语句中,条件为true时会执行条件语句日常开发中的总结:1.所有的对象都是true,包括空数组(数组也是对象)如果判断对象数组是否为空可以:if(arr.length){...}判断对象是否为空:if(Object.keys(obj).length){...}2.unll 和undefined 都被当做 false,一般可以设置为初始值,赋值以后可以这样判断是否为空,var a = nulla = "xuke"if(a){...}3.当数字为0时为false,其他的为tr原创 2020-07-02 22:08:10 · 1071 阅读 · 1 评论 -
三个等号和两个等号的区别(“===”和“==”)
1、===:称为等同符,当两边值的类型相同时,直接比较值,若·类型不相同,直接返回false;2、==:称为等值符,当等号两边的类型相同时,直接比较值是否相等,若不相同,则先转化为类型相同的值,再进行比较;如果等号两边是boolean、string、number三者中任意两者进行比较时,优先转换为数字进行比较,如果是对象则先.toString()之后再进行比较如果等号两边出现了null或undefined,null和undefined除了和自己相等,就彼此相等null 和 Undefined 与其原创 2020-07-02 21:55:13 · 2024 阅读 · 0 评论 -
js中的深克隆(深拷贝)和浅克隆(浅拷贝)
浅克隆:直接将存储在栈中的值赋值给对应变量,如果是基本数据类型,则直接赋值对应的值,如果是引用类型,则赋值的是地址基本数据类型是直接存储在栈内存中的,而引用数据类型,则仅仅是把地址存储在栈内存中,真正的数据是存储在堆内存中的,赋值操作时,仅仅把地址进行了赋值。深克隆:就是把数据赋值给对应的变量,是拷贝对象各个层级的属性,在内存中开辟一块新内存,将原对象中的所有值全部复制过去,与原对象完全脱离,修改新对象中的属性值不会影响原对象、浅克隆举例let a = "xu";let b = a;aler原创 2020-07-02 13:24:20 · 726 阅读 · 0 评论 -
javascript函数式编程,读了这篇你就会了
什么是函数式编程首先,Javascript可以进行函数式编程,因为JavaScript中的函数就是第一类公民。这意味着变量可以做的事情函数同样也可以。ES6标准中还添加了不少语言特性,可以帮助用户更充分地使用函数式编程技术,其中包括 箭头函数、Promise对象和 扩展运算符 等。在Javascript中,函数可以表示应用程序中的数据。细心的读者应该已经发现,可以使用关键字var像声明字符串、数字或者其他任意变量那样声明函数:var log =function(message){ console.l原创 2020-06-27 20:05:09 · 1197 阅读 · 0 评论 -
和我一起完全理解javascript中的宏任务与微任务
在了解 宏任务 与 微任务 之前我们必须要先弄清 javascript 中的 执行机制 这个概念,弄清楚了这个概念,宏任务 与 微任务 的理解也就 so easy 了~~javascript 中的执行机制1.关于javascriptjavascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的。1.1 JS为什么是单线程的?答:JavaScript的单线程,与它原创 2020-06-22 14:20:33 · 1414 阅读 · 2 评论