- 博客(155)
- 收藏
- 关注
RSS订阅原创 react 复杂低代码项目 - 问卷星
2.设置淘宝镜像源： npm config set registry https://registry.npm.taobao.org。一个git hook工具，在git commit之前执行自定义的命令，如执行代码风格的检查，避免提交非规范代码。执行npm run format， 这个时候发现文件里面的单引号，都变成了双引号。组件化：拆分页面结构，通过组件拼装页面，复用组件。只关注数据的修改，不用再操作dom，增加开发效率。创建.prettierrc.js文件，制定规范。2.配置eslint。
2024-04-15 09:41:18
456
原创 defer, async
1.async的目的是：不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。建议异步脚本不要在加载期间修改dom。1.整个页面解析完毕之后再运行，不会影响页面的构造。3.告诉浏览器立即下载，但是延迟执行。2.不保证按照指定顺序执行。2.按照先后顺序执行。
2024-02-27 09:49:40
188
原创 vuejs 设计与实现 - 组件的实现原理
有了基本的结构，渲染器就能完成组件的渲染。渲染器中真正完成组件的渲染的是mountComponent函数。一个组件必须包含一个渲染函数，即render函数，并且渲染函数的返回值应该是虚拟dom。有了 queueJob 函数之后，我们可以在创建渲染副作用时使 用它，在上面这段代码中，我们使用一个对象来表示组件实例，该对象有三个属性。我们用data函数来定义组件自身的状态。为组件设计自身的状态：data。
2023-08-14 20:55:45
675
原创 vuejs 设计与实现 - 渲染器 - 挂载与更新
处理之后，设置class的方式也有三种1.className， 2.setAttribute， 3.classList 但是这三种设置的方式不同，性能也是不一样，经过调查发现className的性能是最优的，因此我们使用className设置元素的class。现在，我们已经规范化了 vnode.children 的类型。当 invoker 函数执行时，在调用真正的事件处理函数之前，要先检查 invoker.value 的数据结构是否是数组，如果是数组则遍历它，并 逐个调用定义在数组中的事件处理函数。
2023-08-10 09:32:47
719
原创 vuejs 设计与实现 - 渲染器的设计
渲染器不仅能够把虚拟 DOM 渲染为浏览器平台上的真实 DOM。通过将渲染器设计为可配置的“通用”渲染器，即可实现渲染到任意目标平台上。本节我们将以浏览器作为渲染的目标平台，编写一个渲染器，在这个过程中，看看哪些内容是可以抽象的，然后通过抽象，将浏览器特定的 API 抽离，这样就可以使得渲染器的核心不依赖于浏览器。在此基础上，我们再为那些被抽离的 API提供可配置的接口，即可实现渲染器的跨平台能力。案例：// 创建一个渲染器// 调用 render 函数渲染该 vnode。
2023-08-09 20:41:52
520
原创 vuejs 设计与实现 - 快速diff算法
Vue.js 2 所采用的双端 Diff 算法。既然快速 Diff 算法如此高效，我们有必要了解它的思路。接下来，我们就着重讨论快速 Diff 算法的实现原理。
2023-08-09 17:38:33
479
原创 vuejs 设计与实现 - 双端diff算法
我们介绍了简单 Diff 算法的实现原理。简单 Diff 算法利用虚拟节点的 key 属性，尽可能地复用 DOM元素，并通过移动 DOM的方式来完成更新，从而减少不断地创建和销毁 DOM 元素带来的性能开销。但是，简单 Diff 算法仍然存在很多缺陷，这些缺陷可以通过本章将要介绍的双端 Diff 算法解决。
2023-08-09 16:42:29
682
原创 vuejs 设计与实现 - 简单diff算法
如上图可知：如果没有 key，我们无法知道新子节点与旧子节点 间的映射关系，也就无法知道应该如何移动节点。有 key 的话情况则 不同，我们根据子节点的 key 属性，能够明确知道新子节点在旧子节 点中的位置，这样就可以进行相应的 DOM 移动操作了。因为新的虚拟节点 (newVNode)的文本子节点的内容已经改变了(由’text 1’变成 ‘text 2’)。因此，在讨论如何移动DOM之前，我们需要先完成打补丁操作.这两个虚拟节点拥有相同的 key 值和 vnode.type 属性值。
2023-08-09 11:10:38
423
原创 第10章：堆
插入：将值插入堆的底部，即数组的尾部。然后上移，将这个值和它的节点进行交换，直到父节点小于等于这个插入的值。大小为k的堆中插入元素的时间复杂度为O(logk)获取堆顶：直接返回数组的头部。获取堆的大小：返回数组的长度。
2023-05-04 21:38:28
778
1
原创 第8章：树
只有2步，写代码也只有2行代码，但是这2行代码实现了深度优先递归，在遍历的过程中被反复调用很多次。如上图：访问顺序：1，2， 4， 5，3, 6， 7。2.对根节点的children挨个进行深度优先遍历。1.二叉树：树中每个树的节点最多有2个节点。标题，目录，深入看每个目录下的小节。3.把队头的children挨个入队。4.重复第2，3步，知道队列为空。2.对结节点的左子树进行先序遍历。3.对根节点的右子树进行先序遍历。1.新建一个队列，把根节点入队。2.把队头出队并访问。
2023-04-27 09:52:35
665
原创 第7章 “字典”
字典是什么？与集合类似，也是一种存储唯一值的数据结构，但它是以键值对的形式来存储。(最重要的特性)在Es6中新增了字典，名为Map字典的常用操作：增删改查。
2023-04-26 16:39:52
325
原创 第6章：集合
一种无序且唯一的数据结构。不关心顺序，集合里面的元素都是唯一的。栈，队列，链表他们里面都有可能出现重复的数据，但是集合里面的元素是唯一的。栈，队列，链表它们都有自己的顺序，但是集合是无序的。Es6中集合：名为Set去重复，判断某元素是否在集合中，求交集(几个集合里面都存在的元素)
2023-04-26 11:11:55
519
原创 第4章 数据结构之“队列”
1.一个先进先出的数据结构2.javascript中没有这个数据结构，但是可以使用array实现队列的所有功能。3.队列常用操作：push，shift，获取队列头部的元素：queue[0]const queue = [ ] // 入队： queue . push(1) // 出队：( 移除数组的第一个元素，并且返回) queue . shift()队列是一个先进先出的数据结构。利用这个特性可以解决很多问题，例如：js异步任务队列 2.最近的请求次数。
2023-04-25 15:48:48
377
原创 第3章 数据结构之“栈”
1.一个先进后出的数据结构。2.javascript没有栈，但是可以使用array实现栈的所有功能。3.栈常用：入栈push， 出栈pop，栈顶：stack[stack.length - 1]
2023-04-19 15:36:38
77
原创 第2章 时间空间复杂度计算
一个函数，用大O表示，例如：O(1), O(N), O(logN).定性描述算法的运行时间。时间复杂度常见图：案例：O(1)O(n)：解释：在每次循环的时候都打印一次i，中间的for循环里面的代码被执行了n次，随着i的增大的增大，n也会增大。
2023-04-19 11:00:27
623
原创 11 - 多平台适配
本章节中，我们处理了多平台适配的问题，其中的核心api就是 uni所提供的条件编译语法微信小程序h5进行运行了。这样其实就已经达到了我们的目的。这里大家要注意，在实际的开发场景中，我们去进行多平台适配的时候，并不是适配的越多越好的。因为适配的越多，证明我们需要付出越大的成本。所以，通常我们会根据我们的应用属性，来决定要适配哪些平台。如果你的应用是涉及到支付微信小程序支付宝小程序微信小程序h5就可以了。
2023-04-17 15:57:52
586
原创 10 - 热播模块实现
...methods: {/*** 获取弹幕数据*/});// 定义随机颜色});},.../*** 弹幕发布成功之后的回调*/// 发送弹幕});...
2023-04-17 10:18:21
490
原创 09-用户登录
在这一大章中，我们完成了整个的【用户登录】以及【文章详情】的功能。针对于【用户登录】来说，我们使用vuex来对 【组件】和【数据】进行了分离。所有与【用户登录】相关的数据操作，都被封装到了vuex我们可以在多个组件中对数据进行操作，而不需要担心其影响 单向数据流的简洁性。这样做的目的是可以让大家有能够独立思考，以及独立完成功能的机会。那么到现在为止，我们项目还剩余 【热播】模块没有完成，那么从下一章开始，我们就要搞定【热播】模块啦。
2023-04-14 20:48:49
596
原创 08 - 文章详情页面
从本章开始我们要进入文章详情的页面开发。在文章详情页面可以展示：同时你可以在这里进行：等操作。基本功能大家可以进入到我们已经发布的小程序《慕课热搜》中进行查看。那么在这样的一个复杂的详情页面中，我们又会遇到什么样的复杂难题？又将如何进行解决呢？我们一起来期待吧！在 下创建 文章详情页面 热搜列表进入文章详情搜索结果页面进入文章详情8-3：文章详情 - 获取文章详情数据查看接口文档 我们知道，想要获取文章详情需要传递两个参数：这两个参数需要在 跳转到文章详情页面时进行传递 ，所以我们需要修改下 的
2023-04-14 11:19:50
592
原创 07 -全局状态管理
是一个专门为uni app准备的组件。可以帮助uniapp实现下拉刷新、上拉加载的功能。在插件市场点击使用 HBuilderX 导入插件导入成功，文件夹下会多出文件夹的实现借助了微信小程序中的和这两个页面事件。因为微信小程序组件中没有这两个事件，所以在页面和组件中的使用方式不同我们现在先来看在组件中的使用在组件中使用分为两大块：组件-- 1. 通过 mescroll-body 包裹列表，指定 ref 为 mescrollRef ，监听@init、@down、@up 事件 -->
2023-04-13 14:19:43
450
原创 06-文章搜索页面
本章节中，我们完成了部分的文章搜索功能。使用分包创建了页面分析页面得到了 三个组件定义了规则，控制了三个组件的展示规律完成了热搜列表的功能在完成搜索历史时，遇到了问题：search-blog和searchData和 组件之间强耦合想要解决这个问题，那么我们需要用到一个新的东西，叫做《全局状态管理工具》，那么这个东西怎么用呢？他有什么样的价值呢？我们下一章再见！
2023-04-12 17:56:16
404
原创 第5章 uniapp开发ImoocBlog
收获：1.微信小程序2.uni-app开发慕课热搜项目3.构建企业级项目的编程思维4.上线可商用的企业项目经过前面四个章节，我们已经完成了 微信小程序 的学习。那么从这一章开始我们就进入 的项目开发之中。整个 阶段我们会完成一个正式的项目 慕课热搜 ， 以这个项目来作为 学习阶段的的最终产出，同时通过这个项目来贯穿所有的 知识点，可以让大家在学习的过程中不至于那么枯燥。目前我们的项目已经上线了：两个版本，因为在【第一章】中已经为大家演示了项目，所以这里就不再重复演示了。那么现在：各
2023-04-11 20:15:50
770
原创 第8章 - vuepress编写组件文档
部署项目在 github 和 gitte。总结：组件库全量打包和按需打包。vitepress的搭建和使用。发布组件库到 npm。
2023-04-06 15:21:12
664
原创 第7章 -日历组件 - calendar
日历组件当前并没有基于element-plus封装，而是找的第三方组件库fullcalendar封装的。// 在vite里面使用fullcalendar 需要引入一个包。// 自定义渲染内容方法。// 显示事件的结束时间。1.首先根据需要安装包。// 点击日历的某一天。// 点击日历上的时间。// 监听事件源的变化。// 日历显示的语言。// 生成日历的方法。// 日历的配置选项。// 自定义渲染内容。
2023-04-06 15:10:11
661
原创 第五章 - 封装组件高级篇（上）- form
rules.tstypes.tssrc/index.vueindex.ts在项目中使用思路：1.将配置项定义为一个数组，对数组进行增加，删除的的操作2.将配置项定义rule时增加validator属性3.通过defineExpose暴露实例方法4.暴露 validateField 、 scrollToField 、 clearValidate 方法。表单组件配置项类型定义动态组件的使用插槽的使用处理上传组件集成富文本编辑器支持弹框嵌套defineExpose 新属性的使用
2023-04-04 15:35:33
488
原创 第3章 封装组件初级篇（下）
src/index.vueindex.tscomponents/index.ts注册2.list列表组件src/index.vuesrc/types.ts在components/index.ts中注册3.通知菜单src/index.vueindex.ts在components/index.ts中注册4.list（列表） + notification（通知）的使用data.tsindex.vue
2023-03-28 21:36:07
190
原创 1.封装组件初级篇（上）
封装的组件有如下15个：图标选择器，省市区选择器，时间选择器，日期选择器，城市选择器，通知菜单，伸缩菜单，导航菜单，趋势标记，动态进度条，列表，表格，表单，弹框表单，日历。我们的目的不是做系统而是封装组件。本篇文件的价值：语法：vue3如何设计一个简单好用的组件。二次封装组件的思想与技巧。组合式使用现有组件。
2023-02-07 19:40:20
391
原创 react-redux-源码解析
返回值是：返回一个对象：{getState, dispatch, sunscribe}1.reducer函数，根据action的类型，对状态进行更改。redux的最核心api：createStore。3.enhancer：对store的功能进行增强。createStore用来创建store对象，
2023-01-05 22:58:54
184
转载 浏览器tab页之间的通信
转载：https://zhuanlan.zhihu.com/p/63422027若要实现两个互不相关的同源tab页面通信，可以使用一种比较巧妙的方式：localstorage。localStorage的存储遵循同源策略，因此同源的两个tab页面可以通过这种共享localStorage的方式实现通信，通过约定localStorage的某一个itemName，基于该key值的内容作为“共享硬盘”方式通信。HTML5提供了storage事件，通过window对象侦听storage事件，会侦听localStorag
2022-07-01 10:47:46
1235
原创 css3 -动画，grid，2d转换
添加链接描述2D 的转换方法：转换：translate(),定义 2D 转换，沿着 X 和 Y 轴移动元素。旋转：rotate()：在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。缩放：scale()：该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：.........
2022-06-30 22:46:52
366
2
原创 koa - 洋葱模型浅析
，它的核心工作包括下面两个方面：如下图：如下是洋葱代码的案例：4.源码解析use方法listen方法compose方法compose方法是洋葱模型的核心，compose方法中有一个dispatch方法，第一次调用的时候，执行的是第一个中间件函数，中间件函数执行的时候就是再次调用dispatch函数，也就说形成了一个递归，这就是next函数执行的时候会执行下一个中间件的原因，因此形成了一个洋葱模型。5.为什么需要洋葱模型？因为很多时候，在一个app里面有很多中间件，，用葱模型可
2022-06-29 08:34:50
872
原创 大前端 - 泛客户端 - Electron
Electron 是一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。使用 Web 前端技术来开发一个桌面 GUI 程序是一件多么炫酷的事情，你可以使用 HTML、CSS 来绘制界面和控制布局，使用 JavaScript 来控制用户行为和业务逻辑，使用 Node.js 来通信、处理音频视频等，几乎所有的 Web 前端技术和框架（jQuery、Vue、React、Angular 等）都可以应用到桌面 GUI 开发中。至此，JavaScript 这门神奇的语言除了能开发 Web 前端、Web
2022-06-27 10:47:57
1129
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人