七月是我的生日-CSDN博客

原创 eventloop 和宏任务和微任务的概述

1.什么是eventLooper事件循环机制？因为js是单线程执行的，所以js中将任务分为了同步任务和异步任务。其中同步任务进入主线程，异步任务进入任务队列。当主线程上的同步任务执行完毕之后，主线程就会从任务队列读取异步任务进入主线程执行。2.宏任务，微任务。其中异步任务又会分为宏任务和微任务。宏任务和微任务的分类。宏任务：setTimeoutsetInterval微任务：process.nextTickPromise的then方法微任务和宏任务的执行分析微任务和宏任务的问

2021-03-29 17:24:02 272 1

原创剑指offer（JS版刷题） git仓库

每个题有对应的题解和代码，代码均为 javascript 版本。git仓库地址：javascript 版剑指offer刷题库

2021-03-01 20:19:45 249

原创泛型重点学习

1.泛型是什么？泛型的关键目的是在成员之间提供有意义的约束，这些成员可以是：类的实例成员、类的方法、函数参数和函数返回值。‘// 举个例子// 定义一个 demo 函数，接受一个参数并且返回function demo(value){ return value;}console.log(demo(1)); //1console.log(demo('kjh')); //'kjh'// 接着我们对 demo 函数做适当的调整，以支持 TypeScript 的 Number 类型的参

2021-02-20 10:48:25 437 1

原创算法：时间复杂度&&空间复杂度

