重阳微噪1_社区达人页

2023年07月

• 07.05 23:37:40
  发表了文章 2023-07-05 23:37:40

  JS 进阶 （六） 浏览器事件模型DOM操作（2）

  JS 事件 事件是元素(或者浏览器)天生自带的行为，只要行为处罚，就会触发相关的事件 xxx.onclick = function(){} 属于事件绑定，给这个事件行为绑定方法，行为触发的时候 事件参考文档
• 07.05 23:36:29
  发表了文章 2023-07-05 23:36:29

  JS 进阶 （六） 浏览器事件模型DOM操作（1）

  JS 中的 DOM 操作：盒子模型属性 DOM: document object model 文档对象模型，提供系列的属性和方法，让我们能在 JS 中操作页面中的元素。 获取元素的属性和方法
• 07.05 23:33:45
  发表了文章 2023-07-05 23:33:45

  JS进阶（五）同步异步编程及浏览器的底层渲染机制

  浏览器渲染机制 浏览器底层渲染机制 一个页面从服务器访问，拿到页面源代码之后做的事情是什么？ 生成Dom树（DOM Tree） => 对HTML文件的处理 基于HTML获取的是流文件 (进制编码) 把进制编码编译为具体的字符 按照令牌TOKEN进行解析 (分词/断词) 生成具体的节点 (元素标签/文本节点....) 按照相互的依赖关系生成一个DOM树 (节点树)
• 07.05 23:31:30
  发表了文章 2023-07-05 23:31:30

  JS进阶（四）面向对象

  面向对象 1、对象、类、实例 JS 本身是基于面向对象思想设计出来的一门编程语言，当我们给予JS进行程序设计的时候，也应该按照面向对象的想法去开发或者理解。 对象，一种泛指 类：对象的一部分 实例：某个类中的具体事物
• 07.05 23:29:58
  发表了文章 2023-07-05 23:29:58

  JS进阶（三） 闭包，作用域链，垃圾回收，内存泄露

  闭包，作用域链，垃圾回收，内存泄露 1、函数创建 创建函数 1、开辟一个堆内存(16进制的内存地址) 2、声明当前函数的作用域（再哪个上下文创建的，它的作用域就是谁） 3、把函数体内的代码当作字符串存储在堆内存当中(所以不执行没有意义) 4、把函数的堆内存地址类似对象一样放到栈中供对象调用 执行函数 1、会形成一个全新的私有上下文(目的是供函数中的代码执行)，然后进栈执行 2、在私有上下文中有一个存放私有变量的变量对象 AO（xx） 3、在代码执行之前要做的事情 - 初始化它的作用域链<自己的上下文，函数的作用域> - 初始化this (箭头函数没有this) - 初始化Arguments实参
• 07.05 23:24:02
  发表了文章 2023-07-05 23:24:02

  用 node 实战一下 CSRF

  前言 之前面试经常被问到 CSRF， 跨站请求伪造 大概流程比较简单， 大概就是用户登录了A页面，存下来登录凭证（cookie）， 攻击者有诱导受害者打开了B页面， B页面中正好像A发送了一个跨域请求，并把cookie进行了携带， 欺骗浏览器以为是用户的行为，进而达到执行危险行为的目的，完成攻击 处。
• 07.05 23:21:18
  发表了文章 2023-07-05 23:21:18

  【从原理到实战】彻底搞懂跨域问题 (一)(2)

  3、预检请求的优化 复杂请求会发预检请求， 相当于每个接口会发两次请求， 比较消耗资源， 那么是可以对预检请求进行优化， 可以采用以下两种方式 设置预检请求的缓存时长
• 07.05 23:19:30
  发表了文章 2023-07-05 23:19:30

  【从原理到实战】彻底搞懂跨域问题 (一)(1)

  前言 什么是跨域： 浏览器为了安全性，设置同源策略导致的， 或者说是一种浏览器的限制 同源策略： 是一种约定，WEB 应用只能请求同一个源的资源 什么时候会跨域： 协议名、域名、端口号 不同 本文将从原理， 到最简代码实现， 演示解决跨域的方法和流程，纸上得来终觉浅 绝知此事要躬行， 只有自己手敲实现过， 才能对其原理理解更加深刻。
• 07.05 23:16:26
  发表了文章 2023-07-05 23:16:26

  通过 Lodash 学 TS —— 实现 pick 方法

  一、前言 最近学习TS，被复杂的类型体操搞的比较晕， 经常想学了那么高深的体操后是不是有用武之地，技术的学习应该是要以落地为目的，要不然很快就忘记了， 其实我在业务开发中用ts用的用的比较浅， 想框架源码中那么高深的ts，我暂时还没有用到过， 还没到给框架提merge的水平， 其实用ts最多的还是方法类库，毕竟经常打交道，而且同事很大可能会用你写的方法， 所以学着给方法加TS，是个不错的选择 处。
