大家都知道，async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。　　进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。　　先来看一段代码：　　函数f内部return命令返回的值，会被then方法回调函数接收到。　　只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数,wa

随着互联网行业的火爆，近年来，想转前端的学生和职场人越来越多，甚至出现了这样一种现象：360行，行行转前端。现在在网上随便搜“转行”、“前端”，都是酱紫的：为什么那么多人都想做前端工程师?究其原因，就是前端有三好，薪资高，门槛低，前景也挺好。Part.1 薪资高让我们先来看下某招聘网站统计的前端开发薪资分布图吧。我们可以看到30.2%的前端工资在20k-30k，占比最大，还有部分优秀前端月薪达到30k+。同时，2017年互联网行业薪资分析报告还指出，前端薪资水平增速高度28.2%，位

前端面试中几种常见的数组排序方式：冒泡排序、插入排序、选择排序，你知道他们的基本思想是哪些，应该如何实现吗？今天小千就来给大家详解一下，赶紧戳过来~~冒泡排序冒泡排序的基本思路是什么？两两比较顺序,如果顺序错误则交换位置插入排序插入排序的基本思路是什么？第一步:从第二位(当前元素)开始从后向前查找; 第二步:若新元素(当前元素的前面)大于当前元素,将新元素移到下一位置; 第三步:重复2,直到在有序区找到大于或等于新元素的位置; 第四步:将当前元素插到上面找...

有不少同学在前端开发面试的时候会被问到性能优化的相关问题，做好优化是一件非常重要的事情，今天小千就来给大家介绍一下文档碎片的处理方式。 性能优化之文档碎片 一般情况下，在操作DOM结构的时候,经常会说非常消耗性能，原因是我们向DOM中添加新的元素，DOM会立刻更新。也就是添加一次更新一次，如果添加100个节点，那么就得更新100次，很浪费资源呀。 每次操作DOM节点插入时，浏览器会触发重排重绘，为了提高效率，要尽可能的减少重排重绘，即应该减少DOM节点的...

在同学们使用某些网站的新版本页面的时候，经常会出现一个类似于新手引导一样的效果，来帮助同学们更好的熟悉新版本页面的功能和使用，那么你知道应该如何才能够实现这种效果吗？小千今天就来给大家介绍一个非常好用的插件来实现这个效果，走过路过千万别错过啦。 首先先给大家看一下最终的效果 今天的主角Intro.js 1、Intro.js的安装 Intro.js 是一个轻量级的js库，用于创建一步一步的产品引导，支持使用键盘的前后方向键导航，使用 En...

作用域是JavaScript中非常基础的概念，很多刚入门的同学却弄不懂作用域的概念，但不弄明白的话又不能够写出高效简介的代码，今天小千就来给大家介绍一下关于前端JavaScript作用域的那点事。 什么是作用域 JavaScript 中的作用域是指变量的可访问性或可见性，也就是说，程序的哪些部分可以访问该变量，或者该变量在何处可见。 为什么作用域很重要 作用域的主要好处是安全性。也就是说，只能从程序的特定区域访问变量，使用作用域，我们可...

在前端开发的过程中我们经常会需要与后端配合才行，有时候非常麻烦，今天小千就来教大家使用rest云服务接口前端一人带飞项目。 一、互联网应用开发模式 1.前后端耦合开发：你中有我，我中有你，需要非常紧密的配合 2.前后端分离开发：你不认识我，我不属于你，很多时候两者只需通过接口文档沟通 3.ServerLess云服务提供REST接口：在一些传统应用中，前端可以单飞了，数据通过ServerLess 云服务平台管理 二、Lean...

分支结构就是我们常见的判断结构，根据用户设置好的条件来判断是否执行某些代码程序，下面小千就给大家介绍一下三种常见的分支结构语法。 IF 条件分支结构 if 语句 通过一个 if 语句来决定代码执行与否a 语法： if (条件) { 要执行的代码 } 通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行 if else 语句 通过 if 条件来决定，执行哪一个 {} 里面的代码 ...

