<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[e1172090224的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/e1172090224</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; e1172090224]]></copyright><item><title><![CDATA[研发笔记——vue2项目添加权限管理]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/136662135</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/136662135</guid><author>e1172090224</author><pubDate>Tue, 02 Apr 2024 20:15:46 +0800</pubDate><description><![CDATA[对于整个页面的控制，前端没有专门做限制。而是通过后端在当前页面接口返回无权限错误码，前端拿到错误码后，将页面重定向到一个无权限的落地页。侧边菜单栏是通过router数组遍历出来的，要实现对应角色只能看到相应权限的菜单，就需要在菜单渲染之前进行过滤。后端需要提供一个根据角色查询权限的接口，在main.js文件中调用，根据返回的权限列表对路由进行过滤。后台系统经常需要给用户划分不同的角色，不同角色的操作权限不同，这样可以有效避免人为的误操作。对于页面上的文案、图片、按钮、输入框等元素的权限，如果每一个都用。]]></description><category></category></item><item><title><![CDATA[研发笔记——实现tabel表格表头自定义顺序]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/131272890</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/131272890</guid><author>e1172090224</author><pubDate>Wed, 06 Mar 2024 21:10:58 +0800</pubDate><description><![CDATA[这样就实现了调整表头顺序的功能，但是有个问题，页面刷新之后表格会恢复原始状态，这时候就需要用到localStorage来做存储。但是这样的方案有个缺点，当服务端有数据列的修改时，需要用户手动还原一次。后台管理页面有一个非常大的表格，由于屏幕大小限制，需要滚动查看数据。到这里整个功能就实现了，需求中还有一个复原的按钮，实现方式就是将。不同的管理员关注的数据列不同，希望实现用户自定义表格展示顺序。示例基于vue+ivew实现，其他框架同理。首先简单搭建一下页面结构。]]></description><category></category></item><item><title><![CDATA[浏览器原理学习笔记]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/124951085</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/124951085</guid><author>e1172090224</author><pubDate>Wed, 22 Nov 2023 20:42:21 +0800</pubDate><description><![CDATA[用户在输入URL到页面展示发生了什么


浏览器主进程检测用户输入内容，如果是域名，则会补齐协议。如果是不符合域名格式，则会使用浏览器默认搜索引擎进行搜索。
在用户输入回车，页面跳转之前，还会在当前页面调用一次beforeunload 事件，数据清理、确认离开。
浏览器主进程通过进程间通信 IPC 来将url请求交给网络进程。由网络进程发起请求。

网络进程会查找该请求是否在本地有缓存，如果有则使用缓存，如果没有则准备发送网络请求。（这里缓存指强缓存，如果强缓存过期，会进入协商缓存，仍会发送请求）
请求首先]]></description><category></category></item><item><title><![CDATA[React架构整理]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/125053194</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/125053194</guid><author>e1172090224</author><pubDate>Tue, 14 Jun 2022 19:59:34 +0800</pubDate><description><![CDATA[React 设计理念

React 是用 JavaScript 构建 快速响应 的大型 Web 应用程序的首选方式。

如何实现快速响应，需要解决两个方面的问题：
硬件限制CPU
由于JS是单线程的，脚本执行与页面渲染无法同时进行。当项目庞大，组件繁多时，JS执行就会超过16.6ms（浏览器单帧时长），用户就会感受到卡顿。
为了解决JS执行事件过长的问题，React 采取了时间切片的方式。将长任务拆分成多个片段到每一帧中执行。
网络延迟
网络延迟是前端开发者无法解决的。如何在网络延迟客观存在的情况下，减少用]]></description><category></category></item><item><title><![CDATA[ES6学习记录——上]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/124389279</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/124389279</guid><author>e1172090224</author><pubDate>Wed, 04 May 2022 20:38:53 +0800</pubDate><description><![CDATA[这里写目录标题let与const块级作用域顶层对象的属性解构赋值数组解构赋值对象解构赋值
let与const

let定义变量有作用域

for循环中设置循环变量的部分是一个父作用域，循环体部分是一个子作用域
var a = [];
for (var i = 0; i &lt; 10; i++) {
//如果这里用var来定义i 那么全局就只有这一个i 
  a[i] = function () {
    console.log(i);
  };
}
//循环体外调用console的时候，全局的i已经是1]]></description><category></category></item><item><title><![CDATA[cookie、session、token理解]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/124328737</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/124328737</guid><author>e1172090224</author><pubDate>Thu, 21 Apr 2022 18:40:22 +0800</pubDate><description><![CDATA[Cookie是保存在浏览器上的一些数据，一般通过HTTP响应头set cookie来设置，当然也可以通过JS脚本来直接设置，Cookie是按照网站来进行组织和保存的，每一个网站都可以在浏览器中保存一些Cookie，保存好了之后，浏览器向这个网站发出的请求都会携带这些Cookie，server就可以分析这些Cookie。
session是一个抽象概念，指server端生成的能够将用户请求与后台存储的用户状态信息一一对应的会话机制。每一个session都会生成一个唯一的sessionId，并通过cookie传递]]></description><category></category></item><item><title><![CDATA[redux学习记录]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/121782277</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/121782277</guid><author>e1172090224</author><pubDate>Thu, 09 Dec 2021 22:13:45 +0800</pubDate><description><![CDATA[API：
1. Store
用来保存数据，整个应用只能有一个 Store。通过Redux提供的createStore函数来生成store。
import { createStore } from 'redux';
const store = createStore(reducer);

createStore函数接受另一个函数reducer作为参数，返回新生成的 Store 对象。

......]]></description><category></category></item><item><title><![CDATA[React生命周期]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/119860028</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/119860028</guid><author>e1172090224</author><pubDate>Thu, 26 Aug 2021 00:33:07 +0800</pubDate><description><![CDATA[生命周期函数，也叫做生命周期钩子，是react为我们提供的，可以在一些特定时间点进行操作的API方法
生命周期钩子（旧）

旧版本为react v17.0以前使用的版本。简单介绍一下图中的生命周期钩子。
			//组件将要挂载的钩子
			componentWillMount(){
				console.log('Count---componentWillMount');
			}

			//组件挂载完毕的钩子
			componentDidMount(){
				console.log('Count]]></description><category></category></item><item><title><![CDATA[react使用echarts折线图问题记录]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/119186423</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/119186423</guid><author>e1172090224</author><pubDate>Thu, 29 Jul 2021 14:36:14 +0800</pubDate><description><![CDATA[react项目中使用echarts参考https://blog.youkuaiyun.com/weixin_44003190/article/details/90676785
1.控制台报错：TypeError: Cannot read property ‘init‘ of undefined
解决：导入echarts时使用： import * as echarts from 'echarts'代替import echarts from 'echarts'
2.页面同时会展示多张图表的时候，需要给每个图表容器添加唯一I]]></description><category></category></item><item><title><![CDATA[JS事件整理]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/118096446</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/118096446</guid><author>e1172090224</author><pubDate>Mon, 28 Jun 2021 18:23:19 +0800</pubDate><description><![CDATA[事件是文档或浏览器窗口中发生的特定交互瞬间。JS和HTML之间的交互就是通过事件来实现的。
事件流
用来描从页面中接收事件的顺序。目前有两种事件流，一种是由IE提出的冒泡流，以及由网景提出的捕获流。

事件冒泡：事件开始由最具体的元素（文档中嵌套层次最深的元素），接收，然后逐级向上传播到最不具体的节点（document），就像气泡由水底向上冒一样。
事件


...]]></description><category></category></item><item><title><![CDATA[H5性能优化调研]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/118103790</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/118103790</guid><author>e1172090224</author><pubDate>Mon, 28 Jun 2021 16:35:28 +0800</pubDate><description><![CDATA[首屏打开速度

首屏渲染可以分为三个阶段。

Native 的耗时 ≈ WebWindow 创建 + WebView 初始化


理论上可以优化，但这是一个 Native 要解决的问题


网络的耗时 ≈ DNS + TCP(SSL) + 服务端渲染耗时(如果采用 SSR 的话) + Document 下载


H5资源离线加载，或是webview容器创建之前加载，需要客户端支持。


渲染的耗时 ≈ Ajax(CSR) + JS scripting(CSR 耗时) + 浏览器 Painting(内核)

]]></description><category></category></item><item><title><![CDATA[DOM]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/117200503</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/117200503</guid><author>e1172090224</author><pubDate>Mon, 31 May 2021 10:34:35 +0800</pubDate><description><![CDATA[1.DOM是什么

DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM可以将任何HTML和XML文档描绘成一个层次化的节点树。节点分为不同的类型。

例如这样一段HTML：
&lt;html&gt;

	&lt;head&gt;
	
		&lt;title&gt;文档标题&lt;/title&gt;
	
	&lt;/head&gt;
	
	&lt;body&gt;
	
		&lt;a href=“”&gt;我的链接&lt;/a&gt;
		
		&lt;h1&gt;我的标题&lt;/h1&]]></description><category></category></item><item><title><![CDATA[JS原型链]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/116131409</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/116131409</guid><author>e1172090224</author><pubDate>Thu, 29 Apr 2021 18:11:10 +0800</pubDate><description><![CDATA[1. 构造函数，原型与实例
JavaScript诞生的时候，为了使语言简单易学，没有引入当时流行的面向对象编程中的“类”class，为了实现继承，作者做了一个简化的设计，由于C++和Java使用new命令时，都会调用"类"的构造函数，在Javascript语言中，new命令后面跟的不是类，而是直接写构造函数（constructor）。
function man(){ 
　this.name = name;
}

let man1 = new man('张三');

但是用构造函数生成实例对象有一个缺点，就是]]></description><category></category></item><item><title><![CDATA[前端协议与缓存]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/114372881</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/114372881</guid><author>e1172090224</author><pubDate>Mon, 15 Mar 2021 10:03:45 +0800</pubDate><description><![CDATA[http与https(1.0 1.1 2.0)
TCP与三次握手
UDP
WebSocket
常见状态码与含义
cookie、sessionStorage、localStorage
web Worker
http常用请求头
强缓存与协商缓存
10.网络层面的前端优化


]]></description><category></category></item><item><title><![CDATA[锚点定位手动实现]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/114217207</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/114217207</guid><author>e1172090224</author><pubDate>Sun, 28 Feb 2021 12:38:58 +0800</pubDate><description><![CDATA[问题：项目需要实现点击某个地方锚点到对应的位置，页面由不同组件组成，无法使用&lt;a&gt;&lt;/a&gt;需要手动想办法实现。
//这只是一个例子，你可以把这些div想象成各种各样的组件
//假设我要实现点击按钮定位到第三个li的位置
&lt;body&gt;
  &lt;div class="page"&gt;
    &lt;div class="topbar"&gt;
      &lt;span&gt;这是一个顶部栏&lt;/span&gt;
    &lt;/div&gt;
    &lt]]></description><category></category></item><item><title><![CDATA[node.js基础学习]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/113619271</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/113619271</guid><author>e1172090224</author><pubDate>Sun, 07 Feb 2021 21:24:12 +0800</pubDate><description><![CDATA[什么是node?
简单来说，node是JS的一种运行环境。在此之前，我们都知道JS可以在浏览器中运行，可以为网页添加各种交互，因此，浏览器也是JS的运行环境。随着Chrome浏览器的发布，带来了全新的V8引擎。经过多年的发展和优化，性能和安全性都已经达到了相当的高度。而 Node.js 则进一步将 V8 引擎加工成可以在任何操作系统中运行 JavaScript 的平台。

两个运行环境如图所示，他们都包含了JavaScript语言标准ECMAScript，在浏览器环境还有

浏览器对象模型（Browser ]]></description><category></category></item><item><title><![CDATA[鼠标移入移出事件与父子元素问题]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/109678317</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/109678317</guid><author>e1172090224</author><pubDate>Mon, 16 Nov 2020 11:04:12 +0800</pubDate><description><![CDATA[onmouseover, onmouseout : 父元素和子元素都会触发。
onmouseenter, onmouseleave：子元素不会触发。

实现场景：鼠标移入

]]></description><category></category></item><item><title><![CDATA[react引入百度地图sdk，自定义标签样式问题]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/109641148</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/109641148</guid><author>e1172090224</author><pubDate>Thu, 12 Nov 2020 18:19:43 +0800</pubDate><description><![CDATA[百度地图参考文档
http://lbsyun.baidu.com/index.php?title=jspopular3.0
http://lbsyun.baidu.com/jsdemo.htm#a1_2
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a3b17
react项目展示百度地图
在componentDidMount()中声明，并在render函数中创建地图容器。
componentDidMount(): v]]></description><category></category></item><item><title><![CDATA[开发问题记录]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/107812210</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/107812210</guid><author>e1172090224</author><pubDate>Mon, 19 Oct 2020 23:39:05 +0800</pubDate><description><![CDATA[1.伪元素:after设置的底部横线样式不占用容器高度，导致实际样式比设计稿少1px。




]]></description><category></category></item><item><title><![CDATA[em与rem]]></title><link>https://blog.youkuaiyun.com/e1172090224/article/details/108121261</link><guid>https://blog.youkuaiyun.com/e1172090224/article/details/108121261</guid><author>e1172090224</author><pubDate>Thu, 20 Aug 2020 12:37:31 +0800</pubDate><description><![CDATA[rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em 单位基于使用他们的元素的字体大小。
rem 单位基于 html 元素的字体大小。
em 单位可能受任何继承的父元素字体大小影响
rem 单位可以从浏览器字体设置中继承字体大小。
使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
媒体查询中使用 rem 单位
不要在多列布局中]]></description><category></category></item></channel></rss>