• 07.05 23:11:50
  发表了文章 2023-07-05 23:11:50

  两个相见恨晚的 Chrome devtool 开发技巧（二）

  前言 上篇文章介绍了 源代码面板中的 workspaces 功能， 可以让我们“面向浏览器编程”， 在浏览器中实时的修改样式和html。 自动热更新到文件中进行修改， 大大简化了我们的开发流程， 今天讲讲 控制台面板 以及 一部分的源代码 面板的内容， 绝对干货满满。
• 07.05 23:06:56
  发表了文章 2023-07-05 23:06:56

  彻底搞定各种数组去重需求

  前言 数组去重是面试时候常考的，我们日常工作中，也经常会遇到， 接下来就归纳总结几种数组去重的方案， 在我们开发和面试的时候可以得心应手， 分类 在实现数组去重之前我们我们简单进行一下分类， 数组去重，我们一般 分为单个数组去重 和多个数组交叉去重， 接下来我们就从单个数组开始
• 07.05 22:54:28
  发表了文章 2023-07-05 22:54:28

  两个相见恨晚的 Chrome devtool 开发技巧（一）(2)

  这时，我们再去元素审查，修改样式代码， 发现样式改了， 浏览器文件系统中的样式代码改了， 编辑器中的样式代码也改了， 我们的需求到现在基本完成了， 但是如果再次修改，我们会发现右下角的文件系统里的样式文件出现了问号，说明现在是socket不通的状态， 并且编辑器中的代码是没有再次进行更改的。 其实这个问题是浏览器本身不支持这样多次更改， 产生 css 缓存后， 就不再进行热更新了， 禁掉缓存后也没有用， 但是我们尝试每次修改后， 强制刷新页面，在进行修改，发现是可以保证每次修改都生效的。
• 07.05 22:26:52
  发表了文章 2023-07-05 22:26:52

  两个相见恨晚的 Chrome devtool 开发技巧（一）(1)

  前言 前段时间给公司分享前端技术， 因为部门中不光是前端，还有后端、数据。 所以选择了分享 浏览器 相关的， 这个不光前端每天在用，研发人员日常也都离不开使用浏览器。 在准备过程中，学习到了两个让我很惊喜的开发技巧，顿感多年前端白干，相见恨晚， 今天先分享浏览器的 workspaces 功能， 完成一个面向浏览器编程， 无限修改浏览器中的样式，即可修改本地代码中样式的功能
• 07.05 20:51:35
  发表了文章 2023-07-05 20:51:35

  纯css实现一个级联连线效果(2)

  于是基本上我们的多层级效果就实现了， 全部代码如下
• 07.05 20:50:01
  发表了文章 2023-07-05 20:50:01

  纯css实现一个级联连线效果(1)

  纯 css 实现一个级联连线效果 1、前言 今天在css学习群里看到一个下图的效果，看到群中讨论如何实现时， 正好之前其实也做过类似的， 就想写个demo在回顾一下
• 07.05 20:46:47
  发表了文章 2023-07-05 20:46:47

  浏览器的调试与开发

  浏览器的调试与开发 💡 前言： 网页主要是运行在浏览器上， 主要由HTML、CSS、JS三部分组成， 比作一个人的话，HTML是身体、CSS是衣服、JS是动作， 下面主要介绍通过浏览器的调试工具，了解前端在开发过程中，是如何通过浏览器的调试工具进行开发与分析解决问题的
• 07.05 20:45:06
  发表了文章 2023-07-05 20:45:06

  canvas项目内复制粘贴及自定义菜单复制粘贴实现

  一、 产品视角下复制粘贴需要解决的问题 复制粘贴时，需要静默复制（剪切板内不会看到复制的具体内容， 同miro） 统一自定义鼠标复制粘贴和键盘复制粘贴内容 实现外部内容也可以粘贴到内部
• 07.05 20:44:06
  发表了文章 2023-07-05 20:44:06

  微信扫码登录

  所需文档 微信公众平台（公众号和小程序管理平台）: 小程序：mp.weixin.qq.com/wxamp/frame… 公众号：mp.weixin.qq.com/cgi-bin/hom… API文档： developers.weixin.qq.com/doc/offiacc… developers.weixin.qq.com/doc/offiacc…
• 07.05 20:42:29
  发表了文章 2023-07-05 20:42:29

  代码统一风格、代码规范和提交规范

  1、安装模块 全局安装 eslint、commitlint 、 check-prettier npm install eslint commitlint check-prettier -g 本地安装 npm install eslint-config-prettier  stylelint  stylelint-config-prettier stylelint-config-standard husky  @commitlint/config-conventional -D VSCode 安装 Eslint和Prettier插件
• 07.05 20:39:49
  发表了文章 2023-07-05 20:39:49

  unstated-next 源码解析

  1、介绍 轻量级的React状态管理工具 2、安装 安装 npm install --save unstated-next 3、API 使用及优化
