Youzi Blog

Youzi的Blog--开发笔记

Async Function

async 函数 async 函数是 ES2017 标准引入的，看关键字就可以想到是用于异步操作的函数，我们在上一章讲过了 Generator 函数的异步用法，为什么还要引入新的函数呢，事实上 async 函数并不是新的，只是 Generator 函数的语法糖，并且在其基础上做了一些改进。 含义 上一章开头我们写了一个 ajax 的例子，这章接着用这个例子来讲解； 1 2 3 4 5...

Posted by Youzi Blog on January 17, 2020

Generator Asynchronicity

Generator 函数在异步编程中的应用 众所周知 JS 是单线程语言，同一时刻只有一个任务在执行，所以就出现了异步编程的方式，在 ES6 之前已经有了异步编程的解决方案，而 Generator 函数也提供了异步操作的方法； 异步 异步(Asynchronicity)指的是任务的不连续性，一个异步任务通常可以被分成多段执行，期间可以穿插其他任务作为前置或者后置； 举个例子，比如 A...

Posted by Youzi Blog on January 13, 2020

Generator

Generator Generator 是一个函数的类型，是 ES6 提供的一种异步编程方案；之所以说是异步的，原因是其函数内部封装了多种状态，函数并不会顺序执行，而是需要手动调用函数的next方法，从上一个状态，转移到下一个状态，期间会执行状态转移的中间代码，是不是和Iterator接口很像； 和Iterator接口更像的地方是，Generator 函数会返回一个遍历器对象，可以调用这...

Posted by Youzi Blog on January 7, 2020

Iterator For Of

ES6 新特性学习第九篇 Iterator | for of ES6 中新增了Map | Set两种表示集合的数据结构，这样就有了Object | Array | Map | Set四种结构可以来表示一组数据，为了统一使用一种遍历访问的接口机制来访问这些数据结构，而创建了Iterator（遍历器），只要数据结构部署了 Iterator 接口，就可以完成遍历操作；Iterator 作用有三...

Posted by Youzi Blog on January 3, 2020

Reflect

Reflect 语法及使用 Reflect是 ES6 中用来操作对象的 API； 在 ES6 之前我们只能使用Object.method来访问原生对象的内部方法，ES6 语法将大部分内部方法加到了Reflect上，所以我们现在可以使用Reflect.defineProperty这样的形式来调用内部方法； 这个方法还修改了一些内部方法的返回值，使用Object.definePropert...

Posted by Youzi Blog on December 19, 2019

Defineproperty 使用

Object.defineProperty在 Vue2.0 的应用 在 ES6 之前，没有Proxy类用于代理劫持对象，通常会通过Object.defineProperty来实现对象属性的拦截，在 Vue2.0 版本中，使用这一属性实现了双向数据绑定，即数据的变化会引起 vDOM 的更新，从而更新实际 DOM。 基础语法 我们知道一个对象的属性，具有如下六个描述： value：...

Posted by Youzi Blog on December 13, 2019

Animation 学习笔记

css3 动画学习笔记 animation 所谓动画，不过是让一个元素从一种 CSS 样式，变为另一种，这么一个过程，当然也不仅限于一种样式，播放动画时可以变化很多次，本节主要记录一些 CSS3 的 animation 属性用法和例子。 语法 语法上和其他属性是一样的，animation 属性是一个简写的属性，包含以下六个： 值 描述 ...

Posted by Youzi Blog on November 14, 2019

Webpack 静态资源加载

前端 webpack 项目打包时，静态资源加载问题 backup: 项目脚手架为 vue-cli 2.x 版本，3.x 版本的配置文件不一样，后续有用到再补充。 起因 开发环境代码正常运行，各类资源加载正常，上到生产环境时，出现部分静态资源无法加载的问题，基本认为是 webpack 打包配置有问题，本文记录查找问题并修复的过程。 前提 服务器前端项目路径为/dist/......

Posted by Youzi Blog on October 11, 2019

Iconfont使用技巧

封装 Icon 的 Vue 组件实例 前言 本文主要介绍使用阿里矢量图标库iconfont.cn，在 Vue 项目中对 icon 进行组件封装，使得图标库便于后续开发使用。 关于 icon-font 的 4 种使用方法 官网介绍在代码中的应用有 4 种方式https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419....

Posted by Youzi Blog on October 10, 2019

数据类型及转换

关于JS数据类型和强制类型转换的一些点 从一些例题来引入话题： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 var bar = true; console.log(bar + 0); // 1 console.log(bar + 'xyz'); // truexyz console.log(ba...

