- 博客(43)
- 收藏
- 关注
RSS订阅原创 vue slot的原理
Vue.component('button-counter', { template: '<div> <slot>我是默认内容</slot></div>'})这个组件生成的渲染函数(function anonymous() {with(this){return _c('div',[_t("default",[_v("我是默认内容")])],2)}})_t表示渲染插槽的函数...
2021-04-27 19:16:46
1563
原创 vue 实现文件上传和下载和vue实现分片上传和断点续传
vue中的文件上传主要分为两步：前台获取到文件和提交到后台获取文件前台获取文件，主要是采用input框来实现 <input type="file" ref="clearFile" @change="getFile($event)" multiple="multiplt" class="add-file-right-input" style="margin-left:70px;" accept=".docx,.doc,.pdf">通过file类型的input框实
2021-04-27 15:45:22
3297
原创 async await 原理及简单实现
async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句深入理解理解async函数需要先理解Generator函数，因为async函数是Generator函数的语法糖function* foo(x) {可以使用yield返回多次 yield x + 1; yield x + 2; return x + 3;}const result = foo(0) // foo {
2021-04-27 14:43:22
1185
原创 redirectTo、navigateTo与switchTab区别
redirectTo：关闭当前页，跳转到指定页；navigateTo：保留当前页，跳转到指定页；switchTab：只能用于跳转到tabbar页面，并关闭其他非tabbar页面。用法：var my_real_name = 'isme';wx.navigateTo({ url: '../pages/index/index? index=1&real_name='+my_real_name, })...
2021-04-27 14:07:20
345
原创 setdata的更新原理
要知道setState本质是通过一个队列机制实现state更新的。 执行setState时，会将需要更新的state和老的state合并后放入状态队列， 而不会立刻更新state，队列机制可以批量更新state。 如果不通过setState而直接修改this.state,那么这个state，也就无法合并了，也不会放入状态队列中[state以一种Object.assgine()的方式跟旧的state进行合并]也就没办法去通知视图去更新。...
2021-04-27 14:04:12
304
原创 vue源码系列之keep-alive实现原理
keep-alive是Vue中内置的一个抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。created () { this.cache = Object.create(null) // 存储需要缓存的组件 this.keys = [] // 存储每个需要缓存的组件的key，即对应this.cache对象中的键值},// 销毁keep-alive组件的时候，对缓存中的每个组件执行销毁dest
2021-04-24 10:00:02
367
1
原创 qs序列化和请求类型
默认情况下，axios将JavaScript对象序列化为JSON。axios默认用的是application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头来告诉服务端消息主体是序列化后的 JSON 字符串将ajax发送请求的application/json改为application/x-www-form-urlencoded如果使用的qs进行序列化那么content-type就是application/x-www-form-
2021-04-22 10:25:45
699
原创 解决android和ios的软件盘阻挡输入框的问题
解决android和ios的软件盘阻挡输入框的问题android中如果输入框调起软键盘的话是window的height发生了变化，安卓浏览器在软键盘弹出后不会像ios浏览器那样重新计算window的高度，所以导致安卓浏览器window的高度在软键盘弹出的时候为“软键盘的高度＋（window的高度－软键盘的高度）”；而其实，此时，合理的高度应该是页面的高度＋软键盘弹出的高度；ios如果调起软键盘的话是body的scrollTop发生了变化软键盘调用的话是有个缓慢升起的动作ios的解决办
2021-04-21 19:32:24
173
原创 js预编译 作用域链
执行期上下文 所有的函数都至少又两个执行期上下文， 一个是全局的GO，还有一个本身的AO, 什么是作用域scope 函数执行时，会创建一个成为执行期上下文的内部对象， 一个执行期上下文定义了一个函数执行时的环境 ，函数每次执行时都会产生一个新的执行期上下文， ·函数执行完时会执行期上下文销毁预编译前奏1、 imply global 暗示全局变量:即任何变量,如果变量未经声明就赋值,次变量就为全局对象所有var a = b = 123;2、
2021-04-20 20:41:52
56
原创 vue使用高德地图
vue-amap官网如果定制化开发需求不太高的话，可以用vue-amap，vue-amap中好像没有这方面的配置，而且还有一些其他的定制化开发需求，然后就只用原生的高德。高德地图使用准备 开发之前的准备需要注册账号, 创建应用, 创建 api key调用地图的时候, 请求上带的 key 像高德地图服务器校验权限,另外可以用来标识同一个程序的不同入口, 如网页端, 小程序端等原生index.html 引入插件如果没有可以直接添加在 代码粘贴到项目中index.html文件中，并且把
2021-04-20 16:04:25
821
原创 vue权限管理
权限权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源接口权限接口权限目前一般采用jwt的形式来验证，没有通过的话一般返回401，跳转到登录页面重新进行登录登录完拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带tokenaxios.interceptors.request.use(config => { config.headers['token'] = cookie.get('token') re
2021-04-13 10:14:33
923
原创 vue3性能提升
vue3设计目标，做了那些优化 不以解决实际业务痛点的更新都是耍流氓 1. ts支持 2. 移除了不长用的api,例如 过滤器 3. 加了tree - shaking 4. 移除了mixin缺点，命名冲突，和数据来源不清楚 5. options Api composition Api 提高了大门逻辑组织和代码复用能力6. Object.defineProperty proxy 同时Proxy 并不能监听到内部深层次的对象变化， 而 Vue3 的处理方式是在 getter 中去递
2021-04-12 15:43:22
343
原创 vue源码系列之 vue模板编译原理
3个阶段 1. 模板解析阶段, html转换成ast抽象语法树 2. 优化阶段，优化标记静态节点和静态根节点 主要是为了， 提高虚拟DOM中patch过程的性能 3. 代码生成阶段，render函数 组件只要调用的这个render函数就 可以得到AST对应的虚拟DOM的VNode 总结:所谓代码生成其实就是根据模板对应的 抽象语法树AST生成一个函数 通过调用这个函数就可以得到模板对应的虚拟DOM...
2021-04-12 14:54:02
122
原创 proxy和 Object.defineProperty的区别
只能追踪到已有的数据无法检测到对象属性的新增和删除不能监听数组的变化proxy直接代理整个对象而非对象的属性可以监听数组的变化
2021-04-12 14:30:01
266
原创 symbol
可以用来表示一个独一无二的变量防止命名冲突还可以利用 symbol 不会被常规的方法（除了 Object.getOwnPropertySymbols 外）遍历到，所以可以用来模拟私有变量。Symbol.for() 可以在全局访问 symbol
2021-04-09 18:57:49
71
原创 导致内存泄露？如何避免？
什么是内存泄露内存泄露是指你「用不到」（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。什么会导致内存泄露常见的内存泄露意外的全局变量引起的内存泄露function leak(){leak= "xxx"; //leak成为一个全局变量，不会被回收}不知道的闭包引起的内存泄露没有清理的DOM元素引用比如拿到DOM的引用，给他绑定了事件，又偷偷把dom给销毁了被遗忘的定时器IE7/8引用计数使用循环引用产生的问题Vue 为例，通常有这些情况：监听在 win
2021-04-09 14:13:46
394
原创 js垃圾回收机制
引用计数看一个数据有没有被其他数据引用，如果没有让其他数据引用说明他是垃圾数据，就会被回收致命缺点，数据的循环引用，尽管这个数据不再被使用，也不会垃圾回收机制回收，导致内存泄露标记清除标记清除，定时扫描内存种的对象，从根节点开始找，达不到的说明，已经不被使用了，就标记出来，稍后清除...
2021-04-09 13:40:00
67
原创 什么是递归
函数自身调用自身//n的阶乘 function mul(n){ if(n==1)return 1; return n*mul(n-1) }//执行原理mul(5);执行mul(5) ==> 5*mul(4);mul(4) ==> 4*mul(3);mul(3) ==> 3*mul(2);mul(2) ==> 2*mul(1);//最先执行要等最后一个的结果求出来，再一层层的求结果//所以最先执行的最后求出来结果.
2021-04-07 15:56:37
48
原创 instanceof的原理是什么如何实现
instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。 function fn(left, right) { let prototype = right.prototype; left = left.__proto__; while (true) { if (left === undefined || left === null) { return fal
2021-04-07 15:52:49
211
原创 手写call apply及bind函数
1.判断调用对象是否为函数，即使我们是定义在函数的原型上的， 但是可能出现使用 call 等方式调用的情况。 2.判断传入上下文对象是否存在，如果不存在，则设置为 window 。 3.处理传入的参数，截取第一个参数后的所有参数。 4.将函数作为上下文对象的一个属性。 5.使用上下文对象来调用这个方法，并保存返回结果。 6.删除刚才新增的属性。 7.返回结果。call 函数实现 Function.prototype.mycall = function (context..
2021-04-07 14:43:41
208
原创 手动实现数组方法
手动实现 Array.prototype.map 方法 map() 方法创建一个新数组， 其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 function map(arr, mapCallback) { if (Array.isArray(arr) || !arr.length || mapCallback !== 'function') { return []; } else { let result = []; /
2021-04-07 11:38:32
133
原创 通用的事件侦听器函数
通用的事件侦听器函数 const EventUtils = { //区分dom0 dom2 ie //添加事件 addEvent: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEven
2021-04-07 10:43:30
74
原创 js闭包理解
什么是闭包 闭包是在某个作用域中定义的函数 它可以访问作用域中的所有变量 一句话解决就是 内部函数被保存到外部， 闭包会导致原有作用域不释放，造成内存泄漏闭包作用1实现共有变量2实现封装，属性私有化3做缓存4模块化开发防止污染全局变量闭包的作用域链1. 函数本身作用域2. 闭包定义时的作用域3. 全局作用域...
2021-04-06 15:43:32
85
原创 js异步加载的方法
1、defer 异步加载：但要等到dom文档全部解析完才会执行，只有ie可以使用，也可以将代码写入内部2、async 异步加载：加载完就执行，async只能加载外部脚本，不能把js写在script标签里面 执行时不阻塞页面3、创建script插入dom元素中，加载完了后callback...
2021-04-05 15:46:57
65
原创 移动端300ms延迟原因及解决方案
移动端300ms延迟原因主要是应为双击缩放iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了1. fastclick可以解决在手机上点击事件的300ms延迟2. 进制缩放3. 更改默认的视口宽度,浏览器就可以认为该网站已经对移动端做过了适配和优化<meta name="viewport" content="width=device-width">什么是点击穿透？这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend >
2021-04-05 13:53:19
2180
1
原创 JS模块化——CommonJS AMD CMD UMD ES6 Module 比较
1. 模块使用方式CommonJS ：require 引用模块 module.exports 暴露接口AMD：require 引用模块 使用 define 函数的 return 暴露接口CMD：require 引用模块 module.exports 或 exports 暴露接口ES6：import 引用模块 export default 暴露接口2. 模块加载方式CommonJS ：运行时加载，一个模块就是一个对象，加载一个模块就是加载这个模块的所有方法，然后读
2021-04-04 20:02:02
441
原创 策略模式
策略模式简单描述就是：对象有某个行为，但是在不同的场景中，该行为有不同的实现算法。把它们一个个封装起来，并且使它们可以互相替换<html><head> <title>策略模式-校验表单</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"></head><body> <form id =
2021-04-02 18:05:42
77
原创 外观模式
外观模式是最常见的设计模式之一，它为子系统中的一组接口提供一个统一的高层接口，使子系统更容易使用。简而言之外观设计模式就是把多个子系统中复杂逻辑进行抽象，从而提供一个更统一、更简洁、更易用的API。很多我们常用的框架和库基本都遵循了外观设计模式，比如JQuery就把复杂的原生DOM操作进行了抽象和封装，并消除了浏览器之间的兼容问题，从而提供了一个更高级更易用的版本。其实在平时工作中我们也会经常用到外观模式进行开发，只是我们不自知而已。兼容浏览器事件绑定let addMyEvent = function
2021-04-02 17:22:16
59
原创 代理模式
是为一个对象提供一个代用品或占位符，以便控制对它的访问let Flower = function() {}let xiaoming = { sendFlower: function(target) { let flower = new Flower() target.receiveFlower(flower) }}let B = { receiveFlower: function(flower) { A.listenGoodMood(function() {
2021-04-02 17:19:11
53
原创 设计模式设计原则
S – Single Responsibility Principle 单一职责原则一个程序只做好一件事如果功能过于复杂就拆分开，每个部分保持独立O – OpenClosed Principle 开放/封闭原则对扩展开放，对修改封闭增加需求时，扩展新代码，而非修改已有代码L – Liskov Substitution Principle 里氏替换原则子类能覆盖父类父类能出现的地方子类就能出现I – Interface Segregation Principle 接口隔离原则保持接口的单一
2021-04-02 16:03:14
41
原创 小程序wx.requestPayment支付实例
首先是请求后端给的接口，传一个钱数的金额给后端人员，后端会返回给一个支付所需要的数组，里面包含了我们唤醒支付所需要的字段，直接wx.requestPayment就唤醒了支付。//充值流程图1.发起支付，掉后端接口，返回订单信息，和调用wx.requestPayment需要的数据 paynow:function(e){ var that=this; wx.request({ header: { 'Authorization': 'Bearer' + w
2021-04-02 13:38:17
4640
原创 网络安全
xss:跨站脚本攻击 特点：网站恶意注入客户端代码，攻击浏览器， 篡改浏览器内容，窃取用户信息 分类： 反射型（非持久性）：发出请求时，xss代码出现在url中， 作为输入提交到 服务器，改变了服务器响应， 从而得到一些不应该得到的信息 存储型（持久性）：发出请求时，xss代码出现在url中， 作为输入提交到 服务器，并存储到数据库，造成
2021-04-02 08:36:24
142
2
原创 hash和history的区别
hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。history模式：history采用HTML5的新特性；且提供了两个新方法：pu
2021-04-01 15:27:27
199
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人