• 07.05 20:38:30
  发表了文章 2023-07-05 20:38:30

  1、几十行代码实现一个聊天室

  1、前言 Socket.io将数据传输部分独立出来形成engine.io，engine.io对WebSocket和AJAX轮询进行了封装，形成了一套API，屏蔽了细节差异和兼容性问题，实现了跨浏览器/跨设备进行双向数据通信。 WebSocket是一种**双向通信协议，**WebSocket与HTTP协议一样都是基于TCP的
• 07.05 20:36:33
  发表了文章 2023-07-05 20:36:33

  Umi3与Antd-Pro5中后台全栈项目实战（2）

  6、弹窗表单组件 pages/ListTableList/components/HandleForm.d.ts
• 07.05 20:33:36
  发表了文章 2023-07-05 20:33:36

  Umi3与Antd-Pro5中后台全栈项目实战（1）

  0、前言 使用umi3和antd pro5从零实现全栈中后台管理系统
• 07.05 19:51:48
  发表了文章 2023-07-05 19:51:48

  面试官必问——水平垂直居中的11种解决方案

  盒子水平垂直居中的N种方案 1、定位+margin拉回
• 07.05 19:46:48
  发表了文章 2023-07-05 19:46:48

  原生html实现一个mini-react-router

  原生html实现一个mini-react-router 前言 实现一个简单版本的react-router, 揭秘路由的神秘面纱 思考 • 前端路由本质上是什么
• 07.05 19:43:08
  发表了文章 2023-07-05 19:43:08

  从0到1，使用proxy手把手带你实现一个vue框架

  一、写在开头 vue3.0通过proxy对vue进行了重构，那么今天我们就来通过proxy来实现一版自己的vue框架吧 看完该文，您将学到 proxy与Object.defineProperty的区别 通过proxy进行数据劫持的方法 esModule的模块化思想 Map数据类型的使用 通过正则进行匹配渲染视图 实现vue的数据双向绑定 实现vue的v-module 实现vue中的v-bind 实现vue中的v-if 实现vue中的v-on ok ! 打开电脑，跟我一起一步步将他实现出来吧！！！
• 07.05 19:39:51
  发表了文章 2023-07-05 19:39:51

  JS进阶（二）JS底层运行机制之堆栈内存

  1.JS底层运行机制之堆（Heap）栈（Stack）内存 相关理论知识 ECStack(Execution context Stack) 执行环境栈: —— 内存中分出来用于执行js代码的空间 EC(Execution context): —— 执行上下文， 为了区分全局和函数执行所处的不同范围(词法作用域)，又可以分为全局执行上下文EC(G)和函数执行私有上下文EC(FUNC) 作者：重阳微噪 链接：https://juejin.cn/post/6850418109707190285 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
• 07.05 19:38:04
  发表了文章 2023-07-05 19:38:04

  JS进阶（一）数据类型与隐式转换

  1.数据类型分类 （1）基本数据类型【7】 string、 number、null、undefined、 boolean、bigInt、symbol 注意⚠️：
• 07.05 19:36:21
  发表了文章 2023-07-05 19:36:21

  学习React Hooks和TypeScript打造的仿Antd的UI组件库

  ✨ RockUI 学习React Hooks和TypeScript实现仿Antd的react UI组件库，并通过此组件库在create-react-app的基础上实现了一套简单的应用，下方链接 样式解决方案——saas 测试——Jest框架 Icon库基于react-fontawesome github 文档 文档使用storybook进行展示 使用eslint和prettier对代码风格进行约束 使用见README.md,学习及开发中的问题与解决见STUDY_README.md
• 07.05 19:34:15
  发表了文章 2023-07-05 19:34:15

  浏览器（一）---- 宏观视角下的浏览器（2）

  4、从输入URL到页面展示？----导航流程 浏览器进程--主要负责用户交互、子进程管理和文件储存等功能。 网络进程--是面向渲染进程和浏览器进程等提供网络下载功能。 渲染进程--主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里，就是为了保证系统的安全。
• 07.05 19:31:55
  发表了文章 2023-07-05 19:31:55

  浏览器（一）---- 宏观视角下的浏览器

  一、简介 1、浏览器进化路线 第一个是应用程序 Web 化 第二个是 Web 应用移动化 第三个是 Web 操作系统化
• 07.05 19:27:35
  发表了文章 2023-07-05 19:27:35

  TypeScript学习（2）

  常量枚举 只需要在枚举前面加const，会内联枚举，提高计算性能
• 07.05 19:25:17
  发表了文章 2023-07-05 19:25:17

  TypeScript学习（1）

  一、概述 1、什么是Typescript？ 官方网站的定义是: TypeScript 是 JS 类型的超集，TypeScript 是一个js的外壳，需要编译成浏览器可识别的javascript才可以运行。