- 博客(39)
- 收藏
- 关注
RSS订阅原创 GIS基础概念与开发实践
不同GIS软件对空间数据定义和存储结构不同，其所支持的数据存储格式不能直接 相互利用，需经过格式转换才能相互被对方是使用，标准的用处就在于使用不同厂商、不同产品之间可以通过统一的接口进行互操作，OGC标准则是一个比较官方的标准化机构。某一瓦片等级地图的瓦片是由低一级的各瓦片功割成的4个瓦片组成，形成了瓦片金字塔。三维的webgis的地图结构：地形图层、栅格底图图层、矢量图层、三维模型层。瓦片等级越高，组成世界地图的瓦片数越多，可以展示的地图越详细。二维的webgis的地图结构：栅格底图图层、矢量图层。
2023-04-20 17:11:45
464
原创 初识Node
什么是Node？Node.js 是一个 Javascript 运行环境（runtime environment），不是一个 js 文件Node.js 是一个基于 Chrome V8 引擎的 Javascript 运行环境，是用 C++ 写的Node.js 不是库，是一个运行环境，或者说是一个 JS 语言解释器Node使用的模块规范由于node出来的时候ES的标准模块规范还没有出来，node又需要使用模块化开发来规范代码模块，因此CommonJS是node的模块化规范。CommonJS对模块的定
2022-02-13 17:18:51
463
1
原创 TS中三个奇怪的符号：！、?? 、?.
ts断言：有非空断言、类型断言（手动指定一个类型）!非空断言符号忽略null和undefined类型function myFunc(maybeString: string | undefined | null) { const onlyString: string = maybeString; // Error const ignoreUndefinedAndNull: string = maybeString!; // Ok}调用函数时忽略undefined类型type NumGen
2021-09-17 10:35:19
5848
原创 规范TS项目Any类型的使用
背景在使用React的开发项目时，大多数关于ts的类型定义问题，可以在备忘单里面找到；但是当遇到数据类型为数组，对象的时候，为了方便，使用any来进行定义，或者直接用空数据来初始化，当项目变得庞大时，一个组件可能会包括20多个any，使得不容易维护。由于any会完全失去类型判断，其实是比较危险的，使用any就相当于放弃了类型检测，也就基本上放弃了typescript。规范化TS的写法，将更有利用项目更好地维护，提高代码的可读性。使用any较多的场景定义变量时，变量的数据来源于接口，而接口数量多，定
2021-09-17 10:19:13
6025
原创 记录一次h5开发中一个表头、表列、主体内容三者联动的表格布局实现思路与解决ios10.2.1及以下版本不支持scrollTo的问题
问题在h5页面的开发中，遇到这样的个布局：表格的高度要根据屏幕的高度自适应渲染的行数，多出来的就上下滚动，表头前两列固定，右边超出table宽度可以左右滚动，左右滚动时，左边固定列固定，上下滚动时，左边列也跟着上下滚动。由于表格的背景色是透明色，如果布局之间有重叠，就会造成穿插，因为css布局无法满足现在的需求。解决思路分成四分表格去处理，从左到右，从上到下，标号为：1，2，3，4表格2设置：overflow-x：auto表格3设置：overflow-y：auto表格4设置：overflo
2020-09-22 16:09:00
434
原创 Vue项目中css变量不兼容IE的解决办法
继上一篇：https://blog.csdn.net/weixin_43827779/article/details/108491661关于兼容性问题，可以到MDN web docs 上面查找：https://developer.mozilla.org/en-US/docs/Web/CSS/varCSS变量在IE不兼容对于css变量，可知大多数浏览器是兼容的，只有IE不兼容，正好做项目的时候需要兼容IE浏览器，所以这种css变量的方法不可行了因此采用了另一种方式，在接口中获取color变量后，动态插
2020-09-17 10:41:06
2981
原创 vue项目中想把后端传来的color值传到css中的伪类里面去？
对于需要根据变化的动态样式，最简单的方式就是绑定在元素上面绑定syle，形如：<span class="header__title" :style="`color:${scoreStyle.titleColor}`">但是，，，让人迷惑的是，如果要改变active、hover、after这些伪类的样式呢，这就显得尴尬了；解决的方式是：定义css变量，形如：:style="{ '--font-color': dropdownFont }"css中：&:active {
2020-09-09 16:04:44
1335
原创 使用粘性定位实现列固定可左右滑动的table布局
<template> <div class="base-table"> <header class="base-table__title">表格标题</header> <div class="base-table__body list-content"> <table> <tr> <th>固定1</th> <
2020-09-09 15:50:27
1178
原创 vue使用Swiper6.0不支持前后按钮切换？
在使用的时候，我是按着官方文档来的：https://github.com/surmon-china/vue-awesome-swiper遇到的问题：安装的时候是用的命令行是：npm install swiper vue-awesome-swiper --save但是这样装的是swiper6.0的版本，首先对于css文件的这入就与之前的版本不一样了6.0以前的版本是这样引入的：import ‘swiper/css/swiper.css’但是会报错，no_module里面找不到css文件，因些正确的
2020-09-09 15:37:34
484
原创 函数式编程入门
使用函数处理数组比如：处理数组的平均值和标准差let sum = (x,y)=>{ return x+y;}let square = (x)=>{ return x*x;}const data = [1,1,2,5,5];let mean = data.reduce(sum)/data.length;let devistions = data.map((x)=>{ return x-mean });let stddev = Math.sqrt(devistions.m
2020-08-18 14:36:58
214
原创 TypeScript类型系统
类型系统是TS最主要的功能，即给JS添加静态类型检查，要想实现类型检查，首先就要有类型系统。TS可以帮助我们提供代码的扩展性和可维护性。对于两者类型的理解JavaScript 中的类型其实是值的类型。TypeScript 中的类型其实是变量的类型。对于JS而言，一个变量可以是任意类型，而对于TS来说一个变量只能接受和它兼容的类型的值。类型空间和值空间TypeScript 既会对变量存在与否进行检查，也会对变量类型进行兼容检查。因此 TypeScript 就需要定义一系列的类型，以及类型之间的兼容关
2020-08-17 15:20:09
300
原创 看不懂正则表达式有点尴尬的我决定好好学习
正则表达式直接量定义：包含在一对斜杠（/）之间的字符；如：var pattern = /s$/也可以用RegExp对象来表示；直接量字符正则表达式中的所有字母和数字都是按照字面含义进行匹配的，非字母的字符匹配要通过反斜线（\）作为前缀进行转义。字符匹配字母和字符自身\oNUL字符（\u0000）\t制表符（\u000A）\n换行符（\u000A）\v垂直制表符(\u000B)\f换页符（\u000C）\r回车符（\u000C）
2020-08-03 15:47:15
319
原创 ES6：变量的解构赋值
变量的解构赋值的用途有很多其中最常用到的是：提取 JSON 数据、函数参数的默认值、输入模块的指定方法知识点：完全解构和不完成解构：完全解构即一一对应关系，不完全解构即等号左边的模式，只匹配一部分的等号右边的数组let [x, y] = [1, 2, 3];x // 1y // 2let [a, [b], d] = [1, [2, 3], 4];a // 1b // 2d // 4解构成功与解析不成功：如果解构不成功，变量的值就等于undefined。let [bar,
2020-07-03 11:05:43
125
原创 小程序自动化测试+jest
官方链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/demo.html这里面是紧接着上一篇博客文章写的：引入jest框架npm i miniprogram-automator jestnpm i jest -g这样package.json里面就多了两个依赖：关于使用jest要注意的点jest的官网可以知道，还要将下面的配置部分添加到你的 package.json 里面：{ "scripts":
2020-05-17 21:23:04
2201
原创 小程序自动化测试快速开始
官方文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html准备工作下载官方的demo，准备测试：https://github.com/wechat-miniprogram/miniprogram-demo检查node的版本是否大于 8.0开发者工具版本为 1.02.1907232 及以上把项目导入开发者工具，设置基础库版本为 2.7.3 及以上（最新的就好），开启安全设置的服务端口
2020-05-16 20:14:07
997
原创 Vue的diff算法
旧的对象和新的对象之间的差异实现 O(n) 复杂度的关键就是只对比同层的节点，而不是跨层对比，这也是考虑到在实际业务中很少会去跨层的移动 DOM 元素。所以判断差异的算法就分为了两步 :首先从上至下，从左往右遍历对象，也就是树的深度遍历，这一步中会给每个 节点添加索引，便于最后渲染差异一旦节点有子元素，就去判断子元素是否有不同Virtual Dom 算法的实现也就是以下三步通过 ...
2020-04-12 19:15:37
140
原创 Vue的生命周期
生命周期函数就是组件在初始化或者数据更新时会触发的钩子函数。创建前/后在初始化时，会调用以下代码，生命周期就是通过 callHook 调用的Vue.prototype._init = function(options) { initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'be...
2020-04-12 11:14:48
111
原创 三角形、圆、用伪元素画一个按钮
圆形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document...
2020-03-28 19:43:21
255
原创 Vue数据双向绑定原理--数据变化侦测
MVVMMVVM 由以下三个内容组成View：界面Model：数据模型ViewModel：作为桥梁负责沟通 View 和 Model ;在 MVVM 中，UI 是通过数据驱动的，数据一旦改变就会相应的刷新对应的 UI，UI 如果改变，也会改变对应的数据。这种方式就可以在业务处理中只关心数据的流转，而 无需直接和页面打交道。ViewModel 只关心数据和业务的处理，不关...
2020-03-21 22:35:12
505
原创 单例模式、发布-订阅者模式的简单实现
单例模式**保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现单例核心思想用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象，接下来我们用JavaScript来强行实现这个思路，请看代码：let createLoginWindow = function(title) { this.title= title;} let...
2020-03-21 20:55:43
371
原创 事件模型、事件委托（实现一个事件委托）
说一下事件模型JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。原始（Dom0级）事件模型中没有事件流，事件一旦发生将马上进行处理 ;DOM2事件模型:一次事件的发生包含三个过程：(1).事件捕获阶段，(2).事件目标阶段，(3).事件冒泡阶段。IE事件模型: 只有两步，先执行元素的监听函数，然后事件沿着父节点一直冒泡到document（顶层对象）。...
2020-03-16 18:48:14
423
原创 函数防抖和函数节流知识总结
什么是函数防抖？在事件被触发n秒后再执行回调，如果在这n秒内又被触发， 则会重新计算函数延执行时间 。比如：坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待 10 秒，此时如果又有人进来（10秒之内重复触发事件），那么电梯就会再多等待 10 秒。为什么需要函数防抖onresize，scroll，mousemove ,mousehover 等，如果短时间内多次触发，不做限...
2020-03-13 14:43:44
505
原创 Vue中的虚拟dom长什么样的
什么是虚拟dom所谓虚拟DOM，就是用一个JS对象来描述一个DOM节点，像如下示例<div class="a" id="b">我是内容</div>{ tag:'div', // 元素标签 attrs:{ // 属性 class:'a', id:'b' }, text:'我是内容', // 文本内容...
2020-03-10 21:24:01
446
原创 对HTTPS的一些理解
你对HTTPS是怎么理解的？HTTPS是一个应用于应用层的超文本传输协议，它可以理解是HTTP的基础上加入了SSL层，SSL（安全套接字层层）是HTTPS的安全基础。你怎么理解SSLSSL的工作就是对在客户端和服务器端之间来回传递的数据进行加密。好处： 防止数据信息的泄露，保证了双方传递信息的安全性，还能验证他所访问的网站是否是真实可靠。关于SSL证书的一些认识：证书级别： EV（增强...
2020-03-10 14:28:39
174
原创 对跨域问题的理解
什么是同源策略？如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。同源策略是一种安全协议 ，它的协议，域名，端口相同下表给出了相对http://store.company.com/dir/page.html同源检测的示例:URL结果原因http://store.company.com/dir2/other.html成功只有路径不同h...
2020-03-05 12:14:57
168
原创 关于this对象
this对象在运行时基本函数的执行环境来绑定的；在全局函数中，this等于window而当函数被作为某个对象的方法调用时，等于那个对象但是，匿名函数的执行环境具有全局性，因此其this对象通常指向window但有时候，写闭包的方式不同，这一点可能不会那么明显如：var name = "The window";var object = { name:"my object"; get...
2020-03-04 16:34:07
128
原创 var、let 、const
提升： 虽然变量还没有被声明，但是我们却可以使用这个未被声明的变量，这种情况就叫做提升，并且提升的是声明。 注意：其实不仅变量会提升函数也会被提升。let的特点：let声明不是全局变量，具有块级函数作用域，不会发生变量提升let声明的变量不能通过window.变量名进行访问 ，访问会出现：undefined形如for(let x…)的循环是每次迭代都为x创建新的绑定const的特点...
2020-03-03 20:15:34
85
原创 怎么去遍历一个对象 ？
for-in语句今天再读JS高阶，再次认识了for-in语句，for-in语句是一种精准的迭代语句，可以用来枚举对象的属性；面试题：怎么去遍历一个对象 ？上面已经提到了for-in语句了，所以它是和一种方法const obj = { id:1, name:'zhangsan', age:18} for(let ke...
2020-02-28 22:45:48
455
原创 理解、手写call、apply、bind
call、apply、bind都是函数的方法补充关于函数的一点知识：函数是对象 ，因此函数也有属性和方法，每个函数包含两个属性：length,prototype；其中length属性表示希望接收的命名参数的个数。而prototype属性是保存引用类型所有实例方法的真正所在，换句话说，诸如tostring()、valueof()等方法实际上都保存在prototype里面；prototype是无法...
2020-02-28 21:46:39
155
原创 函数对象的属性：callee和caller
callee和caller的区别？重温函数内部属性的知识点的一点小收获。callee和caller是什么呢？看下文！什么是callee?我们都知道，arguments对象 只是与数组类似 ，因为可以使用方括号语法 访问它的每一个元素（argument[0]）,也可以通过访问arguments对象的length属性来获有多少个参数传递给了函数；函数内部 ，有两个特殊对象 ：argument...
2020-02-28 17:30:56
262
原创 从URL出发学习TCP、HTTP等相关知识
在学习下面内容前，先问：在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？DNS 解析TCP 三次握手发送请求，分析 url，设置请求报文(头，主体)服务器返回请求的文件 (html)浏览器渲染解析HTML文件 ->dom 树构建CSS parser --> Style Tree解析 css 代码，生成样式树attachment...
2020-02-25 20:34:49
304
原创 关于CSS比较重要的点
盒子模型IE里面：盒子宽度 = content宽度W3C标准中：盒子宽度 = content宽度 + 两边的border宽度 + 两边的padding宽度在css3中新增了一个border-sizing的属性，可以设置盒子的宽度是由哪种标准决定的：border-box :和w3c的标准一样content-box :和ie的标准一样inherit：继承父亲的BFC（块级格式化上下文）...
2020-02-25 15:27:48
193
原创 Webpack的一些知识以及性能优化
Webpackwepack是什么？vue和wepack是什么关系？vue-cli呢？我觉得要知道他们的关系，才能让脑海里面松散的知识得到整合。vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+webpack的项目模板。Webpack是用来干什么的主要是用来打包、编译的loader用来干嘛的让它处理非js文件，webpack只理解js用过的loa...
2020-02-23 12:07:51
226
原创 从Cookie谈到浏览器缓存
CookieCookie的作用？Cookie是一种客户端的一种数据存储方式；作用：保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果...
2020-02-21 22:38:21
365
原创 原型、原型链、new的实现、关于继承
在此之前，要了解什么是构造函数：function son(name, age, isboy) { this.name = name; this.age = age; this.isboy = true;}// 现在我要开始造儿子了！！！var myson = new son('小明', 50, false)// 现在打印一下我们的myson//{name: ...
2020-02-21 16:58:30
262
原创 深入理解js闭包
深入理解js闭包在面试中遇到两个闭包的题目：let total = 0;let result = [];function foo(a){ let i = 0; for(;i<3;i++){ result[i] = function(){ total += i*a; console.log(total); ...
2020-02-20 23:06:19
116
原创 深入理解 Event Loop事件循环机制
Event Loop事件循环机制事件循环机制（Event Loop）是全面了解javascript代码执行顺序绕不开的一个重要知识点。为什么会有事件循环机制？javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。这是由其最初的用途来决定的：与浏览器交互。 首先等来了解js为什么是单线程的吧！首先要明白线程的概念？进程是资源分配的最小单位，线程是进程的一部分，是cpu调度的基本...
2020-02-20 20:09:06
516
1
原创 更熟悉地操作git
这是我的第一篇博文，我的学习方向是web前端，之前一直有用mardown写笔记，但都没发到博客上，现在决定重新管理起我的博客，记录我的学习。第一部分Git这里只是一些命令的细说，下面有整个开发流程大概要用到的命令总结。Git(1) 创建版本库：$ mkdir document(一个文件名)$ cd learngit$ pwd(2)变成Git可以管理 的仓库$ git init(...
2019-07-18 16:07:02
129
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人