大家都知道在CSS3中增加了很多新的属性，其中word-break和word-wrap就是用来给文本换行使用的，但是两者有什么区别很多小伙伴都不是很清楚，今天小千就来告诉你他们究竟有什么不同，应该用在哪里。 word-break word-break它的属性值一共有3个，其中的几个属性值的含义具体解释如下： normal:表示默认值，即默认的的换行规则。 break-all:表示强行换行，意思就是允许任意非文本间(比如网址类型的等)的单词断行。 keep...

细心的你可能会发现，我们在使用app的时候只需要登陆一次账号之后下一次打开就不需要再次登陆，但经过一段时间不登录之后又会要求我们重新登陆，你知道这是如何实现的吗？ 双token验证 具体说明如下： 1.根据需要下载软件，完成注册账户 2.登录账户，后端返回 两个token信息，分别为 access_token 以及 refresh_token，access_token称之为短token，refresh_token称之为长token...

做前端开发的同学肯定对文本居中不陌生，但一般我们说的都是水平居中也就是左右居中，那么你想过没有如何实现垂直居中也就是上下居中吗？今天小千就来给大家介绍一下。 单行文字垂直居中---行高等于高度值 上面的方法只适用于单行文本，多行文本使用就会出现问题，那么如何实现多行文本垂直居中呢？ 多行文本垂直居中 1、模拟表格 将父元素div 模拟成表格table,子元素span模拟成表格单元格；让子元素设置vertical-align...

在进行web前端开发的时候，我们经常会遇到变量提升的情况，那么JS在解析变量的时候是如何做到提升的呢？今天小千就来带大家了解一下。 首先在JS中涉及两种作用域的问题，那么什么是作用域呢？ 作用域是代码中所使用名字的作用范围，分为Script全局作用域和函数局部作用域。 当浏览器在解析网页内容时，会分别启动不同的解析器来解释代码的含义，如解析标签（超文本）的解析器、解析CSS样式的解析器，解析javascript脚本的解析器。且解析过程为同步（按顺序）解析。所以当浏览器...

