zhuzhaofa的博客

解读Vue源码之路

zhuzhaofa — Mon, 28 Jun 2021 15:59:16 +0800

Vue2.x源码解读之路解读源码之前的准备需要下载Vue的源码，直接从github上clone即可。需要了解Flow：JavaScript的静态类型检查器相关知识。需要了解打包工具Rollup Vue打包的版本 – vue.js/vue.common.js 完整版 – runtime.js是运行时版 – min.js是压缩版完整版：同时包含编译器和运行时的版本。编译器：用来将模板字符串编译成JavaScript渲染函数的代码，体积大、效率低。把template模板内容转换为JavaScrip

Virtual DOM爬坑之路

zhuzhaofa — Tue, 08 Jun 2021 17:40:52 +0800

虚拟DOM 什么是 Virtual DOM Virtual DOM(虚拟 DOM)，是由普通的 JS 对象来描述 DOM 对象，因为不是真实的 DOM 对象，所以叫 Virtual DOM 真实 DOM 成员 let element = document.querySelector('#app') let s = '' for (var key in element) { s += key + ',' } 可以使用 Virtual DOM 来描述真实 DOM，示例 { sel: "di

Vue响应式原理

zhuzhaofa — Tue, 08 Jun 2021 16:37:13 +0800

Vue响应式原理数据驱动Vue数据响应式的核心原理Vue2.x的响应式核心原理模拟Vue3.x的响应式核心原理模拟Vue自定义事件发布订阅模式观察者模式实现一个最小版本的VueVue.jsObserver.jsCompiler.jsDep.jsWatcher.js 数据驱动 // 在模拟vue响应式原理之前：需要了解：数据驱动、响应式的核心原理；发布订阅模式和观察者模式 // 数据响应式：数据响应式中的数据就是数据模型，基于vue开发的数据模型就是普通的JavaScript对象，当我们修改数据时，视图会进

vue-router原理以及vue-router核心代码实现

zhuzhaofa — Tue, 08 Jun 2021 11:44:41 +0800

Vue路由Vue的基础结构VueRoutervue-router的基本结构vue-router核心代码动态路由嵌套路由编程式导航vue-router的Hash模式和History模式Hash模式History模式vue-router的类图实现Hash模式的核心代码实现History模式的核心代码 Vue的基础结构对于Vue的基本机构，我相信小伙伴们肯定都会有很多的了解；在这里小编就不多做介绍了，简单的列一下： &l

前端工程化之开发脚手架及封装自动化构建工作流

zhuzhaofa — Tue, 20 Apr 2021 13:46:54 +0800

前端工程化概念前端工程化指的是：遵循一定的标准和规范；通过工具去提高效率，降低成本的手段。为什么要做前端工程化：1、想要使用ES6+新特性，但是兼容有问题 2、想要使用Less、Sass、PostCSS增强CSS的编程性，但是运行环境不能直接支持。3、想要使用模块化的方式提高项目的可维护性，但是运行环境不能直接支持。4、部署上线前需要时候东压缩代码及资源文件；部署过程需要手动上传代码到服务器。 5、多人协作开发，无法硬性统一大家的代码风格，从仓库中pull回来的代码质量无法保证。6、部分功能开发时需要

JS语言层面性能优化

zhuzhaofa — Thu, 15 Apr 2021 00:07:39 +0800

小编这里说的js性能优化只是在针对js语言上的优化。小编给大家提供一个js语言性能测试的网站：https://jsbench.me/ avaScript 内存管理内存：由可读写单元组成，表示一片可操作空间管理：人为的去操作一片空间的申请、使用和释放内存管理：开发者主动申请空间、使用空间、释放空间管理流程：申请 – 使用 – 释放垃圾回收 js内存管理是自动的对象不再被引用的时候是垃圾对象不能从根上访问到的时候是垃圾 js中的可达对象可以访问到的对象就是可达对象（引

TypeScript相关知识

zhuzhaofa — Wed, 14 Apr 2021 23:46:43 +0800

TypeScript语言 TypeScript 是 JavaScript 的超集，包含了 JavaScript 的所有元素，并扩展了语法。 TypeScript比JavaScript多了类型系统和ES6+ 但是最终都会编译成JavaScript 。TypeScript是强类型的。 TypeScript使用 // 使用typescript 先安装模块：yarn add typescript --dev // 然后就可以使用tsc的命令来运行文件 yarn tsc 文件名来编译ts文件 // 也可以使

ES6新增特性(下)

zhuzhaofa — Wed, 14 Apr 2021 23:06:46 +0800

迭代器 (Iterator) 在上次的博客中我们遗留了一个问题：for…of… 对普通对象进行遍历会出现错误。如果要对普通对象进行for…of…循环的话；这个时候就需要用到迭代器了。举个例子： const set = new Set(['foo', 'bar', 'baz']) const iterator = set[Symbol.iterator]() console.log(iterator.next()); // { value: 'foo', done: false } console

ES6新增的特性(上)

zhuzhaofa — Fri, 02 Apr 2021 10:16:03 +0800

作用域 ES6之前只有两个变量作用域（全局作用域和局部作用域）；ES6中新增了块级作用域例如： if(true) { var foo = 'sfy' } console.log(foo) // 这里我们很明显都知道他的结果就是 sfy 但是如果是下面的这种方式 if(true) { let foo = 'sfy' } console.log(foo) // 这次的结果就和上面的不一样了；他会出现：ReferenceError: foo is not defined 。 // 从这个例子我们就能看出

EventLoop事件循环

zhuzhaofa — Tue, 30 Mar 2021 10:40:58 +0800

请点击eventLoop总结

异步方案之Generator和async

zhuzhaofa — Tue, 30 Mar 2021 10:38:00 +0800

Generator生成器函数所谓生成器函数就是在普通函数的基础上加了一个*号。 function* foo() { console.log('start'); // 生成器函数可以随时使用yield来向外返回一个值 try { const res = yield 'foo' console.log(res); } catch (e) { console.log(e); } } // Generator函数会返回一个内部

js异步编程学习

zhuzhaofa — Tue, 30 Mar 2021 10:32:40 +0800

标题实现JavaScript异步编程方式：回调函数、事件监听、发布/订阅、Promise对象详细的介绍点击这个链接回调函数回调函数是所有异步编程方案的根基。 function foo (callback) { setTimeout(function () { callback() }, 3000) } foo(function () { console.log('这个就是一个回调函数'); console.log('调用者定义这个函数，执行者执行这个函数'); cons

异步编程之回调函数

zhuzhaofa — Tue, 30 Mar 2021 10:19:25 +0800

回调函数回调函数是所有异步编程方案的根基。 function foo (callback) { setTimeout(function () { callback() }, 3000) } foo(function () { console.log('这个就是一个回调函数'); console.log('调用者定义这个函数，执行者执行这个函数'); console.log('其实就是调用者告诉执行者异步任务结束后应该做什么'); })``` ...

函子

zhuzhaofa — Tue, 30 Mar 2021 10:15:36 +0800

Functor函子定义：容器：包含值和值得变形关系(这个变形关系就是函数) 函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有map方法，map方法可以运行一个函数对值进行处理(变形关系)；函子内部有一个值；对外还有一个方法map方法。定义一个函子 class Container { // 定义一个静态方法 static of就是方法名 static of (value) { // 返回一个函子对象 return new Container(value) }

函数组合

zhuzhaofa — Tue, 30 Mar 2021 10:05:13 +0800

lodash中的函数组合 lodash中组合函数flow()或者flowRight()，他们都可以组合多个函数；flow()是从左到右运行；flowRight()是从右到左运行。 const _ = require('lodash') // 把数组中的最后一个函数取出来；并把它转成首字母大写。 const reverse = arr => arr.reverse() const first = arr => arr[0] const toUpper = s => s.charAt(0).

函数柯里化

zhuzhaofa — Tue, 30 Mar 2021 09:56:26 +0800

柯里化概念当一个函数有多个参数的时候，先传递一部分参数调用它，然后返回一个新的函数接收剩余参数，返回返回结果。柯里化可以让我们给一个函数传递较少的参数得到一个已经记住了某些固定参数的新函数；这是一种对函数参数的缓存；让函数变得更灵活，让函数的粒度更小；可以把多元与函数转换成一元函数，可以组合使用函数产生强大的功能。 lodash中的柯里化方法 // lodash中的curry方法 const _ = require('lodash') // curry方法能够使函数柯里化；参数是一个纯函数；纯函数的参

js 纯函数

zhuzhaofa — Tue, 30 Mar 2021 09:46:13 +0800

纯函数的概念纯函数就是相同的输入会有相同的输出结果；而且没有任何可观察的副作用。纯函数例子 let arr = [1, 2, 3, 4, 5, 6, 7] console.log(arr.slice(0, 3)) console.log(arr.slice(0, 3)) console.log(arr.slice(0, 3)) function getSum(n1, n2) { return n1 + n2 } console.log(getSum(1, 2)) console.log(getS

闭包

zhuzhaofa — Tue, 30 Mar 2021 09:29:21 +0800

js函数闭包闭包的概念在函数外部调用函数内部的变量(能够读取其他函数内部变量的函数) 闭包例子 function salary(money1) { return function (money2) { return money1 + money2 } } let allSalary = salary(15000) console.log(allSalary(5000)) ...

小程序加载数据太多，通过上拉加载实现分页

zhuzhaofa — Wed, 08 Jan 2020 11:53:22 +0800

小程序向后台请求数据太多，加载太慢，通过上拉加载实现分页有时候我们在向后台发送请求的时候，后台由于数据量大，一下返回的数据很多，造成小程序端的加载很慢。当我们遇到这种情况的时候我们可以考虑修改后台，就是小程序端携带一个page参数像后台发起请求，让后台根据传过来的page值来返回相应的数据，但是呢，除了这个方法，还有一个方法就是直接不修改后台，在小程序端也可以实现，就是通过上拉加载跟...

微信小程序一键置顶操作详解：

zhuzhaofa — Wed, 08 Jan 2020 11:31:36 +0800

微信小程序一键置顶操作详解：第一种方式：采用scroll-view滚动视图实现第二种方式，直接用view实现第一种方式：采用scroll-view滚动视图实现下面是代码简介： wxml文件代码展示： js文件代码展示： data: { up_show: false, topNum: 0 }, // 获取滚动条当前位置 scrolltoupper: function (e) { consol...