javascript
关注
分享
扫一扫
文章平均质量分 87
vk阿木
戒躁戒躁，厚积薄发
展开
-
关于页面渲染的一些优化方案分享（懒加载、虚拟列表）
仅仅了解概念是不够的，实际工作上需要如何落地这些优化方案，对我们开发还是有着一定的难度，这也是前端进阶之路上必然需要经历的。否则你将永远无法晋升为中级/高级前端工程师。接下来我会就其中几点，发表一些自己的看法和优化方案。原创 2022-11-06 19:57:29 · 2072 阅读 · 0 评论 -
Vue2.0 —— Vue.nextTick（this.$nextTick）源码探秘
可能你还没有注意到，`Vue` 在更新 DOM 时是异步执行的。只要侦听到数据变化，`Vue` 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 `watcher` 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。原创 2022-09-21 17:59:30 · 1128 阅读 · 0 评论 -
Vue2.0 —— Vue.set（vm.$set） 源码探秘
之前在学习[《Vue2.0 —— 由设计模式切入，实现响应式原理》](https://blog.youkuaiyun.com/LizequaNNN/article/details/124988514)一文中有提及到，2版本的响应式是依靠 `Object.defineProperty` 实现的。但考虑到当时的用户群体和时代背景，将这个API与 `Proxy` 权衡利弊之后，最终采用了这个。为此开发者们不得不手动的来适配它。诸如：`Vue.set`、`Vue.del` 和 `arrayMthods` 等等手段来完善。原创 2022-09-19 17:42:52 · 817 阅读 · 0 评论 -
Vue2.0 —— 关于虚拟节点和 Diff算法的浅析
要了解Vue为什么会应用虚拟节点这门技术，以及，diff算法，就要先了解一些前置的储备知识。本文我会大部分以图片的形式讲解，我们可以结合图解，更好的理解Vue的源码。原创 2022-09-12 22:45:23 · 782 阅读 · 0 评论 -
设计模式 —— 关于8月份学习设计模式的总结
每到月底，都会对自己本月学习的知识进行一个复习。目的是为了巩固旧知识，防止忘记，顺便也起到一个总结的作用。今天需要复习的内容是 —— JavaScript 的设计模式。原创 2022-08-29 15:06:22 · 309 阅读 · 0 评论 -
设计模式 —— 发布订阅模式
发布订阅模式，听起来好像很陌生？Vue 中的 EventBus， $on 以及 $emit 和 $off；Nodejs 中的 EventEmitter，其中 on 和 emit。原创 2022-08-26 15:55:23 · 1814 阅读 · 3 评论 -
Vue2.0 —— 运用算法实现 AST 抽象语法树
AST，全称 Abstract Syntax Trees，中文名称为抽象语法树。它是源代码语法结构的一种抽象表示，以树状的形式表现编程语言的语法结构，树上的每一个节点都表示源代码中的一种结构。诸如，编辑器（IDE）和 模板语法的模板编译，又或是 Babel 的源代码编译，都应用到抽象语法树的思想。原创 2022-08-25 16:13:55 · 705 阅读 · 0 评论 -
Vue2.0 —— 实现 Mustache 模板引擎的数据结构和算法
Mustache是基于JavaScript实现的模版引擎，类似于，但是这个模版更加的轻量级，语法更加的简单易用，很容易上手。原创 2022-08-19 10:33:07 · 678 阅读 · 0 评论 -
Vue2.0 —— 由设计模式切入，实现响应式原理
Vue2.0 —— 由设计模式切入，实现响应式原理所谓MVVM框架，即是数据驱动视图模型，分为 Model、View 和 ViewModel。目前市场上三大框架，Vue，React 和 Angular 都是数据驱动视图模型框架。原创 2022-08-15 16:58:03 · 836 阅读 · 2 评论 -
JavaScript —— 数据转换为视图的历史
大家好，我是vk。今天的知识来源于Vue响应式的模板语句。本来只想研究一下框架的模板引擎渲染机制是怎么工作的，后来发现其实历史上就已经有很多方法实现了这种效果。那么假设我们有一段接口返回的 JSON，业务的需求是需要把这段 JSON 动态的渲染到我们的页面上（例如数据列表、数据回显等）。我们就以数据列表为例，分别介绍一下这几种实现方式。......原创 2022-08-09 22:07:21 · 292 阅读 · 0 评论 -
设计模式 —— 观察者模式
设计模式 —— 观察者模式什么叫观察？观察就是，我把目光聚焦于你，你的每一个动作都给我视觉反馈，就这么简单。观察者：Observer；被观察者：Subject；备注：本文采用ES6类语法实现观察者模式。理解了这句话自然也就不需要图解，梳理一下思路即可：先实例化，观察者，被观察者观察者，聚焦于，被观察者被观察者，给予，观察者，反馈有了思路就尝试，一步步实现，举一个生动又形象的例子一、实例化对象// 大怨种基类class Subject { constructor(name) {原创 2022-05-26 12:18:23 · 288 阅读 · 0 评论 -
JavaScript —— 实现一个简易版轮播图
JavaScript —— 实现一个简易版轮播图零、起因和思路昨天有位小伙伴询问一种轮播导航栏要如何做：今晚寻思着，刚睡醒吃完，花点时间撸一下。老样子，完整代码放最后面，具体思路如下：点击某一项滚动点击上一项或下一项滚动自动滚动轮播鼠标移入移出暂停轮播一、设计结构<body> <div class="over"></div></body>样式代码：<style>.over { position: relati原创 2022-05-23 23:51:09 · 601 阅读 · 2 评论 -
uniapp —— 小程序实现带参分享微信、朋友圈以及调试获取参数
uniapp —— 小程序实现带参分享微信、朋友圈以及调试获取参数零、起因以及分类小程序我们在开发微信小程序的过程中，经常需要实现分享给微信用户或者分享到微信朋友圈的功能，基本上我们会用到 onShareAppMessage 这个处理函数《传送地址》，我们先看看他的支持情况：我们可以看到其实除了小程序之外，App 和 H5 是不被支持的，那么这两种用户端需要如何实现分享呢？AppApp 端我们则是使用 uni.share() 这个处理函数《传送地址》，他的API比较丰富，支持的情况也多样化：原创 2022-05-20 18:03:31 · 12798 阅读 · 5 评论 -
uniapp —— 生成带参的小程序码海报分享保存相册并调试（包含后端PHP代码）
uniapp —— 生成小程序二维码海报保存相册并分享（包含后端代码）原创 2022-05-20 15:37:11 · 2209 阅读 · 0 评论 -
JavaScript —— Symbol数据类型的拓展
JavaScript —— Symbol数据类型的补充上一篇文章学习了Symbol的基本用法和作用，但对于Symbol的构造器对象，里面还有很多内置方法我们可以研究一下，让我们一起看看吧！上一篇文章：《传送地址》一、Symbol.hasInstancehasInstance？看起来好眼熟。难道它跟我们的某些API有关系？没错！他就是instanceof！当我们使用这个API判断类型的时候，就会调用这个类型的构造器内置对象属性。我们可以举个例子：class myObject { stat原创 2022-04-22 15:21:39 · 1576 阅读 · 0 评论 -
JavaScript —— Symbol数据类型之不延伸
JavaScript —— Symbol数据类型之不延伸导语：Symbol是一种基本数据类型，每个从Symbol()返回的值都是唯一的。一个symbol的值能作为对象属性的标识符，这是该数据类型仅有的目的。 ---- 《摘自MDN》敲黑板：唯一的、标识符这句话值得我们细细咀嚼，我们由上面这句话来展开思考。说到唯一性，我们可以联想到的数据类型有什么？const常量 —— 《传送地址》TypeScript枚举enum —— 《传送地址》TypeScript Symbol下面我们就这三种数据原创 2022-04-10 05:43:43 · 263 阅读 · 0 评论 -
JavaScript —— Symbol数据类型的延伸之（const关键字的补充）
Symbol数据类型的延伸之（const关键字的补充）之前上一篇关于const关键字的延伸，自己回过头看看还是有描述得不够充足的地方，所以今天又翻阅了大量的文献，对之前的文章进行一个补充。导语：Symbol是一种基本数据类型，每个从Symbol()返回的值都是唯一的。一个symbol的值能作为对象属性的标识符，这是该数据类型仅有的目的。 ---- 《摘自MDN》而常量，我们在JavaScript当中经常会用到，通常使用const声明一个常量。使用const进行常量的定义一般定义为大写，并且一定要赋原创 2022-04-08 14:20:09 · 1266 阅读 · 0 评论 -
JavaScript —— Symbol数据类型的延伸之（enum枚举）
Symbol数据类型的延伸之（enum枚举）导语：Symbol是一种基本数据类型，每个从Symbol()返回的值都是唯一的。一个Symbol的值能作为对象属性的标识符，这是该数据类型仅有的目的。 ---- 《摘自MDN》敲黑板：唯一的、标识符上一回我们说了const常量，这回我们来说说同样值得我们讨论的，具有相对唯一性的，enum枚举类型。一、Enum枚举的数字和字符串枚举enum枚举类型：我们知道，JavaScript是没有枚举类型的，只有TypeScript有枚举类型。使用枚举，我们可以原创 2022-04-07 02:12:48 · 2429 阅读 · 0 评论 -
JavaScript —— Symbol数据类型的延伸之（const关键字）
Symbol数据类型的衍生Hello大家好好久不见！最近真是隔了很久都没有产出了！过完年回来整个人的状态都不是很好，最近才调整回来，所以现在让我们继续学习。敲黑板：Symbol声明的变量是全局唯一的。这句话值得我们细细咀嚼，我们由上面这句话来展开思考。说到全局唯一性，我们可以联想到的数据类型有什么？const常量TypeScript枚举enumTypeScript Symbol下面我们就这三种数据类型展开对比：一、const 常量常量我们在JavaScript当中经常会用到，通常使原创 2022-04-01 01:40:12 · 570 阅读 · 0 评论 -
sourceMap到底是个啥玩意？
sourceMap到底是个啥玩意？一、前言sourceMap是一个由来已久的名词，自从2013年jQuery开始支持以来，就逐渐广泛的被使用于各种打包工具上，最具标志性的便是前端er必须具备的webpack。webpack是一个模块打包工具，在使用的过程中有许多配置项可以选择，例如：source-map、cheap-module-source-map、cheap-source-map、eval-source-map等等，所以我觉得有必要了解一下sourceMap到底是做什么的，到底是怎么来的。web原创 2021-09-15 19:42:32 · 1055 阅读 · 0 评论 -
会javascript，你才是前端工程师！
前言作为一个刚毕业不久的计算机小白，想从事前端工作的你就必须要学会如何用javascript，那就必定离不开js基础的学习。现在网上有很多学习javascript的视频，我相信大家都能找得到。作为过来人，我给大家的建议就是不要仅仅只是看完了视频，会用了就可以了。如果你想成为一名很牛批的前端er，你必须要拥有扎实的js基础，才能在那些所谓的框架以及库中披荆斩棘，因为以后你在工作上遇见什么问题，归根...原创 2020-03-04 15:43:10 · 254 阅读 · 0 评论