JS
关注
分享
扫一扫
文章平均质量分 70
JS
Echoyya、
这个作者很懒，什么都没留下…
展开
-
可视化—gojs 超多超实用经验分享(一)
目录1. 设置分组模板，默认样式，统一最小宽度，展开收起状态监听2. 分组名称显示成员个数: 分组名称+成员个数: name(children)3. 分组成员为空时，不显示 placeholder 占位留白4. 分组第一次展开请求获取成员接口，监听展开收起状态 subGraphExpandedChanged:fn5. 设置节点模板6. 设置节点的 icon，此处以文字为例7. 文案太长截取显示....原创 2023-05-04 15:18:00 · 2198 阅读 · 1 评论 -
可视化—AntV G6 紧凑树实现节点与边动态样式、超过X条展示更多等实用小功能...
通过一段时间的使用和学习，对G6有了更一步的经验，这篇博文主要从以下几个小功能着手介绍，文章最后会给出完整的demo代码。目录1. 树图的基本布局和使用2. 根据返回数据的属性不同，定制不一样的节点样式3. 节点 label 文案显示过长时，通过截断的方式，显示...4. 当一个父节点包含children叶子节点时，label后显示children的长度,格式为：node.label(chil...原创 2023-03-29 14:37:00 · 1319 阅读 · 0 评论 -
可视化—AntV G6 高亮相邻节点的两种方式
目录内置的高亮节点自定义高亮自定义高亮时保持原始颜色总结案例完整代码通过官方文档，可知高亮相邻节点分为两种方法，文档描述并不是很清楚，对刚接触这个库的小白并不是很友好，慢慢总结慢慢来吧内置的高亮节点是通过内置的Behavior activate-relations来实现，Behavior 是 G6 提供的定义图上交互事件的机制。与交互模式 Mode配合使用activate-relatio...原创 2022-12-28 15:57:00 · 2194 阅读 · 0 评论 -
VLQ & Base64 VLQ 编码方式的原理及代码实现
目录VLQBase64 VLQVLQVLQ (Variable-length quantity)是一种通用的，使用任意位数的二进制来表示一个任意大的数字的一种编码方式。编码实现： ** 对数字137进行VLQ**编码，以下为分解步骤：将137转成二进制形式 —— 10001001七位一组做分组，不足的补前导0 —— 0000001 0001001最后一组开头补0，其余补1(1表示连...原创 2022-10-13 19:49:00 · 617 阅读 · 0 评论 -
8行JS代码实现Vue穿梭框
实现效果完整 demo 参考<template> <div class="contain"> <ul class=""> <li class="count">{{num(leftData,true)}}/{{leftData.length}}</li> <li v-for="(city,i...原创 2022-09-17 20:59:00 · 134 阅读 · 0 评论 -
2行JS代码实现Vue全选和反选
实现效果:第一行：子选项的选中状态 等于 全选框的状态this.letters.forEach(item => item.check = this.checkAll)第二行： 使用数组 every 方法的特性，数组的每一项均满足某一条件时，结果为 true也可以使用数组的 filter方法，判断返回子选项为 true的列表的长度，等同于数据源的长度时，可认定为全选状态，否则非全...原创 2022-09-01 07:31:00 · 59 阅读 · 0 评论 -
可视化—D3学习笔记小小案例记录一下
D3全称是Data-Driven Documents数据驱动文档，是一个开源的javascript库，可以用于数据可视化图形的创建，该库更接近底层，与 g2、echarts 不同，d3 能直接操作 svg，所以拥有极大的自由度，几乎可以实现任何 2d 的设计需求。正如其名 Data Driven Documents，其本质是将数据与 DOM 绑定，并将数据映射至 DOM 属性上，D3扮演的是一...原创 2022-07-05 21:36:00 · 199 阅读 · 0 评论 -
可视化—AntV G6实现节点连线及展开收缩分组
AntV 是蚂蚁金服全新一代数据可视化解决方案，主要包含数据驱动的高交互可视化图形语法G2，专注解决流程与关系分析的图表库 G6、适于对性能、体积、扩展性要求严苛的场景。demo使用数字模拟真实的节点及分组数据。combo内的nodes亦是使用随机数生成，节点之前的连线edges由节点从小到大依次连接 ，大家在用的时候，可以注意一下连线对象的 source 和 target 两个属性即可安装...原创 2022-07-03 12:24:00 · 2914 阅读 · 0 评论 -
VS Code 开发统一代码格式化配置
eslint: 是用来做代码风格检查的，比较关注代码质量，并且会提示不符合风格规范的代码，也有一部分代码格式化的功能。不是消除空行。"editor.formatOnSave": false, // true 每次保存时自动格式化；false 代码格式化 shift+alt+F "eslint.autoFixOnSave": true, // 设置保存时自动修复 "eslint.v...原创 2022-06-29 23:22:00 · 134 阅读 · 0 评论 -
高程读后感（四）— 关于BOM本人容易忽略的知识点总结
目录window对象window对象上属性及方法超时调用setTimeout和间歇调用setIntervalBOMlocation对象及其位置操作history对象window对象window对象上属性及方法全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以。原因：使用var声明的变量有一个[[Configurable]]的特性，值为false,因此不可...原创 2021-12-24 15:55:00 · 54 阅读 · 0 评论 -
高程读后感（三）— JS对象实现继承的6种模式及其优缺点
目录1.原型链1.1.默认的原型1.2.原型和实例的关系1.3.原型链的问题2.借用构造函数2.1.传递参数2.2.借用构造函数的问题3.组合继承4.原型式继承5.寄生式继承6.寄生组合式继承小结1.原型链原型链是实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象...原创 2021-12-09 18:16:00 · 70 阅读 · 0 评论 -
高程读后感（二）— JS创建对象的9种模式及其优缺点
目录1.new Object ()2.字面式创建对象3.工厂模式4.构造函数模式4.1.将构造函数当作函数4.2.构造函数的问题5.原型模式5.1.理解原型对象5.2.原型与in操作符5.3.更简单的原型语法5.4.原型的动态性5.5.原生对象的原型5.6.原型对象的问题6.组合使用构造函数模式和原型模式7.动态原型模式8.寄生构造函数模式9.稳妥构造函数模式小结1.new Object (...原创 2021-12-02 16:11:00 · 51 阅读 · 0 评论 -
高程读后感（一）— 零碎知识点查漏补缺
目录1-script延迟脚本defer及异步脚本async,区别及应用场景2-未声明的变量，未初始化变量3-Number parseInt 字符串转数值 ，进制转换4-undefined && null 区别5-操作符6-Label语句7-with语句8-垃圾回收机制简述避免内存泄漏9-函数内部属性 arguments10-严格模式1-script延迟脚本defer及异步脚本as...原创 2021-11-25 16:10:00 · 84 阅读 · 0 评论 -
客户端与服务器之间双向通讯的5种方式总结(完整代码演示)
目录1. polling 轮循2. long-polling 长轮循3. iframe 流4. EventSource 流5. websocket首先简单说一下常用的http协议的特点：http是客户端/服务器模式中请求-响应所用的协议，在这种模式中，客户端(一般是web浏览器)向服务器提交HTTP请求，服务器响应请求的资源。HTTP是半双工协议，也就是说，在同一时刻数据只能是单向流动，客户端...原创 2021-05-24 10:10:00 · 294 阅读 · 0 评论 -
从执行上下文(ES3,ES5)的角度来理解"闭包"
目录介绍执行上下文和执行上下文栈概念执行上下文执行上下文栈伪代码模拟分析以下代码中执行上下文栈的行为代码模拟实现栈的执行过程通过ES3提出的老概念—理解执行上下文1.变量对象和活动对象全局上下文中的变量对象函数上下文中的变量对象2.词法作用域3.作用域链4.活学活用 — 案例分析通过ES5提出的新概念—理解执行上下文创建阶段执行阶段执行上下文总结闭包闭包是什么?闭包的形成与实现闭包有什么用?1....原创 2021-05-17 19:13:00 · 64 阅读 · 0 评论 -
使用ES6中Class实现手写PromiseA+,完美通过官方872条用例
目录Promise出现的原因myPromise的实现要点myPromise的实现myPromise — 实现简单的同步myPromise — 增加异步功能myPromise — 链式调用(重难点，不好理解)myPromise — 值的透传完美通过官方872条用例myPromise的延迟对象defer用法myPromise.catchmyPromise.finallymyPromise.resol...原创 2021-04-26 12:58:00 · 74 阅读 · 0 评论 -
亲测有效：JS中数组去重的9种高阶方法
目录1. 利用对象的 key 唯一2. 交换元素位置从而替换调 splice方法3. Array.filter + Array.indexOf4. Array.filter + Object.hasOwnProperty5. Array.reduce + Array.includes6. Array.indexOf7. Array.includes8. new Set + 扩展运算符 || Ar...原创 2021-04-06 10:52:00 · 59 阅读 · 0 评论 -
一文彻底搞懂JS前端5大模块化规范及其区别
码文不易，转载请带上本文链接，感谢~ https://www.cnblogs.com/echoyya/p/14577243.html目录码文不易，转载请带上本文链接，感谢~ https://www.cnblogs.com/echoyya/p/14577243.htmlScript 标签CommonJS规范(同步加载模块)加载模块导出模块服务器端实现 NodeJs浏览器端实现 Browserif...原创 2021-03-29 10:16:00 · 104 阅读 · 0 评论 -
一文搞懂 this、apply、call、bind
码文不易，转载请带上本文链接，感谢~ https://www.cnblogs.com/echoyya/p/14506269.html目录码文不易，转载请带上本文链接，感谢~ https://www.cnblogs.com/echoyya/p/14506269.htmlthis 的指向怎样改变 this 的指向(1)使用ES6中箭头函数(2)函数内部使用 _this = this(3)使用cal...原创 2021-03-10 09:56:00 · 87 阅读 · 0 评论 -
JS五种绑定彻底弄懂this，默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解(转载)...
目录壹 ❀ 引贰 ❀ this默认绑定叁 ❀ this隐式绑定1.隐式绑定2.隐式丢失肆 ❀ this显式绑定伍 ❀ new绑定陆 ❀ this绑定优先级柒 ❀ 箭头函数的this捌 ❀ 总壹 ❀ 引可以说this与闭包、原型链一样，属于JavaScript开发中老生常谈的问题了，百度一搜，this相关的文章铺天盖地。可开发好几年，被几道this题安排明明白白的人应该不在少数(我就是其一)。我...原创 2021-03-09 17:46:00 · 71 阅读 · 0 评论 -
JavaScript数据类型判断的四种方法
码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14416375.html本文分享了JavaScript类型判断的四种方法：typeof、instanceof、Object.prototype.toString.call()、constructor目录码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblo...原创 2021-02-19 15:35:00 · 48 阅读 · 0 评论 -
JQuery统一复写美化项目中所有radio单选按钮样式
老项目要升级改版，对于分散在各页面的样式不好处理，怕有遗漏，尤其是优化input表单，修改其默认样式，接下来，我将给大家分享一下，我在项目中的总结。本文为Echoyya、所创，转载请带上原文链接，感谢 https://www.cnblogs.com/echoyya/p/14126709.html效果上代码：1.简单搞一搞 CSS，此处代码有折叠，Click Me~.custom-ra...原创 2020-12-12 20:35:00 · 94 阅读 · 0 评论 -
判断浏览器是否是 IE 及 IE8 以下版本
作为一个前端，避免不了会遇见IE的坑，其他浏览器都好好的，测到IE就完蛋，各种不支持，服气了有些属性和方法是所有版本IE都不支持，而有些则是部分支持，在项目中能够，主要分界岭为IE8，我相信目前大部分在维护和开发的项目，都是支持到IE8及已上版本即可，那么这篇文章，粗浅的总结一下，如何判断浏览器是IE及版本是8.0首先，有些属性和方法是所有版本IE都不支持，那么只需要判断是否是IE即可以下...原创 2020-12-01 11:40:00 · 130 阅读 · 0 评论 -
CSS+JS 实现动态曲线进度条
由于系统UI风格升级，产品童鞋和UI童鞋总是想要搞点儿事情出来，项目页面上的进度条从直线变成了曲线，哈哈，好吧，那就迎难而上实现效果：1.简单搞一搞 CSS , 此处代码有折叠.process { width: 110px; box-sizing: border-box; margin: 0 auto; height: 55px; overflow...原创 2020-11-07 15:47:00 · 117 阅读 · 0 评论 -
JS原生实现html转pdf / html转图片 (html2canvas.js + jspdf.js )
<button onclick="HtmlToPdf()"> 转储pdf </button> <button onclick="HtmlToImage()"> 转储image </button> <div id="pdf" style="width:800px;margin:0 auto"> <h1>第一章 ...原创 2020-07-20 16:46:00 · 86 阅读 · 0 评论 -
Vue.js +pdf.js 处理响应pdf文件流数据，前端转图片预览不可下载
使用场景及原因实际业务中，一些说明书或协议仅支持用户在线预览，为避免用户自行下载，并进行修改，引发纠纷，特将文件已文件流的形式，传给前端并转为图片显示，此时可能会有人问，为什么不直接在后端转图片，前端直接展示呢？那是因为当系统用户数量较高时，高并发会时服务器有很大的压力，可能会导致系统压测不能通过，前端转图片，可以将处理压力分摊至每个客户端。本次操作为Vue.js + pdf.js本案例...原创 2020-07-20 15:51:00 · 157 阅读 · 0 评论 -
JavaScript处理后端返回PDF文件流，在线预览下载PDF文件
在实际开发业务中，遇到这一需求，即后端返回的pdf文件，是以base64文件流的方式，在此不便操作接口响应等操作，便以上传一个文件转化为文件流的形式模拟实际应用时，base64Img = res.data 即可，以下方法为不使用其他插件可快速实现文件流转pdf，在线预览和下载，如需pdf文件流转图片预览且不可下载请参考此篇随笔 pdf.js文件流转图片<%input type="fi...原创 2020-07-20 13:58:00 · 353 阅读 · 0 评论