Web技术学苑_社区达人页

2022年11月

• 11.26 18:32:16
  发表了文章 2022-11-26 18:32:16

  写个自己的chrome插件

  有没有好奇chrome[1]插件是用什么做的？像类似掘金插件又是怎么实现的，当我安装稀土掘金插件后，我的导航页都被改掉了，因此你也可以做一个类似的插件，来导航你公司的一些产品，方便快捷的实现你的内部导航

  
• 11.26 18:18:24
  发表了文章 2022-11-26 18:18:24

  css移动端适配最佳实践

  移动端适配，在移动端里经常有遇到，在不同分辨率移动端设备精确还原UI设计稿，这是一个令人抓狂的问题，好在有flex，box布局解决了自适应很大一部分问题。

  
• 11.26 18:10:24
  发表了文章 2022-11-26 18:10:24

  React修仙笔记，筑基初期之更新数据

  在之前的一篇文章中我们有了解到react函数组件和class组件，以及react数据流，状态提升，以及react设计哲学，在我们了解了这些基本的知识后，我们需要了解react内部更深的一些知识

  
• 11.26 17:54:10
  发表了文章 2022-11-26 17:54:10

  数据去重，笔试题系列

  今天分享一道面试手写笔试题，主要考察数据去重问题
• 11.26 17:48:48
  发表了文章 2022-11-26 17:48:48

  数据结构转换，笔试题系列

  今天分享一道面试手写笔试题，主要是考察数据结构处理，以及数据引用问题

  
• 11.26 17:35:35
  发表了文章 2022-11-26 17:35:35

  react修仙笔记，请问仙溪几级了？

  react在企业项目中已经变成了一个必不可少的UI框架，从过去早期有jquery，后面有bootstrap兴起，jquery可以说二次封装的原生js，bootstarp可以快速搭建一个精美网页，现在基本很少用bootstrap和jquery了，基本上vuejs，react，angular三分天下，国内vuejs和react居多，angular很少用

  
• 11.26 17:21:56
  发表了文章 2022-11-26 17:21:56

  rollup打包入门到实践

  rollup在业务中基本很少会有接触到，通常在我们的业务中大部分接触的脚手架，或者自己搭建项目中，我们都是用webpack，无论是vue-cli，还是react-create-app他们都是基于webpack二次封装的脚手架，所以我们对rollup更陌生一点

  
• 11.26 16:33:27
  发表了文章 2022-11-26 16:33:27

  深入浅出数组reduce,看完就会

  reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。,这是官方MDN上给的一段话

  
• 11.26 16:19:42
  发表了文章 2022-11-26 16:19:42

  全文检索与高亮关键词匹配，用replace就够了

  全文关键词检索高亮，这个在业务中常有的功能，比如浏览器默认就有个功能，关键词搜索就会匹配你检索的文字，并且会给你高亮，这是怎么实现的呢？

  
• 11.26 16:08:22
  发表了文章 2022-11-26 16:08:22

  vue如何二次封装一个高频可复用的组件

  在我们的业务里，我们通常会二次封装一些高频业务组件，比如弹框，抽屉，表单等这些业务组件，为什么要二次封装？我们所有人心里的答案肯定是，同样类似的代码太多了，我想复用组件，或者原有组件可能达不到我想要的效果，我想基于原有组件自定义一些自己的接口，那么此时就需要二次封装了。二次封装虽好，但同时也会带来一定的心智负担，因为二次封装的组件可能会变得不那么纯粹。

  
• 11.26 12:09:03
  发表了文章 2022-11-26 12:09:03

  埋点统计优化，首屏加载速度提升

  埋点统计在我们业务里经常有遇到，或者很普遍的，我们自己网站也会加入第三方统计，我们会看到动态加载方式去加载jsdk,也就是你常常看到的insertBefore操作，我们很少考虑到为什么这么做，直接同步加载不行吗？统计代码会影响业务首屏加载吗？同步引入方式，当然会，我的业务代码还没加载，首屏就加载一大段统计的jsdk,在移动端页面打开要求比较高的苛刻条件下，首屏优化，你可以在埋点统计上做些优化，那么页面加载会有一个很大的提升

  
• 11.26 11:50:42
  发表了文章 2022-11-26 11:50:42

  css3的attr函数使用，加载unicode图标

  阿里矢量图标在项目中都用使用，通常一般我们引入css使用iconfont,或者我们使用svg加载图标，亦或我们可以使用Unicode，除了第一种与第二种

  
