- 博客(46)
- 收藏
- 关注
RSS订阅原创 call、bind、apply三者的区别
当一个函数作为构造器使用时(通过 new 关键字), 它的 this 值绑定到新创建的那个对象。3、如果你在声明一个变量的时候没有使用var或者let、const(es6),你就是在给全局的this添加或者改变属性值。this改变为obj了，但是绑定的时候立即执行，当触发点击事件的时候执行的是fn的返回值undefined。对于函数中的this的指向问题，有一句话很好用：运行时this永远指向最后调用它的那个对象。bind会把fn中的this预处理为obj，此时fn没有执行，当点击的时候才会把fn执行。
2023-04-26 21:27:32
6880
2
原创 Promise的状态和方法
then 方法为 Promise 对象注册了 onFulfilled 和 onRejected 函数。catch 方法为Promise 对象注册了 onRejected 函数。在resolve 或者 reject 调用之前都处于这个状态。执行 resolve 函数，状态改变为 fulfilled。执行 reject 函数，状态改变为 rejected。最终成功状态 -> fulfilled。执行 onFulfilled 函数。最终失败状态 -> rejected。执行 onRejected 函数。
2023-04-26 21:05:52
654
原创 AJAX详情以及使用
ajax 全名 async javascript and XML(异步JavaScript和XML)是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。是⼀个 默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）同步请求是指当前发出请求后，浏览器什么都不能做，
2023-04-25 17:06:37
506
原创 Webpack配置
Loader本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。Plugin就是插件，基于事件流框架Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
2023-03-15 10:02:16
2661
原创 生成13位条形码
生成13位条形码（简单版） var str = []; //创建了一个存放12位的数组 var even = 0; // 存放奇数 var odd = 0; //存放偶数 while (str.length != 12) { //判断够不够12位，不够自动生成 str.push(parseInt(Math.random() * 10)); } //遍历12位数组 for (var i = 0; i < str.leng
2022-04-02 10:00:22
1772
原创 JS相关面试简单总结
原型和原型链prototype每个函数都有一个prototype属性，被称为显示原型2._ proto _每个实例对象都会有_ proto 属性,其被称为隐式原型每一个实例对象的隐式原型 proto _属性指向自身构造函数的显式原型prototypeconstructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型_ proto 上去找，如果还查不到，就去找原型的原型，一直找到最顶层(
2021-07-02 10:53:36
156
原创 为什么清除浮动、清除浮动方法
1.为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题1.比如,我给父盒子设置一个boder,内部放两个盒子一个big、一个small，未给big和small设置浮动，则他们会默认撑开父盒子2.如果给这两个盒子都加上了float属性的时候，底部的盒子就会顶上来，因为父盒子没设置高度，变成一条线，big和small已经浮动了小结：当父元素不给高度的时候，内部元素不浮动的时候会撑开，而浮动时父元素会变成一条线，所以这个时候就需要解决浮动2.清除浮动的四种方式
2021-06-22 09:12:19
277
原创 computed和watch的区别
计算属性computed :支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性
2021-06-22 09:05:16
106
原创 当url输入到页面发生了什么
当url输入到页面发生了什么1.浏览器的地址栏输入URL并按下回车，2.查找当前的URL是否存在缓存，并比较缓存是否过期，3.DNS解析URL对应的IP，4.根据IP建立TCP连接（三次握手），5.HTTP发起请求，服务器处理请求，浏览器接收HTTP响应，6.渲染页面，构建DOM树，7.关闭TCP连接（四次挥手）。三次握手、四次挥手三次握手：第一次：建立连接时，客户端发送syn包到服务器，等待服务端确认第二次：服务器收到syn包，必须确认客户的syn，同时也发送一个syn包，即s
2021-06-22 08:51:22
116
原创 http和https的区别
http和https的区别Http：超文本传输协议（Http，HyperText TransferProtocol)是互联网上应用最为广泛的一种网络协议。设计Http最初的目的是为了提供一种发布和接收HTML页面的方法。它可以使浏览器更加高效。Http协议是以明文方式发送信息的，如果黑客截取了Web浏览器和服务器之间的传输报文，就可以直接获得其中的信息。Https：是以安全为目标的Http通道，是Http的安全版。Https的安全基础是SSL。SSL协议位于TCP/IP协议与各种应用层协议之
2021-06-22 07:47:05
98
原创 v-if和v-show的区别
v-if和v-show的区别共同点：v-if 和 v-show 都能实现元素的显示隐藏区别：1.v-show只是简单的控制元素的display属性，而v-if才是条件渲染（条件为真，元素会被渲染，条件为假，元素会被销毁）2.v-show有更高的首次渲染开销，而v-if的首次渲染开销小的多3.v-if有更高的切换开销，v-show切换开销小4.v-if有配套的v-else和v-else-if，而v-show没有5.v-if可以搭配template使用，而v-show不行...
2021-06-21 09:30:20
119
原创 函数防抖与节流
函数防抖与节流js防抖和节流也就是在我们平常开发中频繁处理dom事件时会用到的。在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数频繁调用，会加重浏览器的负担，导致用户体验差，这时候我们就可以采用防抖与节流的方式来减少调用的频率，同时也不会影响效果。函数防抖函数防抖（debounce）：是指事件被触发第几秒后才会执行回调，就是如果在这几秒内事件又被触发，它就会重新去计算函数防抖的应用场景：对于连续的事件响应我们只需要执行一此回调：每次resize和scroll触发
2021-06-20 21:30:19
106
原创 vue双向数据绑定
一、vue双向数据绑定是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。第一步： 需要observer对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter，这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile解析模板指令，将模板中的变量替换
2021-06-20 21:10:08
134
原创 后台管理系统----配置和封装(1)
前言：后台管理系统，很多人都感觉后台管理系统很难，其实它并不是难，而是觉得它难的人没有熟悉Element-ui,只要熟悉了Element-ui,运用的熟练了,我们不说后台管理系统就会特别简单，但它简单一点还是可以的。这里我就给大家简单讲解一下我的项目。Element-ui的官网现在开始我们的项目讲解，当然每个人有每个人的写法，我的讲解和写法可能并不适合每个人，但还是会有一点帮助的。首先写这个项目的时候我们要考虑我们使用Element-ui使用全局引入还是按需导入，这里我推荐用按需导入，这样在后期打
2021-06-11 11:54:07
803
1
原创 Windows下安装Nginx
Windows下安装Nginx前言Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站 点（俄文：Рамблер）开发的它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。安装步骤1.下载(首先要下载,不下载你怎么用是吧)下载地址：链接:http://nginx.o
2021-06-07 11:57:16
180
原创 webpack打包优化
打包1.我们首先要创建vue.config.js文件，将静态资源设置为"./"，,否则打包后项目无法运行，并且我们要关闭SourceMap映射文件，是其大小减少80%module.exports = { publicPath: "./", productionSourceMap: false}跨域配置module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost
2021-06-07 07:49:04
200
原创 vue中封装axios 以及api 统一管理
一、安装axiosnpm install axios --save-dev二、创建文件夹在我们根目录下的src文件夹中创建一个http文件，专门用来放我们封装的axios。新建2个js文件，request.js 和 api.jsrequest.js专门用来封装。api.js专门用来放置我们的接口请求。三、封装axios1、引入axiosimport axios from “axios”;2、引入vueximport store from “@/store/index”;3、引
2021-06-07 07:42:10
252
原创 vue项目中vant-ui按需导入
vue项目中vant-ui按需导入首先安装插件,命令：npm i babel-plugin-import -D找到babel.config.js 文件将下面代码复制进去"plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ]然后我们就可以按需导入了这里创建一个vant.js文件import Vue from "
2021-06-04 07:59:19
92
转载 transition
CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的动画。transition的语法：transition： transition-property、transition-duration 、transition-timing-funciton、 transition-delaytransition的语法介绍定义用于过渡的属性；...
2021-06-02 07:41:04
115
原创 keep-alive实现原理
一、keep-alive介绍应用1.什么是keep-alivekeep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件中。2.作用在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性3.原理在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲
2021-06-01 21:39:51
8598
3
原创 JavaScript闭包
闭包1、概念闭包函数：声明在一个函数中的函数，叫做闭包函数。闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。2、闭包优点1.变量长期驻扎在内存中2.另一个就是可以重复使用变量，并且不会造成变量污染①全局变量可以重复使用，但是容易造成变量污染。不同的地方定义了相同的全局变量,这样就会产生混乱。”②局部变量仅在局部作用域内有效，不可以重复使用，不会造成变量污染。③闭包结合了全局变量和局部变量的优点。可以重复使用变量，并且不会造成变量污染
2021-05-30 18:30:52
55
原创 var、let、const的区别
JavaScript中的var、let、const的区别在Es5中，声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点(内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量)，所以Es6中提出了let和const声明变量，弥补了Es5中var的缺点。1.是否存在变量提升？var声明变量存在变量提升(将变量提升到当前作用域的顶部)。即变量可以在声明之前调用，值为function。let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否
2021-05-28 20:26:48
59
原创 this指向/call、apply、bind的关系
This指向在js中this不是固定不变的，它会随着执行环境的改变而改变。要注意的是this取的什么值，是在执行时确认的，定义时无法确认。this的调用大概分为五种场景：1.浏览器里，在全局范围内的this指向的时window对象。2.构造函数中，this指向new出来的那个新的对象。3.在函数中，this永远指向最后调用他的那个对象4.Call、apply、bind中的this被强绑定在指定的那个对象上。5.箭头函数中this比较特殊，箭头函数this为父作用域的this，不是调用时的thi
2021-05-27 19:49:30
95
转载 javascript的原型和原型链
javascript的原型和原型链1.prototype每个函数都有一个prototype属性，被称之为显示原型。2.proto每个实例对象都会有__proto__属性，它被称之为隐式原型每一个实例对象的隐式原型__ proto__属性指向自身构造函数的显示原型prototype3.constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。4.原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找
2021-05-26 19:26:05
72
原创 数组的方法
js数组方法总结push() : 将一个元素添加到数组末尾，并返回修改后的新数组。pop() : 将数组最后一个元素删除，返回被删除的那个值。shift() : 将数组第一个元素删除，返回被删除元素的值，如果数组为空返回undefined。unshift() : 把一个新的元素添加到数组开头，并返回新的数组。join() : 把数组转换为字符串sort() : 把数组从小到大排序arr.sort(function(a,b){ return a-b; //从小到大
2021-05-25 21:56:21
64
转载 js之arguments详解
平时编写js代码对arguments接触的可能不是很多，但是了解arguments却是很有必要的。例如，需要编写一个函数求传入的若干个数字（不能用数组显示传入）的和，这时候就需要用到arguments了。要实现这个函数我们先来了解下arguments：具体可参考http://www.w3school.com.cn/js/pro_js_functions_arguments_object.asp在Javascript中arguments是一个类似Array的存在，但它不能等同于Array。argu
2021-05-25 21:10:57
138
原创 手写深拷贝
三种实现方式1、JSON方法实现： let _tmp = JSON.stringify(obj);//将对象转换为json字符串形式 let result = JSON.parse(_tmp);//将转换而来的字符串转换为原生js对象2、通过for in实现function deepCopy1(obj) { let o = {} for(let key in obj) { o[key] = obj[key] } return o}let obj = { a:1,
2021-05-25 07:51:14
76
原创 类型判断
判断数据类型的四种方法在 ECMAScript 规范中，共定义了 7 种数据类型，分为 基本类型 和 引用类型 两大类，如下所示：基本类型：String、Number、Boolean、Symbol、Undefined、Null引用类型：Object object又分为(Function 、Array、RegExp、Date)基本类型也称为简单类型，由于其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈中，即按值访问。引用类型也称为复杂类型，由于其值的大小会改变，所以不能将其存放
2021-05-25 07:48:29
889
原创 数据类型
js数据类型注：js数据类型有8种在ES5中，我们所认识的数据类型确实有6中分别：Number、String、Boolean、Undefined、Object、Null、Symbol、BigintES6中又新增加了一种Symbol。这种类型的对象永不相等，即使创建的时候传入相同的值，可以解决属性名冲突的问题，作为标记。在谷歌67版本中还出现了一种bingInt。是指安全存储、操作大整数。(但是很多人不把这个作为一个类型)问：1.js的数据类型有哪几种？8种。Number、String、Bool
2021-05-24 19:35:53
1302
原创 深拷贝
深拷贝:拷贝值浅拷贝: 拷贝地址深拷贝将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象浅拷贝创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，假如属性是引用类型，则拷贝的是内存地址。因此如果其中一个对象改变了这个地址，就会影响到另一个对象。处。浅拷贝let target = {};let sources = {a:{b:2}};Object.assign(target,sources
2021-05-23 21:55:27
71
原创 vue-router （两种路由模式、编程式/组件式、如何传参(优缺点)
vue-router （两种路由模式、编程式/组件式、如何传参(优缺点)veu-router的两种路由模式：hash 和 history为什么要有 hash 和 history？对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一个目的，浏览器提供了两种路由模式，就是hash 和 history。1.hash —— 即地址栏 URL
2021-05-23 20:05:01
504
原创 vuex (概念、几部分组成、map高级语法、数据持久化)
vuex (概念、几部分组成、map高级语法、数据持久化)vuex概念：vuex是一个专门为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex由哪几部分组成：vuex由state、mutations、actions、getters、modules五部分组成。state：state用于存储网页中对应组件的所有数据mutations：mutations是一个唯一能够修改state的操作。我们如果想要改
2021-05-21 20:59:15
578
原创 vue生命周期
Vue生命周期beforeCreate( 创建前 )在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。created ( 创建后 ）实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始,$el属性目前不可见，这是一个常用的生命周期，
2021-05-20 21:58:22
54
原创 Vue组件通讯（子传父、父传子、兄弟组件传值）
Vue组件通讯vue组件通讯常用的有三种：1.父传之2.子传父3.兄弟传值简单的三个概念：父传子：在父组件的子组件标签上绑定一个属性，属性上挂载需要传递的值，在子组件通过props:[“自定义属性名”]来接收子传父：在父组件中给子组件标签上绑定一个自定义事件，给这个事件挂载需要调用的方法。然后在子组件的方法中通过this.$emit(‘自定义事件名’)来调用这个方法兄弟组件通讯：1.创建一个空的vue实例eventBUS。2.通过BUS.$emit(‘事件名’)传到空的vu
2021-05-20 21:47:25
263
原创 使用promise封装uni.request
首先在项目根目录下创建一个request文件夹文件夹里创建一个request.js文件，用来封装uni.request如图：然后进行封装创建一个promise对象，调用uni.request()内置api，返回成功或失败数据，将请求数据所需地址、参数、请求类型作为形参封装过后导出，并在根目录下的main.js文件中全局引入且挂载到vue原型上，由此一来，每个页面都可以调用如图：在需要调用该请求的页面，推荐在method中，使用async和await，同步化封装请求事件，方便调用及链式书写
2021-05-20 07:53:41
402
原创 vue组件通信
vue是单向数据流①props / $emit父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。②$children / $parentthis.$children[0].msg = “hello world” //父组件修改子组件data中的数据this.$parent.mag //子组件拿到父组件data中的数据children的值是数组，children的值是数组，children的值是数组，parent的值是个对象注意：parent，parent，pa
2021-05-20 07:47:28
75
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人