前端
小鹰丶
这个作者很懒,什么都没留下…
展开
-
element table 加载时宽度闪烁问题
每次加载 element 的 table,当在 tabs 标签中切换时,table的宽度都会从一个较小值展开,看着就是闪烁,体验非常不好。原创 2023-02-15 09:53:38 · 2099 阅读 · 1 评论 -
真丶深入理解JavaScript异步编程(最终章):手撸 Promise
原文地址: https://www.jeremyjone.com/773/ ,转载请注明写在前面已经写了3篇前置内容了,主要是理解JS中的异步编程,异步的实现、以及异步的原理。今天内容较长,从最简单、最基本的内容入手,一点一点手撸一个简易的 Promise,巩固之前理解的异步原理,这才是我的目标。手写 Promise了解 Promise,从手动重写一个简易版的开始。最简易的 Promise最基本的 Promise 的样子是这样的:new Promise((resolve, reject) =原创 2020-12-18 11:32:35 · 360 阅读 · 0 评论 -
真丶深入理解JavaScript异步编程(三):async / await
原文地址: https://www.jeremyjone.com/772/,转载请注明这一篇内容比较短,介绍新增的语法糖。其实也不算新了。。。async / await这两个写法是 ES6 新加的特性,这让我们的代码更加简单明了。但是这并不是什么新技术,只是一个语法糖而已,它的本质还是 Promise。await我个人理解,await 是这两个语法糖的重点。它具有以下特点:它后面需要跟一个 Promise,如果是一个值,则会自动包裹成一个 Promise它需要在异步函数内部使用,也就是函数原创 2020-12-17 14:28:06 · 280 阅读 · 0 评论 -
真丶深入理解JavaScript异步编程(二):Promise 原理
原文地址: https://www.jeremyjone.com/771/ ,转载请注明。有了前文的基础,我们深入剖析一下 Promise 的原理。Promise由于 JS 的单线程和任务队列,造成了很多函数嵌套,当这种嵌套激增,就会造成所谓的 回调地狱,这是我们深恶痛绝的。创建一个 Promise基于几方面原因,JS 催生了 Promise,它解决了很多问题。先看用法:new Promise( ( resolve, // 成功状态回调 reject // 失败状态回调原创 2020-12-16 17:21:53 · 343 阅读 · 0 评论 -
真丶深入理解JavaScript异步编程(一):异步
原文地址: https://www.jeremyjone.com/766,转载请注明异步的由来与实现JS 在设计之初就是单线程的,所以本质上并不存在异步编程。在经过不断的进化和改良之后,现在所谓的异步编程也只是利用任务队列来改变事件的触发顺序,从而在效果上达到异步。一个生活中的例子好比我们要吃饭,那就要先做饭,假设焖米饭需要 20 分钟,炒个菜需要 10 分钟。如果我们一步一步来(全部我们自己动手):1、焖米饭(20 分钟)2、炒菜(10 分钟)3、吃饭很显然,我们需要 30 分钟原创 2020-12-15 09:34:54 · 405 阅读 · 0 评论 -
真丶深入理解 JavaScript 原型和原型链(四):ES6中的class
今天最后总结一下 class 与 原型的关系。ES6 的语法糖 - 类(class)ES6 有了更加清晰明确的面向对象的关键字,但其实它们只不过是经过修饰的语法糖。类的基础概念和语法我们之前在原型链中创建一个对象,需要使用函数的形式,然后在其原型中添加方法/属性,最后通过 new 关键字来创建实例。function User(name) { this.name = name;}User.prototype.show = function () { console.log("Hi, "原创 2020-12-14 11:31:35 · 528 阅读 · 0 评论 -
真丶深入理解 JavaScript 原型和原型链(三):继承
今天总结一下JS中的继承。前面已经总结了原型和原型链,JS中的继承基于原型链,那么有必要顺着前文继续。JS 中的继承首先明确,JS 中的继承是原型继承。有了上面的前置知识,我们可以深入理解 JS 中的原型继承了。继承不是改变原型的事我们现在创建一个 User:function User() { this.name = "User";}let user = new User();它可以表示为:1、当声明一个 User 模型时,系统会自动给出这个模型和其对应的原型 prototyp原创 2020-12-11 17:09:57 · 174 阅读 · 0 评论 -
真丶深入理解 JavaScript 原型和原型链(二):原型和原型链
上一篇文章已经总结了关于原型的两个属性,那么接下来所有原型和原型链,乃至后面的继承,都与这两个属性有关系。原型和原型链理解继承,首先要搞懂什么是原型和原型链。理解原型和原型链上面已经介绍了关于原型的两个属性:__proto__prototype那么这里再小小总结一下,1、什么是原型原型即一个对象的构造器(prototype),可以通过该原型构造器创造无数实例,每一个实例都具有指向该原型的属性(__proto__)。2、什么是原型链在对象中通过原型,一层一层向上查找父级引用,直原创 2020-12-10 10:26:07 · 175 阅读 · 0 评论 -
真丶深入理解 JavaScript 原型和原型链(一):两个属性
原文地址:https://www.jeremyjone.com/738/,转载请注明。网上有很多相关的文章、视频等资料,但很多都是片面的,不完全的。我也为了自身加深理解,所以对其进行一下简单的总结。本来想写一篇文章进行总结,发现越写越多,还是分成几篇,分别总结吧。两个属性可以说 JavaScript 的很多特性都是基于原型和原型链展开的,这就要提到两个属性:__proto__prototype下面先理解这两个属性。__proto__ 属性首先,它不是一个 JavaScript 的规范原创 2020-12-09 15:25:33 · 238 阅读 · 0 评论 -
js 修改 stylus 变量
原文地址: https://www.jeremyjone.com/735/,转载请注明。使用变量一些基本操作:使用 $ 作为变量名前缀赋值号(=)赋值使用 @ 可以直接引用当前类下的属性名 width 10px height @width可以直接在类中使用变量名(好像是废话)修改变量如果想动态修改,需要用到 js,但是 js 无法修改 stylus 的变量,只能借助 css 的变量名体系。标准的方式:在 :root 中声明默认变量属性通过 js 动态修改全局的 css原创 2020-12-01 16:18:48 · 1042 阅读 · 0 评论 -
@typescript-eslint/no-unused-vars 警告问题
原文地址: https://www.jeremyjone.com/730/,转发请注明。使用 TypeScript 的时候,总是报这个问题,名字很直接,就是有未使用的变量,那么如何消除呢?很简单:1、最标准的方式当然是删掉这些变量。2、配置一下 eslinetrc.js 环境即可。module.exports = { rules: { "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": ["off"],原创 2020-11-17 11:06:58 · 21692 阅读 · 1 评论 -
js 升级 ts 之路,含 vue 升级攻略
原文地址: https://www.jeremyjone.com/724/, 转载请注明。最近在升级项目,用到了TypeScript,简单总结一下JS转TS,尤其是在vue中的使用方式。基础语法对于TS的基础语法,这里就不多介绍了,看官网即可,毕竟巨硬的文档可以秒杀一众系列丛书。放个链接:TypeScript文档TypeScript中文文档上面是英文官方的,保持了最新。下面好像也是官方的,但是不是最新,不过没关系,大体都差不多的。编写 ts 文件TypeScript文件以.ts结尾,原创 2020-10-19 15:00:20 · 6826 阅读 · 0 评论 -
手撸了一个基于Vue的Gantt组件
原文地址: https://www.jeremyjone.com/718/,转载请注明。基于Vue的Gantt组件工作需要,要实现甘特图,之前实现了一版,但是有些问题,干脆撸一个单独的组件出来,打包封装直接使用,这样也更加灵活。虽然不比专业的,但是小功能足够用了,展示,拖动,后续可能会添加新功能。话不多说,直接上图。功能树形数据结构展示,支持动态增减自定义左侧表格的列内容自定义右侧甘特条的内容任意拖动甘特条以修改时间更多功能,可以查看文档。使用组件已经发布到 npm,使用 n原创 2020-09-04 13:49:26 · 1592 阅读 · 0 评论 -
VSCode 中 Vue 的 Template 高亮提示
原文地址: https://www.jeremyjone.com/710/,转载请注明。今天突然发现 template 块中的提示和高亮都没有了。之前也没在意,就百度了一下,结果根本没有一个管用的。解决方案前提是:需要安装 Vetur 插件,就是这个货:我挨个看了一下 Vetur 的配置,还是自己动手找比较靠谱。在 文件 > 首选项 > 设置 ,设置页面中找到 扩展 > Vetur,在右侧找到 Experimental: Template Interpolation Serv原创 2020-07-29 11:06:40 · 5314 阅读 · 0 评论 -
Proxy - JavaScript
原文地址: https://www.jeremyjone.com/709/ ,转载请注明。JavaScript 的 Proxy 对象是 ES2015,也就是 ES6 版本添加的。其官方定义为:Proxy 对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)。它本质上就是一个代理,如果学过设计模式的话,其实很好理解。我之前写过的js版本的设计模式也写过这个。有兴趣可以参照:https://github.com/jeremyjone/design-pattern-js/blob/ma原创 2020-07-28 12:41:41 · 224 阅读 · 0 评论 -
js的装饰符 @
原文地址:https://www.jeremyjone.com/666/, 转载请注明。js中的装饰器一直处于提案阶段,所以要是用装饰符@,就需要通过babel进行解析。安装babel的插件如果 babel < 7.x:1、安装npm install --save-dev babel-plugin-transform-decorators-legacy2、在.babelrc文件中...原创 2020-05-07 14:40:45 · 986 阅读 · 0 评论 -
css实现跳动的文字
原文地址:https://www.jeremyjone.com/618/,转载请注明老早老早收藏的一段代码,经过稍微修改之后,一直用到了现在,不管是我自己的网站,还是正儿八经的测试项目,我都喜欢把它放到底部作为一个比较活泼的元素。其实内容无所谓,什么内容都可以,只需要一个div,然后通过css的animation动画通过-webkit-transform和-webkit-rotate逐帧切换...原创 2020-03-08 00:33:00 · 3965 阅读 · 0 评论 -
fetch的二次封装
原文地址: https://www.jeremyjone.com/612/,转载请注明。前两天把axios封装整理了一下,今天整理一下fetch的封装。可能我身边用fetch的太少,我们的项目中没有用过,只是自己学习看的,有不周的地方,还希望留言我们互相讨论。fetch是js本身的一个接口,与axios/ajax有本质的区别,可能随着时间推移,fetch应该会更加流行吧。有兴趣的朋友可以...原创 2020-03-05 21:58:10 · 3215 阅读 · 0 评论 -
axios的二次封装
原文地址:https://www.jeremyjone.com/610/ ,转载请注明。之前项目是用到了axios,它本身是对ajax的二次封装。不过我们在使用的时候经常是对axios再进行二次封装,从而达到我们需要的效果。现在把代码整理了一下,贴上来。首先,安装axios:npm install axios还有一个qs是格式化参数用的,如果不需要,可以不用,直接拼接也可以。/* ...原创 2020-03-03 23:56:33 · 2484 阅读 · 0 评论 -
微信小程序 - BILIBILI-demo
原文地址: https://www.jeremyjone.com/608/,转载请注明。最近一直想着看一下微信小程序,正好今天下午无事,下午刷B站的时候看到有个很短的教程,就看了一下,然后又去翻了一下官方文档,就跟着写了一个demo,感觉跟vue还是很像的,至少逻辑上和思想上,差不多。可能我还没有深入的接触。代码放在了github上 ,欢迎讨论。接口是自己写的,如果不能用了,自行解决,mo...原创 2020-03-01 23:58:39 · 1149 阅读 · 0 评论 -
npm查看全局安装的包
原文地址: https://www.jeremyjone.com/555/ ,转载请注明。今天创建新项目,发现创建不了,于是想着查看一下npm的包,发现没安装vue。。。然后才想起来前几天重新装的电脑,因为之前的项目中已经有了所有包,所以一直用着没有问题。。。命令行查看包命令:npm list -g可以查看所有全局安装的包,输出是这样的,看着乱的一批,它显示了所有包的所有路径:所以...原创 2020-01-09 16:12:38 · 5696 阅读 · 0 评论 -
使用axios下载文件
原文地址: https://www.jeremyjone.com/541/ , 转载请注明因为下载还是挺常见的,所以用axios封装了一下,直接调用即可。很简单的封装,一般情况下,只需要传入文件路径,文件名,和文件的mime类型即可。/** * Encapsulate Download methods, download files. * @param url * @param fi...原创 2019-11-28 16:25:00 · 1369 阅读 · 0 评论 -
CSS多元素不换行
原文地址: https://www.jeremyjone.com/533/ , 转载请注明。有时候我们需要展示很多条数据,还要保证每条数据占据一行。但是页面上的宽度有限,为了展示更多的信息,同时还要保证不换行,一不定非要用div来回嵌套,可以使用ul和li的组合轻松完成。效果图这样的长文本可以使用横向的滚动条显示全。代码:<!DOCTYPE html><html ...原创 2019-11-08 15:10:19 · 4467 阅读 · 0 评论 -
JavaScript 之 canvas(五)-- 椭圆、橡皮
原文地址: https://www.jeremyjone.com/490/, 转载请注明。椭圆通过前面的文章,我们已经可以绘制大部分图形以及文字。但是,在canvas中,椭圆是一个复杂的存在,本身我们上学时学习椭圆本身也是一个复杂的结构。我看了很多画椭圆的方案,大部分分为两类:第一类是 使用arc()画一个圆形,然后将其缩放变形,完成一个椭圆。第二类是 使用贝塞尔曲线,即使用多条贝塞尔...原创 2019-10-04 14:02:19 · 788 阅读 · 2 评论 -
JavaScript 之 canvas(四)-- 绘制文字
本文原文地址:https://www.jeremyjone.com/485/, 转载请注明,谢谢。基本概念在canvas中,为我们提供了一个非常方便的添加文字的方法,直接上 w3school 的文档说明:context.fillText(text,x,y,maxWidth);// text: 规定在画布上输出的文本。// x: 开始绘制文本的 x 坐标位置(相对于画布)。// y:...原创 2019-10-03 00:10:50 · 20987 阅读 · 0 评论