- 博客(27)
- 收藏
- 关注
原创 grib2数据格式的问题
最近需要获取气象数据,在NOAA上下载了一些grib文件,使用meteoInfo软件打开比如,我下载了距离地面以上2m的相对湿度的数据加载进去是这样的,打开数据是这样的使用软件测量要素属性,和表格中记录的数据不匹配啊,他们的联系是什么?用知道的大佬麻烦告知这些数据表示什么,横轴和竖轴分别表示什么数据,跟经纬度有关系吗?希望大佬能够帮忙解答一下,感激不敬...
2021-12-05 16:49:27
512
1
原创 原生Android应用接入flutter(详细步骤)
原生Android应用接入flutter是混合开发的一种常用方式,但是其中会涉及flutter和一些android配置,还是很容易踩坑的,花了很长时间终于成功了,记录下来步骤一:构建项目Android项目接入flutter需要Android原生目录和flutter module目录,注意将他们放在同一个文件夹下面flutter_hybridflutter_module (flutter module目录文件)MyApp(原生android)flutter_module可以使用命令.
2021-10-12 11:56:54
3066
1
原创 深信服b卷笔试过河问题
题目大概如下输入一组数字,代表要一些零碎的石头,可以通过踩着这些零碎的石头过河,要求前一步距离d,则下一步距离只能是d或者d+1,d-1,返回是否能够过河初始条件零碎石头N,则2<N<1000第一步为0其实的距离d为1举个例子比如有测例输入: 0 1 3 4 6 9 10 13输出: true路径: 0 1 3 6 9 13代码function runToRiver(arr) { if (arr.length < 2 || arr[0] != 0
2021-09-18 21:43:08
270
原创 keep-alive源码分析
keep-alive的源码不到两百行,比较简单,这里做一个简单的源码分析vue/src/component/keep-alive.jskeep-alive允许传入include,exclude,以及max缓存的最大数量props: { include: patternTypes, exclude: patternTypes, max: [String, Number] },在初始化时,定义一个cache对象和一个keys数组created () { this.
2021-09-13 23:07:37
516
原创 图解clientWidth,offsetWidth,scrollWidth
关于clientWidth,offsetWidth,scrollWidth的文章很多,但我一直不太注意他们的区别,这里贴上自己尝试的图和一些文字说明帮助大家比较直观的看到他们的区别clientWidthclientWidth/clientHeight就是一个盒模型的content区域的宽/高以及padding的宽/高相加的值这是一个黑div,给他设置了width:300px;height:200px;控制台打印clientclientTop/clientLeftclient家族的另外两个成员
2021-08-23 23:50:19
324
原创 vue3原理与优化
要深入了解可以自行搜索效率优化静态提升元素节点没有绑定动态内容预字符串化遇到大量连续静态内容,会直接将其编译成为普通的字符串节点缓存事件处理函数Block Tree对比新旧两棵树的时候,静态节点不会进行对比,只对比动态节点PatchFlagvue3知道节点哪些信息会发生变化,仅对比要发生变化的信息响应式数据的变化vue3不再使用Object.defineProperty的方式定义完成数据响应式,而是使用Proxy。除了Proxy本身效率比Objec
2021-08-12 14:32:32
162
原创 vue3快速上手(三)
vue3快速上手三响应式数据获取响应式数据,vue3中响应式数据和vue2有了很大差别,使用Proxy来代理对象,深度代理对象中的所有成员,比原来的Object.definePrototype效率提高了,而且还能够让动态添加删除对象成员响应。vue3中提供了下面一系列的api来获取响应式数据reactivereadonlyrefcomputed其中reactive和readoly返回的是对象代理,而ref和computed返回的是这样格式{value:…}的一个对象const stat
2021-08-12 14:15:44
118
原创 vue3快速上手(二)
vue3快速上手(二)teleportTeleport,vue2中书写的组件结构和实际生成的dom结构成映射关系,vue3中可以使用Teleport改变这种映射关系,指定Teleport中的组件插入到指定的dom中例子在public/index.html中为#app添加一个兄弟节点#app2//APP.vue<h1>这是App中的内容</h1> <Teleport to="app2"> <div style="color:red"&g
2021-08-12 10:47:03
123
原创 vue3快速上手(一)
vue3快速上手本文旨在快速上手vue3的使用,关于原理上的东西可能会涉及的比较少搭建工程vue create 项目名称这里使用的是vue-cli搭建工程,和vue2搭建工程类似,选择vue version为3x就行了。最后等待…得到如下的目录结构使用vue3中删除了vue的构造函数,不再使用new Vue()来创建Vue实例,改换成了CreateApp,有利于treeshakingimport { createApp } from 'vue'import App from './Ap
2021-08-11 23:42:10
188
原创 前端面试手写篇(二)
防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,重新计数function debounce(fn,wait=500){ let timer = null; return function(...args){ if(timer){ clearTimeout(timer) } timer = setTimeout(()=>{ fn.apply(this,args)
2021-08-06 13:52:28
91
原创 前端面试手写篇(一)
instanceof,new,call,apply,bind,ajaxinstanceof实现function myInstanceof(one, two) { let proto = one.__proto__; while (true) { if (proto === null) { return false; } else if (proto === two.prototype) { return tr
2021-08-06 11:01:04
111
原创 Promise套娃
promise最恶心人的问题,嵌套一层又一层promise嵌套问题上面的博文对于promise的嵌套问题有很好的解释了,做一点点补充这里是返回一个new Promise,和return一个普通值的结果有所不同,如果return一个值的话,那么会马上推向fulfiilled状态,将then2马上添加到nexttick里面但是返回new Promise中如果res出来,状态并不会马上改变称为fulfilled打印出来状态是pending,此时状态不会切换状态从pending状态切换到fulfi
2021-08-02 18:10:24
242
原创 uniapp中的下拉刷新失效
下拉刷新失效uniapp中配置下拉刷新非常简单,只需要在pages.json中做如下配置即可"style" : { "enablePullDownRefresh":true, }然后就可以在页面中的通过onPullDownRefresh进行刷新请求但是这个下拉刷新有时候会失效,
2021-07-23 17:18:02
7104
原创 useLayoutEffect报错
useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer’s output format解决方法import React, { useEffect } from "react"React.useLayoutEffect = useEffect;
2021-07-12 18:51:57
1488
1
原创 nextjs和css的结合
nextjs和css结合最近学习nextjs,在css上踩了不少的坑,nextjs对于css的约束相比于平常开发要多一些,另外还和css module结合,很容易出错,下面把nextjs和css结合总结下来。_app.js在全局的_app.js中nextjs和正常开发使用一样,直接import引入就行import '../styles/page/comm.css'import 'antd/dist/antd.css'function MyApp({ Component, pageProps })
2021-07-12 16:54:15
925
原创 nuxt的asyncData的坑(刷新页面报错)
asyncData刚接触asyncData就踩了坑,和大家分享一下。代码如下template> <div> asyncdata页面 {{ info }} </div></template><script>import axios from 'axios'export default { async asyncData () { const data = await axios.get('https:/
2021-06-24 11:28:32
5820
原创 奇怪的display和scroll组合
奇怪的display和scroll组合我在用uniapp中写项目时发现了这样一个奇怪的现象,实现一个简单的左右布局,我为了让他们两个view在同一行,分别添加了属性display:inline-block左侧.concat-left { display: inline-block; width: 220rpx; height: calc(100% - 106rpx); overflow-y: scroll; box-sizing: border-box; borde
2021-06-22 16:43:38
1058
原创 前端要注意的SEO
合理的 TDK(title、description、keywords):搜索对三项的权重逐个减少。title 强调重点即可,重要关键词不要出现超过 2 次,而且要靠前;不同页面的 title 要有所不同;description 把页面内容高度概括,长度适合,不要过分堆砌关键词,不同页面的 description 有所不同;keywords 列举出重要关键词即可;语义化 HTML 代码,符合 W3C 规范:语义化代码让搜索引擎容易理解网页;重要内容 HTML 代码放最前面:搜索引擎抓取 HTML 顺序是.
2021-03-07 11:36:25
95
原创 DNS域名解析
DNSDNS是一个域名系统,它提供了将主机名和域名转换为ip地址的服务,因为网络通讯大部分都是基于TCP/IP,计算机在网络通讯中只能识别IP而不能识别域名DNS解析过程浏览器中输入url地址浏览器查看自身缓存有没有与之对应的缓存,有就返回对应的ip地址,没有进行下一步查看计算机本地的host文件有没有相关的记录,host文件保存了域名和ip地址的映射,没有进行下一步查找LDNS(本地dns解析服务器),一般距离我们比较近。查找gTLD(通用顶级域server),里面保存了每个顶级域下面所有
2021-03-07 11:18:29
275
原创 BFC那些事
BFC什么是bfcbfc全称是block formatting context,翻译过来就是块级格式化上下文,它是W3C CSS2.1规范中的一个概念,是页面中的一块渲染区域,拥有一套自己的渲染规则,能够决定子元素在页面的定位以及和其他元素的相互作用,除了bfc之外,inline formatting context(行级格式化上下文)也非常的常用。怎样产生bfc能够产生bfc的方式很多,下面是几种比较常用的产生bfc的方法1.浮动,只要设置float不为none2.定位元素,position设
2021-02-17 16:01:36
235
1
原创 css-module
Uncaught Error: Module parse failed: Unexpected token (1:0)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.今天在使用css-module的时候在导入css模块文件时报错import style1 from "./css/abc.css";import st
2020-11-24 11:31:09
192
原创 let关键字和const关键字
let和constes6中新引入的关键字,用来变量声明时使用,解决js中var关键字变量声明的问题var关键字变量声明的问题污染全局变量,var关键字声明的的变量可以覆盖window对象身上原本有的属性重复的变量声明变量提升,奇怪的函数作用域上面的问题是var关键字的硬伤,在实际开发中很容易带来问题,因此才有了let和constlet关键字let关键字解决了var关键字声明的问题不会污染window对象身上的属性 let console = 1 window.co
2020-11-10 13:29:20
222
原创 圣杯模式
1 function inherit(son,father){ son.prototype = Object.create(father.prototype); son.prototype.constructor = son; son.prototype.uber = father.prototype; }2var inherit2 = (function () { var temp =
2020-10-25 11:31:32
339
原创 你不得不知道的原型和原型链
原型和原型链是js的重要概念,也是面试中经常出现的高频考点,如果你对原型和原型链不够了解,下面将会让你对它有一个深入的理解1. 首先什么是原型,每个函数都有一个属性叫做prototype,这就是人们常说的原型,一般情况下,prototype是一个Object对象,另外prototype还有一个属性constuctor,它指向构造函数本身。function test(){ } console.log(test.prototype.constructor ==test)//true2
2020-10-25 10:28:45
163
原创 float清除浮动
float清除浮动float是css中布局非常常用的属性,通过设置浮动能够实现一些常见的布局,但是刚接触float属性的人很有可能会遇到一些问题。1. float,可以让元素能够朝着一个方向进行浮动,常用float:right和float:left. .content{ width: 100px; height: 100px; background-color: yellow; float: left; margin-left: 4px;}**2.**
2020-10-24 11:08:19
394
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人