JavaScript
关注
分享
扫一扫
文章平均质量分 72
X01动力装甲
欢迎进群（959261248）学习交流。
展开
-
浅谈RxJS WebSocket
通过利用 RxJS Observables 的功能，开发人员可以轻松地创建前端和后端系统之间的实时连接，提高用户体验，并创建更有吸引力的Web应用程序。与遵循请求-响应模型的HTTP不同，WebSocket提供了一个持久的、低延迟的通信渠道，允许服务器在需要时向客户端推送数据。RxJS WebSocket是一个强大的库，使开发人员更容易在Web应用程序中使用WebSocket。如何在Angular中使用RxJS WebSocket 使用RxJS WebSocket与Angular的第一步是安装包。原创 2024-02-01 17:12:58 · 799 阅读 · 0 评论 -
mxGraph 教程
客户端事件：mxGraph支持很多事件（如鼠标单击、双击、拖拽等）的处理，在客户端完成前台处理，减少后台交互数据，提升用户体验。数据绑定：mxGraph支持将数据绑定到图形元素上，以实现数据和图形之间的同步，并实时更新图形。打印：mxGraph包含了有用的打印功能，可让您生成高质量的打印输出，适合各种场合，如报告、演示文稿等。Views: 它们管理与绘制图形相关的所有信息，如滚动条、缩放级别、选择状态和当前显示的区域。Cells: 表示图形中的节点或连接线，并可以具有各种属性，例如标签、样式和几何位置。原创 2024-01-24 10:45:49 · 996 阅读 · 0 评论 -
AntV G2/G2Plot柱状折线混合图
G2混合图AntV G2实现柱状折线混合图比较简单，只需要设置position里面的值就可以了。案例里面有个双轴图表：https://antv-g2.gitee.io/zh/examples/other/other#double-axes按照上面的模式自己设置一个双轴混合图。分了三组数据，A，B，C。A是柱子，B和C是line加area的形式。let data = [ { genre: 'Sports', sold: 275, type: "A" }, { genre: 'Str原创 2020-10-22 18:10:20 · 5445 阅读 · 1 评论 -
AntV L7地图可视化入坑笔记
先用 HTML CDN的方式跑起来一个地图案例：官方案例地址：https://codesandbox.io/s/laughing-fermat-fjy5y?file=/index.html:491-499我的案例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w原创 2020-10-21 20:23:44 · 3898 阅读 · 0 评论 -
webpack温故而知新
webpack用的人很多，同样吐槽的人也很多。一边垃圾垃圾的骂着，一边又不得不去翻阅文档。为什么呢？好好的靠src的年代一去不复返了，随随便便写个代码就是一堆的node_modules。玩转webpack第一章：webpack与构建发展简史第二章：webpack基础用法entryoutputLoadersPluginsMode解析ES6解析css、Less和Sass解析图片和字体第三章：webpack进阶用法第四章：编写可维护的webpack构建配置第五章：webpack构建速度和体积优化策略第六章：.原创 2020-09-18 17:07:25 · 261 阅读 · 0 评论 -
乱七八糟五花八门的charts
charts的库很多，标准样式就那些，估计他们都是互相借鉴吧。目录echartshighchartschartjsplotlyJszingchartamchartsfusionchartsechartshttps://www.echartsjs.com/zh/index.html开源免费highchartshttps://www.highcharts.com/收费chartjs...原创 2020-03-30 17:22:02 · 452 阅读 · 0 评论 -
6JavaScript设计模式--观察者模式\迭代器模式\状态模式
观察者模式//观察者模式 发布订阅//主题 保存状态，状态变化 触发class Subject{ constructor(){ this.state = 0 this.observers = [] } getState(){ return this.state } setState(state){...原创 2018-08-21 22:35:53 · 377 阅读 · 0 评论 -
TWEEN.Group is not a constructor
TWEEN.Group is not a constructorUncaught TypeError: TWEEN.Group is not a constructor“@tweenjs/tween.js”: “^18.3.1”,安装了新版本的tween.js 发现报错：TWEEN.Group is not a constructor。如是卸载了安装了^17.2.0就没问题了。估计Group...原创 2019-10-23 15:02:07 · 812 阅读 · 2 评论 -
完美解决setInterval在浏览器切换时加速的问题
完美解决setInterval在浏览器切换时加速的问题JavaScript中当我们切换浏览器的时候，setInterval会加快速度。导致这个原因是：发现这是因为浏览器本着节省内存的性质，当切换到其他页面时，采油系统页面的定时器不运动，但是动画依然排列，当切换回来的时候，动画加速运动，出现错误，在轮播图之类的页面经常会发生这样的情况。在这里我们需要用到以下三个知识点：document....转载 2019-10-16 11:33:18 · 515 阅读 · 0 评论 -
chrome内存性能测试
chrome内存性能测试切换到comparison选项界面，右边就会有数据对比。看数据，new就是新建的，deleted就是删除的，delta是新建和删除的和，为正就是新建的多，为负就是相反。地位代码...原创 2019-10-15 10:39:18 · 809 阅读 · 0 评论 -
mocha一种JavaScript的单元测试框架
mocha一种JavaScript的单元测试框架Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for fle...原创 2019-01-30 11:06:36 · 207 阅读 · 0 评论 -
墨卡托投影
墨卡托投影墨卡托投影，又称正轴等角圆柱投影，由荷兰地图学家墨卡托(G.Mercator)于1569年创拟。假设地球被套在一个圆柱中，赤道与圆柱相切，然后在地球中心放一盏灯，把球面上的图形投影到圆柱体上，再把圆柱体展开，就形成以一幅墨卡托投影的世界地图。因其等角特性，广泛应用与航空、航海中。有人制作了一个小动画演示变化过程，一个小游戏让你彻底弄懂墨卡托投影...原创 2019-02-15 16:06:25 · 929 阅读 · 0 评论 -
three.js中rollup.js的应用
three.js中rollup.js的应用在开发小插件过程中，当代码量超过三千行的时候，感觉阅读起来就有点吃力了，前后跳转，来回查找，而且一天不写代码，再看就有点晕乎了。所以需要一个可以拆分源码然后合并代码的工具。看了一下three.js，采用的是rollup.js，于是也学一学。目前three.js的代码量已经超过4.7万行了，显然需要分模块开发，然后合并源码。边学习rollup.js边研究...原创 2019-01-16 17:39:58 · 621 阅读 · 0 评论 -
学习rollup.js来打包代码
rollup.jsRollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你...原创 2019-01-15 17:14:26 · 297 阅读 · 0 评论 -
@tweenjs/tween.js-tween.js-TweenJS-TweenMax
tween.js和TweenJS和weenMaxtween.jshttps://github.com/tweenjs/tween.js/TweenJShttps://github.com/CreateJS/TweenJS/tree/master/libhttp://www.createjs.cc/tweenjs/TweenJS是来干啥的。浪费TweenMaxhttps:/...原创 2018-12-29 15:40:24 · 2923 阅读 · 2 评论 -
使用tween.js来制作three.js相机转场动画
使用tween.js来制作three.js相机转场动画关于tween.js在之前的文章中有介绍， three.js补间动画Tween.js和选择物体tween.js在three.js中有很多使用场景，比如粒子动画，相机转场动画，物体运动。这里我们使用tween.js的 chain来制作相机转场动画。tween.chain当你顺序排列不同的补间时，事情会变得有趣，例如在上一个补间结束的时候...原创 2019-01-03 17:53:46 · 5891 阅读 · 4 评论 -
three.js CSS2DRenderer
CSS2DRenderer这是一个2D的render，可以在页面中渲染出一个div标签。下图中的城市名称就是渲染出来的，所以地图旋转的时候文字依然能够保持直立和水平。很实用的一个功能。 let laberDiv = document.createElement('div');//创建div容器 laberDiv.className = 'label'; laberDiv...原创 2018-12-11 19:19:44 · 9924 阅读 · 4 评论 -
30three.js补间动画Tween.js和选择物体
npm 安装tween.js -- npm i tween ,该安装包已经废弃。转到@tweenjs/tween.js --npm i @tweenjs/tween.jshttps://www.npmjs.com/package/@tweenjs/tween.jsimport TWEEN from "@tweenjs/tween.js" 程序中有三个立方体。点击某...原创 2018-06-05 09:22:00 · 2538 阅读 · 0 评论 -
copy-webpack-plugin
copy-webpack-plugincopy-webpack-plugin 一个非常有用的插件。可以把资源文件直接拷贝到指定文件夹。特别是和webpack-dev-server配合使用。在开发过程中进程用到纹理等资源文件。在热更新中使用require方式打包到js文件中才可以预览。直接使用loader的方式不会被webpack解析，所以找不到资源文件。只有在编译之后把文件放到正确的路径下才...原创 2018-12-26 18:54:43 · 1117 阅读 · 0 评论 -
three.js SVGLoader
three.js SVGLoader// instantiate a loadervar loader = new THREE.SVGLoader();// load a SVG resourceloader.load( // resource URL 'data/svgSample.svg', // called when the resource is loaded func...原创 2018-12-07 12:04:59 · 1123 阅读 · 2 评论 -
ES6代码转为ES5代码babel在线转换
ES6代码转为ES5代码babel在线转换es6转es5还是很有用的。有的时间项目不大，不用配置webpack，就是个单页文件，又想用es6语法，写完可以直接转换一下就OK了。快捷方便。https://www.babeljs.cn/repl/https://www.babeljs.cn/...原创 2018-11-28 14:08:07 · 5975 阅读 · 0 评论 -
three.js数学函数向量夹角弧度转角度
three.js数学库three.js中内置了很多数学库，功能丰富，但是很多都没实际用过。现在慢慢整理记录一些常用的函数，加深印象吧。Box2Box3ColorCylindricalEulerFrustumInterpolantLine3MathMatrix3Matrix4PlaneQuaternionRaySphereSphericalTriangleVec...原创 2019-02-21 16:44:13 · 8240 阅读 · 3 评论 -
使用uglifyjs压缩美化JS
uglify-js我用的一个奇怪的组合方式，暂时还没有把他们联系在一起。server 开发代码babel 编译es6语法，uglifyjs 来压缩编译后的代码 &quot;server&quot;: &quot;webpack-dev-server --open&quot;, &quot;babel&quot;: &quot;babel src/mapinit.原创 2019-02-27 18:55:00 · 804 阅读 · 0 评论 -
用一个for循环表示x和y坐标
利用余和除进行操作 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); canvas.width = 800; canvas.height =600; context.fillStyle = "rgba(200,200...原创 2018-05-01 23:35:00 · 1325 阅读 · 0 评论 -
D3.jsV5入门教程
D3.js入门笔记最近一直在开发3D可视化组件，偶尔也开发2D的组件。但是2D我也是用3D的方式开发的，感觉有点浪费。所以打算入手一下D3，毕竟D3还是挺有市场的灵活性非常大，很适合二次开发。d3官网：https://d3js.org/1 安装D3通过npm的方式安装：npm install d3 --save，然后引入d3 import * as D3 from "./D3"...原创 2019-07-31 11:11:39 · 5278 阅读 · 0 评论 -
页面中多次使用TWEEN.update()的坑
页面中多次使用tween.js的坑tween.js就不再介绍了。这次只关心这个update()方法。tween.js中文文档： https://github.com/tweenjs/tween.js/blob/master/README_zh-CN.mdfunction animate() { requestAnimationFrame(animate); TWEEN.upd...原创 2019-07-24 14:00:46 · 2770 阅读 · 4 评论 -
TweenMax.js
TweenMax.jsTweenMax是GreenSock Animation Platform(GSAP)动画平台核心文件，TweenMax中文网提供TweenMax插件下载，以及TweenMax使用方法介绍、Tweenlite使用方法介绍、TimelineMax使用方法介绍、TimelineLite使用方法介绍。此外还有TweenMax收费插件SplitText、Physics2DPlug...原创 2019-05-08 17:53:05 · 856 阅读 · 0 评论 -
angular项目中引入three.js
angular three.js Outline Pass安装three.js把three.js作为全局资源文件，放在html文件的头部 <script src="./assets/js/three.min.js"></script> //在添加下面一行代码，就可以使用全局的THREE了。 declare var THREE: any;npm方式安装...原创 2019-04-08 11:54:15 · 3002 阅读 · 0 评论 -
Lottie动画库
Lottie动画库Lottie是一个用于Android，iOS，Web和Windows的库，用于解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备和网络上呈现它们！http://airbnb.io/lottie/#/READMEhttps://github.com/airbnb/lottie-web...原创 2019-03-27 15:13:38 · 465 阅读 · 0 评论 -
构建光线跟踪器（Raytracer）
构建光线跟踪器（Raytracer）运行结果这个案例很值得研究学习，他是在canvas画布上直接绘制出的三维场景，而且用到了光线追踪。ClassVectorColorCameraSpherePlaneRayTracer源码如下TS版本：class Vector { constructor(public x: number, public y: numb...原创 2019-04-04 13:39:36 · 1033 阅读 · 0 评论 -
02webgl多点绘制
采用JavaScript循环的方式。 使用二维数组的方式定义点的位置。然后通过for循环以此绘制点。var points = [ [0.0,0.0,], [-0.5,-0.5,], [0.5,-0.5,], [0.0,0.5] ];for(var i = 0;i<points.length;i++){ ...原创 2018-03-29 14:38:00 · 445 阅读 · 0 评论 -
01用webgl绘制一个点
绘制一个红色的点，大小20px*20px。首先我们使用canvas实现一下，只要绘制出一个矩形就可以了，主代码只有三行。1、 获取canvas 2d上下文。2、 设置填充颜色红色。3、 绘制矩形，这里使用了绘制矩形的方法。canvas代码： var context = document.getElementById('canvas').getContext('2d'); ...原创 2018-03-27 18:44:00 · 666 阅读 · 0 评论 -
Canvas基础教程（1）-最简单的canvas程序
为了更好的学习canvas知识，你需要了解一些基本的HTML，js等基础知识。本节知识是利用canvas画布在浏览器中绘制一个黑色矩形。只有几行代码，非常的简单。1，在body中添加canvas元素。<canvas id="myCanvas" width="1000" height="800"></canvas>这段代码并不会产生任何效果，它仅仅是创建了一个...原创 2017-08-25 11:18:00 · 382 阅读 · 0 评论 -
世界国家经纬度列表
这个网站不错，可以直接查询国家的经纬度，输入国家、城市、地区的名字就可以，https://www.latlong.net/英文搜素，也支持中文，不过不太友好。比如我搜素日本，结果定位到香港，搜素Japan的时候才是对的。搜素区域、国家一般会定位到区域的中央位置。...原创 2019-02-28 11:29:40 · 31074 阅读 · 5 评论 -
three.js SVG 学习绘制三维地图
SVG 中国地图https://www.js-css.cn/jscode/other/other43/不错的资源，不过每个省份的svg数据太小了，不精确。主要的是个js文件：chinaMapConfig.jsvar shapesvgjiangsu = transformSVGPathExposed(chinaMapConfig.shapes.neimongol);var extrude...原创 2018-11-30 17:42:43 · 8413 阅读 · 12 评论 -
three.js water水
three.js water-水three.js中库中有 js/objects/Water.js 和 js/objects/Water2.js的插件。有几个案例：webgl_shaders_ocean。使用water.js插件制作的海洋，效果不错。插件的使用也非常方便，geometry采用的是plane，设置了纹理，以及光源的位置向量。var waterGeometry =...原创 2018-11-02 13:52:00 · 6731 阅读 · 2 评论 -
three.js创建地球带大气层、辉光、云层、凹凸、高光
文章目录three.js创建地球1、基本场景搭建2、添加地球3、添加轨道控制器4、添加云层5、添加大气层6、添加星空背景7、添加辉光效果8、添加轨道卫星9、TS重构10、打包发布three.js创建地球本教程采用three.js创建一个地球带包含材质贴图，凹凸/高光贴图，以及大气层、辉光、云层、轨道卫星、星空等效果。涉及到的知识点有：three.js基本场景纹理贴图轨道控制器Shad...原创 2018-10-23 14:35:05 · 6846 阅读 · 6 评论 -
5JavaScript设计模式--装饰器模式/代理模式/外观模式
装饰器模式演示代码class Circle{ draw(){ console.log('绘制一个圆形') }}class Decorator{ constructor(circle){ this.circle = circle } draw(){ this.circle.draw() ...原创 2018-08-21 00:10:10 · 590 阅读 · 0 评论 -
一篇关于webpack的有趣文章
博主的文章是2016-12-25 发布的，至今node.je/webpack已经迭代了很多版本，但是依然不妨碍我们学习，可以从博主的文章中了解一下webpack打包发展史。文章链接：https://segmentfault.com/a/1190000007914129文章很长，目录结构如下。有兴趣可以自己去研读一下。写在开头 先说说前端打包方案的黑暗历史 上手先搞一个简单的 S...原创 2018-08-30 22:38:31 · 288 阅读 · 0 评论 -
3JavaScript设计模式--设计模式之设计原则
设计模式五大原则S：单一职责原则 O：开放封闭原则 L：李氏置换原则 I：接口独立原则 D：依赖倒置原则原创 2018-08-20 18:40:43 · 190 阅读 · 0 评论