- 博客(33)
- 收藏
- 关注
RSS订阅
原创 vue双向数据绑定
vue双向数据绑定概念：Vue.js采用数据劫持发布者订阅模式的方式，通过object.defineproperty()来劫持setter和getter在数据变动时，发布消息给订阅者，触发相应的回调来渲染视图1、实现一个数据监听器Observer(恶不热玩)，能够对对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile(康拍哦)，对每个元素节点的指令进行扫描和解析，替换数据，绑定更新函数3、实现一个 Watcher，作为连接Observer 和 Comp
2021-01-08 14:13:05
295
原创 promise是什么？有哪些状态和参数？如何使用？
名词约定一般来讲，有以下的名词约定：promise（首字母小写）对象指的是“Promise实例对象”Promise首字母大写且单数形式，表示“Promise构造函数”Promises首字母大写且复数形式，用于指代“Promises规范”promise是什么？是异步队列的一种解决方案有哪些状态和参数？promise有三种状态1.pending【待定】初始状态2.fulfilled（否否得）【实现】操作成功3.rejected (瑞杰巅特)【被否决】操作失败改变他们的状态，如果从pend
2020-12-17 22:01:56
1187
原创 commit常用类型
commit常用类型feat:: 类型为 feat 的提交表示在代码库中新增了一个功能（这和语义化版本中的 MINOR 相对应）。fix:：类型为 fix 的 提交表示在代码库中修复了一个 bug （这和语义化版本中的 PATCH 相对应）。docs:: 只是更改文档。style:: 不影响代码含义的变化（空白、格式化、缺少分号等）。refactor:: 代码重构，既不修复错误也不添加功能。perf:: 改进性能的代码更改。test:: 添加确实测试或更正现有的测试。build:: 影响构
2021-04-15 15:09:50
1319
原创 h5兼容的页面
移动端常用meta整理<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="ye
2021-04-06 09:34:32
223
原创 移动端禁止放大
首先在html文件 找到mate，复制下面代码进行覆盖<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />initial-scale: 初始的缩放比例；minimum-scale: 允许用户缩放到的最小比例；maximum-scale: 允许用户缩放到的最大比例；user-scal
2021-04-02 09:24:44
212
原创 new一个对象 做了哪些？？
new 手写实现 new做了哪些事情(1) 创建一个新对象；(2) 将构造函数中的this指向该对象(3) 执行构造函数中的代码（为这个新对象添加属性） ；(4) 返回新对象。function _new(obj, ...rest){ // 基于obj的原型创建一个新的对象 const newObj = Object.create(obj.prototype); // 添加属性到新创建的newObj上, 并获取obj函数执行的结果. const result
2021-04-01 17:03:49
360
原创 vue-cli4打包优化（10M变600kb）
项目开始时webpack配置vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。一、 配置 proxy 跨域使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, //
2021-03-07 19:10:04
1059
原创 javascript原生出现次数最多的字符，指定字符出现了几次
统计一个字符串中某个字符出现的次数？ function sum(zifuchuan, zifu) { let b = zifuchuan.indexOf(zifu); var num = 0; while (b !== -1) { console.log(b); num++; b = zifuchuan.indexOf(zifu, b + 1) } return num; }统计一个字符串中，出现次数最多的字符，.
2021-01-22 07:59:46
104
原创 js异步之宏任务（marcroTask）和微任务（microTask）
你绝对想不出答案console.log(100);setTimeout(()=>{ console.log(200);})setTimeout(()=>{ console.log(201);})Promise.resolve().then(()=>{ console.log(300);})console.log(400);答案在最后什么是宏任务和微任务宏任务包括：setTimeout setInterval Ajax DOM事件微
2021-01-20 16:16:08
303
原创 闭包的垃圾回收机制
闭包概念当一个函数的返回值是另一个函数，返回的那个函数如果调用了父函数的内部变量，且在外部被执行就产生了闭包闭包 特性1.函数套函数，2.内部函数访问外部函数变量，参数3.变量和参数不会被垃圾回收机制回收 （标记清除，引用计数）闭包优点1.变量长期住在在内存中2.不会造成全局污染3.私有成员的存在闭包的缺点常驻内存 增大内存的使用量 使用不当会造成内存的泄露闭包的应用场景1.setTimeout原生的setTimeout有一个缺陷，你传递的第一个函数不能带参数就可以用闭包来实现
2021-01-20 16:07:07
1499
原创 前端常见浏览器兼容性问题解决方案
前端常见浏览器兼容性问题解决方案css兼容js兼容**1.事件绑定:****2. event事件对象问题****3. event.srcElement(事件源对象)问题****4. 阻止事件冒泡传播：****5. 阻止事件默认行为：**6. ajax兼容问题css兼容1. 不同浏览器的标签默认的margin和padding不同问题症状： 随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率: 100%解决方案：CSS里 *{margin:0;paddin
2021-01-19 11:33:45
2155
原创 JS操作DOM
文章目录获取DOM操作鼠标事件键盘事件表单事件浏览器事件移动端事件获取DOM操作增删改查创建元素节点 ：document.createElement(“div”);removeChild()；//该方法不是在待删除的节点上调用，而是在它的父元素节点上调用。document.getElementById() 返回对拥有指定 id 的第一个对象的引用。鼠标事件onload :页面加载时触发onclick :鼠标点击时触发onmouseover :鼠标滑过时触发onmouseout :
2021-01-18 19:06:57
1056
原创 $nextTick
vue.js中$nextTick与nextTick的区别$nextTick的用法:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。nextTick的用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。什么时候需要用的Vue.nextTick()你在Vue生命周期的created()钩子函数进
2021-01-16 10:09:36
184
原创 v-for中为何要使用key
v-for中为何要使用keykey是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点设置key值一定能提高diff效率吗？当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素在不使用key的情况，vue会进行这样的操作：分析下整体流程：
2021-01-16 09:58:40
685
原创 后台管理项目开发流程
1.多环境变量，axios请求响应拦截，api封装统一管理面试官你好，《后台管理》这个项目是我自己独立开发的，下面我给您介绍一下，我从0开始，到发布上线的流程。首先，开发这个项目我用的最新的vue脚手架3.0，项目创建完后，首先我会配置多环境变量，方便后期测试，上线阶段快速切换后台接口。然后安装配置项目所用的ui框架（后台管理系统element-ui,移动端vant-ui）,之后安装axios，对axios进行封装，添加请求拦截，和响应拦截，我一般在请求拦截器中,给请求头添加token字段。当然这个to
2021-01-15 21:58:05
1523
原创 Vue性能优化之节流防抖
防抖概念：函数被高频触发时停止触发后延时n秒再执行函数节流概念：函数被高频触发时延时n秒才会执行那么在 vue 中怎么使用呢：在公共方法中（如 untils.js 中），加入函数防抖和节流方法// 防抖export function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this; var args
2021-01-14 17:01:26
334
原创 自定义指令
自定义指令【全局指令】使用 Vue.diretive()（迪瑞体悟）来全局注册指令。【局部指令】组件或 Vue 构造函数中接受一个 directives 的选项。钩子函数。指令定义函数提供了几个钩子函数（可选）1.bind：绑定元素的时候调用2.inserted：绑定的元素插入父节点时调用，3.update：绑定元素的值改变的时候调用，改变之前，4.componentupdated（康噗嫩特）：绑定元素的值改变之后调用，5.unbind：解绑元素的时候调用钩子函数参数：el
2021-01-14 11:17:03
758
原创 路由守卫
路由守卫原理：如果没有权限不让进入，有权限才可以进入守卫方法接受三个参数 to：即将进入的目标from：导航正要离开的路由next：执行下一步next扩展next(false);//不让走next(true);//继续前行next(’/login’)//走哪next({path:’/login’,params:{},query:{}})1.全局路由守卫：定义在router对象上绝大部分页面需要跳转用全局路由守卫 router.beforeEach 进入之前调用 router.
2021-01-14 11:08:39
762
2
原创 event loop (事件循环/事件查询)
异步要基于回调来实现event loop就是异步回调的实现原理js如何执行从前到后，一行一行执行，如果某一行报错，则停止下面代码的执行先把同步代码执行完，再执行异步总结 同步代码，一行一行放在CallStack执行遇到异步，会先“记录”下，等待时机（定时、网络请求等）时机到了，就移动到Callback Queue过程2如果CallStack为空（就是同步代码执行完）Event Loop开始工作轮询查找 Callback Queue ，如有则移动到 CallStack执行然后继续轮
2021-01-11 20:04:22
204
原创 手写promise封装图片加载
第二张是一个 第三张是2张return 返回普通对象 下面的 .then正常接收。如果返回一个promise的实例对象下面的.then就会执行 loadImg加载完后的图片对象
2021-01-11 19:27:29
246
原创 单线程和异步
单线程和异步js是单线程语言，只能做一件事js和DOM渲染共用一个线程，因为js可以修改dom结构，dom 渲染时js必须停止，js执行时，dom渲染时js必须停止。异步基于js是单线程语言，异步不会阻塞代码执行，同步会阻塞代码执行遇到等待（网络延迟，定时任务）不能卡住，所以需要异步，异步的回调是callback 回调函数异步是有单线程这个背景而来的应用场景网络请求 如ajax图片加载 定时任务 如settimeoutpromise解决了callback 嵌套问题...
2021-01-11 17:23:20
429
原创 虚拟DOM和diff算法
虚拟DOM和虚拟DOM概念：虚拟dom 是根据模板生成一个js对象，根据这个js对象再去生成真实的dom，对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操作。diff算法概念diff算法 当data发生改变 ，会就是调用名为patch的函数，根据新的数据生成一个新的虚拟dom ，新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法，会找到不同地方，只去渲染不同的地方。...
2021-01-08 16:54:54
162
原创 前端必问面试题
1.vue双向数据绑定原理Vue.js采用数据劫持发布者订阅模式的方式，通过object.defineproperty()来劫持setter和getter在数据变动时，发布消息给订阅者，触发相应的回调来渲染视图1、实现一个数据监听器Observer(恶不热玩)，能够对对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器 Compile(康拍哦)，对每个元素节点的指令进行扫描和解析，替换数据，绑定更新函数3、实现一个 Watcher，作为连接 Observer 和 Compi
2021-01-06 19:19:44
1030
原创 vuex
1.什么是vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成：分别是：state,actions,mutations,getters,modules2.由五部分组成state: 数据actions:可以包含异步操作mutations: 唯一可以修改state数据的场所getters:类似于vue组件中的计算属性，对state数据进行计算（会被缓存）modules:模块化管理store（仓库），每个模块拥有自己的state、mutation、act
2021-01-04 14:06:44
138
原创 this.指向
作用域和闭包1.this的不同应用场景，如何取值？1.当作普通函数调用2.使用call() apply() bind()3.作为对象被调用 （指向本身）4.在class方法中调用5.箭头函数2.手写bind函数函数.bind(thisArg[, arg1[, arg2[, ...]]])thisArg调用绑定函数时作为 this 参数传递给目标函数的值。 arg1, arg2, ...当目标函数被调用时，被预置入绑定函数的参数列表中的参数。3.闭包的应用场景，举例说明4.作用
2020-12-29 20:42:23
126
原创 原型和原型链
1.如何准确判断一个变量是不是数组2.手写一个简易的jQuery，考虑插件和扩展性3.class的原型本质，怎么理解？class继承1.classclass一般首字母大写constructor 构建属性和方法通过new对象来创建实例2.继承通过extends继承 通过super来执行的父类的构造函数类型判断 instanceofconstructor可以应对基本数据类型和引用数据类型，如果声明一个构造函数指向array，constructor也力不从心原型和原型链__proto_
2020-12-27 20:10:32
104
原创 小程序如何上传
微信小程序提交审核并发布详细流程审核在1小时到N天不等官方7天，一般3天内提交审核？如何发布？审核过程中注意事项?服务器:域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 协议小程序必须使用 HTTPS 请求会对服务器域名使用的 HTTPS 证书进行校验由于系统限制，不同平台对证书要求的严格程度也不同。request、uploadFile、downloadFile 的最大并发限制是 10 个
2020-12-27 18:56:27
1401
原创 变量类型和计算
变量类型和计算typeof可以判断哪些类型概念：typeof 判断基本的数据类型，遇到引用数据类型不起作用 返回值是个字符串1.识别所有值类型2.识别函数3.判断是否是引用类型深拷贝和浅拷贝浅拷贝：复制属性，只拷贝第一层属性，当前对象的属性值是引用类型时，实质复制的是引用，引用的值也会发生变化最简单的实现是json.parse（json.stringfy（obj））深拷贝：复制变量值，对于非基本类型的变量，递归到基本类型再复制。与原对象完全隔离互不影响。可以使用for
2020-12-26 15:26:18
118
原创 小程序跳转页面几种方式
一：js实现1.navigateTo （有返回键，不可以跳转到tabBar页面）//保留当前页面，跳转到应用内的某个页面wx.navigateTo({ url: '/pages/detail/detail?id=1'})2.switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数）wx.switchTab({ url: `/pages/detail/detail`, })3.reLaunch (跳转任意页面， 没有返回， 有 首页 按钮）
2020-12-21 21:41:57
7632
原创 微信小程序本地存储的异步同步用法详解
一：同步1.wx.setStorageSync(); //存储值 try { wx.setStorageSync('key', 'value') } catch (e) { }2.wx.getStorageSync(); // 获取值 try { var value = wx.getStorageSync('key') if (value) { // Do something with return value } } catch (e) { //
2020-12-21 21:33:53
648
2
原创 ES6class 继承
1.ES6中class的介绍通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。实例：注意项：1.在类中声明方法的时候，千万不要给该方法加上function关键字2.方法之间不要用逗号分隔，否则会报错由上面代码可以看出类实质上就是一个函数。类自身指向的就是构造函数 所以可以认为ES6中的类其实就是构造函数的另外一种写法！constructor方法
2020-12-16 21:04:09
150
原创 Vue项目开发需要准备和配置些什么环境？
Node环境下载：https://nodejs.org/en/，安装在G盘npm包管理工具（package manager）自动安装完成安装cnpmnpm连接国外的资源，如果超时失败，可安装npm的替代品cnpm，并指定使用淘宝镜像从国内下载资源命令：npm install -g cnpm --registry=https://registry.npm.taobao.org安装webpack, webpack-dev-server, webpack-cli用于打包发布Vue程序。可使用np
2020-12-15 12:00:44
1603
1
原创 gitHub如何使用
1. Git 是什么Git是一个版本管理控制系统（缩写VCS），它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录恢复回来。2.git提交步骤1.git init 初始化git仓库 (mac中Command+Shift+. 可以显示隐藏文件)2.git status 查看文件状态3.git add 文件列表 追踪文件4.git commit -m 提交信息 向仓库中提交代码5.git log 查看提交记录3.撤销用暂存区中的文件覆盖工作目录中的文件： g
2020-12-14 20:47:11
188
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人