方宏伟-CSDN博客

原创 DevOps 工具： —— 通过Jenkins构建CI/CD

Jenkins是一个开源软件项目，是基于Java开发的一种持续集成工具Jenkins应用广泛，大多数互联网公司都采用Jenkins配合GitLab、Docker、K8s作为实现DevOps的核心工具。Jenkins最强大的就在于插件，Jenkins官方提供了大量的插件库，来自动化CI/CD过程中的各种琐碎功能。Jenkins最主要的工作就是将GitLab上可以构建的工程代码拉取并且进行构建，再根据流程可以选择发布到测试环境或是生产环境。

2023-03-30 15:06:34 1008

原创前端必经之路：带你读懂正则表达式

正则表达式简介正则表达式的英文为 Regular Expression，在 JavaScript 中用 RegExp 对象表示。正则表达式是一种专门用来处理字符串的规则，我们可以用正则表达式的 test() 接口去验证字符串是否符合某个规则，也可以用 exec() 接口将字符串中符合规则的内容捕获到。例如：正则表达式的创建方式在 JavaScript 中，正则表达式有两种创建方式，分别是字面量创建方式和构造函数创建方式。字...

2021-06-30 22:49:06 1974 4

原创前端自动化构建工具：Webpack（四）—— Webpack 性能优化

四 Webpack 性能优化这篇文章终于要进入 Webpack 搭建的重点了 —— Webpack 性能优化。当我们的项目规模越来越大的时候，Webpack 的性能优化就成为我们绕不开的坎，这将很大程度上影响我们的开发效率。Webpack 性能优化也分为开发环境的性能优化和生产环境的性能优化，接下来我将一一介绍相关的优化方案。4.1 热模块替换HMR第一个要重点优化的地方，在于开发环境项目打包的构建速度。之前我们配置的开发环境，不管修改 index.js 依赖的哪一个模块，所有模块都会被重新加.

2021-03-20 19:08:48 489

原创前端自动化构建工具：Webpack（三）—— Webpack 生产环境的基本配置

三 webpack 生产环境的基本配置上一篇文章我们讲完了 webpack 开发环境的配置，接下来就该讲 webpack 生产环境的配置了。前面已经说到，开发环境是启用代码本地调试运行的环境，帮助我们更高效率的开发。而生产环境则需要启动能让代码优化上线运行的环境，我们需要进行一系列的优化操作，以达到更好的用户体验。3.1 将CSS抽离成单独的文件之前我们处理 css 资源，最终都是使用 style-loader 在 js 文件中去动态创建 style 标签，再把样式写入 style 标签里。这样

2021-03-07 00:33:24 410 1

原创前端自动化构建工具：Webpack（二）—— Webpack 开发环境的基本配置

二 webpack 开发环境的基本配置上一篇文章介绍的，只是简单初步了解一下 webpack。在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，我们通常需要创建一个名为 webpack.config.js 的配置文件取代以上使用命令行 CLI 选项的方式，这比在命令行中手动输入大量命令要高效的多。我们可以直接通过编写这个文件，指定 webpack 需要执行的任务。（这里为了方便统一使用 package.json、package-lock.json 和 node_modu

2021-03-07 00:24:46 342 1

原创前端自动化构建工具：Webpack（一）—— 初步认识 Webpack

对于每一个前端开发工程师来说，Webpack 无疑是最难啃的骨头之一。Webpack是前端最主流的自动化构建工具，很多前端框架（Vue、React等）都依赖于Webpack 进行搭建。然而，相比于熟悉Gulp，熟悉 Webpack 的成本高了很多。因为 Webpack 本身不仅多了很多概念需要去理解，也有许多不得不掌握的优化配置。在去年10月份，Webpack5 正式发布，它主要是围绕优化进行升级。Webpack5 和 Webpack4 在使用的过程中会有一些小差异，但由于很多团队依旧在使用旧的 We.

2021-03-07 00:13:23 855

原创前端自动化构建工具：用Gulp4.0搭建一个基本的前端开发环境

一个项目的完成一般需要经过三个步骤：初始化、开发和部署。在前端开发过程中，我们经常需要依靠一些自动化构建工具来优化前端工作流程，来帮助我们完成一系列繁琐的工作，例如浏览器热更新、ES6编译、代码压缩、添加样式前缀、图片压缩等。在这些自动化构建工具中，比较有名的就是Grunt和Gulp。相比Grunt，Gulp的人气更高。作为一个独特的构建工具，Gulp的构建方法和Grunt完全不同。Gulp有以下特点：①它的底层计算完全是在内存中运行的，而且读取数据非常快。②它可以并行执行任务。③gulpfile是

2020-07-19 17:24:41 933

原创高级前端修炼之路：一步步教你手写Promise底层源码

在之前的《高级前端修炼之路：深入理解JQuery底层源码》的文章中，我已经详细介绍了Jquery中的Deferred延迟对象的用法并模拟了它的一些底层源码的实现。今天要介绍的，是ES6中一个和JQ延迟对象非常相似的对象——Promise。 JQ中Deferred对象的决议结果有三种可能：resolve、reject和notify，分别代表成功、失败和等待状态。而Pro...

2019-11-20 19:42:46 972 2

原创前端必经之路：你所要了解的数据结构