• 11.26 11:42:17
  发表了文章 2022-11-26 11:42:17

  掌握原生拖拽，类似拖拽需求，一网打尽

  拖拽在业务里经常有遇见，一般都是弹框，然后我们用鼠标点击，鼠标移动，根据鼠标移动，控制弹框的位置，这也是我们业务中的拖拽，但是原生实际上已经支持了拖拽事件，最近业务有接触拖拽，今天一起去回顾总结下原生拖拽，希望看完对项目有所思考和帮助。

  
• 11.26 11:37:39
  发表了文章 2022-11-26 11:37:39

  盘盘项目中你常用到的数组API

  数组在业务中是一个非常高频的API,在业务中基本都有用它，必不可少，本文是笔者一篇关于数组常用API的总结，希望看完在项目中有所帮助。

  
• 11.26 11:29:10
  发表了文章 2022-11-26 11:29:10

  写了个自定义指令，支持elementUI2.0下拉框组件虚拟列表显示

  由于业务对页面性能要求很高，如果下拉框数据很大，一个页面有多个下拉框，那么就导致页面很卡顿。由于elementPlus已经支持了下拉组件虚拟列表，但所在项目仍然使用elementUI2.0，所以需要自己扩展支持下拉组件虚拟列表

  
• 11.26 11:21:33
  发表了文章 2022-11-26 11:21:33

  百度统计失效，referrer背锅了

  前段时间遇到一个问题，就是我的个人网站需要接入第三方百度统计，因为我的文章图片有来自第三方微信后台上传的文章，所以使用<meta name="referrer" content="no-referrer">解决图片访问403的问题,但是此时这个导致我百度统计失效了，于是去查询了一下referrer这个特性。

  
• 11.26 11:10:27
  发表了文章 2022-11-26 11:10:27

  Cloud Studio尝鲜，在线构建vue3应用

  Cloud Studio是一款在线版的VsCode,无需本地安装VsCode，浏览器上在线code,对于不想安装本地vsCode，如果你远程办公，如果你不想背着电脑回家，家里有一台能联网的代码，那么你不用远程控制公司电脑，你只需登录cloud studio就可以在线编码，并实时保存，这是一种趋势，也是一种非常不错的体验,本文是一篇笔者关于Cloud Studio在线编程的入门使用体验。

  
• 11.26 10:59:01
  发表了文章 2022-11-26 10:59:01

  fixed失效，css堆叠上下文问题

  我们直接用具体案例来体会css堆叠上下文，因为官方veurpess-reco1.x版本，当你开启右侧子菜单时，右侧的子菜单fixed就失效了。

  
• 11.26 09:49:56
  发表了文章 2022-11-26 09:49:56

  一文彻底搞懂迭代器与生成器函数

  参考mdn上解释，迭代器是一个对象，每次调用next方法返回一个{done: false, value: ''},每次调用next返回当前值，直至最后一次调用时返回 {value:undefined,done: true}时结束，无论后面调用next方法都只会返回{value: undefined,done:true}

  
• 11.26 09:38:36
  发表了文章 2022-11-26 09:38:36

  面试题分享，修改数据无法更新UI

  面试题分享，修改数据无法更新UI

  
• 11.26 09:27:51
  发表了文章 2022-11-26 09:27:51

  vuepress2.0踩坑记录

  当我们设置一个默认自定义首页，然后开启左侧菜单栏时，此时首页也会出现左侧菜单栏

  
• 11.26 09:15:23
  发表了文章 2022-11-26 09:15:23

  掌握原型链，再炒冷饭系列

  我们知道每一个函数都有一个自身的prototype，每一个对象都有__proto__对象，而这个__proto__我们常称之为隐式原型,正因为它连接起了对象与构造函数的关系。 当我们访问一个对象时，首先会在自身属性上找，当自身属性找不到时，会到对象的隐式链上去找，如果隐式链上还没有，那么会到构造函数的原型上找，当原型上没有时，会到原型的隐式__proto__上去找，当这个属性还找不到时，就直接返回undefined了，因此才形成了一条原型链。

  
• 11.26 09:11:21
  发表了文章 2022-11-26 09:11:21

  迷失中的this指向，看完这篇就会了

  this是一个比较迷惑人的东西，尽管你对this有很多的了解，但是面试题里面考察this指向，总会让你有种猜谜的感觉，知道一些，但是还是会出错，或许你猜对了，但是又好像解释不太清楚。

  
