徐小夕_社区达人页

2022年05月

• 05.02 22:37:56
  发表了文章 2022-05-02 22:37:56

  15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

  设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的合理重构.作为一名合格的前端工程师,学习设计模式是对自己工作经验的另一种方式的总结和反思,也是开发高质量,高可维护性,可扩展性代码的重要手段. 我们所熟知的金典的几大框架,比如jquery, react, vue内部也大量应用了设计模式, 比如观察者模式, 代理模式, 单例模式等.所以作为一个架构师,设计模式是必须掌握的. 在中高级前端工程师的面试的过程中,面试官也会适当考察求职者对设计模式的了解,所以笔者结合多年的工作经验和学习探索,

  
• 05.02 22:29:39
  发表了文章 2022-05-02 22:29:39

  基于jsoneditor二次封装一个可实时预览的json编辑器组件(react版)

  做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也带来了项目开发的灵活性和可维护,方便多人开发协作.接下来文章将介绍如何使用react,开发一个自定义json编辑器组件.我们这里使用了jsoneditor这个第三方库,官方地址:jsoneditor通过实现一个json在线编辑器,来学习如何一步步封装自己的组件(不限于react,vue,原理类似).

  
• 05.02 22:24:16
  发表了文章 2022-05-02 22:24:16

  2019年,盘点一些我出过的前端面试题以及对求职者的建议

  笔者虽然曾经也面试过很多求职者,但是对于前端的笔试和面试,我觉得并不能体现一个人的真实能力,所以建议大家多修炼前端真正的技术.对于前端面试题,之前也承诺过读者要出一篇,笔者大致总结一下曾今面试的题目.后续不会再出面试题,而是聚焦于一些真正的,有利于成长性的技术文章和思维方式,来帮助大家提高解决问题的能力.

  
• 05.02 22:06:25
  发表了文章 2022-05-02 22:06:25

  用60行代码实现一个高性能的圣诞抽抽乐H5小游戏(含源码)

  今天圣诞节,先预祝大家节日快乐.既然是圣诞节,那我们就来学点有意思的,用几十行代码来实现一个高性能的抽奖小游戏.也基于此,来巩固我们的javascript基础,以及前端一些基本算法的应用.

  
• 05.02 21:59:37
  发表了文章 2022-05-02 21:59:37

  《前端实战总结》之使用解释器模式实现获取元素Xpath路径的算法

  前端领域里基于javascript的设计模式和算法有很多，在很多复杂应用中也扮演着很重要的角色，接下来就介绍一下javascript设计模式中的解释器模式，并用它来实现一个获取元素Xpath路径的算法。

  
• 05.02 21:56:10
  发表了文章 2022-05-02 21:56:10

  《前端实战总结》之迭代器模式的N+1种应用场景

  眼看12月就来了，抓住今年的尾巴，好好总结一下前端的不足与收获。这篇文章是笔者写设计模式专题的第二篇文章，也是基于工作中的总结和提炼，在实际应用场景中都会大量使用，至于为什么要写设计模式，主要是为了提高团队代码质量和可维护性，后续会继续推出设计模式相关的文章，供大家参考和学习。

  
• 05.02 21:44:08
  发表了文章 2022-05-02 21:44:08

  《前端实战总结》之使用CSS3实现酷炫的3D旋转透视

  3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优秀，css3 3D动画必不可少。

  
• 05.02 21:38:46
  发表了文章 2022-05-02 21:38:46

  《前端实战总结》之设计模式的应用——备忘录模式

  备忘录模式简单的说就是在不破坏已有逻辑的前提下，将日后需要获取的数据在第一次保存下来以免造成重复且低效的操作。该设计模式最主要的任务就是对现有数据或者状态做缓存，为将来某个时刻使用或者恢复做准备。

  
