- 博客(20)
- 收藏
- 关注
RSS订阅原创 1、openLayers前言
OpenLayers是一个高性能、功能丰富的库，用于在web上创建交互式地图。它可以显示地图瓷砖，矢量数据和标记加载从任何来源在任何网页。Source: 提供图层数据，可以是矢量数据源、瓦片数据源或者图像数据源。Layer: 地图图层，可以是矢量图层、瓦片图层或者图像图层。Control: 地图控制器，如缩放滑块、比例尺等。Interaction: 地图交互，如点击、拖拽等。View: 管理地图视图，包括中心、分辨率和旋转。Map: 最基本的组件，代表整个地图容器。
2024-07-05 12:01:01
277
原创 一、浏览器的事件循环机制
首先浏览器执行任务是单线程，js代码会按照从上到下的顺序去执行js代码，如果不存在异步事件，浏览器遇到耗时的任务会阻碍后面的代码执行，造成浏览器的假死现象。浏览器解决这一问题最好的办法就是事件循环。微任务宏任务。。。待更新。。。...
2022-07-24 18:53:29
245
原创 一次完整的url解析
一切从url地址开始前端的大多数应用程序都是在浏览器上进行的，所以当我们访问一个网站时首先是从url解析开始的。当我们在浏览器的地址栏输入一个url地址或点击一个连接时浏览器就开始了对该条地址的解析，我们知道计算机是通过ip地址来确定是那台电脑的，将ip转化为url也更方便我们记忆。完整的域名解析过程如下:1、在浏览器中输入www.baidu.com域名，操作系统会先检查自己本地的hosts (C:\Windo ws\System32\dri vers\etc)文件是否有这个网址映射关系，
2021-05-04 19:10:53
2467
原创 js-设计模式
单例模式保证一个类只有一个实例，一般先判断实例是否存在，如果存在直接返回，不存在则先创建再返回，这样就可以保证一个类只有一个实例对象。作用:（1）、保证某个类的对象的唯一性； （2）、模块间通信；（3）、防止变量污染class SingleObject { login() { console.log('login...') }}SingleObject.getInstance = (function () { let instance
2021-04-26 23:57:12
109
原创 前端缓存
前言前端缓存主要分为http缓存和浏览器缓存，http缓存是http请求时的缓存，在服务器上进行设置；浏览器缓存主要有前端在前端js上进行设置。一、http缓存1、强缓存当浏览器向服务器发送请求时，服务器会将缓存规则放入http响应报文的http头中和请求结果一起返回给浏览器，强缓存的控制字段分别是expires和Cache-Control ，Cache-Control优先级要比Expires高。expries值为该请求结果的缓存到期时间Cache-Control：主要用于控制网页缓存，主要取值
2021-03-20 23:24:30
660
原创 react-hook
当我们使用react框架时，有状态组件（Class）为我们提供了很多的声明周期，让我们能够处理不同的事件，但在大型项目中使用react时，就会发现，有状态组件冗长且难以复用，而react hooks的出现本质上时把这种面向生命周期编程变为面向业务逻辑编程，不用再去关心生命周期。首先看一个简单的reactclass Info extends React.Component { constructor() { super() this.state = {
2021-03-20 22:13:17
111
原创 前端优化-js篇1
想对前端js方面的优化做一下整理一、加载和执行JavaScript是单线程，所以JavaScript的加载和执行都从上往下执行完一个继续加载执行下一个文件，会阻塞页面的资源，所以我们一般将js文件放在body标签内部的底部。为script标签添加defer属性，defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。如果您的脚本不会改变文档的内容，可将 defer 属性加入到 二、数据存取局部变量是最快的，obj.name比obj.xxx.name访问更快，访问属性的速度，与其在对象中的深
2021-03-11 01:30:26
108
原创 前端优化-CSS篇
我们知道在前端开发中，HTML和CSS代码的可读性和可扩展性是非常重要的，在保证两者的前提下，提高代码的解析速度，能让我们的代码更加的优化。1、css选择器代码优化使用原则(1)避免使用通配符通配符表示在页面加载的时候用来匹配所有的元素，尽量避免使用通配符，加重页面负担。(2)避免使用标签选择器(3)尽量不要在选择器中定义多层级，增加查找负担高效选择css选择器在匹配中历了那些步骤?首先css选择器的匹配原理是从右向左，然后一步步向左匹配到对应元素，左侧的选择器越精准，匹配效率越高代码量优化
2021-03-09 21:49:54
307
原创 react系列 -react-router
一、spa(单页面应用)底层原理1、喵点（hash） window.onhashchange2、h5（history）二、react -router导入react-router-dom里面的三个组件BrowserRoute/HashRouter 路由容器Route 需要该组件定义好路径和显式组建的对应关系Link类似一个a链接，实现声明式跳转import {BrowserRouter as Router,Route,Link} from 'react-router-dom';clas
2021-03-08 20:31:54
166
原创 antd上传图片及表单内容
antd+node.js实现图片上传（图片和表单同提交）1、 前端实现import React from 'react';import { connect } from 'react-redux';import { RightCircleOutlined, UploadOutlined } from '@ant-design/icons';import { Input, Form, Button, Upload } from 'antd';const FormItem = Form.Item;
2021-03-07 20:06:35
2519
4
原创 实现Promise
在编写之前首先要了解一下promise有哪些特性:构造函数有一个函数executor里面包含两个参数（resolve,reject）resolve成功时执行成功的回调reject失败时执行失败的回调三种状态pending（初始状态）fulfilled（操作成功）rejected（操作失败）Promise对象的then方法1 实现Promise方法里面的函数class Promise{ /*构造函数里面的参数*/ constructor(executor){
2021-03-07 19:30:10
154
原创 JS中的this指向
首先，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。一、全局环境中 在全局执行环境中（在任何函数体外部），this都是指向全局对象。在浏览器中，window对象即是全局对象： function a(){ var person="吉埃斯" console.log(this.person)//undefined console.log(this)//Window ...
2020-10-24 11:03:03
160
原创 ES6中的方法-1
ES6 的方法 1、let关键字 * 在块级作用于有效 * 不能重复声明 * 不会预处理，不存在变量提升 2、const关键字 * 不能修改 * 其他等同let 3、变量解构赋值 例： *对象解构 let obj={username:'kobe',age:39} let {username,age}=obj console.log(username) *数组解构 let arr
2020-09-05 22:21:48
186
原创 CSS风车
CSS 风车添加边框后不改变原本设计的大小：Box-sizing:border-box；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ ...
2019-12-14 11:02:39
391
原创 CSS初学的简单样式
CSS导航条<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .nav{...
2019-12-14 10:20:39
161
空空如也
nginx配置问题网站无法访问
2023-08-31
前端pdf展示，在手机浏览模式无法显示
2023-08-17
pdf文件流显示空白
2023-08-01
nginx如何配置访问createWebHistory 模式的路由
2023-08-03
react-router v6配置时类型错误
2022-08-31
TA创建的收藏夹 TA关注的收藏夹
TA关注的人