漫漫前端路，进一寸有进一寸的欢喜

服务端发送事件（SSE）技术早在很久以前就已存在，但其在实际应用场景中并不十分常见。随着ChatGPT的出现，SSE技术得到了重新关注并被广泛应用于实现流式输出。本文将介绍SSE技术的使用

CSS格式化上下文CSS 中很重要的一环就是 BFC 块级格式化上下文，本文整理了 CSS BFC 的相关知识，建议沐浴更衣后食用。在正式讲解BFC之前，先了解一下浏览器外边距重叠的问题。外边距重叠MDN：块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。注意：外边距重叠都是发生在块级元素中，设定 float 和 position=absolute 的元素不会产

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

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

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

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

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

Vuex当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。什么情况下我应该使用 Vu...

Vue-Router什么是路由？路由是根据不同的url地址展现不同的内容或页面。早期的路由都是后端直接根据url来重载页面实现的，即后端控制路由。后来页面越来越复杂，服务器压力越来越大，随着ajax（异步刷新技术）的出现，页面的实现非重载就能刷新数据，让前端也可以控制url自行管理，前端路由由此而生。什么时候使用前端路由？前端路由更多用在单页应用上，也就是SPA(Single Page W...

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

事件循环学过JS的都知道，JS是单线程的，即使html5中提出了woker，但它依旧在主线程的控制之下，只能进行计算任务，而不能操作dom等，所以worker并没有改变JS是一个单线程这一机制。单线程即是后一个任务必须要等待前一个任务执行完毕才能执行，如果执行像setTimeout延迟器，亦或者异步任务等，都不会消耗cpu，就会有空等的情况，为了更好的协调事件、脚本、UI渲染等行为，于是有了事件...

Vue生命周期在学习vue的过程中，vue的生命周期可谓是重中之重，必学的一部分。每个 Vue 实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。下面这张图想必大家都不陌生生命周期图示：解释：首先创建一个vue实例，...

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

计算属性computed设计插值表达式的初衷是为了简单运算的。但在模板中放入太多的逻辑会让模板过重、难以维护且难以阅读。例如：<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方，我们很难一眼看出来这个是想要得到反转的字符串，如果我们有十个地方需要用到这种反转字符串，就...

这里附带vscode下载地址，和前端开发常用的20+插件，可根据插件功能自行选择下载。VsCode下载安装Visual Studio Code下载地址：https://code.visualstudio.com/Download下载页面中，用户可选择“user”和“system”两种版本。目前“system”被推荐使用，它能同时打开多个窗体副本，而“user”只能打开一个实例。VsCo...

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

好似周围的人都在使用vue，那么vue到底好在哪呢，我虽然用了好多次，但是也是第一次停下来，整理了一下vue 的优点性能更好视图-模型分离，实现双向数据绑定维护成本低1、性能好在哪？在JavaScript中，操作DOM影响性能，操作DOM是十分昂贵的，因为访问DOM会消耗性能，而修改DOM可能导致重排或者重绘，代价更是可怖。DOM是一个与语言无关的API，它在浏览器中的...

webpack性能优化概述很多很多人都认为性能是一个项目必不可少的，我总结了有关webpack构建项目中的性能优化的几个方面。在了解性能优化之前，最好对webpack编译原理有所了解，方便更深入的学习。可以参考：大神眼中的webpack构建工具：对编译原理的分析本文中性能优化目录：构建性能：是指在开发阶段的构建性能，而不是生产环境的构建性能，尽可能提高开发效率减少模块解析：优化lo...

webpack+nginx实现gzip打包解决vue首屏加载过慢B/S结构中的压缩传输浏览器向服务器发出请求，并且在请求头中声明可以使用gzip的编码格式，服务器接受到请求之后，读取未压缩的文件，并进行gzip算法压缩，服务器压缩完成后，再返回给浏览器gzip格式的文件，浏览器进行解压缩。这样做传输效率可能得到大幅提升，但是服务器的压缩需要时间，客户端的解压需要时间所以我们再使用gzip的...

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

babel的安装和使用官网：https://babeljs.io/民间中文网：https://www.babeljs.cn/babel简介因为不同版本的浏览器能识别的ES标准并不相同，就导致了开发者面对不同版本的浏览器要使用不同的语言，例如ES2015,ES2017,ES2018…等等。为了能够把不同标准书写的语言，编译为统一的、能被各种浏览器识别的语言，这就是babel的作用由于...

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

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

直接上代码了具体看中文文档 https://www.nginx.cn/doc/index.html在这里插入代码片#定义Nginx运行的用户和用户组 # user nobady nobady;#nginx进程数，建议设置为等于CPU总核心数,默认为1。 worker_processes 8;#全局错误日志定义类型，[ debug | info | notice | warn...

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

在使用npm、yarn等包管理工具之前，我们首先了解一些基本的概念模块（module）通常以单个文件形式存在的功能片段，入口文件通常称之为入口模块或主模块库（library，简称lib）以一个或多个模块组成的完整功能块，为开发中某一方面的问题提供完整的解决方案包（package）包含元数据的库，这些元数据包括：名称、描述、git主页、许可证协议、作者、依赖等等版本号：主版本号.次版...

Git简介我们都知道Git是用来做版本控制的，那么到底什么是Git，如何使用Git。下文记录着我的学习过程。我们先了解几个常用的概念：版本控制（version control）：在我们日常开发过程中，总是要对文件做出修改，每次修改后的文件，就相当于一个新版本，而把这一次次修改的文件记录下来，可以对新版本、旧版本进行操作，就是所谓的版本控制。版本控制系统：用来记录一次次版本，并可以对...

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

1、fetch()接口XMLHttpRequest的问题所有的功能全部集中在同一个对象上，容易书写出混乱不易维护的代码采用传统的事件驱动模式，无法适配新的 Promise ApiFetch Api 的特点并非取代 AJAX，而是对 AJAX 传统 API 的改进精细的功能分割：头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景使用 Promi...

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

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

一、set 集合Set：它类似于数组，但是成员的值都是唯一的，没有重复的值。set用于存放不重复的数据1、创建Set 集合new Set(); //创建一个没有任何内容的set集合new Set(iterable); //创建一个具有初始内容的set集合，内容来自于可迭代对象每一次迭代的结果const arr = [1,2,3,4,5,1,2]const sets = new Se...

一、ES6 和 JavaScriptECMAScript、JavaScript、NodeJs，它们的区别是什么？ECMAScript：简称ES，是一个语言标准（循环、判断、变量、数组等数据类型）JavaScript：运行在浏览器端的语言，该语言使用ES标准。 ES + web api = JavaScriptNodeJs：运行在服务器端的语言，该语言使用ES标准。 ES + node ap...

html5一、属性篇1、placeholder 提示信息<input type="text" placeholder="请输入用户名">2、input的新type（1）Calendar类中的date,time,week,datetine-local<!-- Calendar类 --><input type="date"> 兼容型差，基本只有chr...

CSS3主流浏览器的前缀prefix browser-webkit chrome和safari-moz firefox-ms IE-o opera什么时候加前缀，什么时候不加？可以根据css参考手册或caniuse官网：http://css.doyoe.com/https://www.caniuse.com/css前缀演变史（举个例子 仅用于说明）1、--...

话不多说先上图实现内容是在页面中有20个小心心在随机移动（移动方向随机 位置随机 颜色随机 旋转方向随机）。觉得好看的话，加在你的网页上吧！要实现这个效果，用到了html，css，js知识。实现的难点主要有如下：小心心的绘制随机产生移动方向，旋转方向等一、 小心心的绘制在小心心的绘制上，小白的我也是想了很长时间，因为要作为背景，并且移动，用canvas画布就比较费时费力。这里我时用...

/** * method:请求方式 GET或POST方式 * url:请求的地址 * data:传输的数据 * callback:回调函数的名称 * flag:选择是异步传输还是同步传输 * true为异步，flag为同步，缺省情况下默认为true */ function ajax(method, url, data, callback, ...

因为浏览器的同源策略，不同网站之间不能跨域访问，因此产生了跨域问题补充：同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。古人有云：上有政策，下有对策，产生了跨域问题，以下是解决跨域的几中方式Flash（不做讨论）服务器代理中转跨域产生...

在项目中遇到这样一个问题：div1和div3有默认的css样式 背景颜色是绿色div2有一个默认的css样式 背景颜色是红色需求：当鼠标悬浮在div1，div2，div3上时 让当前div的背景颜色变为红色，其余背景颜色变为绿色，无鼠标悬浮时 让其展示默认效果<style> .div1 { width: 100px; ...

使用步骤：1.在lanch.json中配置（注意url的端口号需与webpack配置的一致）代码如下:{ "version": "0.2.0", "configurations": [{ "type": "chrome", "request": "launch", "name": "vuejs: chrome", ...