第一个SPA的踩坑总结重制版在没有写完的情况下弃坑了，后来在写另一个 Vue3 的练手项目时想起来这个曾经入手 Vue2 的入门项目。 所以打算使用 Vue3 + TypeScript 重构一下。 仓库地址 TypeScriptVuex在 Vuex 中正确的使用了 TypeScript 可以直接静态提示 state 的类型以及属性。而在 Vuex 中为 state 注解需要用到官方的泛型。 第一步，为 state 做注 2021-05-13 踩坑 JavaScript Vue TypeScript
原生图片懒加载图片懒加载是一个常见的应用，它旨在不影响用户体验的情况下提示首屏的加载速度。原理很简单，在当前可视视口（Viewport）外的图片等到进入了视口内再进行加载（按需加载）。 资源处理请求浏览器对于不同资源的下载请求有着不同的优先级。在基于 Chromium 的浏览器中，有着这样的优先级： 在默认情况下，那些在可视视口外的图片可能有着更高的加载优先级。而可视视口外的图片提前加载是没有必要的，这就可能 2021-03-12 实践 JavaScript
JavaScript 装饰器模式🎊JavaScript 的函数非常灵活，它们可以被传递，用作对象。除了 this 难以捉摸以外。 装饰器装饰（decorate），将原函数作为一个参数传递给装饰器。利用函数闭包的特性，在父作用域中保存一些执行后的数据（缓存）或执行一些特殊操作。再将其返回出去，在这个返回的函数根据条件来执行原函数。 在实际工作中常见到的函数防抖和节流就是装饰器的工作原理。 缓存装饰器一个简单的透明缓存装饰器可以明确的 2021-03-09 笔记 JavaScript
踩坑记录-Win10远程桌面密码错误触发条件Windows 10 20H2版，当只登录了一个 Microsoft 账户时。在登录时或系统默认将“只允许使用 Windows Hello 登录”打开了，导致无法使用传统密码登入系统。也就直接导致了远程桌面无法登录。 可能的其他问题上述是最新的问题，相比较现在，以前也还有一些老问题会导致无法登录远程桌面。 如果凭据未在本地更新，则Windows 10远程桌面登录失败 修改注册表 2021-02-28 踩坑 Windows
移动端触摸轮播图迫害移动端继上次的经典轮播图的实现方案，这次配合了TouchEvent来实现了移动端的触摸轮播图。 这次原生的实现方式和 Vue 基本相同，由于需要实现触摸滑动，仅仅靠absolute定位和 Vue 的过渡动画是不够的。所以使用了经典的图片队列，然后克隆两张图片来调换队列。 封装组件这次把整个轮播图图都尝试封装成一个单独的组件，图片的队列和动画延时都由父组件传递 props 过来。 <Tou 2021-02-23 实践 JavaScript Vue
某咸鱼的 ToDoList 实践🐟为什么要迫害 ToDoList摸鱼了也挺长时间，是时候该尝试写个小案例安慰下自己了。 组件划分对于 ToDoList 来说，没有多少组件化的东西。主要还是对一些基本知识的练习。所以我将其划分了一个父组件和两个子组件，他们分别是：用于输入的 Button 和用于展示数据 List。 两个子组件分别对存在于父组件内保存的列表进行增删改的操作。 整体功能目录结构： $ tree -l 4 --igno 2021-02-11 实践 JavaScript Vue
经典轮播图的实现方案传统方式项目地址 传统方式实现轮播也算一个不小的工程量了，基本布局就是将所有的图片横向布局，并在首位分别克隆最后和第一张图片。当切换到克隆的图片时，并在动画播放快结束时，将这个图片队列复位。 当整个队列切换完了之后，会切换到克隆的 #1 图片上，再动画完成之后，我们悄悄的将其切换为真正的第一张图片。 传统方式的实现为了给各种数量的图片做适应，所以整个队列的宽度就不固定死了，而使用 JavaSc 2021-02-09 实践 JavaScript Vue
路由中的动态组件-keepAlive与路由真正的动态组件<keep-alive>经常配合componentIs来动态的切换组件，当组件再次被切换回来的时候，组件的状态依然被保存。 <keep-alive> <component :is="tabName" :postLists="postLists"></component> </keep-a 2021-01-24 笔记 JavaScript Vue
构造函数与绑定this丢失thisthis 是整个 JavaScript 语言里最令人头疼的特性。在 JavaScript 中，this 是动态的，也就是说它在运行时是变化的。也正因这一特性，this 的变化难以预料，不经意间就会发生令人意外的结果。 先来看一个最基本的例子。我们有一个很智能的 test 函数，它有一个 age 属性和一个 sayAge 方法： let test = { age: 18 2020-12-31 实践 JavaScript
真的是在写 JS - JavaScript 的类在 JavaScript 中所谓的类不过是 ECMAScript 2015 为其引入的语法糖。这个糖它只有甜味，它是构造函数的另一种写法，类语法不会为 JavaScript 引入新的面向对象的继承模型。 在之前学习 JS面向对象 的编程时，详细的研究过了关于 JavaScript 构造函数以及继承的问题。从工厂模式一直发展至今的寄生式继承，也解决了很多语言本有的问题。虽然类只是个语法糖，但是从很多 2020-12-30 笔记 JavaScript