• 05.02 21:37:15
  发表了文章 2022-05-02 21:37:15

  《前端实战总结》之使用postMessage实现可插拔的跨域聊天机器人

  由于笔者之前的项目中接触过聊天机器人的项目，主要实现机器人客服模块，以及支持跨多平台使用的目的，所以特地总结一下，希望有所收获。

  
• 05.02 21:33:13
  发表了文章 2022-05-02 21:33:13

  《前端实战总结》之变量提升，函数声明提升及变量作用域详解

  之所以会写这篇文章，主要源于笔者在重构老项目的时候发现了一个bug，导致某个插件不生效了，在review加search code加断点调试之后，发现了原因：一个同名的变量将插件方法给覆盖了，ohmyGad。
• 05.02 21:29:32
  发表了文章 2022-05-02 21:29:32

  《前端实战总结》如何在不刷新页面的情况下改变URL

  由于公司最近有个需求是想让我们的get请求的参数都直接显示在浏览器url上，这样我们就可以直接通过复制url来显示对应的界面数据了。

  
• 05.02 21:27:34
  发表了文章 2022-05-02 21:27:34

  基于create-react-app打包编译自己的第三方UI组件库并发布到npm

  这篇文章主要是总结一下我们在工作中如何为公司开发内部的第三方UI组件，并通过npm install的方式安装的一些步骤和思路。在学习完这套发布方法后大家也可以快速的发布自己的UI库到npm，供他人使用，就比如elementUI或者Ant Design。

  
• 05.02 21:23:46
  发表了文章 2022-05-02 21:23:46

  前端组件/库打包利器rollup使用与配置实战

  目前主流的前端框架vue和react都采用rollup来打包，为了探索rollup的奥妙，接下来就让我们一步步来探索，并基于rollup搭建一个库打包脚手架，来发布自己的库和组件。

  
• 05.01 11:36:12
  发表了文章 2022-05-01 11:36:12

  《css大法》之使用伪元素实现超实用的图标库（附源码）

  今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力，做出一些脑洞大开的图形。

  
• 05.01 11:30:49
  发表了文章 2022-05-01 11:30:49

  快速掌握es6+新特性及es6核心语法盘点

  接下来我会总结一些工作中常用也比较核心的es6+的语法知识，后面又要慢慢开始工作之旅了，希望在总结自己经验的过程中大家会有所收获～

  
• 05.01 11:09:53
  发表了文章 2022-05-01 11:09:53

  web性能优化的15条实用技巧

  javascript在浏览器中运行的性能，可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂，事实上，多数浏览器使用单一进程来处理用户界面和js脚本执行，所以同一时刻只能做一件事。js执行过程耗时越久，浏览器等待响应的时间越长。
• 05.01 10:57:59
  发表了文章 2022-05-01 10:57:59

  CMS全栈项目之Vue和React篇（下）（含源码）

  今天给大家介绍的主要是我们全栈CMS系统的未讲解完的后台部分和前台部分，如果对项目背景和技术栈不太了解，可以查看我之前的文章

  

2022年04月

• 04.30 17:19:37
  发表了文章 2022-04-30 17:19:37

  基于nodeJS从0到1实现一个CMS全栈项目（中）（含源码）

  今天给大家介绍的主要是我们全栈CMS系统的后台部分，由于后台部分涉及的点比较多，我会拆解成几部分来讲解，如果对项目背景和技术栈不太了解，可以查看我的上一篇文章

  
• 04.30 17:10:03
  发表了文章 2022-04-30 17:10:03

  《javascript高级程序设计》核心知识总结

  此文是对js高级程序设计一书难点的总结，也是笔者在看了3遍之后的一些梳理和感想，希望能借此巩固js的基础和对一些核心概念有更深入的了解。
• 04.30 16:11:53
  发表了文章 2022-04-30 16:11:53

  基于nodeJS从0到1实现一个CMS全栈项目（上）

  作为一名前端开发工程师，我们平时除了对javascript，css，html的积累之外，还需要对http，浏览器渲染原理甚至后端的一些知识有所了解，这样对自己职业发展才会更有帮助。

  
