weixin_43139949的博客

我与vue源码 之前写过一篇死磕vue源码，写了一篇就真心写不下去，vue的代码现在健壮的不要不要的那么写会越写越乱，最后会搞到自己都看不懂的地步。我写文章也是东一榔头西一棒锤，今天就继续搞vue的源码，不过这次的策略不一样的。我呢，分析了一下vue的几件神器： 数据响应式（也就是数据侦测）； AST抽象语法树（个人理解就是虚拟DOM， 把字符串的DOM模版转换为对象形式的DOM树）； diff算法（最小量更新）； 当然了个人理解，vue就是以这几件大神器为底，建造起了一个前端框架。 数据侦测 每个框架

原生js判断鼠标移入方向，图片特效先来个最终效果需求，判断出鼠标从元素的哪个方向移入 搞vue搞uniapp搞得脑子都发木了，有些时候呢一些原生的，底层的东西都要忘脖子后去了，今天呢就来个原生js的小demo。 先来个最终效果 需求，判断出鼠标从元素的哪个方向移入 在判断这个移入方向之前呢，我们要搞清楚一些事情，请看下图 ...

es6的promise可以说是es6中最重要的语法之一，很多人都说是解决回掉地狱的很好的方法，其实它还是没有逃过回掉。 语法糖？ promise是语法糖吗？用代码告诉你： setTimeout(function() { console.log('setTimeout go...') }) var oP = new Promise(function (res, rej) { res('pr...

写一个自己的简易版vue过年的这几天准备工作开始初始化观察者 过年的这几天 刚到家疫情就开始爆发，恰巧家里没有网，手机网络在老家的速度就像拖拉机，每天躲在家里，还好刚到老家时搞了些口罩，不至于返程时没有口罩可带。 手机的网络速度到底什么样呢，用vue-cli建个项目就在那一直install，还有可能中途失败，哎。。。，没法练习vue了就把自己写好的简易版vue拿出来又撸了撸，还有点意思。 准备工作...

上次呢，自己封装了一些js里Array的语法糖，如filter， map， forEach呀，最后留了个reduce，今天就来说说这个reduce。 reduce 先看看它的用法： // reduce要传两个参数， 一个是回调函数，一个是第一次迭代total的默认值 // 第二个参数可以不传但是，不传第二个值在迭代时，会少迭代一次，这时reduce将数组的第一位作为total第一次的值...

语法糖 在JavaScript推出到es5之后，官方语法糖越来越多，官方语法糖就是用语言底层官方自己封装好的方法供开发者使用，今天我就来解析一下Array中比较常用的一些语法糖，如forEach，map等。 forEach解析 想解析其底层原理，先要明白它怎么使用： var arr = [1, 2, 3]; // forEach可以接收两个参数一个回调函数， 一个是回调中的this arr.for...

最近忙的懵逼，又很久没更新了，忙里偷闲更一篇。 h5： 拖拽接口 在h5中提供了很多接口，其中就有拖拽，这里只介绍拖拽上传用得到的几个： dragenter --> 进入元素范围时触发 dragleave --> 离开元素范围时触发 dragover --> 悬浮在元素上时触发（持续触发） drop --> 在元素上松开拖拽（...

es5 （Object.definePropety) 我们先来了解一下Object.defineProperty，这个方法是es5中提出用来限制用户对对象属性与方法的操作。其实在js内部的对象中有很多地方都是限制用户操作的。例如： var obj = {} console.log(obj.__proto__); /* constructor: ƒ Object() hasOwnProperty...

js笔记 基础篇 （五） js的面向对象waht面向对象？ waht面向对象？ 严格来说，js并不是面向对象的编程语言，js是基于对象的语言，那为什么js可以面向对象呢？ js可以模拟面向对象，它可以继承，可以封装，只是没有传统面向对象语言（如java）的多态特性。 简单说一下什么是面向对象，假如我有一个需求，要输出一句话：‘我可以面向对象’，那面向过程的方式要这样做： console.log(...

js笔记 demo篇 （二）原生js小游戏贪吃蛇源码与展示 自己学一些技术的时候，学了一段时间就想做点东西出来，找一找成就感今天这个小demo，就是我学习js一段时间之后找成就感的小demo，先给大家分解一下。 结构其实很简单，一个样式文件夹就一个css文件，首先因为东西本身就少，二是写死的样式非常少。 img不用说一些图片。然后就是src也是小demo中方最重要的文件夹。 tool中主要装了一...

js笔记 demo篇 （二）原生js防抖搜索框防抖什么是防抖防抖搜索框demo展示地址：http://www.fgdemoshow.cn/smallDemo/js/searchBoxgitHub地址：https://github.com/lifei5859/search-box 防抖 什么是防抖 防抖，难道代码还会抖吗？ 当然不是字面上的意思，代码又没有脑血栓。 问题： 比如有一个搜索框，我们要...

js笔记（二）闭包原理，作用及危害什么是闭包闭包无处不在一个例子闭包的危害 什么是闭包 想必用过js的朋友都知道，js的函数作用域，提到函数作用域，就不得不提js的闭包了，那到底什么是闭包呢？既然要在解释一下，去百度复制粘贴就没意思了，我就通俗的解释一下。说白了，就是垃圾回收机制没有及时回收的“垃圾”，还是上代码: function fun () { var a = 1; function ...

js笔记（三）js中的this何为this？this这个鬼，有啥用呢？ 何为this？ 说起this真是让我感到深恶痛觉，我在学习js时，几个朋友一直说js作用域与作用域链是最恶心的，我差点就信了，直到this这个鬼东西出现了… 那this到底为何物呢？这个不是很好定义，但是就我的理解呢，this就是一个对象，这个对象是谁呢，要我说就是谁调用的函数，this就是谁。那问题就来了，这个谁调用的？就是...

js笔记，自封转篇（一）之对象克隆与对象继承对象继承原型链继承圣杯继承 在使用js编程时总是要自己封装一些常用的方法，这样可以实现代码复用，减少代码冗余。今天给大家带来，对象的克隆与继承成。 对象继承 继承顾名思义，就是吧别人东西拿来自己用，上次提到了原型链，那就是一种继承。当你调用一个对象的方法或者属性时，对象本身没有就会沿着原型链向上找，把父级、爷爷级。。。 的方法和属性拿来自己用。继承也有许...

@[TOC](js笔记 基础篇(四) 对象and构造函数) 对象 对象可以说是js中非常重要的一个数据结构，还有一种说法js中一切皆对象，我们在编写js时用的最多的是对象字面量： var obj = { ... } 但是在代码复用等需求下，这种写法是不好的，我们假设有不同的车子，长宽高固定，但是颜色之类可以自己选： var car1 = { long: 4000, height: 1500...

js基础篇（五）if 与类项转换if else if else 我就是个if else工程师，嘻嘻。想必每个程序员一开始心里都有这样一句话， 我现在就有这种感觉。首先呢if else太重要。其次在写代码时能用if else解决的事情很少往别的地方想。关键还是if else能摆平的事情太多。 var a = 0; if (a) { console.log('ok'); } else { cons...

js笔记，自封装篇（二）之对象克隆对象的指针对象克隆 对象的指针 对象是一个复杂数据类型，声明一个对象就开辟一个空间然后给这个空间取个名字。而这个空间可以有多个名字，而空间只能有一个。什么意思呢？上代码： var obj = { a: 1, b: 2 } var obj1 = obj; obj.c = 3; obj.a = 8; console.log(obj1.c); // 3 consol...

js笔记 demo篇（一）之瀑布流布局，图片的懒加载预加载图片的加载图片预加载图片懒加载 图片的加载 img标签加载图片是异步的 在html中图片是加载多少显示多少 默认情况下页面有多少图片就会加载多少图片 那以上三个特性会产生什么问题呢？首先异步加载就会产生一个情况，如果图片过多就会抢站带宽，影响其他资源的加载，使页面加载速度变慢。而加载多少显示多少就会出现，图片渲染一半这种奇怪的现象，影响体验...

js笔记 demo篇（一）之瀑布流布局，图片的懒加载预加载 只能无奈的说不知道为啥一篇没写下，那么ok我们继续，懒加载与预加载结合起来就可以做一个简单的瀑布流布局，再图片没有加载过来之前loading图占位，没有滚动到指定高度不加载，当然就不能像上一篇中那么写了，因为正常来说加在图片是要分页的，我们要做的是加载一页后，到指定位置再加载下一页。 html结构 //获取滚动条距离 function g...

js笔记（一）神奇的js作用域and声明提升。 自学成才的我，终于拿到一份offer，找工作的过程发现自己一些东西学的还是不够扎实，从今天开始以写博客的方式把自己学习的知识变得更扎实，也给大家分享一些的的心得。 什么是作用域？ 额，我就说的简单一点，假如每个变量是一个人，这个人住在哪里？怎么能找到这个人？这需要一套规则，而这个规则就是作用域。 js的作用域 首先明确在es6之前js是没有块级作用域...