时间复杂度为O(1)的例子(1) if(i === 1)(2) a = 1 | result = 3 + 4 | result = n*2 | result = 1000*1000(3) array.push('a') array.pop()(4) map.set(1,1) map.get(1,1)在计算复杂度的时候，O(1)一般会被忽略。时间复杂度O(n)的操作(1) for(let i = 0; i < n : i++)(2) while(n)时间复杂度O(n^

2021-02-10 16:46:58 339

原创 React源码01：实现React.createElement 方法以及 ReactDOM.render 方法

关于 React.CreateElement 实现转化 jsx 语法在开始之前，我们必须搞清楚一些概念，我们定义一个如下的 jsx ：const jsx = ( <div> <h2>CountFunc:{countFunc}</h2> <button onClick={handlerClick} type="button"> countFunc + 1 </button>

2021-02-03 15:31:48 663

原创 leecode03: 无重复的最长子串

无重复字符的最长子串题解：1.设置一个零时数组存储字符串元素。2.遍历字符串，每一次都将元素 push 进数组，同时通过 indexOf 检查push进去的元素是否重复3.重复的话，绝对是0，index，所以从数组中删除 0,index + 1,同时记录数组的长度4.依次直到遍历到最后一个字符let lengthOfLongestSubstring = function (str) { let maxArr = []; let maxLen = 0; let len = str..

2021-01-21 21:18:11 102 1

原创前端进阶：（符合 promise A+规范）手写Promise

很多小伙伴应该像我一样，promise用了很久了，什么promise.all, promise.race, 甚至是 async， await 都玩的头头是道，但是，，但是面试碰到手写promise 就拉垮了。痛心疾首，于是乎下定决定抽出来时间（上班摸????），分析了一波手写promise，然后分享一下。第一步：先写一个 promise 的基本结构我们先想一下promise最重要的是什么？三种状态，两个参数，以及 then 的链式调用。于是乎，一个简单的 promise 结构就出来了。clas

2021-01-21 17:29:30 183 2

原创 leecode01: 两数之和

解题思路：1.创建一个map2.for循环渲染nums数组3.用target - i，计算哪个数可以和当前数字想家得到target4.检查map里面有没有这个数，如果有则返回结果，如果没有则将num[i]当作key，i当作value（方便map.has()查找）function Sum(nums, target) { let map = new Map(); for (let i = 0; i < nums.length; i++) { const complement .

2021-01-18 21:08:48 126

原创 javascript处理树形结构数据（级联选择器，省市县联动）

后端返回给我们数据：const dataList = [ { id: 1, pid: 0, name: '服装类', }, { id: 2, pid: 0, name: '手机类', }, { id: 3, pid: 0, name: '食品类', }, { id: 4, pid: 1, name: '连衣裙', }, { id: 5, pid: 2,

2021-01-18 17:03:41 1943 2

原创 JavaScript 设计模式 - 002：单例模式

JavaScript 常用设计模式002: 单例模式***单例模式介绍：***单例模式（Singleton Pattern）是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。为什么我们要使用单例子模式呢？先来看一个需求：校长安排王老师和康老师，想要给全校的同学根据性别选择他们的体育课

2020-12-31 17:51:11 123

原创 JavaScript 设计模式 - 001工厂模式

JavaScript 常用设计模式001: 工厂模式工厂模式介绍：工厂模式（Factory Pattern）是 JavaScript 中最常用的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。在工厂模式中，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。为什么我们要使用工厂模式呢？先来看一个需求：我们想要将同学们根据文理课来规划同学们所要学习的subject。先看第一种普通方法： function Student(n

2020-12-31 16:39:39 175

原创 Flutter -＞ dart 结束（抽象类和接口）

dart 类 -> 抽象类dart 抽象类主要用于定义标准，子类可以继承抽象类，也可以实现抽象类接口。抽象类通过abstract 关键字来定义。抽象类不可以被实例化，只有继承他的子类可以。子类继承抽象类必须实现里面的抽象方法。抽象类作为接口，必须实现抽象类里面的所有属性和方法。多态就是父类定义一个属性或者方法，父类不去实现，让子类去实现，这就叫多态。举个例子(抽象类/多态)/** 定义一个Animal 类要求它的子类必须包含eat方法 */abstr

2020-12-17 19:43:11 262

原创 Flutter -＞dart 02 函数和类

dart 函数dart 函数的基本演示main(){ //dart 函数 //系统内置方法 print('内置方法'); //调用我写的自定义方法 printInfo(); //定义返回值为int的方法 (局部方法) int myNum(){ int a = 123; return a; } print(myNum());}//定义自定义无返回值方法 (全局方法)void printInfo() { print('我是一个自定义

2020-12-17 11:12:43 148

原创 Flutter - ＞dart基础01

安装 dart sdk略。dart 初试//dart 中所有代码都以main函数为基础main() { print('hello dart');}//没有返回值的main函数void main(){ print('hello dart!');}一：dart 数据类型string 类型//定义字符串 String first_name = 'kang'; var last_name = 'jiahao'; // var 在定义字符串的时候会有一个自动类型推断的

2020-12-16 12:10:35 113

原创 [字节跳动前端·一二三面 + hr面 + 实习offer面试总结]

写在前面：

2020-10-31 11:02:49 5154 2

原创【快手一面二面实习offer面试总结】

写在前面：就其实自己是没有写面试总结这个习惯的，暑假去百度实习的时候，就有朋友让我写一下面试总结呀之类的，但是面试时间真的挺久（视频面试），好多东西都忘了，一直到实习回来就把学的新的技术挣了12篇博客发了，没有我预期中的爆炸访问量，demo特没有很多访问量，我就好奇是不是因为我么有设置付费（哈哈哈哈，调皮一下）。其实从暑假开始实习，自己就规划好了，开学了在11月份左右找实习，再去北京（对了，北京真的挺好的，除了房租贵，车堵云云）。然后从国庆开始，review了一下react知识，学了Typescript

2020-10-30 10:38:13 9503 17

原创跨域问题处理（JSONP，CORS,webpack-dev-server,nginx）

本文主要讲解一些跨域的处理，附有部分源码。JSONP跨域方式JSONP跨域原理**JSONP **是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。当GET请求从后台页面返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用后台页面中的一个callback函.

2020-10-07 16:06:37 1330 2

原创从0到1手动配置Webpack（webpack优化配置）

前面我们讲解了webpack的进阶配置等。接下来我们讲解webpack的简单优化。1：noParse在webpack配置中添加 noParse选项： module:{ noParse:/jquery/, },如上表示，webpack在打包的时候，不去加载jquery中的依赖库。也是第一个我们对webpack的优化方法。2：ignorePlugin需要使用webpack内置插件：let webpack = require("webpack");webpac.

2020-10-03 22:19:05 469

原创从0到1手动配置Webpack（webpack进阶配置）

上一篇文章，我们讲解了webpack的基本配置，这一篇文章，我们将讲解webpack进阶常用配置。1 webpack打包多页应用新建一个webpack应用：在src文件夹下创建 index.js , home.js;之后配置如下webpack；let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { mode:'development.

2020-10-03 20:48:52 387

原创从0到1手动配置Webpack（webpack基本配置）

1.认识webpack（grunt/gulp的区别和联系）webpack是一个现代的javascript应用的静态模块打包工具。webpack的功能：代码转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布webpack中前端模块化介绍前端模块化方案： AMD, CMD,CommonJS, ES6.项目通过模块化开发完成了之后，还需要处理模块间的各种依赖，并且将其进行整合打包。webpack其中的一个核心就是让我们进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是

2020-10-02 18:18:33 581

原创 React开发中的一些问题(待补充）

1.redux修改数据引起的性能问题上一篇redux文章中讲到了，我们在reducer中重新修改数据的时候，需要复制一份state（浅拷贝），防止我们原本的数据被修改，之后进行数据修改。我们在文件中的代码如下所示：function reducer(state = defaultState, action) { switch(action.type) { case actionTypes.CHANGE_TOP_BANNERS: return {...sta

2020-09-23 01:14:20 191

原创记一次愉快项目开发中详细使用redux的过程（配置 + 数据请求）

写在前面在现在我对于redux的了解基本就属于会做一些简单操作，但是真正在开发中去做一写请求什么的，绝壁狗die，所以我来重新整理一次开发中redux的使用过程，理理思路。虽然现在我不会，maybe，写完这个文章我就豁然开朗了。------------------------------------------------------------------------------------------------------------------------------------第一部分首先说

2020-09-21 21:42:08 939 3

原创 React项目开发准备流程

1.云音乐项目规范1.项目介绍。。。。。。2.项目规范项目开发规范以及代码风格1.文件夹和文件名称统一使用小写，多个单词以连接符（-）连接。2.JavaScript变量名称采用小驼峰标识，常量全部使用大写字母，组件采用大驼峰。3.CSS采用普通CSS和styled-component结合来编写（全局采用普通CSS，局部采用styled-component）4.整个项目不在使用class组件，统一使用函数式组件，并且全面拥抱Hooks5.所有的函数式组件，为了避免不必要的渲染，全部是同

2020-09-19 17:38:12 906

原创 React-Hooks从0到1

1:为什么需要react-HooksHook 时react 16.8的新增特性，它可以让我们在不编写class的情况下使用state以及其他的react特性（比如生命周期）class组件相对于函数式组件的优势（1）√√√ class组件可以定义自己的state，用来保存组件内部的状态。xxx 函数式组件不可以，因为函数每次调用都会产生新的临时变量。（2）√√√ class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑。比如在componentDIdMount种发

2020-09-17 20:18:07 343

原创 react-router深入浅出

1.改变页面路由的两种方式监听hash的改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><bo

2020-09-15 21:56:49 271

原创 React --- 深入浅出redux

1.为什么需要redux？2.redux核心理念StoreActionreducer3.redux三大原则

2020-09-12 17:04:20 196

原创 React中过渡动画以及纯函数的使用

在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验。当然，我们可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画。React曾为开发者提供过动画插件react-addons-css-transition-group，后由社区维护，形成了现在的react-transition-gro这个库可以帮助我们方便的实现组件的入场和离场动画，使用时需要进行额外的安装:1.学习使用 react-tra.

2020-09-08 22:05:13 252

空空如也

空空如也