• 04.30 16:09:09
  发表了文章 2022-04-30 16:09:09

  前端开发中79条不可忽视的知识点汇总

  超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。 HTTP 的工作方式是客户机与服务器之间的请求-应答协议。 web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

  
• 04.30 15:52:22
  发表了文章 2022-04-30 15:52:22

  css3实战汇总（附源码）

  本文是继上一篇文章用css3实现惊艳面试官的背景即背景动画（高级附源码）的续篇也是本人最后一篇介绍css3技巧的文章，因为css这块知识难点不是很多，更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结，另一方面也是希望能教大家一些实用的技巧和高效开发css的方式，以提高在工作中的效率。

  
• 04.30 15:47:30
  发表了文章 2022-04-30 15:47:30

  用css3实现惊艳面试官的背景即背景动画（高级附源码）

  我们传统的前端更多的是用javascript实现各种复杂动画，自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。这篇文章参考《css揭秘》这本书，并作出了自己的总结，希望能让大家更有收获，也强烈推荐大家看看这本书，你值得拥有。

  
• 04.30 15:40:56
  发表了文章 2022-04-30 15:40:56

  记一次老项目中的跨页面通信问题和前端实现文件下载功能

  由于笔者之前维护了几个比较老的项目是用jquery全家桶开发的，其中有些需求是需要跨页面交互和父子页面通信，故借此总结一下。另一块是前端实现文件下载功能，虽然方法很多，为了不用重复造轮子，在此还是总结一波，毕竟多页面下的应用场景还是很多的。

  
• 04.30 15:37:17
  发表了文章 2022-04-30 15:37:17

  如何优雅的使用javascript递归画一棵结构树

  简单的说，递归就是函数自己调用自己，它做为一种算法在程序设计语言中广泛应用。其核心思想是把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解。一般来说，递归需要有边界条件、递归前进阶段和递归返回阶段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回。

  
• 04.30 15:32:44
  发表了文章 2022-04-30 15:32:44

  5分钟教你用nodeJS手写一个mock数据服务器

  对于前端开发者而言，javascript正扮演着越来越重要的地位，它不仅能为浏览器端赋能，在web服务器方面也有很大的价值（我们可以用nodeJS来写服务端代码，启动web服务器），因此本文所要描述的，便是javascript在服务端的应用。我将介绍如何使用nodeJS来搭建一个mock服务器，方便前端自定义mock数据请求，提高前端开发着的主观能动性和对项目健壮性的探索。

  
• 04.30 14:43:04
  发表了文章 2022-04-30 14:43:04

  笛卡尔乘积的javascript版实现和应用

  笛卡尔乘积是指在数学中，两个集合X和Y的笛卡尓积，又称直积，表示为X × Y，第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员 。

  
• 04.30 14:00:04
  发表了文章 2022-04-30 14:00:04

  JavaScript 中的二叉树以及二叉搜索树的实现及应用

  接下来让我们一起来探讨js数据结构中的树。这里的树类比现实生活中的树，有树干，树枝，在程序中树是一种数据结构，对于存储需要快速查找的数据非有用，它是一种分层数据的抽象模型。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点以及零个或多个子节点。如下所以为一个树结构

  
• 04.30 13:55:36
  发表了文章 2022-04-30 13:55:36

  Canvas入门实战之用javascript面向对象实现一个图形验证码

  本文主要介绍用canvas实现图形验证码的一些思路以及如何用javascript面向对象的方式更友好的实现canvas的功能，关于canvas的一些基本使用方法和API我整理了一个思维导图，大家感兴趣的可以参考学习。

  
