自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

爱编程的小和尚

我一直在努力!

原创 vue响应式原理源码:带你一步精通vue
原力计划

vue3.0正式版都快发布了,vue2.0的响应式原理你还写不出来?本文带你彻底理解vue响应式原理,带你写一个简易版的vue,实习vue数据响应式(数据劫持结合发布者-订阅者)、数组变异方法、编译模板(常用的指令如v-html、v-text、v-model、v-on等)、双向数据绑定的功能。

2020-05-07 15:29:06 5453 9

原创 企业级项目:webpack中的性能优化
原力计划

webpack性能优化概述 很多很多人都认为性能是一个项目必不可少的,我总结了有关webpack构建项目中的性能优化的几个方面。在了解性能优化之前,最好对webpack编译原理有所了解,方便更深入的学习。 可以参考:大神眼中的webpack构建工具:对编译原理的分析 本文中性能优化目录: 构建性...

2020-03-17 17:10:24 365 0

原创 大神眼中的webpack构建工具:对编译原理的分析
原力计划

想要成为一名资深的前端工程师,webpack构建工具可谓是不可不知,一篇文章,让你从webpack一窍不通的小白,到熟知webpack编译原理的大神

2020-03-10 21:23:45 1634 4

原创 大厂常问:输入URL到显示页面的全过程(敲详细)

你到现在都不知道从浏览器地址栏输入URL到显示页面的发生了什么嘛?我来教你,还有谁如果再说前端简单,你就拿这个面试题怼他!

2020-07-08 18:42:06 353 0

原创 Promise源码分析(附带Promise的正确打开方式)
原力计划

你还在被大佬按在地上摩擦吗?我教你Promise底层原理,让你感受一下完虐大佬的感觉。fell 倍儿爽!

2020-07-05 14:46:25 1930 3

原创 Spark葵花宝典:一小时速成Spark
原力计划

你会Spark么?不会?来这里,一小时让你搞明白Scala和RDD语法和spark的用处。

2020-07-03 17:38:16 3708 5

原创 Flex弹性盒子详解:从量变到质变的理解
原力计划

什么?你竟然不知道css的flex弹性盒子?你肯定是经常被大佬按在地上摩擦吧。这篇文章,让你彻底明白flex弹性盒子的每个属性,好文字不如好图片!

2020-06-30 15:13:35 1699 0

原创 Zookeeper学习提纲:助你一臂之力
原力计划

ZooKeeper ZooKeeper:ZooKeeper是一种分布式协调服务,用于管理大型主机。 分布式应用:分布式应用可以在给定时间(同时)在网络中的多个系统上运行,通过协调它们以快速有效的方式完成特定任务 分布式应用有两部分:Server(服务器) 和 Client(客户端) 应用程序。 ...

2020-06-25 15:31:55 2086 0

原创 HBase学习提纲:助你一臂之力
原力计划

HBase 简介: HBase是一个高可靠性、高性能、面向列、可伸缩的分布式存储系统。可在廉价PC Server上搭建起大规模结构化存储集群。 HBase利用Hadoop HDFS作为其文件存储系统,利用Hadoop MapReduce来处理HBase中的海量数据,利用Zookeeper作为协调工...

2020-06-25 15:30:02 2609 6

原创 是男人就要坚持30秒:原生JS小游戏
原力计划

这是一个原生JS小游戏,是男人就要坚持30s,自证的机会到啦,等你来挑战!

2020-06-20 09:15:04 2511 1

原创 JavaScript的骚操作:防抖、节流、柯里化等
原力计划

JavaScript中有很多骚操作,如深克隆,防抖,节流,柯里化,单参管道函数等等,如果你连这些都不会,你怎么在大佬面前装逼?这篇文章,整理了常见的骚操作。

2020-06-16 14:44:18 1945 6

原创 java代码30行实现用我爱你重绘女朋友美照(我对你的爱,在每一个字里行间)
原力计划

