原生图片懒加载图片懒加载是一个常见的应用,它旨在不影响用户体验的情况下提示首屏的加载速度。原理很简单,在当前可视视口(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
某咸鱼的 AJAX 入门🐟AjaxAjax 是异步的 JavaScript 和 XML(Asynchronous JavaScript And XML)。简单点说,就是使用XMLHttpRequest对象与服务器通信。 它可以使用 JSON,XML,HTML 和 text 文本等格式发送和接收数据。Ajax 最吸引人的就是它的“异步”特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。 Ajax 2020-12-24 笔记 JavaScript