• 04.30 13:51:32
  发表了文章 2022-04-30 13:51:32

  用 JavaScript 和 C3 实现一个转盘小游戏

  本文主要介绍如何使用原生javascript和Css3来实现一个在各大移动应用中经常出现的转盘游戏，由于改实现可以有不同方式，如果熟悉canvas的话也可以用canvas实现，本文采用js和css实现主要考虑到复杂度较小性能较好，所以如果有更好的方案，也可以随时和我交流。

  
• 04.30 13:47:29
  发表了文章 2022-04-30 13:47:29

  教你用200行代码写一个爱豆拼拼乐H5小游戏（附源码）

  本文将带大家一步步实现一个H5拼图小游戏，考虑到H5游戏的轻量级和代码体积，我没有使用react或vue这些框架，而采用我自己写的dom库和原生javascript来实现业务功能，具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库，构建工具我采用了自己搭建的gulp4开发项目脚手架。

  
• 04.30 11:18:52
  发表了文章 2022-04-30 11:18:52

  基于react/vue生态的前端集成解决方案探索与总结

  本文主要总结了笔者在多年前端工作中的技术方案选型，结合各种不同类型的项目，搭建了一套完整的前端集成解决方案，主要包含如下内容

  
• 04.30 11:15:22
  发表了文章 2022-04-30 11:15:22

  基于 localStorage 实现一个具有过期时间的 DAO 库

  本文主要解决原生localStorage无法设置过期时间的问题，并通过封装，来实现一个操作便捷，功能强大的localStorage库，关于库封装的一些基本思路和模式，我将采用之前写的如何用不到200行代码写一款属于自己的js类库中类似的方法，感兴趣的朋友可以学习，交流。

  
• 04.30 11:11:29
  发表了文章 2022-04-30 11:11:29

  9012教你如何使用gulp4开发项目脚手架

  本文将会介绍如何使用gulp4来搭建项目脚手架，如果您还在使用gulp3或更老的版本，您也以通过本文的一些思想将之前的项目进行完善，更新。如果gulp不是你们团队的重点，也可以移步我的另一篇文章

  
• 04.30 11:06:43
  发表了文章 2022-04-30 11:06:43

  如何用不到200行代码写一款属于自己的js类库

  JavaScript 的核心是支持面向对象的，同时它也提供了强大灵活的 OOP 语言能力。本文将使用面向对象的方式，来教大家用原生js写出一个类似jQuery这样的类库。我们将会学到如下知识点

  
• 04.30 11:02:22
  发表了文章 2022-04-30 11:02:22

  vue/react项目中不可忽视的自动化部署方案

  本文主要介绍shell脚本的一些基本用法以及在前端项目中的应用。将围绕以下几点来展开

  
• 04.30 10:50:29
  发表了文章 2022-04-30 10:50:29

  让你瞬间提高工作效率的常用js函数汇总(持续更新)

  本文总结了项目开发过程中常用的js函数和正则，意在提高大家平时的开发效率，具体内容如下： 1. 常用的正则校验 2. 常用的设备检测方式 3. 常用的日期时间函数 4. 跨端事件处理 5. js移动端适配方案 6. xss预防方式 7. 常用的js算法(防抖，截流，去重，排序，模板渲染，观察者...)

  
• 04.30 10:45:23
  发表了文章 2022-04-30 10:45:23

  一张图教你快速玩转vue-cli3

  本文系统的梳理了vue-cli3搭建项目的常见用法，目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点

  
• 04.29 22:58:34
  发表了文章 2022-04-29 22:58:34

  3分钟教你用原生js实现具有进度监听的文件上传预览组件

  本文主要介绍如何使用原生js，通过面向对象的方式实现一个文件上传预览的组件，该组件利用FileReader来实现文件在前端的解析，预览，读取进度等功能，并对外暴露相应api来实现用户自定义的需求，比如文件上传，进度监听，自定义样式，读取成功回调等。

  