• 11.26 09:01:16
  发表了文章 2022-11-26 09:01:16

  ssh方式已经out了，AccrssToken了解下

  在过往中，我们都是本地配置ssh生成key,然后在github的ssh中粘贴本地生成的key,这种方式其实挺繁琐的，如果我换一台电脑，貌似我又需要重复一遍这样的操作

  
• 11.26 08:51:11
  发表了文章 2022-11-26 08:51:11

  写个git提交脚本，再也不用命令行了

  平时项目中我们绝大部分都是用bash命令行，或者用GUI可视化工具，无论是小乌龟还是gui工具，如果是工具比较推荐sourceTree，但是我更推荐git-fork[1],工具因人而已，无论习惯命令行还是工具，寻得自己喜欢的方式就行，没有好坏之分，也没有高低之分。

  
• 11.26 08:45:05
  发表了文章 2022-11-26 08:45:05

  flex给我实现一个对角线布局

  flex在css布局中的是一个经常考察的知识点，虽然垂直居中问题已经问得快烂大街了，flex你虽然总是在用，但是总会有你不知道的盲点

  
• 11.26 08:34:50
  发表了文章 2022-11-26 08:34:50

  IndexDB实现一个本地数据库的增删查改

  在客户端，我们所接触到的绝大部分本地缓存方案主要有localStorage以及sessionStorage,其实Storage除了这两大高频api,另外还有IndexDB、cookies、WebSQL,Trust Token(信任令牌)，cookies相对来说在前端接触比另外几个多点

  
• 11.26 08:27:02
  发表了文章 2022-11-26 08:27:02

  细说浅拷贝与深拷贝

  js的浅拷贝与深拷贝在业务中时常有用到，关于浅拷贝与深拷贝的剖析文章层出不穷，本文是笔者对于深拷贝与浅拷贝的理解，一起来夯实js语言基础知识的理解吧。

  
• 11.26 08:19:05
  发表了文章 2022-11-26 08:19:05

  写一个自定义loader，看完，就会

  webpack的loader本质上是一个导出的函数，loader runner[1]会调用该函数，在loader函数内部，this的上下文指向是webpack，通常loader内部返回的是一个string或者Buffer。当前loader返回的结果，会传递给下一个执行的loader

  
• 11.26 08:09:35
  发表了文章 2022-11-26 08:09:35

  Module Federation最佳实践

  Module Federation[1]官方称为模块联邦，模块联邦是webpack5支持的一个最新特性，多个独立构建的应用，可以组成一个应用，这些独立的应用不存在依赖关系，可以独立部署，官方称为微前端。

  
• 11.26 07:58:53
  发表了文章 2022-11-26 07:58:53

  介绍几个不太常用的打包分析工具

  webpack官方提供了分析打包的一些工具，我们在开发打包后，我们可以利用webpack给我们提供的一些工具去分析包的大小，从而对打包输出文件进行优化，通常我们都会用webpack-bundle-analyzer这个插件去分析，除了这种，我们看下官方提供的另外几种工具。

  
• 11.26 07:50:50
  发表了文章 2022-11-26 07:50:50

  放弃webpack,拥抱gulp

  gulp定义是：用自动化构建工具增强你的工作流程,是一种基于任务文件流方式,你可以在前端写一些自动化脚本，或者升级历史传统项目，解放你重复打包，压缩，解压之类的操作。

  
• 11.25 23:56:14
  发表了文章 2022-11-25 23:56:14

  webpack5构建一个通用的组件库

  webpack5构建一个通用的组件库

  
• 11.25 23:49:16
  发表了文章 2022-11-25 23:49:16

  如何设计一个缓存函数

  在项目中你有优化过自己写过的代码吗？或者在你的项目中，你有用过哪些技巧优化你的代码，比如常用的函数防抖、节流，或者异步懒加载、惰性加载等。

  
• 11.25 23:43:22
  发表了文章 2022-11-25 23:43:22

  爆肝总结万字长文笔记webpack5打包资源优化

  webpack是如何打包资源优化，你有了解吗？或者一个经常被问的面试题，首屏加载如何优化，其实无非就是从http请求、文件资源、图片加载、路由懒加载、预请求，缓存这些方向来优化，通常在使用脚手架中，成熟的脚手架已经给你做了最大的优化，比如压缩资源，代码的tree shaking等。

  
• 11.25 23:23:20
  发表了文章 2022-11-25 23:23:20

  WDS必知必会

  在webpack中构建本地服务，最重要的一个插件webpack-dev-server,我们俗称WDS,它承担起了在开发环境模块热加载、本地服务、接口代理等非常重要的功能。

  
