- 博客(21)
- 收藏
- 关注
RSS订阅原创 Javascript中的Promise用法
Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promi...
2020-05-03 21:27:45
1946
原创 JS面向对象思想
封装面向对象编程就是将需求抽象成一个对象，然后针对这个对象分析其特征（属性）与动作（方法），将需要的功能放在一个对象里，就是封装。一、在JavaScript中创建类在JavaScript中创建一个类很容易，首先声明一个函数并将其保存在一个变量（首字母大写）里，然后在这个类里面通过对this变量添加属性 & 方法，从而使他们同样添加到类上。如下创建一个书类：var Book = fu...
2020-03-01 16:45:32
277
原创 前端性能优化策略
本文将从三部分展开介绍，逐步为读者呈现一套清晰的前端性能优化方案。1、介绍一套合理有效的参考模型(RAIL性能模型)2、给出一套实用的性能测试手段3、给出基于此标准的性能提升方案（结合我们自己项目中的业务实例）一、参考模型web性能优化，这是大家耳熟能详的东西了。一说到性能优化，大家可能马上就会想到从一些时间节点切入，例如：首字节时间白屏时间首屏时间用户可交...
2020-01-13 17:56:25
633
原创 异步遍历器
首先来看一下同步遍历器的问题Iterator 接口是一种数据遍历的协议，只要调用遍历器对象的 next 方法，就会得到一个对象，表示当前遍历指针所在的那个位置的信息。next 方法返回的对象的结构是 { value, done }value 表示当前的数据的值，done 是一个布尔值，表示遍历是否结束。function idMaker() { let index = ...
2019-09-15 14:13:42
497
原创 关于CSS的四个问题
一、伪类选择器和伪元素选择器都有哪些？有什么区别？分别挑选两个聊一下具体的使用场景。「 伪类选择器 」 动态伪类： :hover 把鼠标放在链接上的状态 :active 选择正在活动链接 :focus 选择元素输入后具有焦点...
2019-09-11 10:15:00
232
原创 如臂使指 ：JS 中的 Module 语法
前言从前 JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的 require、Python 的 import，甚至就连 CSS 都有 @import，而 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目开发形成了巨大的障碍。在 ES6 之前，最主要的模块加...
2019-09-08 23:31:45
288
原创 JS遍历对象属性的几种方式
ES6中 一共有 5 种方法可以遍历对象的属性。☞ 「for...in 」for ... in 循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。☞ 「Object.keys」返回一个数组，包括对象自身的 （不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 ...
2019-08-30 15:26:50
717
原创 JavaScript中的闭包及其应用场景
本文将从「 词法作用域 」、「 闭包概念及实例 」、「 闭包应用场景 」等三个方面来讲述JS中的闭包词法作用域词法作用域是指一个变量在源码中声明的位置作为它的作用域。同时嵌套的函数可以访问到其外层作用域中声明的变量。看下面的代码：function init() { var name = '朱翊钧' function displayName() { // display...
2019-08-29 16:50:57
846
1
原创 浅谈5G对前端生态、发展带来的变化
前言在过去的十几年里，2G到4G跨越，带来的是从 15-20K/s 到 1.5M/s-10M/s 的网速飞跃。而5G的到来，将会把这个速度提升至 125G/s。凭借网速的激增以及带宽的突破，5G注定是互联网行业的一剂新血。与此同时，随着V8引擎降临、ES6横空出世，前端行业在过去五年内（14-19）脱胎换骨，随着移动应用占比提升，单页应用如雨后春笋般极速增长，与之相伴的是 React/Vu...
2019-08-26 08:22:36
267
原创 异曲神工--JavaScript中的 async 函数（ES2017）
前言本文是叙述JS异步操作的最后一篇，随着时间的推移，JS中实现异步操作的方案已与日俱增，从一开始的回调函数、发布/订阅、事件监听、promise，到后来的 Generator 函数，以及本文撰述的 async 函数。JS中异步操作的手段的百花齐放，已经使得异步操作变得越来越方便。一、首先来大概了解一下 async 函数：async 函数是 Generator 函数的语法糖前文有...
2019-08-21 09:55:03
386
原创 奇光异彩--JS中Generator 函数异步应用
前言本文前承拙文《异步翊驱--Generator 函数JS中的异步方案》，将继续看一下Generator函数的一些异步应用。并穿插讲述一些概念，如Thunk函数、co模块等。希望各位在读完本文之后，可以结合前文将Generator函数充分理解。一、首先来看一下传统方法：ES6直接将 JavaScript 异步编程带入了一个全新的阶段，在此之前，异步编程的方法，无出于：回调函数、事件...
2019-08-18 11:38:33
239
原创 异步翊驱--Generator 函数JS中的异步方案
前言异步编程对 JavaScript 语言及其重要，因为JavaScript 语言中只有一根线程，如果没有异步编程，则势必日湮月塞，非卡死不可。ES6或许会迟到，但它从不缺席，ECMAScript 6 （简称 ES6 ）作为下一代 JavaScript 语言，不仅对JS全面提升，同时也将 JavaScript 异步编程带入了一个全新的阶段，Generator函数便是其中之一。异步编程的语法...
2019-08-14 08:04:21
200
原创 Vue中的Render
前言Vue中的render提供了一种以函数的方式写HTML的思路，比起template具有更强的可控性，也是一种更接近编译器的编写方式。在一些场景中，比如说开发组件库，包括数据模板渲染、组件按需加载、引入自定义组件插槽等等。这些时候我们往往需要用这种完全编程的方式来解决。本文提供render介绍和一些基本的实例。一、虚拟DOM谈到render函数就不得不先阐述清楚虚拟DOM：人人都...
2019-08-08 14:12:18
204
原创 纵深精耕--ES6对JS（JavaScript）对象的极大提升
前言众所周知，Javascript基于对象，并且万物皆对象。作为一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象，并且以对象和数组作为主力输出。毫不夸张地说，对象就是 JavaScript 最重要的数据结构。顺应其本身的发展，ES6中的对象迎来了极大地提升，本文将从八个方面去做详细阐述。一、简洁表示ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。...
2019-08-04 14:45:21
268
原创 珠联璧合--ES6提供对JavaScript的Set和Map
前言现行的编程语言中，不论多寡，都会提供几种类型的数据集合支持。而在ES6 之前，JavaScript 仅提供了对数组的支持，显得有些捉襟见肘，特别是在以数组和对象为编程主力的JavaScript 语言中，就更为明显。沉淀过往的经验，考虑到未来的延展，ES6 中引入了4种新的数据结构，分别是：集合（Set）、弱集合（WeakSet）、映射（Map）、弱映射（WeakMap）。接下来，我们一...
2019-07-31 23:17:03
223
原创 荀令衣香--JavaScript全对象方法总结
前言对象（object）是 JavaScript 最重要的数据结构。ES6中的重大升级，更使其如虎添翼，关于数据结构本身的改变，详见《纵深精耕--ES6对JS对象的极大提升》。这次先把JS中的对象方法做一次最详全的展示。这篇的结构与拙文《拘神遣将--最详全的JS数组方法总结》相仿，在此省略赘述。开始之前，劣者依旧先将本文谈到的方法（21个）按讲解次序阵列下方，供读者参考：ES5：...
2019-07-28 17:51:26
271
原创 拘神遣将--最详全的JavaScript数组方法总结
前言本文试图地将JS中包含的全部的数组方法尽数列举，介绍它们每一个的定义、用法，并附带一些实例甚至应用场景。因此篇幅不会很短，但绝不冗长。内容覆盖ES5和ES6中的31种数组方法 ，介绍顺序先ES5后ES6，对于相似方法会进行类比，但不会连带。为求准确，所有方法的描述文案均引自一些JS领域的权威，本文中引用的文案如下：ES5部分来自 《MDN（MozillaDeveloper...
2019-07-21 14:20:40
446
原创 Vue中的变异数组
心余力绌的对象在Vue中，如果直接修改对象属性的值，将不会触发响应式，就是说在改变数据的同时，页面内容并不会随之改变。这是什么原因？原因在于：Vue的响应式系统是基于 Object.defineProperty（） 这个方法的，该方法可以监听对象中某个元素的获取或修改，经过了该方法处理的数据，我们称其为响应式数据。但是，该方法有一个很大的缺点，新增属性或者删除属性不会触发监听。...
2019-07-06 23:06:46
804
原创 火列星屯--最强大的CSS布局方案
一、总论首先给出结论：网格布局（Grid）是最强大的 CSS 布局方案。虽说如此，但是仍要重视具体的应用场景，如果有其他写法可以提高代码的简洁和可读性，未必非要选择Gird不可。网格布局就如同它的字面意思，利用它可以比较灵活的将网页分割成若干网格，并且可以把这些网格进行多种组合，搭配出各式各样的布局。目前浏览器已经内置了网格布局，借助网格布局可以摒弃复杂繁多的CSS代码或框架而实现...
2019-07-05 12:37:54
766
原创 JS数组四种for循环写法
前言前端开发中经常涉及到数组的相关操作：去重、过滤、求和、数据二次处理等等。都需要我们对数组进行循环。为了满足各种需求，JS除了提供最简单的for循环，在ES6和后续版本中也新增的诸如：map、filter、some、reduce等实用的方法。各个方法都有他们的应用场景，过分追求性能，往往会忽略语义和可读性。冷静地分析一下，如果只谈性能，显然是 for > forEach >...
2019-04-11 17:11:46
8082
原创 使用 git pull --rebase 的好处
有一种场景是经常发生的。大家都基于develop拉出分支进行并行开发，这里的分支可能是多到数十个。然后彼此在进行自己的逻辑编写，时间可能需要几天或者几周。在这期间你可能需要时不时的需要pull下远程develop分支上的同事的提交。这是个好的习惯，这样下去就可以避免你在一个无用的代码上进行长期的开发，回头来看这些代码不是新的代码。甚至是会面临很多冲突需要解决，而这个时候你可能还需要对冲突...
2019-04-11 15:19:26
2037
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人