java代码还能表白?我来教你30行代码,用我爱你来绘一张女朋友的照片,程序员的强势浪漫,我对你的爱,在每一个字里行间。

2020-05-24 16:11:14 12824 63

原创 初识React和JSX语法:带你走入React世界,让你彻底明白JSX语法
原力计划

React 库可以说是大厂中用到的最多的一个库了,我们先来简单了解一下 React 和 React 中的要用到的 JSX 语法吧

2020-05-13 20:14:57 625 0

原创 用vb语言七行写一个QQ轰炸机(附一个抖音很火的小程序)
原力计划

枯燥的斗图是不是跟不上手速,我用7行代码写一个QQ轰炸程序,让你再也不用担心怼不过别人了!走过路过不要错过。可发文字、图片

2020-04-26 17:46:37 11579 63

原创 vue中的vuex状态管理:从入门到精通
原力计划

Vuex 当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏: 多个视图依赖于同一状态。 来自不同视图的行为需要变更同一状态。 对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。对于问题二,我们经常会采用父子组件直接引用或者通过事件来变...

2020-04-26 12:55:48 801 1

原创 vueRouter路由详解:从入门到精通
原力计划

Vue-Router 什么是路由? 路由是根据不同的url地址展现不同的内容或页面。早期的路由都是后端直接根据url来重载页面实现的,即后端控制路由。后来页面越来越复杂,服务器压力越来越大,随着ajax(异步刷新技术)的出现,页面的实现非重载就能刷新数据,让前端也可以控制url自行管理,前端路由由...

2020-04-26 12:53:01 1494 0

原创 浪漫程序员会表白之抖音旋转立方体照片墙
原力计划

人分两类,是你和不是你。 时间分两类,你在的时候和你不在的时候。

2020-04-20 16:20:04 2243 9

原创 vue组件和父子组件间通信的13种方式(包含动态、异步组件和常用的prop、$emit、插槽等)
原力计划

本篇文章分成了两个部分,第一部分是组件基础,介绍全局组件、局部组件的注册,动态组件和异步组件的使用等等,第二部分是组件之间的通信方式,本文整理了13种,在下面依次介绍。文章较长,看的时候要有耐心哦~ 组件基础 我们在制作一个网站的时候,通常会用到代码相同的部分,比如说导航栏,如果不能很好的复用,那...

2020-04-13 08:31:10 567 1

原创 JavaScript中的事件循环机制:你不得不懂的JS原理
原力计划

事件循环 学过JS的都知道,JS是单线程的,即使html5中提出了woker,但它依旧在主线程的控制之下,只能进行计算任务,而不能操作dom等,所以worker并没有改变JS是一个单线程这一机制。单线程即是后一个任务必须要等待前一个任务执行完毕才能执行,如果执行像setTimeout延迟器,亦或者...

2020-04-11 12:32:58 468 0

原创 抖音上的时钟屏保,被我改造完用来表白
原力计划

抖音上很火的时钟屏保,被我改造完后用来准备准备准备表白,谁说程序员不浪漫?! 闲言少叙,书归正文,因为gif格式的图片只能上传5M,所以我只能切成两块,中间还删减了一些,大家凑合着看,不要打我,大家可以把源码拷下来,源码在最下面,自己运行康康,嘿嘿,话不多说,上图: 效果主要分成了三个部分,...

2020-04-08 09:12:27 10533 65

原创 vue的生命周期详解:从入门到精通
原力计划

Vue生命周期 在学习vue的过程中,vue的生命周期可谓是重中之重,必学的一部分。 每个 Vue 实例在被创建时都要经过一系列的初始化过程,例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同...

2020-04-06 17:55:10 4182 6

原创 axios在企业级vue项目中的应用(附带axios正确打开方式)
原力计划

在一个大型的vue项目中,需要编写请求接口实在太多太多了,如果每一个接口都从创建实例开始,那代码将会相当庞大以及十分臃肿,后期很难维护,那我们来看看企业级项目中,http请求是怎么抽离出来的吧。 首先是request.js,这个文件是用来处理axios的配置、设置拦截器等等,它创建了一个实例,并...

