- 博客(14)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 实现百度图片搜索页面
最近开发一个类似百度图片的页面，遇到了一个技术难点。所有的图片的宽高都不一样，怎么使得图片正好铺满屏幕。首先我们图片的高度是固定的，但是由于每张图片的宽高比都是不一样的，所以算出来每张图的宽度也是不一样的，要使得图片正好铺满屏幕，只能对图片的宽度进行裁剪，那怎么样裁剪才是最合理的呢？假设一行最多可以放置n张图片，则取n+1张图片进行裁剪，将多余部分按比例分配到每张图片进行裁剪，宽度大的...
2020-01-21 13:40:49
1196
原创 vue3.0 响应式原理实战
最近在学习vue3.0的源码，对照着源码手写了一个响应式demo。用proxy实现响应式数据，改变数据时自动更新视图。在线demo:http://gavincat.cn:8081/具体实现原理可看源码，我在里面做了详细的注释。源码链接:https://github.com/752848087coder/vue3.0-reactiveDemovue3.0响应式源码...
2019-12-22 23:13:12
401
原创 解析vue2.x源码之Object与Array的变化侦测
基本概念介绍：Vue框架是如何实现变量的变化侦测的呢？Object 利用了 Object.defineProperty 进行变量的getter与setter拦截，但数组的实现与 Object 有所不同，下面会从源码层面具体讨论这两种类型的变量如何实现变化侦测。首先我们需要先了解Vue源码中的三个类：一、ObserverObserver类负责将复杂类型的变量转化成响应式数据，转化...
2019-12-06 00:53:11
474
原创 解析vue2.x源码之diff算法
tips: 本章内容需要 vnode(虚拟DOM) 作为基础，对vnode还不太了解的小伙伴可以先看一下这一篇文章解析vue2.x源码之虚拟DOM基本概念介绍：在vue框架中，我们写的html模板会被编译成渲染函数，渲染函数会生成vnode，最终以vnode渲染视图。渲染流程如下：若是首次渲染，此时并没有oldVnode，直接以vnode为模板渲染视图。若并非首次渲...
2019-11-20 01:34:34
488
1
原创 解析vue2.x源码之组件的生命周期
基本概念介绍：在日常开发中，我们会在组件的生命周期函数内编写代码，等待组件在适当的时机调用。生命周期函数有: beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryd。那么组件是在什么时候调用这些生命周期函数的？在调用生命周期函数时又分别做了什么呢？created:在...
2020-03-08 18:52:08
358
原创 解析vue2.x源码之vue实例方法与全局API
基本概念介绍：vue实例方法：vm.$set、vm.$del、vm.$nextTick等，挂在Vue.prototype上的方法。全局API： Vue.directive、Vue.filter、Vue.component等，挂在Vue构造函数上的方法。本章从源码角度分析，Vue.js是如何实现这些功能的一、Vue实例方法的实现：Vue构造函数源码：import { ini...
2020-03-07 22:06:44
394
原创 解析vue2.x源码之模板编译
基本概念介绍：在vue框架中，我们写的html模板会被编译成渲染函数，渲染函数会生成vnode，最终以vnode渲染视图。渲染流程如下：本章内容讲模板编译的过程，vue是如何讲html模板转化成render函数的呢？模板编译可分为三个步骤：1、将html模板转换化成AST（AST即抽象语法树，是一个用来表示html的js对象）2、将AST中的静态节点打上标签3、用A...
2020-01-01 18:35:19
508
2
原创 解析vue2.x源码之API $set、$del
本章内容是基于vue变量侦测的相关API，对vue变量侦测的源码不了解的同学可以先看这篇文章：解析vue2.x源码之Object与Array的变化侦测基本概念介绍：上一章讲过vue的变量侦测存在缺陷，以下两种情况vue无法侦测到数据的变化，导致依赖无法被触发1.object新增或者删除key2.通过下标修改array的值针对这个缺陷，vue提供了$set, $del用于...
2019-12-13 00:08:15
273
原创 解析vue2.x源码之虚拟DOM
基本概念介绍：虚拟DOM节点, vue源码中命名为vnode。vnode是一个用来描述真实DOM节点的js对象，它与真实DOM节点一一对应，vue渲染视图时会根据vnode为模板进行渲染。vnode源码：export default class VNode { tag: string | void; data: VNodeData | void; children: ...
2019-11-28 22:47:52
221
原创 vue大数据滚动组件
最近在开发项目中遇到一个需求，需要实现一个渲染上千条数据的列表，但如果一次渲染出这么多DOM节点对性能会是很大的消耗。于是上github找了一下相关的优化方案，最终找到一个组件https://github.com/Akryum/vue-virtual-scroller，它能把渲染DOM节点的数量控制在一定范围内，仅仅是渲染当前屏幕所看到的部分DOM节点，从而实现优化。参考了vue-virtu...
2019-11-17 14:25:46
4157
原创 wepy开发微信小程序的优化之gulp打包
小程序限制每个包不得超过2M,经常写着写着就会发现预览的时候报错，文件超过2M，这时可用分包的方法来解决这问题如图，分为pages,packageA,packageB,具体分包实现可看小程序文档另外代码压缩也可以解决这问题，并且能优化项目，小程序开发工具自带了一个“上传代码时自动压缩”，可当你文件超过两M时，打开这个选项再进行预览，一样会报超过2M的错误，另外在wepy开发小程序时，打...
2018-11-09 11:56:58
1198
原创 浅谈对js原型链的理解
最近重新学习了一下JS原型链的知识，为了避免之后自己再忘记，在此记录下自己对原型链的理解，欢迎大家一起讨论交流js中的对象分为函数对象与普通对象，函数对象有prototype与__proto__，普通对象只有__proto__，那么怎么区分这两种对象呢？var f = function(){} //f为函数对象var o = new f() //o 为普通对象这里涉及两个属性 pro...
2018-11-08 18:13:55
385
原创 小程序自定义tabbar
最近写小程序新项目时，设计师给出了如下设计图点击除中间的其他四个按钮切换页面，点击中间的按钮弹出actionsheet查阅文档后发现小程序文档提供的tabbar无法实现该效果，所以只能自己动手写一个tabbar了实现效果如下： 我将这个tabbar组件从项目中分离出来写了个demogithub代码地址：https://github.com/75284...
2018-06-12 18:37:25
635
原创 分享链接进入小程序全局变量获取异常
最近做公司的小程序项目时遇到一个问题，通过小程序分享出去的链接进入小程序，进入活动页面，在页面onload()方法中获取全局变量uid，根据uid获取用户信息，结果发现uid为空（开发者工具中运行正常）,代码如下app.js onlauch()中进行登录操作获取用户Uid ,存到全局变量 app.config.uid login: function (code) { var that ...
2018-06-12 00:01:20
1252
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人