- 博客(14)
- 资源 (1)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 实现百度图片搜索页面
最近开发一个类似百度图片的页面,遇到了一个技术难点。所有的图片的宽高都不一样,怎么使得图片正好铺满屏幕。首先我们图片的高度是固定的,但是由于每张图片的宽高比都是不一样的,所以算出来每张图的宽度也是不一样的,要使得图片正好铺满屏幕,只能对图片的宽度进行裁剪,那怎么样裁剪才是最合理的呢?假设一行最多可以放置n张图片,则取n+1张图片进行裁剪,将多余部分按比例分配到每张图片进行裁剪,宽度大的...
2020-01-21 13:40:49
1231
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 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
416
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 解析vue2.x源码之Object与Array的变化侦测
基本概念介绍:Vue框架是如何实现变量的变化侦测的呢?Object 利用了 Object.defineProperty 进行变量的getter与setter拦截,但数组的实现与 Object 有所不同,下面会从源码层面具体讨论这两种类型的变量如何实现变化侦测。首先我们需要先了解Vue源码中的三个类:一、ObserverObserver类负责将复杂类型的变量转化成响应式数据,转化...
2019-12-06 00:53:11
501
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 解析vue2.x源码之diff算法
tips: 本章内容需要 vnode(虚拟DOM) 作为基础,对vnode还不太了解的小伙伴可以先看一下这一篇文章解析vue2.x源码之虚拟DOM基本概念介绍:在vue框架中,我们写的html模板会被编译成渲染函数,渲染函数会生成vnode,最终以vnode渲染视图。渲染流程如下:若是首次渲染,此时并没有oldVnode,直接以vnode为模板渲染视图。若并非首次渲...
2019-11-20 01:34:34
498
1
原创 解析vue2.x源码之组件的生命周期
基本概念介绍:在日常开发中,我们会在组件的生命周期函数内编写代码,等待组件在适当的时机调用。生命周期函数有: beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryd。那么组件是在什么时候调用这些生命周期函数的?在调用生命周期函数时又分别做了什么呢?created:在...
2020-03-08 18:52:08
369
原创 解析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
417
原创 解析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
567
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
283
原创 解析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
242
原创 vue大数据滚动组件
最近在开发项目中遇到一个需求,需要实现一个渲染上千条数据的列表,但如果一次渲染出这么多DOM节点对性能会是很大的消耗。于是上github找了一下相关的优化方案,最终找到一个组件https://github.com/Akryum/vue-virtual-scroller,它能把渲染DOM节点的数量控制在一定范围内,仅仅是渲染当前屏幕所看到的部分DOM节点,从而实现优化。参考了vue-virtu...
2019-11-17 14:25:46
4211
原创 wepy开发微信小程序的优化之gulp打包
小程序限制每个包不得超过2M,经常写着写着就会发现预览的时候报错,文件超过2M,这时可用分包的方法来解决这问题如图,分为pages,packageA,packageB,具体分包实现可看小程序文档另外代码压缩也可以解决这问题,并且能优化项目,小程序开发工具自带了一个“上传代码时自动压缩”,可当你文件超过两M时,打开这个选项再进行预览,一样会报超过2M的错误,另外在wepy开发小程序时,打...
2018-11-09 11:56:58
1231
原创 浅谈对js原型链的理解
最近重新学习了一下JS原型链的知识,为了避免之后自己再忘记,在此记录下自己对原型链的理解,欢迎大家一起讨论交流js中的对象分为函数对象与普通对象,函数对象有prototype与__proto__,普通对象只有__proto__,那么怎么区分这两种对象呢?var f = function(){} //f为函数对象var o = new f() //o 为普通对象这里涉及两个属性 pro...
2018-11-08 18:13:55
411
原创 小程序自定义tabbar
最近写小程序新项目时,设计师给出了如下设计图点击除中间的其他四个按钮切换页面,点击中间的按钮弹出actionsheet查阅文档后发现小程序文档提供的tabbar无法实现该效果,所以只能自己动手写一个tabbar了实现效果如下: 我将这个tabbar组件从项目中分离出来写了个demogithub代码地址:https://github.com/75284...
2018-06-12 18:37:25
643
原创 分享链接进入小程序全局变量获取异常
最近做公司的小程序项目时遇到一个问题,通过小程序分享出去的链接进入小程序,进入活动页面,在页面onload()方法中获取全局变量uid,根据uid获取用户信息,结果发现uid为空(开发者工具中运行正常),代码如下app.js onlauch()中进行登录操作获取用户Uid ,存到全局变量 app.config.uid login: function (code) { var that ...
2018-06-12 00:01:20
1265
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人