渐变效果在开发中我们可能会经常使用到，像什么线性渐变linear-gradient啦，还有径向渐变radial-gradient，但今天我们讲的是锥形渐变conic-gradient。 当然，我们这次的重点并不是这线性渐变和径向渐变，而是一个第三个图中的锥形渐变conic-gradient，顾名思义，锥形锥形，就是渐变的图案像圆锥，下面这张图可以完美的展示出锥形渐变与径向渐变的差别 锥形渐变的语法 conic-gradient( [ from &...

在前后端分离的开发项目中，前后端联调的时候会出现这样那样的问题，尤其是在调取数据的程序上面，有时候前端给的前端给到后端的明明是正确的但就是无法拿到正确的数据，下面小千就来给大家详解一下常见的三种数据传输方式。 1、地址栏传输数据 1）、query string Parameters： 当请求方式是get时，浏览器会使用查询字符串的方式进行传递数据，即：query string Parameters 查询字符串的规则：请求参数使用 URL地址...

作用域是JavaScript中非常基础的概念，很多刚入门的同学却弄不懂作用域的概念，但不弄明白的话又不能够写出高效简介的代码，今天小千就来给大家介绍一下关于前端JavaScript作用域的那点事。 什么是作用域 JavaScript 中的作用域是指变量的可访问性或可见性，也就是说，程序的哪些部分可以访问该变量，或者该变量在何处可见。 为什么作用域很重要 作用域的主要好处是安全性。也就是说，只能从程序的特定区域访问变量，使用作用域，我们可...

同学们在进行页面布局的时候，经常会使用到float浮动进行样式控制，但如果我们没有设置父元素的高度的时候使用浮动就会导致后面的子元素出现问题，也就是高度塌陷，下面小千就给大家介绍几种常见的解决CSS高度塌陷的方法。 1.父级div定义 height 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 优点：简单、代码少、容易掌握 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，...

GitHub对于一名前端开发者来说肯定不陌生，Git作为一个版本控制工具，现如今在全世界范围内都是非常受欢迎的，甚至有不少大型公司都将自己的代码迁移到上边。下面小千就来给大家介绍一下如何部署一个私有的Git服务器。 以CentOS为例，主要步骤如下： ①安装对应的软件（Linux） 命令如下： yum -y install git ②建立git用户，设置一个初始密码（类似于github平台的密码） ③创建空远程...

大家都知道在CSS3中增加了很多新的属性，其中word-break和word-wrap就是用来给文本换行使用的，但是两者有什么区别很多小伙伴都不是很清楚，今天小千就来告诉你他们究竟有什么不同，应该用在哪里。 word-break word-break它的属性值一共有3个，其中的几个属性值的含义具体解释如下： normal:表示默认值，即默认的的换行规则。 break-all:表示强行换行，意思就是允许任意非文本间(比如网址类型的等)的单词断行。 keep...

在前端开发中，我们可以使用很多模块化的库来帮助我们更好的实现效果，有一些库的功能类似很多同学就不知道该如何选择，比如require和import，今天小千就给大家介绍一下两者的区别。 一、区别 1.require是commonjs的规范，在node中实现的api，import是es的语法，由编译器处理。所以import可以做模块依赖的静态分析，配合webpack、rollup等可以做treeshaking。 2.commonjs导出的值会复制一份，req...

在进行web前端开发的时候，我们经常会遇到变量提升的情况，那么JS在解析变量的时候是如何做到提升的呢？今天小千就来带大家了解一下。 首先在JS中涉及两种作用域的问题，那么什么是作用域呢？ 作用域是代码中所使用名字的作用范围，分为Script全局作用域和函数局部作用域。 当浏览器在解析网页内容时，会分别启动不同的解析器来解释代码的含义，如解析标签（超文本）的解析器、解析CSS样式的解析器，解析javascript脚本的解析器。且解析过程为同步（按顺序）解析。所以当浏览器...

在前端开发过程中比较麻烦的地方其实并不是开发，而是考虑用哪些页面布局样式，一个好的布局排版重点突出，看起来舒适不费劲，整体简洁大方，更重要的是能让用户更好的更方便的浏览网站。今天小千就来给大家介绍几种常见的布局问题和解决办法，看看有没有你用得上的。 1: 每行文字太多 用户在阅读许多行文字时间久了会引起眼睛的疲劳，在从一行到另一行时读者不得不经常移动他们的眼睛和头部，而这种让人疲惫的布局模式是不受欢迎的,经网络有关调查表明每行文字保持文字在50 - 60个字符以下...

最近，我研究Java中代码弃用这方面的话题。我觉得这个话题的覆盖范围较小，尽管它可能在某些项目中发挥关键作用，特别是在大型团队中工作或处理外部API时。在Java-land中，我不知道任何真正的用于废弃Java的行业标准。每个团队，库或供应商可能会有所不同。这就是为什么我的目标是总结我在这个主题上的发现和想法，以及一些好的做法，以便标记Java方法过时的时候。“弃用”实际上意味着什么？首先，我们首先澄清，弃用只是应用于软件功能的状态。它表明应该避免使用此功能，通常是因为它已被取代。弃用也

在前端开发中，我们可以使用很多模块化的库来帮助我们更好的实现效果，有一些库的功能类似很多同学就不知道该如何选择，比如require和import，今天小千就给大家介绍一下两者的区别。 一、区别 1.require是commonjs的规范，在node中实现的api，import是es的语法，由编译器处理。所以import可以做模块依赖的静态分析，配合webpack、rollup等可以做treeshaking。 2.commonjs导出的值会复制一份，req...

ES6为Java语言带来了许多新特性。其中两个特性，生成器和迭代器，极大地改变了我们在更复杂的前端代码中编写特定函数的方式。虽然他们之间的关系很好，但他们实际上做的事情可能有点令人困惑，所以让我们来看看他们。迭代器迭代在编程中是一种常见的做法，通常用于循环一组值，要么转换每个值，要么使用或以某种方式保存它。在Java中，我们总是有这样的for循环:但是ES6给了我们一个选择：这可以说是更清洁、更容易使用，并让我想起了Python和Ruby之类的语言。但是还有一件事对于这种新的

JS开发人员在编写代码时可能犯的最大错误之一就是声明不必要的全局变量。全局变量对程序员非常有帮助，但如果不谨慎使用它们，它们会影响任何浏览器的速度和效率。简短说明全局变量和局部变量JS中主要使用两种类型的变量:局部变量和全局变量。局部变量是在函数中定义和使用的，而全局变量是为函数窗口定义的。简而言之，在代码没有终止之前，全局变量将一直存在。对浏览器的影响存储弱数据的变量并不太重要，但是，如果您在其上存储大量数据，那么它将阻塞您的带宽，并肯定会威胁到页面的效率。太多的数据存储在缓存中会降低浏览

bootstrap1、简介：Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVA 的。2、基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。3、CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细

前言代码质量不仅适用于后端的Java或C语言，它也适用于CSS。继续阅读，了解如何编写出色的CSS！编写基本的CSS和HTML是我们作为Web前端开发人员学习的第一件事情之一。然而，我遇到过很多的应用都没有人花时间真正考虑前端开发的长久性和可维护性。我认为这主要是因为许多开发人员对CSS / HTML和Java的长久维护缺乏深刻的理解。但是对于团队来说，编写可维护的前端代码是非常重要的。这篇文章的目的不在于规则手册，而在于您正在编写CSS时，更多的是要考虑事物的指南。我鼓励你找到你自己的..

大家一定对ES6解构赋值非常熟悉。但是你知道在函数参数里也可以使用它吗？下面我们直入正题：这对于接收可选参数的函数，是很棒的。对于这种用法，你也可以添加默认参数值来填充调用者没有传递或忘记传递的参数值：= {}表示此参数需要解构的默认对象是一个{}，以防调用者忘记传值，或传递了一个错误类型（大多情况为后者）。参数处理对于普通的解构，如果输入的参数与函数指定的对象参数不符，所有不符的参数都将为undefined，所以你需要增加代码来正确的处理这些情况：更糟糕的，如果没有传递

如今的前端开发人员都会使用一些工具来帮助他们创建和编辑CSS。 而其中一种工具是预处理器，使用预处理器的主要优点之一是可以在样式中使用变量，这消除了复制和粘贴的需要，这使得重构变得更容易。当使用预处理器变量时，开发人员倾向于使用颜色，字体大小，布局细节等来定义它们。这一切都很好，但预处理器变量有一些限制：不能被Java操纵，预处理器变量在它们到达浏览器之前被提前编译，如CSS属性/值。没有意识到DOM或CSSOM，就像上面提到的一点，变量是提前编译的，所以开发人员就没有机会从中了解这些细节。..

如果你熟悉面向对象编程，你很可能熟悉子类（Subclassing）和继承（Inheritance）。 然而，继承得到了一个坏名声，这是因为有些开发人员在需要修改程序时将其视为一个全面的解决方案，导致class层次结构可能变得难以管理。我们还可以使用其他设计模式来使我们的应用程序更易于理解并随时可以进行更改。下面我将向你们展示如何使用继承以及装饰器和复合模式来改进您的程序设计。继承继承的理念是“一个对象“是”另一个对象的专用版本”。有一个父类（也称为超类（superclass）），它定义了我们..

服务器端渲染是一种很好的方式，可以增加你的全栈应用程序中加载速度的感知。用户在加载你的站点时可以得到一个完整的页面，而不是在Java运行之前没有填充的空白页面。使用Laravel作为Vue.js后端的一个缺点是无法由Vue.js 2.5.0的发布为非Node.js环境（包括PHP，Python，Ruby等）带来了服务器端的渲染支持。在本教程中，我将带您了解Laravel的设置步骤，并演示一个简单的服务器渲染应用程序。并且你可以在Github上获取该项目代码（https://github.com/..

使用CSS Grid模块布置网站模型比起流行的前端ui框架更快更简单地布局。在这篇文章中，我会教你如何使用它快速布局。Our grid我们将会模仿一个经典网站的非常基本的网格开始：首先，我会对布局用到的HTML和CSS进行解释，我已经将其分解为四个部分。一旦你了解了这些，我会在之后的文章写更多的的案例。如果您对CSS Grid完全陌生，那你就需要看下我之前写的用5分钟的时间来学习拥抱未来的CSS Grid 布局文章1.创建HTML我们先用HTML创建一个container的...

构建一个监视应用程序执行情况的工具不再是很困难了。Node.js中Async Hooks API和Performance Hooks API最近增加了两个，允许任何人只需一些代码就可以密切关注他们的应用程序的性能。这篇文章解释了构建这样一个工具的关键要素，从编写代码到以清晰的可视化报告收集的数据。最终的项目在Github上可用，并具有以下特点： 一个简单的性能监控代理 基于Express和MongoDB的测试应用程序 介绍在生产中运行Web应用程序时，性能很重要。缓慢的Web

对象属性顺序一个对象是一个Object类型的实例。它是由一些未排序的元素组成的集合，其中包含了原始变量，对象，和函数。一个对象的属性所对应的函数被称为方法-----ECMA让我们先看下例子因为技术实现，每个浏览器在排序时都有自己的规则，顺序是不确定的。怎么解决呢?使用ES6的新特性Map。Map 对象以插入的顺序遍历元素。for...of循环为每一次循环返回一个[key, value]数组。对付老浏览器Mozilla 建议:如果过你想在跨浏览器环境中模拟一个有序的关联

在网页中我们经常会在页面上鼠标悬停时看到一些动效，例如图片跟随鼠标点击放大、懒加载等，这个交互细节在各个主流网站中随处可见，能为网站增添个性亮点。背景在我们的日常项目中，也会遇到这样的需求，在当前环境下，此类效果大多是靠jQuery来实现的，但是用jQuery实现有不少毛病，原因如下：1.jQuery里面封装了各种函数，整个框架相对比较重;2.jQuery没有分割模块，只有全部导入;3.jQuery压缩后的jq包都有91kB，和css对比来说这样的页面加载速度区别很大;那么我们用cs

作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。在项目中必不可少的便是前端，它是系统的门面、是用户对系统最直接的体验，颜值高低也是决定系统好坏的关键，那么作为一名软件开发攻城狮，怎么能放弃这片蓝海呢？没准了解了解前端的世界，就能多一项技能、升职加薪、赢取白(gao)富(fu)美(shuai)、走向人生巅峰呢？现在的web前端非常的火，很多小伙伴

前面我们总结和推荐了Java的框架和工具，小编今天就特地整理了一批好用的web前端开发框架和他们的特点，帮助大家根据不同的需求，不同的业务场景，做出最合适的选择，让开发变得高效，快速。有了这些工具在手，就可以从繁重的工作任务中解脱出来，有大把的时间去王者峡谷散步打野浪一圈了。前方干货来袭!还不准备好小板凳认真做笔记~1、Alertify.jsAlertifyJS是一个用于开发浏览器对话框和通知的Java框架，它不仅提供了默认浏览器对话框的替代，更使得创建自己的界面变得非常简单。2

什么是http和https协议HTTP协议：全称是HyperText Transfer Protocol，中文意思是超文本传输协议，是一种发布和接收HTML页面的方法。服务器端口号是80端口。HTTPS协议：是HTTP协议的加密版本，在HTTP下加入了SSL层。服务器端口号是443端口。在浏览器中发送一个http请求的过程：当用户在浏览器的地址栏中输入一个URL并按回车键之后，浏览器会向HTTP服务器发送HTTP请求。HTTP请求主要分为Get和Post两种方法。当我们在浏览器输入URL

在网页中我们经常会在页面上鼠标悬停时看到一些动效，例如图片跟随鼠标点击放大、懒加载等，这个交互细节在各个主流网站中随处可见，能为网站增添个性亮点。背景在我们的日常项目中，也会遇到这样的需求，在当前环境下，此类效果大多是靠jQuery来实现的，但是用jQuery实现有不少毛病，原因如下：1.jQuery里面封装了各种函数，整个框架相对比较重;2.jQuery没有分割模块，只有全部导入;3.jQuery压缩后的jq包都有91kB，和css对比来说这样的页面加载速度区别很大;那么我们用cs

将CSS变量设置为设计系统的主题可能会有些棘手: 如果它们太显眼, 系统就会失去一致性。 如果它们太全局化, 你就会失去粒度。也许我们可以解决这两个问题。 我想尝试将设计系统变量归结为两种类型: 全局变量和组件变量。 全局变量将使我们在组件间保持一致性。组件变量将给我们带来粒度和隔离。让我用一个相当简单的组件作为例子来告诉你怎么做。全局变量全系统变量是为了保持组件间的一致性而定义的一般概念。作为一个例子，以一个.alert组件开始，假设我们希望保持页边空白和填充的所有空间的一致性。我们可以首