- 博客(30)
- 收藏
- 关注
RSS订阅原创 vue源码解析1 之数据响应之谜（数据侦测）
我与vue源码之前写过一篇死磕vue源码，写了一篇就真心写不下去，vue的代码现在健壮的不要不要的那么写会越写越乱，最后会搞到自己都看不懂的地步。我写文章也是东一榔头西一棒锤，今天就继续搞vue的源码，不过这次的策略不一样的。我呢，分析了一下vue的几件神器：数据响应式（也就是数据侦测）；AST抽象语法树（个人理解就是虚拟DOM， 把字符串的DOM模版转换为对象形式的DOM树）；diff算法（最小量更新）；当然了个人理解，vue就是以这几件大神器为底，建造起了一个前端框架。数据侦测每个框架
2021-05-31 15:59:44
299
原创 uni-app扫雷先锋 nvue css过渡动画 nvue css动画
uni-app扫雷先锋 nvue css过渡动画 nvue css动画需求分析需求nvue使用css过渡动画的注意事项需求分析uniapp写项目如果只要app端，为了提升整体的性能和体验，可能会考虑整体使用nvue。在多端兼容的情况下也有可能部分使用nvue，nvue下的一些css的注意项已经有很多的文章了我就不过多的说了，这次只说过渡动画。需求点击效果弹窗显示隐藏效果复杂的动画还是要用 weex的 animation.transitionnvue使用css过渡动画的注意事项呵呵呵，这
2021-03-02 13:37:51
6622
7
原创 uni-app扫雷先锋之封装自己的poppup弹窗组件nvue
uni-app扫雷先锋封装自己的poppup弹窗组件实际需求组件注意事项封装自己的poppup弹窗组件先来个最终的效果图插件地址：https://ext.dcloud.net.cn/plugin?id=3603github地址：https://github.com/lifei5859/popup.git实际需求其实公司提的需求没有根据手指位置弹出弹窗，但是在封装的时候呢自己就抖了个机灵，把这个功能也封装到里面了，自己感觉写的还是不是很好。上次icon的篇文章就提到了nvue的问题，这个组件也支
2020-12-06 22:37:08
1771
原创 原生js判断鼠标移入方向，图片特效
原生js判断鼠标移入方向，图片特效先来个最终效果需求，判断出鼠标从元素的哪个方向移入搞vue搞uniapp搞得脑子都发木了，有些时候呢一些原生的，底层的东西都要忘脖子后去了，今天呢就来个原生js的小demo。先来个最终效果需求，判断出鼠标从元素的哪个方向移入在判断这个移入方向之前呢，我们要搞清楚一些事情，请看下图...
2020-11-30 16:22:43
500
原创 uni-app扫雷先锋之nvue的文字图标，封装自己的图标按钮
uni-app扫雷先锋实际需求第一次遇坑第二次尝试-遇坑第三次尝试-图标出现了封装字体图标上次还说nvue以后讨论今天就来了，nvue呀怎么说呢，官方的说法是性能好如何如何的，但是有些时候呢却逼着咱开发者不得不用，因为有些功能呢只有nvue有。。。比如地图组件的一大堆功能就只有nvue才能用，有些小伙伴说了引plus呀，可是引plus的话，小程序和app之间就会产生很多很多区别。行了废话就不多说了。。。实际需求字体图标这个东西相信搞开发的小伙伴们都不会陌生，用到它的地方特别的多，那么在nvue中它有多
2020-11-25 16:29:55
883
原创 uni-app扫雷先锋之swiper的高度
uni-app扫雷先锋swiper组件实际需求解决方案一晃之间也不知道多久没来写一写了，一开始时还对自己承诺每周要写一篇，现在都快一年写一篇了。哎…忙的不亦乐乎我也没辙（好吧我承认这都是借口），这次就不做承诺了，反正迟早来写。可以说现在uni-app真的是风生水起，很多公司在做一些小程序和一些小的app都在用uni-app。这段时间我也深深的研究了一下uni-app这个大坑（当然了工作需要）。那真是大坑套小坑，三环套月的坑。今天来说一下，在开发过程中用uni-app的swiper组件写轮播图时它的高度的
2020-11-15 17:18:54
685
原创 深入理解es6 promise（模拟promise）
es6的promise可以说是es6中最重要的语法之一，很多人都说是解决回掉地狱的很好的方法，其实它还是没有逃过回掉。语法糖？promise是语法糖吗？用代码告诉你：setTimeout(function() { console.log('setTimeout go...')})var oP = new Promise(function (res, rej) { res('pr...
2020-03-13 16:55:42
287
原创 vue进阶之路（vue源码解析）死磕vue源码（二）
咱们书接上回，先来看看画重点的地方。initRender（src/core/instance/render.js）在前面是怎么个流程，可以出门左转看死磕源码一。注意看源码先不要被细节缠住export function initRender (vm: Component) { // 这有个问题 vm是谁？ 前面initMixin时 vm = this // vm 就是实例对象喽 ...
2020-03-11 16:13:58
175
原创 vue进阶之路（vue源码解析）死磕vue源码（一）
开头，中国加油，武汉加油。把混乱的时期拉回正轨。以现在的形式还有加一句全人类加油。vue源码解析大局观（梳理执行流程）上次写了一个简单版的vue其实就是通过读源码，加上看一些前辈的博客撸出来的。但是呢其实vue的源码我并没有看的太明白…，于是产生了死磕之心。首先随便找一个自己写的vue项目在项目目录下 node_modules/vue 撸一波结构我们重点先放在core（核心）上梳...
2020-03-10 18:46:14
1977
原创 写一个自己的简易版vue
写一个自己的简易版vue过年的这几天准备工作开始初始化观察者过年的这几天刚到家疫情就开始爆发，恰巧家里没有网，手机网络在老家的速度就像拖拉机，每天躲在家里，还好刚到老家时搞了些口罩，不至于返程时没有口罩可带。手机的网络速度到底什么样呢，用vue-cli建个项目就在那一直install，还有可能中途失败，哎。。。，没法练习vue了就把自己写好的简易版vue拿出来又撸了撸，还有点意思。准备工作...
2020-02-01 17:14:31
275
原创 vue手写轮播图组件
轮播图组件是大多数项目都有的需求，当然相关的库、插件多的很，但是呢我还是喜欢自己折腾一下。需求在做公司项目时其实需求很简单就是能滑动轮播，自动轮播，循环轮播完事了。需求版本首先html部分<template> <div class="my-swiper-box" ref="swiperBox"> <!-- 滑块主体 --> ...
2019-12-28 16:44:00
1585
原创 js笔记框架篇（vue）写一个vue的oast弹窗插件
继续来说vue，我刚到新公司的时候吧，正好有个新项目，当时呢这个项目已经写了个开头。代码拿过来捋了捋，我就问我的小前辈，为什么没用ui框架，他说，没意思那玩意也不会符合我们的全部需求自己写一样，我就一阵无语，作为一个新人，还是要听前辈的话，于是一系列插件，组件写到怀疑人生，今天就讲一讲弹窗插件。vue插件vue插件呢就是Vue.use(xxx),这个xxx要是个install函数大概就是这么个...
2019-12-05 17:36:41
342
原创 js笔记框架篇 vue（一）router原理
前面的内容呢，主要是在工作中主要是使用vue的，而这玩意用的久了，一些基础性的东西忘得就差不多了，所以一边复习复习，一边写成博客，加深印象，现在开始也写写的好伙伴vue的文章。vue-router前端的小伙伴们，对vue全家桶肯定是不陌生的，就算没用过也应该听过，而vue-router也是构建spa不可缺少的一份子，先简单说说用法。首先使用命令行工具npm： npm install v...
2019-11-20 22:22:20
464
原创 js之解析语法糖Array迭代方法，reduce
上次呢，自己封装了一些js里Array的语法糖，如filter， map， forEach呀，最后留了个reduce，今天就来说说这个reduce。reduce先看看它的用法： // reduce要传两个参数， 一个是回调函数，一个是第一次迭代total的默认值 // 第二个参数可以不传但是，不传第二个值在迭代时，会少迭代一次，这时reduce将数组的第一位作为total第一次的值...
2019-11-13 23:50:13
348
原创 js笔记之解析语法糖，Array方法，forEach，map，filter等方法解析
语法糖在JavaScript推出到es5之后，官方语法糖越来越多，官方语法糖就是用语言底层官方自己封装好的方法供开发者使用，今天我就来解析一下Array中比较常用的一些语法糖，如forEach，map等。forEach解析想解析其底层原理，先要明白它怎么使用：var arr = [1, 2, 3];// forEach可以接收两个参数一个回调函数， 一个是回调中的thisarr.for...
2019-11-09 17:44:42
887
1
原创 js笔记 demo篇 （四）拖拽上传展示，进度条
最近忙的懵逼，又很久没更新了，忙里偷闲更一篇。h5： 拖拽接口在h5中提供了很多接口，其中就有拖拽，这里只介绍拖拽上传用得到的几个：dragenter --> 进入元素范围时触发dragleave --> 离开元素范围时触发dragover --> 悬浮在元素上时触发（持续触发）drop --> 在元素上松开拖拽（...
2019-10-31 18:00:31
300
原创 js笔记 基础篇（七）Object.defineProperty与数据劫持
es5 （Object.definePropety)我们先来了解一下Object.defineProperty，这个方法是es5中提出用来限制用户对对象属性与方法的操作。其实在js内部的对象中有很多地方都是限制用户操作的。例如：var obj = {}console.log(obj.__proto__);/* constructor: ƒ Object() hasOwnProperty...
2019-10-09 04:39:27
614
原创 js笔记 基础篇 （六） js的面向对象
js笔记 基础篇 （五） js的面向对象waht面向对象？waht面向对象？严格来说，js并不是面向对象的编程语言，js是基于对象的语言，那为什么js可以面向对象呢？js可以模拟面向对象，它可以继承，可以封装，只是没有传统面向对象语言（如java）的多态特性。简单说一下什么是面向对象，假如我有一个需求，要输出一句话：‘我可以面向对象’，那面向过程的方式要这样做： console.log(...
2019-10-03 11:11:08
154
原创 js笔记 demo篇 （三）原生js小游戏贪吃蛇
js笔记 demo篇 （二）原生js小游戏贪吃蛇源码与展示自己学一些技术的时候，学了一段时间就想做点东西出来，找一找成就感今天这个小demo，就是我学习js一段时间之后找成就感的小demo，先给大家分解一下。结构其实很简单，一个样式文件夹就一个css文件，首先因为东西本身就少，二是写死的样式非常少。img不用说一些图片。然后就是src也是小demo中方最重要的文件夹。tool中主要装了一...
2019-08-04 13:52:50
309
原创 js笔记 demo篇 （二）原生js防抖搜索框
js笔记 demo篇 （二）原生js防抖搜索框防抖什么是防抖防抖搜索框demo展示地址：http://www.fgdemoshow.cn/smallDemo/js/searchBoxgitHub地址：https://github.com/lifei5859/search-box防抖什么是防抖防抖，难道代码还会抖吗？ 当然不是字面上的意思，代码又没有脑血栓。问题：比如有一个搜索框，我们要...
2019-07-20 15:47:25
367
原创 js笔记 demo篇（一）之瀑布流布局，图片的懒加载预加载（下）
js笔记 demo篇（一）之瀑布流布局，图片的懒加载预加载只能无奈的说不知道为啥一篇没写下，那么ok我们继续，懒加载与预加载结合起来就可以做一个简单的瀑布流布局，再图片没有加载过来之前loading图占位，没有滚动到指定高度不加载，当然就不能像上一篇中那么写了，因为正常来说加在图片是要分页的，我们要做的是加载一页后，到指定位置再加载下一页。html结构//获取滚动条距离function g...
2019-07-06 16:56:56
422
原创 js笔记 demo篇（一）之瀑布流布局，图片的懒加载预加载（上）
js笔记 demo篇（一）之瀑布流布局，图片的懒加载预加载图片的加载图片预加载图片懒加载图片的加载img标签加载图片是异步的在html中图片是加载多少显示多少默认情况下页面有多少图片就会加载多少图片那以上三个特性会产生什么问题呢？首先异步加载就会产生一个情况，如果图片过多就会抢站带宽，影响其他资源的加载，使页面加载速度变慢。而加载多少显示多少就会出现，图片渲染一半这种奇怪的现象，影响体验...
2019-07-06 16:42:45
1022
原创 js笔记，自封装篇（二）之对象克隆
js笔记，自封装篇（二）之对象克隆对象的指针对象克隆对象的指针对象是一个复杂数据类型，声明一个对象就开辟一个空间然后给这个空间取个名字。而这个空间可以有多个名字，而空间只能有一个。什么意思呢？上代码：var obj = { a: 1, b: 2}var obj1 = obj;obj.c = 3;obj.a = 8;console.log(obj1.c); // 3consol...
2019-06-30 22:26:09
141
原创 js基础篇（五）if与类型转换
js基础篇（五）if 与类项转换if elseif else我就是个if else工程师，嘻嘻。想必每个程序员一开始心里都有这样一句话， 我现在就有这种感觉。首先呢if else太重要。其次在写代码时能用if else解决的事情很少往别的地方想。关键还是if else能摆平的事情太多。var a = 0;if (a) { console.log('ok');} else { cons...
2019-06-28 22:34:53
343
原创 js笔记 基础篇(四) 对象and构造函数
@[TOC](js笔记 基础篇(四) 对象and构造函数)对象对象可以说是js中非常重要的一个数据结构，还有一种说法js中一切皆对象，我们在编写js时用的最多的是对象字面量：var obj = { ...}但是在代码复用等需求下，这种写法是不好的，我们假设有不同的车子，长宽高固定，但是颜色之类可以自己选：var car1 = { long: 4000, height: 1500...
2019-06-23 23:23:43
135
原创 js笔记，自封转篇（一）之对象继承
js笔记，自封转篇（一）之对象克隆与对象继承对象继承原型链继承圣杯继承在使用js编程时总是要自己封装一些常用的方法，这样可以实现代码复用，减少代码冗余。今天给大家带来，对象的克隆与继承成。对象继承继承顾名思义，就是吧别人东西拿来自己用，上次提到了原型链，那就是一种继承。当你调用一个对象的方法或者属性时，对象本身没有就会沿着原型链向上找，把父级、爷爷级。。。 的方法和属性拿来自己用。继承也有许...
2019-06-19 21:53:44
203
原创 js基础篇（三）下js中的this和原型链
js笔记（三）下js中的this和原型链this中的大坑原型链最近忙的要死一下子这么久没写博客，从今天开始争取一周写两篇。好废话不多说，继续上次的话题。this中的大坑相信在用js编程过程中大家都被this坑过，而最容易被坑道的地方就是定时器，上代码：setTimeout(function(){ console.log(this); //window}, 1000)这里的this...
2019-06-12 21:49:30
683
原创 js笔记（三）this this this...js中的this（1）
js笔记（三）js中的this何为this？this这个鬼，有啥用呢？何为this？说起this真是让我感到深恶痛觉，我在学习js时，几个朋友一直说js作用域与作用域链是最恶心的，我差点就信了，直到this这个鬼东西出现了…那this到底为何物呢？这个不是很好定义，但是就我的理解呢，this就是一个对象，这个对象是谁呢，要我说就是谁调用的函数，this就是谁。那问题就来了，这个谁调用的？就是...
2019-05-20 21:57:44
480
原创 js笔记（二）闭包原理，作用及危害
js笔记（二）闭包原理，作用及危害什么是闭包闭包无处不在一个例子闭包的危害什么是闭包想必用过js的朋友都知道，js的函数作用域，提到函数作用域，就不得不提js的闭包了，那到底什么是闭包呢？既然要在解释一下，去百度复制粘贴就没意思了，我就通俗的解释一下。说白了，就是垃圾回收机制没有及时回收的“垃圾”，还是上代码:function fun () { var a = 1; function ...
2019-05-19 23:16:30
607
原创 js笔记（一）神奇的js作用域and声明提升。
js笔记（一）神奇的js作用域and声明提升。自学成才的我，终于拿到一份offer，找工作的过程发现自己一些东西学的还是不够扎实，从今天开始以写博客的方式把自己学习的知识变得更扎实，也给大家分享一些的的心得。什么是作用域？额，我就说的简单一点，假如每个变量是一个人，这个人住在哪里？怎么能找到这个人？这需要一套规则，而这个规则就是作用域。js的作用域首先明确在es6之前js是没有块级作用域...
2019-05-01 17:30:20
144
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人