Posted by Youzi Blog on July 24, 2019

牛客刷题

整数反转 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 /** * @description: 递归实现整数反转 * @param {一个整数} * @return: 反转后的字符串，有需要的话可以用Number.parseInt()转换成Number */ const reverse = (num) => { f...

Posted by Youzi Blog on July 8, 2019

Js 深拷贝

关于数组、对象、对象数组的深拷贝 浅拷贝和深拷贝一般是相对于内存指向来讲的，对于数组和对象，如果直接使用赋值运算符，这只是把数组或对象的内存地址赋值给了新的变量，比如： 1 2 3 let origin = [1, 2, 3] let target = origin target[0] = 10 // origin => [10, 2, 3] 可以看到，操作新变量和操作原变量...

Posted by Youzi Blog on June 18, 2019

每日一道题

每日一道面试题 前言 由git仓库：https://github.com/Advanced-Frontend/Daily-Interview-Question提供的面试问题，做一个自己的每日答题记录。 76题 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 // 第 76 题：输出以下代码...

Posted by Youzi Blog on June 12, 2019

Js 防抖&节流

JS 防抖和节流 针对触发频率太高和响应很慢的问题 造成这个问题的主要原因是程序没有对事件响应做一定的限制，如果在短时间内触发频率很高，那么响应事件也会堆积很多，特别是当事件包含了网络请求，会一直向服务器发送请求，所以会希望程序不要频繁的触发响应事件。 实际应用场景 监听短时间内重复触发率很高的事件，如滚动条滚动事件onscroll，窗口大小改变onresize...

Posted by Youzi Blog on June 6, 2019

每日一题

每日一道面试题 前言 由git仓库：https://github.com/Advanced-Frontend/Daily-Interview-Question提供的面试问题，做一个自己的每日答题记录。 这一篇主要记录非代码性质的问题。 72题 CSS的BFC / IFC / GFC / FFC FC: Formatting Contexts，是页面中的一块渲染区域，这块区域...

Posted by Youzi Blog on May 15, 2019

Git Version Control

采用 git 作为源代码管理系统。 版本管理策略 最新的开发在 master 上进行。 每次发布和部署，都要建立一个对应的版本。版本号采用【分支类型业务名称版本号】的格式，例子：F_Project1_V1.0 ，F 代表 features，Project1 为业务名称，版本号为 V1.0。 线上版本的 bug 升级在对应版本上建立开发分支，相应的修改根据需要 mer...

Posted by Youzi Blog on May 9, 2019

Es6 Learning Notes 8th

ES6 新特性学习第八篇 前言 ⑧ 多说辽，这篇是Proxy。 Proxy Proxy字面意思是代理，像是网络请求层面的服务器代理、反向代理一样，是在实际的执行层面架设一层拦截，可以对外部的访问进行过滤和改写。Vue.js 3.0就用了这个方法实现了双向数据绑定。 写到最后感觉得提出来的一个点：Proxy 对操作的拦截只针对 Proxy 实例对象上 语法 let pro...

Posted by Youzi Blog on April 25, 2019

每日一道题

每日一道面试题 前言 由git仓库：https://github.com/Advanced-Frontend/Daily-Interview-Question提供的面试问题，做一个自己的每日答题记录。 先将已有的放上来，有的问题是选择性记录的。 55题 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 /*...

Posted by Youzi Blog on April 22, 2019

Js 牛客 刷题记录

牛客网刷题记录 替换空格 问题：请实现一个函数，将一个字符串中的每个空格替换成“%20”。例如，当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。 实现： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function replaceSpace(str) { // write code here l...

Posted by Youzi Blog on April 1, 2019

Https Handshake

HTTPS 本文主要介绍HTTPS的原理及握手过程。 用途 HTTPS作为HTTP协议的替代协议，主要提升了通信过程的安全，避免了一些中间人攻击，包括中间人窃取数据包，篡改数据包，中间人冒充通信双方等。 针对以上三种攻击方式，协议需要对数据包进行加密，即使中间人窃取到了数据包也无法理解；另外需要对数据包校验，确保没有被篡改；最后还需要对通信双方进行身份认证。 加解密 HTTPS协...

Posted by Youzi Blog on March 29, 2019

FEATURED TAGS
JavaScript webpack 项目配置 面试 npm JS CSS Vue 前端 react
ABOUT ME

写代码的臭弟弟

FRIENDS