- 博客(64)
- 收藏
- 关注
RSS订阅转载 react-onclickoutside
react-onclickoutside用户界面设计的一个重要规则是，认真评估尽可能多的用户输入。每个人都应该清楚这一点，但是有时可能很难将这样的东西实现为代码。一个可以想象的例子是用户折叠的菜单。如果你想再次关闭它，90%的用户倾向于简单地点击网站的死区(即那些本身不会产生反应的元素)。在几乎所有的专业网站上，这是完全相同的。要关闭菜单，只需再次单击它的旁边，而不是直接在它上切换。有一个库可以满足这类的操作，它就是response-onclickoutside，它允许我们处理实际元素之外的单击事
2022-03-02 13:46:49
544
原创 浏览器性能优化--由重绘和重排来看虚拟DOM是如何提高浏览器性能的
浏览器解析HTML文件渲染过程首先我们说明一下，浏览器拿到HTML文件，到页面渲染完毕的过程（这一阶段并没有引起重绘和重排：这两个概念接下来说明）。 1.浏览器请求到了HTML文件，开始解析生成DOM树。 2.解析过程中，遇到link外联的CSS文件，向服务器请求CSS文件（此时并未停止解析HTML文件）。 3.当CSS文件返回之后，浏览器开始解析CSS文件（此时HTML解析并没有停止即CSS的解析不会阻塞HTML解析） ...
2021-11-04 20:28:40
715
原创 React路由神坑Warning: You should not use ＜Route component＞ and ＜Route children＞ in the same route；
解决方法：删除Route标签中的空格或者换行。今天学习了react-router。在router.js中写了如下内容发现，页面无法显示，但是编译成功了。import { BrowserRouter as Router,Route} from 'react-router-dom';import React from 'react';import App from './pages/app';import Login from './pages/login'...
2021-10-23 10:29:22
663
原创 浏览器解析HTML，渲染页面的过程
经过HTTP请求之后，浏览器收到了HTML文档 1.浏览器解析HTML文件浏览器从上到下，逐行解析HTML标签 ，解析结束HTML文档之后会形成DOM树 2.浏览器解析CSS文件在解析HTML文档的时候，会遇到link外联的css文件类似： 解析HTML过程： 首先，浏览器得到的是显示字节内容的html文件 浏览器将季节内容转换为字符文件...
2021-10-22 18:51:00
1972
原创 JS中对象的四种继承方式：class继承、原型链继承、构造函数继承、组合继承（构造函数和原型链继承的结合）
前言才发现之前没有对JavaScript中的继承做过总结，不过看得到是不少，接下来就对这几种继承方式做一下总结。class继承 class继承是ES6引入的标准的继承方式。具体的实现方式如下： // class继承 class Animal { constructor(name) { this.name = name } getName() { return this.na...
2021-10-22 18:48:54
1134
原创 React 脚手架安装和使用
1.脚手架使用全局安装脚手架： npm install -g create-react-app //方式1 yarn add -g create-react-app //方式2 然后 create-react-app react-demo 注意问题：在Mac环境下，发现正确安装create-react-app模块后，创建项目的时候，显示如下信息：weijunzedeMacBook-Air:~ weijunze$ create-react-app --versio
2021-10-18 19:31:22
203
原创 HTML元素属性href和src的区别
1.英文原意href的英文原意是：Hypertext ReferenceHypertext：超文本 Reference：引用或参照scr的英文原意是：SourceSource：资源2.常见使用元素使用href属性常见的元素有：link 和 a使用src属性的常见元素有：img、style、script、input、iframe等3.a和img元素的使用 从效果上来看，img中src引用的图片会直接显示在...
2021-10-05 10:55:53
478
原创 JavaScript中的数组方法 sort()排序问题
上一次笔试的时候，使用了sort函数进行排序，发现最后怎么也不能达到百分之百的通过率，后来结束之后调试的时候发现，只有在个位数的时候才会排序成功。，下边来看看sort(),到底是如何运转的，怎样才能达到排序的目的。 运转机制 sort()的比较是根据utf-16这种Unicode编码方式进行的。 这里以数字排序这中最常见的序列为例。 当我们调用这个sort()方法的时候，如下,我们看到的是，虽然持续发生过能改变并未达到我...
2021-09-25 16:59:24
328
转载 CSS单位中的像素px详解，引申出＜meta name=“viewport“ content=“width=device-width,initial-scale=1.0“＞标签的作用
最近总是对css中的像素值px产生疑惑，打算查阅资料和文档解一下惑。像素 我们常说的像素分为物理像素和逻辑像素两种。物理像素 设备的物理像素，对于每台设备而言，他的尺寸是绝对的。 注意这里说的是对于每台设备来讲尺寸是绝对的，不同设备的像素密度不同，即单位面积的像素数量不同，这是由于技术的提升，使得显示器分辨率越来越高。屏幕尺寸不变，但是越来越清晰。即像素值越来越大。DPI（dots per inch）：像素密度，表示水平或垂...
2021-09-25 09:32:45
184
转载 JavaScript中的this关键字的四种绑定方式
为什么使用this 在函数中使用对象名来访问他的属性时，在对象名过长的时候，不易于书写，于是使用this替代。this的四种绑定规则 默认绑定：函数被调用的时候，this默认指向全局window对象。function girl (){ console.log(this);}girl(); // 输出window对象 隐式绑定：隐式绑定，this指向调用函数的对象var girl = { name:"小红", ...
2021-09-23 11:15:39
177
原创 JavaScript函数中let和var使用的注意点
今天在学习函数柯理化的时候发现了一个问题，具体代码如下： function createCurry(func, args) { //length 是函数的参数长度 var argity = func.length; var args = args || []; //为啥这里用let定义会显示 args重复 呢 //返回的是这个函数，此时还未执行此函数，只是建立好了闭包 return function () {
2021-09-22 10:34:41
298
原创 http和https建立连接的过程
http和https建立连接的过程http建立连接的过程在浏览器地址栏输入url之后。 DNS域名解析（域名=>IP地址）: DNS缓存： 浏览器DNS缓存 操作系统DNS缓存 分级查找： 本地域名服务器 根域名服务器 COM顶级域名服务器 Google.com域名服务器 建立TCP连接（三次握手）->为什么两次握手不可以，一定要三次 过程： 客户端 -> 服务端：SYN=1(请求建立连接) 第一次握手：seq=n(序列号) 客户端 &l
2021-09-20 15:53:20
1109
原创 JavaScript中的EventLoop（浏览器环境）
前言最近在看JavaScript的EventLoop机制，理解这个机制，能够提高我们对JavaScript中异步处理和代码运行的认知和理解。 查阅资料发现，JavaScript的eventloop机制在浏览器环境和nodejs环境是不同的，接下来通过不同的例子进行说明。浏览器环境 首先分区：控制台就是我们常用的测试输出的区域，这里用来显示测试输出。 代码段是我们将要执行的代码，并无区分，只是字符串。 执行栈就是当前正在执行的代码区域，...
2021-09-17 09:01:46
259
原创 vue2.0响应式原理的实现（数据改变触发更新事件）
vue响应式原理 vue2.0的响应式原理依靠的es5的Object.defineProperty来实现的 Object.defineProperty传入3个参数，第一个是要监听的，第二个是要监听的属性，第三个是一个对象包含两个函数set和get，分别在获取和改变这个对象的属性时调用。 我们在这里使用这个函数实现以下vue响应式原理（页面更新即触发log输出） <!DOCTYPE html><html lang="en">..
2021-09-16 13:53:28
990
原创 html的script中使用ele.style获取元素样式全为空的原因
script中使用元素.style获取元素的样式的时候，只能获取到内联样式，通过style标签添加的样式无法获取（表现为空值）<style> .container{ background-color : black; }</style><body> <div class="container" style="color:red;"> </div></bod...
2021-09-06 20:34:08
609
原创 RGBA、ARGB和HEX颜色格式转换javascript实现
RGB指的是格式为（255，255，255）的颜色值A指的是透明度，大小在0-1之间RGBA是RGB+A ：（255，255，255，1）ARGB是A+RGB：（1，255，255，255）HEX是#FFFFFFFF格式，分别对应RGBA中的数值。
2021-09-06 18:44:24
3519
原创 margin为负值的对页面布局的影响
margin为负值的效果上结论属性 值 效果 margin-top 负值 元素向上拖拽 margin-left 负值 元素向左拖拽 margin-bottom 负值 元素本身不变，下边元素上移动 margin-right 负值 元素本身不变，右边元素左移 ...
2021-08-23 15:13:34
85
原创 使用CSS 画一个宽高比例16：9或其他的比例的盒子的一种方案
/*css代码 */ .container{ /*这个盒子用来承载16：9盒子 */ border: 1px solid black; margin: 0 auto; height: 300px; width: 500px; } .box{ /*16：9盒子 */ padding-top: 56.25%; /*这里利用了pa.
2021-08-23 14:39:37
2629
原创 JavaScript中 0.1+0.2==0.3 是否正确（附相加的计算过程）
先上结论：0.1+0.2 == 0.3 在JavaScript中是错误的。原因 系统学习过计算机基础理论知识的都应该知道，计算机中的数据是以二进制存储的。相关的，我们想要比较两个数的大小，计算机又是怎样实现的呢，总不可能是直接像人脑一样经过看似简单实则复杂的方式进行对比。计算机的思考方式是非常简单，非0即1（没别的意思 /狗头）。 首先来看Javascript是如何存储小数的JavaScirpt 使用 Number 类型来表示数字（整数或...
2021-08-19 16:08:32
1464
原创 css中弹性盒子模型display:flex；的使用和理解
每次使用或者问到flex总是感觉云里雾里的，这次下定决心一定把flex吃透了。首先flex是针对于HTML标签的，它是一种布局方式。其实说到底它是一种display样式，只不过他对HTML标签的影响效果更大， 更复杂一些，这也从一方面说明他的重要性。...
2021-08-19 13:44:23
4327
2
原创 angular2中proxy的使用（问题解决）[HPM] Error occurred while trying to proxy request 的一种情况
最近在学习angular2框架，感叹angular出现的bug解决起来有点难（bushi），主要是国内使用angular较少，百度不出来，Google的话倒是能给点提示，但是英文看着很不舒服。这段纯属吐槽。接下来是我今天上午遇到的问题和解决方法。之前成功的使用nginx反向代理实现了浏览器跨域访问。但是本地重新启动一个nginx服务来解决跨域问题显然并不是最优解。于是今天尝试使用angular/cli中自带的webpack.proxy.server进行...
2021-08-17 14:58:57
3219
原创 angular2中http请求出现`error: “Collection ‘ug‘ not found“`的解决方法
今天在尝试使用angular的proxy反向代理解决跨域问题的时候，出现了下边这种错误。这种错误并非是proxy代理的报错，是由于在app.module.ts中引入了 `InMemoryDataService`的原因。在尝试使用proxy的时候，使用了一个已经创建好的英雄之旅项目，之前的配置保留了下来。导致记不得曾经安装过InMemoryDataService服务。这里简单说明一下InMemoryDataService服务。这个服务会创建一个拦截服务器，它拦截 AngularHttp和HttpC
2021-08-17 13:19:11
215
原创 浏览器内核及css前缀
CSS3CSS3是CSS（层叠样式表）技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永久支持CSS2。W3C的CSS3规范仍然在开发。但是，许多新的CSS3属性已经在现代浏览器中使用。浏览器内核以及其前缀CSS标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确的情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所以会加厂商前缀加以区分。如果摸个属性已经从草案变成了或接近了推荐方案，并且厂商已经完全实现了推荐属性的功能。那
2021-07-30 17:33:13
305
原创 css盒子阴影和文字阴影
盒子阴影和文字阴影文字阴影盒子阴影彩虹效果实现效果图.rainbow { margin: 50px auto; width: 150px; height: 150px; border-radius: 75px; border: 1px solid red; box-shadow: 0 0 5px 5px red,0 0 5px 10px orange...
2021-07-30 17:31:35
74
原创 正则表达式（限定符、元字符、一些方法）总结
正则表达式限定符（重复次数）限定符 描述 实例 ？ 问号之前的字符出现0次或者1次（?前的字符可有可无） used? 可以匹配 use 和used * 星号之前的字符可以出现0次或者多次 ab*c 可以匹配 abbbc abc ac ,不可以匹配adc + 加号之前的字符可以出现1次或者多次 ab+c 可以匹配 abbbc abc ,不可以匹配ac {} 花括号之前的字符可以出现花括号内的次数（区间） ab{4}c 可以匹配
2021-07-30 17:19:34
653
原创 前端中事件冒泡和事件委托机制
事件冒泡事件冒泡实际上是一个阶段，在这个阶段里的时候，当我们点击一个元素，会先查看这个事件有没有对应的处理函数，没有的话，他就会到他的父级上找有没有处理函数，如果有的话就执行。<body> <ul id="list1"> <li id="p1">click</li> <li id="p2">click</li> <li id="p3">取消</...
2021-07-30 17:06:17
270
原创 数据可视化开发过程总结
使用angular开发数据可视化项目，并适应大屏显示一般大屏项目是要求比例 16：9的我们在页面设计的时候，可以将页面作如下设计，echarts放置我们的大屏项目，这样就可以保证页面比例适中.app_body { position: relative; height: 0; padding-top: 56.28%; //这里padding-top继承的是父级元素也就是屏幕宽度的56.28% 现在本盒子的高度：宽度 = 9：16 width: 100%;...
2021-07-30 16:56:52
1158
原创 nginx解决前端跨域问题
跨域问题的出现浏览器有一个同源安全策略，它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式，所谓的同源就是指协议、域名、端口相同。当浏览器执行一个脚本时会检查是否同源，只有同源的脚本才会执行，如果不同源即为跨域。在开发静态页面时，我们常会调用一些接口，这些接口极可能是跨域，然后浏览器就会报cross-origin错误无法调用。解决方法跨域问题的解决方法有很多种，jsonp、nginx代理等。这次主要使用nginx代理解决跨域问题。举个栗子（假
2021-07-22 10:25:31
2602
1
原创 nginx服务器端使用by宝塔面板
在面板上直接下载nginx。（应用商店里下载，免费的）打开并查看配置项。（在已安装的应用中打开）发现他的默认端口是888（因为网站的80端口已经被使用）。添加location进行代理使用。发现所有的静态资源无法访问（这里就不演示了，因为浏览器缓存，我即使重新配置也可以看到页面-_-）下面是我找到的解决方法，还是对nginx的配置项不了解，导致出现了上边的问题。问题定位在nginx的路由配置上。具体是，出于nginx的路由路径【/】在路由匹配成功之后还会继续往下寻找匹配规则（在上面的配置.
2021-07-22 10:23:51
513
原创 nginx本地使用（for Mac）
下载安装根据网上教程可以成功安装（PS：打算学习nginx的时候发现自己的Mac上已经存在了新版的nginx，神奇）使用打开nginx之后，进入http://localhost:8080 会出现以下内容 注：这里的8080端口是nginx默认配置的 如果本地的8080端口被占用的话，可以进入nginx配置文件进行修改，配置文件的方法在下方。说明安装启动成功。然后打开终端，准备编辑nginx的配置文件：vim /usr/local/etc/nginx/nginx..
2021-07-22 10:20:01
1154
1
原创 angular中的模板引用变量在from表单提交中的使用
我在使用表单进行提交的时候，发现这个小东西，#f="ngForm" 模板引用变量。<form #form="ngForm" (submit)="signin()" class="form-signin"> 重要的其实是#模板引用变量。这个名词我刚看到一脸懵逼。其实理解一下这个就是创建一个对元素的引用。即如果用在HTML中就可以在别处使用对这个页面元素的引用做一些事情。我这个需求是，在表单未填入值的时候不允许点击提交按钮。实现方式是，用#from引用表单元素的"ngForm"（.
2021-07-19 16:32:35
290
原创 angular注入 http依赖并使用
请求后端数据的方式在任何框架中都非常重要。在angular中注入HttpClient可以来请求后端数据。1.在app.module.ts中注入依赖//app.module.tsimport {HttpClientModule} from "@angular/common/http";...imports: [ BrowserModule, AppRoutingModule, HttpClientModule //声明 ],2.在组件中...
2021-07-15 15:51:04
233
原创 angular router 路由的简单实用
angular路由的使用 首先要添加了路由服务文件（在创建项目的时候会询问，如果当时没有创建俺的话需要手动创建） 下边是一个现成的路由文件，可以参考 //app.module.tsimport { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { SignupComponent } from "./components/sign...
2021-07-15 15:46:41
1255
原创 angular中引入echarts
创建angular项目cd 你的文件路径ng new echarts-demo --skip-install //只创建项目并不下载 node_modules（速度快）打开项目引入所需文件我这里用到的是webstorm找到package.json文件将下方代码复制进去"echarts": "^4.9.0","ngx-echarts": "^5.1.2",然后npm安装 node_modules在项目目录下控制台运行npm i这两步就是...
2021-07-15 13:16:15
495
原创 echarts基本入门
echarts实例 一个网页中可以创建多个echarts实例（由dom节点来承载） 每个echarts实例中可以创建多个图表和坐标系等等（用option来描述） 一个DOM节点作为echarts的渲染容器，每个echarts实例独占一个DOM节点 系列（series） 系列指一组数值以及他们映射成的图，在echarts中系列（series）不仅表示数据，也表示数据映射成的图。 一个系列包含的要素至少有：一组数值、图表类型（series.type）、其他关于这些数
2021-07-15 11:38:15
356
原创 angular中引入bootstrap
1.引入bootstrapnpm install bootstrap@3或者直接在package.json 中加入"bootstrap": "^3.3.7",然后在运行npm i2.在angular.json 中添加如下内容"styles": [ "src/styles.scss", "src/assets/fonts/newfont.scss", "node_modu...
2021-07-13 13:35:57
1210
原创 angular安装和使用
angular介绍angular官方介绍Angular 是一个基于 TypeScript 构建的开发平台。它包括： 一个基于组件的框架，用于构建可伸缩的 Web 应用 一组完美集成的库，涵盖各种功能，包括路由、表单管理、客户端-服务器通信等 一套开发工具，可帮助你开发、构建、测试和更新代码 angular应用组件组件包括三个部分：带有 @Component() 装饰器的 TypeScript 类、HTML 模板和样式文件。@Component() 装饰器
2021-07-06 15:57:46
1079
原创 经典css面试题
几道前端经典css面试题1.掌握盒子水平垂直居中的五大方案回答：这种问题在我之前的项目当中经常遇到，最开始我用的方法是display：flex，后来了解到css3之后，定位：三种/* 定位1 需要知道子盒子的宽高*/ body { position: relative; } .box { position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -50p
2021-06-22 21:49:32
62
原创 http协议和websocket的简单使用
http是如何通讯的websocket是什么 和http有什么关系websocket是如何实现通讯的Web通讯技术有哪些HTTP基本概念超文本传输协议，是互联网上应用最广泛的一种网络协议，是用于从www服务器传输超文本到本地浏览器的传送协议http协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求响应的模型。通信请求只能由客户端发起，服务端对请求做出应答处理。这种通信模型有一个弊端：http协议无法实现服务器主动向客户端发起消息。这种单向请求的特点，注定了如果服务器有联系的状态变
2021-06-01 13:30:30
852
1
原创 JavaScript模块化 （CommonJS、AMD、CMD和ES6+）
CommonJS说明：每一个模块都可以当做一个模块在服务端：模块的加载是运行时同步加载的在浏览器端：模块需要提前编译打包处理（浏览器不认识require）基本语法暴露模块module.exports = valueexports.xxx = value问题： 暴露的模块到底是什么引入模块require(xxx)第三方模块：xxx为模块名自定义模块：xxx为模块文件路径服务器样例//module1.js//给暴露对象赋值一个对象module.exports = { un
2021-05-31 10:16:56
159
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人