• 04.29 21:53:29
  发表了文章 2022-04-29 21:53:29

  使用Angular8和百度地图api开发《旅游清单》

  本文的目的是通过一步步实现一个旅游清单项目，让大家快速入门Angular8以及百度地图API。我们将收获： a. Angular8基本用法，架构 a. 使用百度地图API实现自己的地图应用 a. 解决调用百度地图API时的跨域问题 a. 对localStorage进行基础封装，进行数据持久化 a. material UI的使用

  
• 04.29 21:11:40
  发表了文章 2022-04-29 21:11:40

  用 webpack 4.0 撸单页/多页脚手架 (jquery, react, vue, typescript)

  首先来简单介绍一下webpack：现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个会映射项目所需的每个模块 的依赖图(dependency graph)，并生成一个或多个 bundle。webpack4.0出现之后，我们可以不用再引入一个配置文件来打包项目，并且它仍然有着很高的可配置性，可以很好满足我们的需求。 在开始正文之前，首先先来看看我们要实现的成果

  
• 04.29 20:53:12
  发表了文章 2022-04-29 20:53:12

  js基本搜索算法实现与170万条数据下的性能测试

  今天让我们来继续聊一聊js算法，通过接下来的讲解，我们可以了解到搜索算法的基本实现以及各种实现方法的性能，进而发现for循环，forEach，While的性能差异，我们还会了解到如何通过web worker做算法分片，极大的提高算法的性能。 同时我还会简单介绍一下经典的二分算法，哈希表查找算法，但这些不是本章的重点，之后我会推出相应的文章详细介绍这些高级算法，感兴趣的朋友可以关注我的专栏，或一起探讨。

  
• 04.29 20:48:42
  发表了文章 2022-04-29 20:48:42

  css深入研究

  问题学习法：带着问题去学习，有利于集中注意力，目的明确，这既是有意学习的要求，也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的，必要时需经过意志努力，主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息，使学习有了明确的指向性，从而提高学习效率。

  
• 04.29 20:35:16
  发表了文章 2022-04-29 20:35:16

  《前端算法系列》如何让前端代码速度提高60倍

  今天的问题从排序算法入手，来讲解如何根据业务需求，结合金典的算法，来实现js高性能开发。

  
• 04.29 20:25:43
  发表了文章 2022-04-29 20:25:43

  git常见用法和核心策略

  版本库又名仓库，英文名repository，你可以简单理解成一个目录，这个目录里面的所有文件都可以被Git管理起来，每个文件的修改、删除，Git都能跟踪，以便任何时刻都可以追踪历史，或者在将来某个时刻可以“还原”。

  
• 04.29 20:21:11
  发表了文章 2022-04-29 20:21:11

  《前端算法系列》数组去重

  虽然算法在前端开发中很少会得以使用，但是了解常用的算法，熟悉各种算法的性能和优劣，将会让你在前端的道路上走的更远。

  
• 04.29 20:16:57
  发表了文章 2022-04-29 20:16:57

  vue高级进阶系列——用typescript玩转vue和vuex

  用过vue的朋友大概对vuex也不陌生，vuex的官方解释是专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。说的简单点就是对vue的状态进行统一管理，如下图介绍了其管理模式

  
• 04.29 20:12:47
  发表了文章 2022-04-29 20:12:47

  前端高性能开发总结

  javascript在浏览器中运行的性能，可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂，事实上，多数浏览器使用单一进程来处理用户界面和js脚本执行，所以同一时刻只能做一件事。js执行过程耗时越久，浏览器等待响应的时间越长。
• 04.29 20:00:54
  发表了文章 2022-04-29 20:00:54

  es6,es7新特性总结（二）

  ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6给我们提供了很多js的新特性和规范，使得我们编写Js代码更加灵活和强大，接下来让我们来学习一下吧。
• 04.29 19:38:27
  发表了文章 2022-04-29 19:38:27

  es6,es7新特性总结

  ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ES6给我们提供了很多js的新特性和规范，使得我们编写Js代码更加灵活和强大，接下来让我们来学习一下吧。