JavaScript
文章平均质量分 75
小鹰丶
这个作者很懒,什么都没留下…
展开
-
Vue3 动态添加图片路径
原文地址: https://www.jeremyjone.com/844/, 转载请注明开始之前之前在 vue2 中经常使用类似方法,直接 reuqire(<url>) 即可。今天在写 vue3 的内容时,遇到了,习惯性的填上了这个,结果发现不行~都怪我,确实还没完整的看上一遍 vite 的内容,就是一直使用而已。这下好了,赶紧一番搜索翻阅文档,vite 和 webpack 的核心差别还是挺大的,在 vite 中并没有这样的包。于是就有了下面的操作。解决方法对于所有动态拼接的路径,只原创 2021-06-24 16:08:36 · 4097 阅读 · 0 评论 -
JS 中字符串 replace 的高级用法
原文地址:https://www.jeremyjone.com/809/,转载请注明。缘起说来惭愧,一直用 replace 替换,却一直没注意第二个参数可以放函数,也一直没用到。今天在做 excel 下载时发现一直报表名的错误,发现名字超长了,也才发现原来 excel 表名最长好像到31个字符。想着简单,把中间截取一下替换成 ~ 就可以了。然后发现 replace 不能一次性满足我,虽然用两次可以解决,但是不能忍,于是去 文档 恶补了一下。基本用法基本用法我们天天用,没啥说的:var s =原创 2021-04-02 11:10:55 · 495 阅读 · 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 · 349 阅读 · 0 评论 -
真丶深入理解JavaScript异步编程(三):async / await
原文地址: https://www.jeremyjone.com/772/,转载请注明这一篇内容比较短,介绍新增的语法糖。其实也不算新了。。。async / await这两个写法是 ES6 新加的特性,这让我们的代码更加简单明了。但是这并不是什么新技术,只是一个语法糖而已,它的本质还是 Promise。await我个人理解,await 是这两个语法糖的重点。它具有以下特点:它后面需要跟一个 Promise,如果是一个值,则会自动包裹成一个 Promise它需要在异步函数内部使用,也就是函数原创 2020-12-17 14:28:06 · 276 阅读 · 0 评论 -
真丶深入理解JavaScript异步编程(二):Promise 原理
原文地址: https://www.jeremyjone.com/771/ ,转载请注明。有了前文的基础,我们深入剖析一下 Promise 的原理。Promise由于 JS 的单线程和任务队列,造成了很多函数嵌套,当这种嵌套激增,就会造成所谓的 回调地狱,这是我们深恶痛绝的。创建一个 Promise基于几方面原因,JS 催生了 Promise,它解决了很多问题。先看用法:new Promise( ( resolve, // 成功状态回调 reject // 失败状态回调原创 2020-12-16 17:21:53 · 338 阅读 · 0 评论 -
真丶深入理解JavaScript异步编程(一):异步
原文地址: https://www.jeremyjone.com/766,转载请注明异步的由来与实现JS 在设计之初就是单线程的,所以本质上并不存在异步编程。在经过不断的进化和改良之后,现在所谓的异步编程也只是利用任务队列来改变事件的触发顺序,从而在效果上达到异步。一个生活中的例子好比我们要吃饭,那就要先做饭,假设焖米饭需要 20 分钟,炒个菜需要 10 分钟。如果我们一步一步来(全部我们自己动手):1、焖米饭(20 分钟)2、炒菜(10 分钟)3、吃饭很显然,我们需要 30 分钟原创 2020-12-15 09:34:54 · 402 阅读 · 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 · 526 阅读 · 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 · 170 阅读 · 0 评论 -
真丶深入理解 JavaScript 原型和原型链(二):原型和原型链
上一篇文章已经总结了关于原型的两个属性,那么接下来所有原型和原型链,乃至后面的继承,都与这两个属性有关系。原型和原型链理解继承,首先要搞懂什么是原型和原型链。理解原型和原型链上面已经介绍了关于原型的两个属性:__proto__prototype那么这里再小小总结一下,1、什么是原型原型即一个对象的构造器(prototype),可以通过该原型构造器创造无数实例,每一个实例都具有指向该原型的属性(__proto__)。2、什么是原型链在对象中通过原型,一层一层向上查找父级引用,直原创 2020-12-10 10:26:07 · 170 阅读 · 0 评论 -
真丶深入理解 JavaScript 原型和原型链(一):两个属性
原文地址:https://www.jeremyjone.com/738/,转载请注明。网上有很多相关的文章、视频等资料,但很多都是片面的,不完全的。我也为了自身加深理解,所以对其进行一下简单的总结。本来想写一篇文章进行总结,发现越写越多,还是分成几篇,分别总结吧。两个属性可以说 JavaScript 的很多特性都是基于原型和原型链展开的,这就要提到两个属性:__proto__prototype下面先理解这两个属性。__proto__ 属性首先,它不是一个 JavaScript 的规范原创 2020-12-09 15:25:33 · 230 阅读 · 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 · 1038 阅读 · 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 · 21610 阅读 · 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 · 6810 阅读 · 0 评论 -
手撸了一个基于Vue的Gantt组件
原文地址: https://www.jeremyjone.com/718/,转载请注明。基于Vue的Gantt组件工作需要,要实现甘特图,之前实现了一版,但是有些问题,干脆撸一个单独的组件出来,打包封装直接使用,这样也更加灵活。虽然不比专业的,但是小功能足够用了,展示,拖动,后续可能会添加新功能。话不多说,直接上图。功能树形数据结构展示,支持动态增减自定义左侧表格的列内容自定义右侧甘特条的内容任意拖动甘特条以修改时间更多功能,可以查看文档。使用组件已经发布到 npm,使用 n原创 2020-09-04 13:49:26 · 1585 阅读 · 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 · 221 阅读 · 0 评论 -
手动实现JS节流
原文地址: https://www.jeremyjone.com/705/,转载请注明。什么是节流在函数调用过程中,避免过于频繁的调用,而是间隔某一时间后调用一次的方法,叫做节流。节流做什么节流可以有效避免短时间内大量调用某一方法或数据,保证页面的稳定性和数据的准确性。一个小的例子使用 underscore 的节流功能来测试一下效果。中文网址在页面中直接导入 cdn 即可。https://cdn.bootcss.com/underscore.js/1.9.1/underscore.js原创 2020-06-24 16:31:01 · 728 阅读 · 0 评论 -
手动实现JS防抖
原文地址: https://www.jeremyjone.com/704/,转载请注明。什么是防抖事件响应函数在一段时间后才执行,如果在这段时间内再次调用,则重新计算执行时间;当预定的时间内没有再次调用该函数,则执行该函数。防抖做什么防止某些函数的频繁调用,保证页面的稳定流畅和数据准确性。一个小的例子使用 underscore 的防抖功能来测试一下效果。中文网址在页面中直接导入cdn即可。https://cdn.bootcss.com/underscore.js/1.9.1/under原创 2020-06-24 16:29:22 · 590 阅读 · 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 · 979 阅读 · 0 评论 -
fetch的二次封装
原文地址: https://www.jeremyjone.com/612/,转载请注明。前两天把axios封装整理了一下,今天整理一下fetch的封装。可能我身边用fetch的太少,我们的项目中没有用过,只是自己学习看的,有不周的地方,还希望留言我们互相讨论。fetch是js本身的一个接口,与axios/ajax有本质的区别,可能随着时间推移,fetch应该会更加流行吧。有兴趣的朋友可以...原创 2020-03-05 21:58:10 · 3214 阅读 · 0 评论 -
axios的二次封装
原文地址:https://www.jeremyjone.com/610/ ,转载请注明。之前项目是用到了axios,它本身是对ajax的二次封装。不过我们在使用的时候经常是对axios再进行二次封装,从而达到我们需要的效果。现在把代码整理了一下,贴上来。首先,安装axios:npm install axios还有一个qs是格式化参数用的,如果不需要,可以不用,直接拼接也可以。/* ...原创 2020-03-03 23:56:33 · 2483 阅读 · 0 评论 -
npm查看全局安装的包
原文地址: https://www.jeremyjone.com/555/ ,转载请注明。今天创建新项目,发现创建不了,于是想着查看一下npm的包,发现没安装vue。。。然后才想起来前几天重新装的电脑,因为之前的项目中已经有了所有包,所以一直用着没有问题。。。命令行查看包命令:npm list -g可以查看所有全局安装的包,输出是这样的,看着乱的一批,它显示了所有包的所有路径:所以...原创 2020-01-09 16:12:38 · 5678 阅读 · 0 评论 -
Vuex之Getters详解
原文地址: https://www.jeremyjone.com/543/ , 转载请注明。作为Vue的状态管理工具,Vuex的使用率相当之高。Vuex具有4个属性,state,getters,actions,和mutations。今天来讨论一下getters。它相当于vue的computed计算属性。每当state中的值变化时,它也会自动更新。这个在我们需要那些稍微对state中的属性进...原创 2019-11-28 18:26:59 · 2825 阅读 · 0 评论 -
使用axios下载文件
原文地址: https://www.jeremyjone.com/541/ , 转载请注明因为下载还是挺常见的,所以用axios封装了一下,直接调用即可。很简单的封装,一般情况下,只需要传入文件路径,文件名,和文件的mime类型即可。/** * Encapsulate Download methods, download files. * @param url * @param fi...原创 2019-11-28 16:25:00 · 1365 阅读 · 0 评论 -
JavaScript异步加载图片
原文地址: https://www.jeremyjone.com/526/ ,转载请注明之前写的画板里面,我将它升级了一下,首先可以传入一张默认图片,然后所有操作都是基于该图片进行操作。然后我发现,当使用橡皮擦的时候,它直接将整个canvas擦成了透明。这是因为canvas每次只能展示一张图片,这个在之前说过,有兴趣的朋友可以参考之前的文章。于是有了很简单的想法,在擦除完成后,首先在can...原创 2019-11-07 17:10:02 · 1103 阅读 · 0 评论 -
JS的console中log和dir的区别
原文出自 https://www.jeremyjone.com/392/, 转载请注明。在前端JS测试中,经常会用到console.log()这样的打印输出语句。有时候也会看到使用console.dir(),那么这两种输出有什么区别?简单来说:log语句打印的是结果,直接显示信息;dir语句打印的是内容,对显示对象的所有属性和方法。这样的区别在输出普通数据时没有区别,打印的内容完全一...原创 2019-06-20 15:10:03 · 9685 阅读 · 1 评论 -
JavaScript数字和字符互转
原文地址: https://www.jeremyjone.com/430/ 转载请注明数字转字符,这个比较简单:parseInt(string, radix)string:必须的,这个是要转成数字的字符radix:可选的,表示需要转成的制式,默认为10示例:>> var i = "a";a>> parseInt(i, 16);10 //...原创 2019-07-24 09:45:04 · 117 阅读 · 0 评论 -
vuex模块化详解
原文链接: https://www.jeremyjone.com/432/ , 转载请注明!vuex为我们提供了状态管理的解决方案,其最基本的结构如下:在main.js层级下创建一个store.js文件,写入:然后导入main.js并注册:这样,最基本的vuex就可以使用了。随着actions和mutations中的方法越来越多,文件越来越臃肿,我们会觉得越来越不好用。那么就需...原创 2019-08-08 11:31:05 · 4756 阅读 · 0 评论 -
JS/Vue动态获取浏览器高度
原文地址:https://www.jeremyjone.com/448/, 转载请注明动态获取浏览器大小,可以动态调整页面布局,让页面更加灵活。JS获取浏览器高度:var width=document.documentElement.clientWidth;var height=document.documentElement.clientHeight;原生JS动态获取浏览器大小改变使...原创 2019-08-09 14:41:27 · 12892 阅读 · 0 评论 -
极简修复CORS跨域问题,亲测有效
原文地址:https://www.jeremyjone.com/456/ ,转载请注明。在前后端分离开发、远程调用等过程中,总能碰到跨域问题,其报错大体长这个鸟样:对于这个bug,前端同学可以使用简单的方法处理,这里推荐两个方案:方案一,安装一个名为Allow-Control-Allow-Origin的插件你没有听错,前端同学最方便的方式其实是安装一个插件,安装后,在浏览器中打开它,使图...原创 2019-08-15 16:40:07 · 7012 阅读 · 0 评论 -
JavaScript 之 canvas(一)
原文地址:https://www.jeremyjone.com/462/ , 转载请注明。代码地址:https://github.com/jeremyjone/CanvasPaint ,需要请自行查看。认识canvas<canvas>是一个HTML元素,可用于通过脚本(通常是JavaScript)绘制图形。更多介绍,可以参考MDN的文档。这个系列我希望写一个简单的画图功能,并...原创 2019-09-06 16:24:12 · 200 阅读 · 0 评论 -
JavaScript 之 canvas(二)-- 绘制基本图形
本文首发地址: https://www.jeremyjone.com/465/ ,转载请注明代码地址:https://github.com/jeremyjone/CanvasPaint ,需要请自行查看。在JavaScript 之 canvas(一)中理解了canvas的绘图原理,这次就开始绘制基本图形。一般来说,canvas的图形分成实心(fill)和空心(stroke),我们的绘图板基...原创 2019-09-12 00:47:53 · 769 阅读 · 0 评论 -
JavaScript 之 canvas(三)-- 使用鼠标实时绘制图形
原文地址: https://www.jeremyjone.com/472/ ,转载请注明在JavaScript 之 canvas(一)中理解了canvas的绘图原理。在JavaScript 之 canvas(二)中掌握了基本图形的函数,但是这些图形绘好之后是不会改变的。这并不符合我要做的这个绘图工具的最基本功能。那么这篇文章来实现利用鼠标位置实时绘图。首先我们需要了解动态绘图的思路,c...原创 2019-09-16 12:43:38 · 4052 阅读 · 0 评论 -
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 · 20899 阅读 · 0 评论 -
JavaScript 之 canvas(五)-- 椭圆、橡皮
原文地址: https://www.jeremyjone.com/490/, 转载请注明。椭圆通过前面的文章,我们已经可以绘制大部分图形以及文字。但是,在canvas中,椭圆是一个复杂的存在,本身我们上学时学习椭圆本身也是一个复杂的结构。我看了很多画椭圆的方案,大部分分为两类:第一类是 使用arc()画一个圆形,然后将其缩放变形,完成一个椭圆。第二类是 使用贝塞尔曲线,即使用多条贝塞尔...原创 2019-10-04 14:02:19 · 784 阅读 · 2 评论 -
天气查询---利用tornado 前端后台数据的交互
数据接口在juhe.cn,有接口,其实理论上就可以调用任何可以得到的数据。因为查询天气需要两次数据交互,但是我希望的是选择省份之后自动出来城市列表,又没有学过ajax,这可费了劲了,查了半天资料,可算出来了。直接贴码:打开的页面,可以选择城市,<!DOCTYPE html><html lang="en"><head> <meta charset...原创 2018-05-17 20:14:28 · 3154 阅读 · 2 评论