2020-04-01 09:19:11 6643 6

原创 一篇文章带你“深入”了解vue的计算属性computed和侦听属器watch
原力计划

计算属性computed 设计插值表达式的初衷是为了简单运算的。但在模板中放入太多的逻辑会让模板过重、难以维护且难以阅读。例如: <div id="example"> {{ message.split('').reverse().join(&...

2020-03-31 16:04:21 753 0

原创 钢铁程序员写给女朋友的情话
原力计划

谁说程序员不可以浪漫了?!我收集了各种各样的情话,以及特别篇(如吵架、女生来大姨妈等正确处理方案)。以后尽量每月一更,做个文艺情怀程序员,哈哈哈哈。 情话并非自创,各处收集的,侵删 第一回 现在的我 就像一只谨慎的兔子 壮着胆子喜欢你 你只是一个不耐烦的表情 我就红着眼睛想逃回森林 第二回 有一种...

2020-03-29 22:07:59 1156 0

原创 vscode下载和前端工程师常用的20+插件,包含代码提示、语法高亮、括号颜色等等

这里附带vscode下载地址,和前端开发常用的20+插件,可根据插件功能自行选择下载。 VsCode下载安装 Visual Studio Code下载地址:https://code.visualstudio.com/Download 下载页面中,用户可选择“user”和“system”两种版本...

2020-03-29 20:57:02 1393 0

原创 vue中插值表达式和14个vue指令详解
原力计划

在学习vue时,插值表达式和vue指令可谓是基础中的基础,这篇文章,就让你彻底了解怎么使用插值表达式和vue中所有指令的用法。 一、插值表达式:{{ }} 可以将vue中的数据填写在插值表达式中 <div id="app">{{ title }}</div...

2020-03-29 15:27:28 835 0

原创 好似大家都在用vue,vue好在哪?

好似周围的人都在使用vue,那么vue到底好在哪呢,我虽然用了好多次,但是也是第一次停下来,整理了一下vue 的优点 性能更好 视图-模型分离,实现双向数据绑定 维护成本低 1、性能好在哪? 在JavaScript中,操作DOM影响性能,操作DOM是十分昂贵的,因为访问DOM会消耗...

2020-03-22 15:36:18 842 0

原创 webpack+nginx实现gzip压缩解决vue首屏加载过慢
原力计划

webpack+nginx实现gzip打包解决vue首屏加载过慢 B/S结构中的压缩传输 浏览器向服务器发出请求,并且在请求头中声明可以使用gzip的编码格式,服务器接受到请求之后,读取未压缩的文件,并进行gzip算法压缩,服务器压缩完成后,再返回给浏览器gzip格式的文件,浏览器进行解压缩。这...

2020-03-17 16:57:07 315 0

原创 webpack-dev-server开发服务器 和 webpack中常用plugin和loader
原力计划

webpack-dev-server:开发服务器 在开发阶段,我们希望把最终的代码和页面部署到服务器上来调试是否有bug,如果我们的代码不能实现热加载的话,那会对开发效率产生极大的影响,我们所有的时间,可能都浪费在打包、运行、调试过程了。 webpack-dev-server就是一个热加载的模拟服...

2020-03-17 16:52:27 224 0

原创 babel:对ES2015+的语法转换为浏览器兼容的语法
原力计划

babel的安装和使用 官网:https://babeljs.io/ 民间中文网:https://www.babeljs.cn/ babel简介 因为不同版本的浏览器能识别的ES标准并不相同,就导致了开发者面对不同版本的浏览器要使用不同的语言,例如ES2015,ES2017,ES2018…等等...

2020-03-16 16:05:21 281 0

原创 css工程化解决类名冲突、重复样式等问题
原力计划

CSS工程化 在前端的不断发展,css也出现了很多问题,类名冲突、重复样式定义、css文件需要细分等问题。这篇文章我们来依次介绍如何解决这些问题的。 1、命名约定:BEM规范 BEM是一套针对css类样式的命名方法。 其他命名方法还有:OOCSS、AMCSS、SMACSS等等 BEM全称是:B...

2020-03-16 14:27:23 447 0

原创 十分钟带你学会Less预编译器
原力计划

CSS预编译器 Less 我们在书写css样式的时候经常会被权重给恶心到要吐血。所以预编译器应运而生。预编译器它就是使用一种更加优雅的方式来书写css代码,通过编译器,将其转换为可以被浏览器识别的传统css代码 目前,最流行的预编译器有LESS和SASS,由于它们两者特别相似,我们在这里介绍Le...

2020-03-16 14:20:47 244 0

原创 史上最全 nginx.conf 配置文件详解

直接上代码了 具体看中文文档 https://www.nginx.cn/doc/index.html 在这里插入代码片 #定义Nginx运行的用户和用户组 # user nobady nobady; #nginx进程数,建议设置为等于CPU总核心数,默认为1。 worker_proce...

2020-03-10 21:47:02 255 0

原创 包管理工具npm、yarn以及nvm简介及简单使用

在使用npm、yarn等包管理工具之前,我们首先了解一些基本的概念 模块(module) 通常以单个文件形式存在的功能片段,入口文件通常称之为入口模块或主模块 库(library,简称lib) 以一个或多个模块组成的完整功能块,为开发中某一方面的问题提供完整的解决方案 包(package) 包含元...

2020-03-09 20:03:51 331 0

原创 Git简介以及简单使用

Git简介 我们都知道Git是用来做版本控制的,那么到底什么是Git,如何使用Git。下文记录着我的学习过程。 我们先了解几个常用的概念: 版本控制(version control):在我们日常开发过程中,总是要对文件做出修改,每次修改后的文件,就相当于一个新版本,而把这一次次修改的文件记录下...

2020-03-08 19:51:08 327 0

原创 模块化之CommonJs、AMD、CMD和ES6模块化

模块是将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起。块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信 模块化有两个重要的概念:模块的导出和模块的导入 模块的导出:暴露接口的过程即模块的导出 模块的导入:当通过某种语法或API去...

2020-02-26 19:33:40 285 0

原创 Fetch概述-升级的网络请求

1、fetch()接口 XMLHttpRequest的问题 所有的功能全部集中在同一个对象上,容易书写出混乱不易维护的代码 采用传统的事件驱动模式,无法适配新的 Promise Api Fetch Api 的特点 并非取代 AJAX,而是对 AJAX 传统 API 的改进 精细的功能分割:头...

2020-02-23 19:50:54 164 0

原创 ES6中的迭代器生成器、反射与代理
原力计划

一、迭代器(Iterator) 1、基础概念 迭代:从一个数据集合中按照一定的顺序,不断取出数据的过程。 迭代器(iterator):一个具有next方法的对象,next方法返回下一个数据并且能指示是否迭代完成 迭代器创建函数(iterator creator):一个返回迭代器的函数 2、JS中的...

2020-02-23 19:49:07 176 0

原创 ES6中的类和符号
原力计划

一、类 在js语言中,生成实例对象的传统方法是通过构造函数。例如: function Animal(type,name,age,sex){ this.type = type this.name = name this.age = age this.sex = sex...

2020-02-22 20:53:24 239 0

原创 ES6中的Set/Map集合和数组的扩展
原力计划

一、set 集合 Set:它类似于数组,但是成员的值都是唯一的,没有重复的值。set用于存放不重复的数据 1、创建Set 集合 new Set(); //创建一个没有任何内容的set集合 new Set(iterable); //创建一个具有初始内容的set集合,内容来自于可迭代对象每一次迭代的...

2020-02-22 20:51:15 199 0

提示
确定要删除当前文章?
取消 删除