- 博客(18)
- 收藏
- 关注
原创 qiankun框架初探
qiankun`是基于`single-spa`开发,它主要采用`HTML Entry`模式,直接将子应用打出来 HTML作为入口,通过 fetch html 的方式,解析子应用的html文件,然后获取子应用的静态资源,同时将 HTML document 作为子节点塞到主框架的容器中。创建沙箱环境:在加载子应用的 JavaScript 资源时,import-html-entry 会创建一个沙箱环境(sandbox),用于隔离子应用的全局变量和运行环境,防止子应用之间的冲突和污染。
2023-12-13 19:20:42
142
原创 基于threeJs完成天空图(类似于贝壳看房的功能)
最近基于react,threejs做了一个类似于贝壳看房功能的页面,支持720度全景看房,设置跳转点跳转不同常场景等简单功能。附上代码片段,文末有GitHub地址,可自行下载。刚开始研究,欢迎一起讨论bug。演示视频请看另一个发布。
2022-10-20 14:02:50
1080
原创 chrome(v8)垃圾回收机制
提到垃圾回收机制就不得不提js的数据类型:基本数据类型:有固定大小,值保存在栈内存中。引用数据类型:大小不固定,栈内存中存储的只是堆内存的一个指针,指向堆内存中的对象空间。由于栈内存所存的基本数据类型大小是固定的,所以其内存是操作系统自主分配和释放回收的。但是由于堆内存大小不固定,所以需要js引擎(Chrome的V8)来手动释放这些内存。1、引用法。(引用计数法)判断一个对象的引用数,引用数为0就回收,引用数大于0就不回收,会存在两个对象相互引用从而造成内存泄漏问题。2、分代回收
2022-04-11 16:55:18
952
1
原创 乡镇级别数据可视化,乡镇地图的genJson数据获取(进阶版)
这次综合网上的一些方法找到了获取象征级别genjson数据的方法。比前面一篇更加合理。先上一个效果图。首先需要站在巨人的肩膀上,下载几个依赖。svg2genjson 依靠这个可以将svg转为可使用的genjson。尽量用 yarn 来安装依赖,npm 会有问题(你的node.js版本在11以下或者gulp版本>4就没问题)可以在package.json中加这个代码解决 // 锁定版本"resolutions": { "graceful-fs": "4.2.2"..
2022-01-11 15:19:41
2075
原创 js判断当前网页是否是最大化状态,新打开的网页居中显示
outerHeight / outerWidth 属性设置或返回一个窗口(当前浏览器页面)的外部高度/宽度,包括所有界面元素(如工具栏/滚动条)。screen.availWidth /screen.availHeight显示屏幕的可用宽度/高度(不包括底部任务栏)screen.width /screen.height显示屏幕的可用宽度/高度(包括底部任务栏)所以判断当前浏览器页面是否处于最大化状态只需要满足window.outerHeight === screen.avail...
2021-12-22 10:28:22
872
1
原创 前端webscoket链接(心跳包)
单纯记录一下之前项目做的一个webscoket链接方式。应用场景是订单调到支付页面,之前是轮询查询用户是否支付成功,后来优化成webscoket链接。由于应用的地方不多,所以用的原生webscoket。首先得判断浏览器支不支持webscoket链接方式,不支持的话还是需要用轮询来兜底。if ('WebSocket' in window) { // 用webscoket} else { // 轮询}支持的话先实例化一个Webscoke实例(这是个vue项目,建
2021-12-20 18:02:07
1685
原创 svg渲染失败/svg页面已经占位但是看不见/svg有高度 use高度为0
svg渲染失败/svg页面已经占位但是看不见/svg有高度 use高度为0
2021-12-10 14:37:33
4938
3
原创 乡镇级别的可视化显示
先上图产品要做个这样的图放在大屏中,是精确到街道、乡镇级别的,鼠标经过显示对应街道的数据。大概看了echarts和antv l7提供的,都是精确到县级,再往下就没了。网上找了一遍,没找到现成的乡镇级别的可视化库。有一些解决方案,总结了一个暂时顶替的方案。首先就是在这个 http://datav.aliyun.com/portal/school/atlas/area_selector 网站获取对应县级的geojson数据。这里我用的是浙江台州宁海县为例复制好了数据就可以复制到...
2021-12-06 16:14:01
746
原创 border-image图片边框的使用。
今天看到一个老项目的可视化显示还是以前的边框,略显单调,所以想着使用border-image来做是否更加美观。这是目前的效果。先看看这个css属性怎么设置吧。(分开写的话书写顺序最好和我的保持一直,不然会有意外的收收获)首先就是需要使用的图片边框的来源 border-image-source: url('./bgi.png'); // 用法和background一样定义图片边框裁剪的切割位置//border-image-slice: 60; // 等同于border-image.
2021-11-29 17:25:56
1386
原创 前端自动生成文件头注释/函数注释
函数注释,文件头部注释,koroFileHeader,cannot read property replace of undefined报错
2021-11-25 14:52:09
729
原创 前端导出excel(XLSX)表格的方案
首先需要安装 npm i xlsx file-saver script-loader 这三个插件还需要Export2Excel.js这个文件 ,可以直接复制到项目的src目录下面/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(table) { var out = []; var rows = table.querySelector
2021-11-16 16:22:00
2338
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人