- 博客(28)
- 收藏
- 关注
RSS订阅原创 Vue 的虚拟 DOM
虚拟 DOM 并非真正的 DOM，而是一个 JavaScript 对象树，用于描述真实 DOM 的结构和内容。它包含了真实 DOM 节点的所有信息，例如标签名、属性、文本内容等。
2024-10-23 17:33:59
1599
1
原创 vue2.x 的依赖收集通知更新
Vue 的响应式系统是基于设计的。当某些数据（状态）发生变化时，依赖这些数据的视图或计算属性会自动更新。为了实现这一点，Vue 会对数据进行 “劫持”（通过 Object.defineProperty 或 Proxy），并在读取数据时进行，在数据变化时通知所有依赖进行更新。在这个例子中，当组件被挂载时，访问 this.message 会建立一个依赖关系，将组件的 Watcher 与 message 属性关联起来。
2024-10-23 11:38:13
896
原创 vue2.x中的数据劫持
Vue 2.x：Object劫持：主要通过Object.defineProperty()递归定义（或修改）对象属性，用于捕获属性的读写操作。Array劫持：采用了重写数组原型方法和定义length属性的方式，以确保捕获到数组所有可能的变化操作。
2024-10-22 21:46:32
1298
原创 vue数据驱动视图是如何实现的
当Vue实例中的数据（data）发生变化时，与之相关联的视图（template）会自动更新，反映出最新的数据状态。
2024-10-21 11:42:34
765
原创 ts中的 基础类型
TypeScript 就像 JavaScript 的增强版，它在 JavaScript 的基础上添加了类型系统。想象一下，JavaScript 就像一间没有整理的房间，东西到处都是，你很难找到你需要的东西。而 TypeScript 就像给这间房间加上了标签和分类，让一切都井井有条，更容易找到和使用。
2024-10-16 17:44:30
825
原创 ts中的 函数
TypeScript 在 JavaScript 的基础上增加了静态类型支持，使得函数在定义和使用时更加安全和可读。通过为函数的参数、返回值、this 以及函数本身设置类型，开发者可以在编译时捕获潜在的错误，从而提高代码的健壮性。参数和返回值类型注解可选参数和默认参数剩余参数函数重载箭头函数函数类型别名this 的类型注解void 与 never 类型。
2024-10-16 15:34:32
852
原创 ts中的 类
在TypeScript中，类（Class）是用于定义对象的蓝图。它封装了数据和操作这些数据的方法。TypeScript中的类支持面向对象编程的主要特性，如继承、封装和多态。
2024-10-16 11:44:33
1011
原创 ts中的 接口
在 TypeScript 中，接口（interface）用于定义对象的类型。它就像一份契约，规定了对象应该有哪些属性和方法，以及它们的类型。接口本身不包含具体的实现，只是描述对象的形状。
2024-10-15 11:47:54
383
原创 计算订单剩余时间
计算订单剩余时间实现思路以时间戳相减方式实现。将完成订单总的毫秒数减去 现在时间与开始时间的间隔毫秒数，然后转为分钟 /* startTime 开始时间 preTime 任务总时长 */function checkTime(startTime,preTime) { var now = new Date(); var nowTime = now.getTime(); //获取1970年1月1日截止到现在时刻的毫秒数 var start
2022-01-14 15:05:31
944
原创 vue+openlayers图形交互，实现多边形绘制、编辑和保存
知识点：1.绘制多边形，实例化ol.interaction.Draw对象draw_inter = new ol.interaction.Draw({ source: source_draw,//矢量地图源 type: "Polygon",//绘图类型});//将交互绘图对象添加到地图中map.addInteraction(draw_inter)2.图形交互编辑，实例化ol.interaction.Select对象和ol.interaction.Modify对象let select_f.
2021-06-11 10:54:56
4783
1
原创 初学vue笔记----component组件
组件组件注册自定义属性props自定义事件插槽组件注册<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app1"> <!-- 全局注册 --> <button-text ></button-text
2021-05-30 14:07:09
323
原创 vue+openlayers根据坐标点绘制多边形
需求：根据多边形轮廓点及中心点在天地图上绘制形状；不同类型的多边形轮廓以颜色区分功能：1.中心点坐标实现聚合2.根据地图的缩放级别显示或者隐藏多边形3.鼠标移入多边形或者中心点实现高亮并显示弹框，移除恢复原来的效果js代码var map,layer_poly_A,layer_poly_B,layer_poly_C,layer_poi_A,layer_poi_B,layer_poi_Cconst overlapOptions = ['A类', 'B类', 'C类'];var app = new
2021-05-25 11:49:28
4340
3
原创 openlayers设置图层显示隐藏
layer.setVisible(true) //显示图层layer.setVisible(false) //隐藏图层
2021-05-21 10:15:48
3203
5
原创 openlayer6鼠标经过feature时高亮
要点：向地图用添加交互事件，利用openlayers的ol.interaction.Select来实现代码//交互时高亮var select_move=new ol.interaction.Select({ condition:ol.events.condition.pointerMove,//设置监听事件 style:new ol.style.Style({ fill: new ol.style.Fill({ //填充样式 color: 'rgba(255,
2021-05-21 10:12:42
984
原创 openlayers实现多点聚合并移入出现弹窗
需求： 通过地图区域查看农机设备分布的数据思路：以天地图的卫星地图作为底图。openlayers加载地图显示崇左区域轮廓线。轮廓线的数据是geojson格式，以openlayers添加图层的方式加载将坐标点以聚合方式标注在地图上，并携带一些参数（这些参数为设备详情数据）监听坐标点，地图放大时显示详情内容。因为很多设备坐标是重复的，分两种情况显示详情（分情况是为了只看一个村的农机设备数据）。情况一：地图放大后只有一个坐标点，直接显示设备详情情况二：地图放大13级后两个及两个以上重复坐标点，当地
2021-05-14 12:03:59
1495
2
原创 【自学笔记】在天地图中添加多边形及注册面的点击事件
思路准备一些多边形坐标，然后在天地图上利用这些坐标形成面，在面上添加监听事件（比如鼠标移入该面后出现信息框）知识点Polygon类创建多边形覆盖物。构造参数：Polygon(points:Array[,opts:PolygonOptions])points：坐标数组。opts：多边形的属性对象，请参考 PolygonOptions。更多参数请参考天地图文档效果图html部分<body onLoad="mapTDTLoad()"> <div id="typeMap
2020-11-30 17:06:07
2457
2
原创 【自学笔记】在天地图展示多个标注和文字信息
目录相关知识点结果展示js代码相关知识点Marker类表示地图上一个图像标注。其构造函数Marker(lnglat:TLngLat[,opts:MarkerOptions])lnglat：为标注点的坐标，属于TLngLat对象的地理坐标opts：标注的属性，或者说改变默认样式，例如设置标注图标，堆叠顺序，透明度等。//创建一个默认的标注点//创建标注对象，实例化Marker类var marker = new T.Marker(new T.LngLat(116.411794, 39.9068
2020-11-17 15:11:04
5139
5
原创 【自学笔记】天地图的标注上打开窗口并保存信息
1.这一次有个需求：不仅仅是添加标记，顺带添加该点的备注信息并保存。打开窗口效果保存后的效果js相关代码$(function() { //标注按钮(新建)做得事情 $(".tagbox #markbtn1").click(function () { markerTool.open(); endeditMarker(); //完成标注时 markerTool.addEventListener("mouseup",function(e){ editInfo(e)} )
2020-11-04 10:06:46
1518
2
原创 【自学笔记】天地图添加标注
知识点MarkTool类：标注工具，用来让用户在地图上标注一个点，可以通过该工具获得用户标点的经纬度位置。构造函数：MarkTool(map:Map[,opts:MarkToolOptions])。参数说明：map为地图对象；opts：MarkToolOptions类。该类详情可到天地图文档了解效果图html<body onLoad="mapLoad()"> <div id="tabMapBox"> <div class="tool"&g
2020-11-02 16:17:30
7175
8
原创 【自学笔记】openlayers加载天地图笔记二
openlayers是开源地图包，它支持加载天地图。html<body> <div id="tabMap"> </div></body>css*{ padding: 0; margin: 0; box-sizing: border-box;}body, html{ width: 100%; height: 100%; font-family:"微软雅黑";}#tabMap{ width:100%; heigh
2020-10-19 10:22:30
654
原创 【自学笔记】天地图笔记一
html部分<--onLoad=页面加载时加载地图--><body onLoad="mapLoad()"> <div id="tabMap"> </div></body>css部分*{ padding: 0; margin: 0; box-sizing: border-box;}body, html{ width: 100%; height: 100%; font-family:"微软雅黑";}#ta
2020-10-16 16:51:31
654
2
原创 【自学笔记】05 JavaScript
Date类型Date()和new Date()区别Date对象的获取方法Date对象的设置方法Date对象间的运算Date()和new Date()区别两者不带参数时返回当前时间两者区别如下，一个是string类型，一个是object类型var date1 = Date();console.log(typeof date1);//String类型var date2 = new Da...
2020-04-13 23:31:27
130
原创 【自学笔记】04 css
css常用选择器标签选择器使用元素名称作为选择器，比如body、p、div、span等。id选择器class选择器后代选择器伪类选择器最近在自学前端知识。好记性不如烂笔头，打算把博客作为学习工具，顺便记录成长点滴。我是一名技术小白，我会一直努力学习，若文章有不对的地方，欢迎大家指正，我的邮箱：xiaoheizhu3306@163.com...
2020-04-11 22:18:03
112
原创 【自学笔记】03 CSS
块级标签结构的搭建css样式样式的优先级css语法标签分类注释css样式内部样式表使用style标记创建样式时，最好写在<head></head><style type="test/css">/*css语句*/</style>外部样式表<link></link>标签导入外部样式表<link r...
2020-04-10 20:43:39
155
原创 【自学笔记】02 THML
目录HTML5基本结构HTML5新特性文件命名规则HTML基本语法基本标签HTML5基本结构<!DOCTYPE html> 声明html5文档类型<meta charset="UTF-8"> charset指定utf8的编码方式，不定义会出现中文乱码<html>…</html> 标签标记着html文档的开始和结束<head>…&...
2020-04-09 20:29:57
231
原创 【自学笔记】01 JavaScript
【自学笔记】01 JavaScript##编辑器Hbuilder。在Hbuilder编辑完之后要保存在运行。##JavaScriptjs是轻量级的脚本语言。两种方法引入js。第一个：<script></script>标签放<head>中或者放页面底部第二种：外部文件引入，<script src="myfile.js"defer=true>...
2020-04-08 20:50:15
240
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人