数据结构是计算机存储、组织数据的方式，它是相互之间存在一种或多种特定关系的数据元素的集合。数据结构往往同高效的检索算法和索引技术有关，通常情况下，精心选择的数据结构可以带来更高的运行或存储效率。数据结构包含三个方面：数据元素之间的逻辑关系（即数据的逻辑结构）、数据元素及其关系在计算机中的存储方式（数据的物理结构或存储结构）以及施加在数据上的操作（数据的运算）。...

2019-11-16 11:37:20 1521

原创算法修炼之路(四) —— 二分搜索

二分搜索，也叫折半查找，是一种采用分治思想的搜索算法。采用二分搜索的前提是所查找的线性表必须采用顺序存储结构，且表中元素按关键字有序排列。二分搜索充分利用了元素间的次序关系，每次搜索过程不断的对序列折半查找，根据中间位置的值缩小搜索的区域，把搜索过程的时间复杂度降低到O(logn)。二分搜索的实际运用千变万化，接下来让我们一起来探索这些经典的二分搜索算法。1.用二分搜索法在排好序的...

2019-11-07 17:04:37 790

原创算法修炼之路(三) —— 排序

排序是计算机最基本的算法之一。在计算机中，排序算法可以分为内部排序（In-place）和外部排序 (Out-place) 两大类。内部排序是指不需要开辟额外空间进行排序的算法，排序过程在原序列内存上进行。而与之对应的外部排序则需要开辟额外的空间进行辅助。计算机有十大经典排序算法，接下来我们一起来探究这些经典的排序算法。1.冒泡排序（Bubble Sort）冒...

2019-10-24 23:44:41 656

原创高级前端修炼之路：深入理解JQuery底层源码

对于前端开发人员来说，JQuery并不陌生。JQuery是一个封装好的JavaScript库，它包含多个可重用函数，用来辅助我们简化JavaScript开发。JQuery面向用户良好的设计使我们在开发过程中不用去记忆大量原生的文档 API，极大的提高了我们的开发效率。JQuery改变了一个时代编写JavaScript的方式，虽然现在的组件化框架慢慢让JQuery淡出了我们的视线，但毫无...

2019-09-27 17:40:09 1247

原创前端必经之路：JavaScript底层原理(深入理解JS数据类型、预编译、执行上下文、作用域、构造函数、原型链、闭包、this对象等JS底层机制）

Web前端有三大主要部分：HTML、CSS和JavaScript，其中最重要和最难的一部分，当属JavaScript。JavaScript由文档对象模型DOM、浏览器对象模型BOM以及它的核心ECMAScript这三部分组成，人们通常使用JavaScript和ECMAScript来表示相同的含义。（ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言...

2019-09-20 20:48:45 5221 3

原创算法修炼之路(二) —— 递归

当你的女朋友（就假装你有吧）想让你带她吃东西时： ——“亲爱的，人家肚子饿了….”——“肚子饿啦，那我带你去吃东西吧，你想吃什么呀？“——“随便。“——“那去吃火锅吧!“——“火锅太热气，吃多了会起痘痘。”——“那去吃披萨吧!“——“吃披萨容易发胖，最近正在减肥。“——“要不吃炸鸡？ “——“炸鸡太油了，容易腻“——“那吃海鲜？“——“我最近刚来那...

2019-09-17 13:20:58 1136

原创算法修炼之路(一) —— 数组

在火影忍者里，有一位思想深度非常深却又非常复杂的人物，那就是大蛇丸。蛇叔的哲思深度无人能及，他的追求远远超出了常人的境界。在火影忍者中，晓组织追求统治，六道追求世间和平，火影追求传承，鸣人追求伙伴….而这一切目标，说到底，无非就是为了自身物种的延续。而只有大蛇丸的思考领域，早已超越了生与死的范畴：他追求的是探索这世间的真相。大蛇丸终其一生，都在寻找生命的真谛，从研究禁术脱离死亡的束缚开...

2019-09-08 16:37:35 539

原创前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)

建筑师在对一栋建筑物进行施工之前，首先会根据建筑图纸上的平面图、立体图、剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩)。在一个网页页面的搭建过程中，对于前端工程师来说也是如此。在拿到UI设计图的时候，我们需要先对页面的整体布局进行分析，再从布局开始搭建整个页面。页面布局是一个前端工程师最最基础的基本功，前端布局的方式非常多，本文将根据网站...

2019-08-17 20:49:41 1477

原创前端必经之路：CSS底层原理(剖析CSS权重、CSS布局模型和BFC等重要底层知识)

对于前端开发人员来说，最容易忽视的莫过于对css底层原理的学习了。在我们进行前端页面的开发过程中，始终离不开对css的使用。css的全称为层叠样式表(cascading style sheets)，它能够对网页的布局、颜色、背景、宽高、字体等显示效果进行控制，让我们的网页变得更加漂亮美观。一开始接触css，你或许会感觉很容易，但随着开发经验的积累和学习的深入你会发现，css其实非常的复杂...

2019-07-22 17:27:30 3760 10

原创前端必经之路：浏览器底层工作原理

今天要写的是一篇关于浏览器底层工作原理的技术科普文，作为一个前端爱好者，在平时的日常工作中，最常打交道的莫过于浏览器了。不过，大多数人并不知道，在我们打开浏览器并浏览一个网页时，浏览器底层具体进行了什么工作。今天我将带领大家，逐步剖析我们在使用浏览器访问网页的过程中，浏览器究竟为我们做了些什么。在进入正文之前，先给大家引入一个话题。相信每个人都曾迷惑于互联网一些复杂难...

2019-06-27 16:48:45 4960 4

前端工程师