• 11.25 23:17:26
  发表了文章 2022-11-25 23:17:26

  项目eslint从零到一

  eslint在项目里并不太陌生，通常在使用脚手架时，会默认让你安装执行的eslint,当公司项目比较规范时，常常会配置组内统一的eslint规则，eslint帮助我们在开发阶段检查代码是否符合标准规范，统一了我们组内不同项目代码风格，也可以帮助我们养成良好的代码习惯，统一eslint对于项目的可维护性必不可少，今天我们一起学习一下如果改进你项目的规范。

  
• 11.25 23:03:56
  发表了文章 2022-11-25 23:03:56

  分时函数优化大数据量渲染

  在我们的业务中，我们常常会遇到大数据渲染，很早之前我们考虑到有用到虚拟列表,IntersectionObserver交叉观察器,前端分页查询来优化大数据量渲染

  
• 11.25 22:59:06
  发表了文章 2022-11-25 22:59:06

  揭秘webpack5模块打包

  揭秘webpack5模块打包

  
• 11.25 22:53:32
  发表了文章 2022-11-25 22:53:32

  webpack5资源最佳加载方案

  在前面几篇文章中，我们已经学会基础的运用webpack与webpack-cli从0到1搭建一个简单的react或者vue工程应用，这其中我们使用了加载文件，我们在之前处理文件使用file-loader或者url-loader处理，url-loader主要是可以针对图片文件大小进行有选择的base64压缩，在webpack5中可以用内置的Asset Modules来处理图片资源

  
• 11.25 20:11:20
  发表了文章 2022-11-25 20:11:20

  webpack构建自定义vue应用

  在上一篇中我们利用webpack从0到1搭建了一篇最基本的react应用，而vue在团队项目里也是用得非常之多，我们如何不依赖vue-cli脚手架搭建一个自己的vue工程化项目呢？

  
• 11.25 20:05:23
  发表了文章 2022-11-25 20:05:23

  webpack构建自定义react应用

  在上一篇文章中我们用webpack与webpack-cli搭建了最简单的前端应用，通常在项目中我们会用vue或者react,我们看下如何利用我们自己搭的工程来适配react

  
• 11.25 20:01:34
  发表了文章 2022-11-25 20:01:34

  webpack从0到1构建

  绝大部分生产项目都是基于cli脚手架创建一个比较完善的项目，从早期的webpack配置工程师到后面的无需配置，大大解放了前端工程建设。但是时常会遇到，不依赖成熟的脚手架，从零搭过项目吗，有遇到哪些问题吗？或者有了解loader和plugin吗？如果只是使用脚手架，作为一个深耕业务一线的工具人，什么？还要自己搭？还要写loader,这就过分了。

  
• 11.25 19:41:59
  发表了文章 2022-11-25 19:41:59

  关于栈的理解以及实际应用场景

  栈是一种数据结构，在js中我们知道，基础数据类型是存放在栈内存中的，引用数据类型是存放在栈中的一个地址引用，实际上是存放在堆内存中，今天我们看一道leetcode题目，加深对栈的理解，匹配有效括号，这是栈的应用

  
• 11.25 19:38:04
  发表了文章 2022-11-25 19:38:04

  leetcode-深度优先与广度优先遍历

  深度优先遍历与广度优先遍历，不刷算法题不知道这两个概念，平时业务也有些过这种场景，但是一遇到这两词就感觉高大上了

  
• 11.25 19:32:25
  发表了文章 2022-11-25 19:32:25

  es6你用过哪些惊艳的写法

  es6在项目中用得非常多，浏览器也支持了很多es6写法，通常为了兼容性，我们会用babel将一些比较高级的语法进行转换，比如箭头函数、Promise、对象解构等等，那么我们项目中有哪些你经常用的es6[1]呢？
• 11.25 19:23:53
  发表了文章 2022-11-25 19:23:53

  Vue数据双向绑定实现原理

  在vue中，我们知道它的核心思想是数据驱动视图，表现层我们知道在页面上，当数据发生变化，那么视图层也会发生变化。这种数据变化驱动视图背后依靠的是什么？

  
• 11.25 19:20:04
  发表了文章 2022-11-25 19:20:04

  在业务代码中常用到的Vue数据通信方式

  在vue中数据流是单向的，通常父子组件通信props或者自定义事件，或者还有provide/inject,甚至借助第三方数据流方案vuex,在通常的项目中我们会高频用到哪些通信方案？