- 博客(111)
- 收藏
- 关注
原创 Vuex 动态模块状态管理器
我们之前的博文已经讲述了Vuex怎么使用命名空间实现模块化状态管理。详情可以看:Vuex命名空间及如何获取根模块、兄弟模块状态管理器_AI3D_WebEngineer的博客-优快云博客。
2023-10-27 17:04:43
374
原创 项目配置vue.config jsconfig babel.config .prettierc .env .eslintrc
在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。npm run dev(serve) :其实是运行了 vue-cli service serve ,默认模式为 development (读取.env.development)。
2023-10-15 14:06:56
1403
原创 Antv/s2 明细表 透视表实现和性能优化(一)
/ 数据源表单// 数据范围// 行维度// 列维度// 指标// 过滤// 图表配置// 背景});不用关心BaseControl有什么,看看几个特有的属性:xDimension: 行维度yDimension: 列维度metrics:指标。
2023-10-08 19:02:36
2448
1
原创 Echarts热力/散点/面积地图和高德amap不得不说的故事
Echarts本身自带地理坐标系组件。并且支持geoJSON和SVG引入第三方资源。 GeoJSON 是一种数据格式。它被用来描述地理数据。GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何(Geometry)、特征(Feature)或者特征集合GeoJSON支持下面几何类型:点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。
2023-10-07 22:20:47
1529
原创 ES6 class类的静态方法static有什么用
在项目中,工具类的封装经常使用静态方法。这里用class并不是让我们去生成AMapHelper实例,就算你生成实例,你也无法调用里面的static方法(静态方法无法被实例调用)。只能通过AMapHelper .getAMap 直接调用。为什么这么写呢?一是无需要实例化即可调用方法,节约了内存空间。二是无法被实例继承,也不会收到实例数据影响。保证了隐秘和私密性。
2023-10-07 13:54:05
674
1
原创 讲讲项目里的仪表盘编辑器(四)分页卡和布局容器组件
规定了组件类的类型、标签、图标、默认布局属性、主文件等等。label = '布局容器';...layout = {w: 30,h: 15,minH: 8,// 组件实现的主文件入口文件会通过一系列逻辑生成【类型枚举类】,我们最后通过control['container'].DashboardComponent找到主体文件生成组件。这些我们简单了解就好啦。具体来看看container.vue文件。
2023-10-04 00:09:23
2068
原创 讲讲项目里的仪表盘编辑器(三)布局组件
看完前面两章的讲解,我们对仪表盘系统有了一个大概的理解。接着我们讲讲更深入的应用。上文讲解的编辑器只是局限于平铺的组件集。而在编辑器中,还会有一种组件是布局容器。它允许其他组件拖拽进入在里面形成自己的一套布局。典型的有分页卡、布局容器等组件。
2023-10-02 21:48:39
1765
原创 讲讲项目里的仪表盘编辑器(二)
先看到这里,这里要生成一份类似于:'amdous123623': {w:10,h:20,x:0,y:0...}这样的映射表,是整个仪表盘布局的储存并不是直接存储类似于girdLayout的这种数组,而是由一个个组件自身的layout属性(甚至无视组件排序)拣选出来生成this.layout。这里是获取设计器边界的位置属性(errorRate为误差范围,你可以理解为设计器有padding),判断拖拽元素是否在设计器边界内,如果是,就往layout里面加入它(重复则不加入),如果已经超出设计器,则移除。
2023-09-28 15:01:11
1086
原创 讲讲项目里的状态存储器vuex
在一个企业级的应用里,状态存储器起着举足轻重的作用。与我们日常的练手项目不同,企业级项目的vuex更专注更集中更便捷。
2023-09-25 14:21:16
205
原创 Vuex命名空间及如何获取根模块、兄弟模块状态管理器
此时这个项目结构就很简单清晰啦 ,我们来看看模块的状态管理器长啥样其实就是和状态管理器一样,有state有mutations ,甚至你喜欢的话,还可以往里面继续嵌套模块module。形成三级、四级、五级等等多层级的模块化状态管理器。
2023-09-25 11:55:03
649
原创 CSS的var()函数用法与JS获取css函数变量值的方法
我们常在项目里见到这种写法。可以看到,根元素这里使用了一个名为styleCSSVariable的CSS集。这里可以根据当前仪表盘的用户设置风格(如“暗黑”、“科技”、“酷炫”)进行css样式管理。可以看到设计器的元素style样式上绑定了一堆颜色定义。这其实就是CSS中的var()函数用法。
2023-09-21 16:29:42
3120
原创 瀑布流布局的实现
瀑布流布局视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部 瀑布流的实现方法决定了它的元素排序,具体请看我这篇推文。
2023-09-18 20:21:02
2056
原创 具体项目下解决Echarts多端同步开发和维护的问题
PC端和移动端需要同时上线图表功能(没有多余工时)之后的版本迭代(功能、样式、配置等)默认双端同步,开发人员只希望维护一套代码Echarts在移动端有部分功能不兼容不支持。
2023-09-18 10:33:47
342
原创 Typescript的declare 关键字
declare 关键字用来告诉编译器,某个类型是存在的,可以在当前文件中使用。它的主要作用,就是让当前文件可以使用其他文件声明的类型。举例来说,自己的脚本使用外部库定义的函数,编译器会因为不知道外部函数的类型定义而报错,这时就可以在自己的脚本里面使用declare关键字,告诉编译器外部函数的类型。这样的话,编译单个脚本就不会因为使用了外部类型而报错。
2023-09-14 13:24:49
978
原创 TypeScript 类
以abstract开头的类是抽象类抽象类和其他类区别不大,只是不能用来创建对象抽象类就是专门用来被继承的类抽象类中可以添加抽象方法abstract sayHello():void //只能这样写 不能有具体实现什么 否则报错注意抽象类的方法是不能有函数体的。抽象方法只能定义在抽象类中,子类必须对抽象方法进行重写。//注意:必须要重写父类,抽象的方法,不然会报错console.log('汪汪汪')
2023-09-11 11:25:00
138
原创 TypeScript联合类型、交叉类型
是指一个变量可以有不同的数据类型,通过 | 符号来表示,它的目的是将多个类型组合成一个类型。这些类型可以是基本类型,也可以是自定义类型。使用联合类型自定义类型函数传参也可以使用联合类型联合类型的优点是在一些情况下可以简化代码,但缺点是会降低代码的可读性和可维护性。当联合类型过多时,代码的复杂度会显著增加。我们可以用来提高代码的可读性。
2023-09-07 11:01:49
125
原创 TypeScript类型守卫
在语句的块级作用域【if语句内或条目运算符表达式内】缩小变量类型的一种类型推断的行为。类型守卫可以帮助我们在块级作用域中获得更为需要的精确变量类型,从而减少不必要的类型断言。!==
2023-09-06 23:52:45
201
原创 [经典面试题]JS的typeof和instanceof区别
typeof会返回一个变量的基本类型,instanceof返回的是一个布尔值typeof是一元运算符 instanceof是对象运算符typeof 更合适判断基本类型,对引用类型、构造函数的实例对象以及null无法判断出准确类型instanceof 用于判断实例对象是否是某一构造函数的实例化对象,从而判处该对象所属的类型。这种方式是通过原型链查找。
2023-09-06 23:38:15
438
原创 typeof 在TypeScript中和JavaScript中的区别
在TypeScript中和JavaScript中都有typeOf,但是作用用法却大有不同。
2023-09-06 21:22:51
495
原创 TypeScript断言
一个编译时语法,用于告诉编译器用户比编译器更加确定变量的类型,进而解除编译错误,类型断言有点类似于其他语言的类型转换,但它没有运行时的影响,只是在编译阶段起作用。所以,即使通过类型断言解除了编译错误,也不会影响运行错误。很难理解?来看个例子在 TS 的开发过程中, TS 会识别我们写的所有的内容, 然后会根据代码去识别你写的内容根据业务场景,我们知道class=box的元素是真实存在的。所以不可能为空。但是TS不知道啊。
2023-09-06 16:14:27
274
原创 TypeScript类型判断
TS允许我们为变量设置类型限制并进行检测判断但是上面的写法太啰嗦了。ts有一个类型推断机制,ts会根据为变量赋的值自动给该变量设置一个类型。在上面的代码中,ts知道age就是一个数,isDead就是一个布尔值,name就是字符串,不需要显式设置变量类型。当声明了一个变量但是没有设置初始值,建议为其设置一个类型如果没有设置类型,那么它的类型会被设置为any,即接受任何值。
2023-09-06 10:46:33
1782
原创 TypeScrip第一课
这两点是废话,至于什么是超集?S1是S2的子集。S2是S1的超集(类似于扩展extend)TS为 JavaScript 的生态增加了类型机制,并最终将代码编译为。本质上向这个语言添加了的面向对象编程。
2023-09-05 11:30:28
132
原创 JS算法之递归
递归函数是指能够直接或间接调用自身的方法或函数。每个递归函数必须有基线条件(即停止点,一个不再递归调用的条件。)否则将无限递归下去。因此有一句编程的名言是:“要理解递归,首先要理解递归”。
2023-07-21 14:36:26
290
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人