- 博客(163)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 微前端指北
微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端架构与框架无关，每个微应用都可以使用不同的框架。就其性质而言，iframe 可以轻松地从独立的子页面构建页面。它们还在样式和全局变量方面提供了很好的隔离度，不会相互干扰。优点：子应用之间自带沙箱，天然隔离，互不影响可以各自使用完全不同的前端框架；只要每个 iframe 来自同一个来源，可以使用来进行消息传递；
2023-02-14 16:29:09
476
原创 异步编程-Promise
Promise概述两个特点三个缺点用法基本用法链式调用异常处理静态方法Promise.resolve()Promise.reject()Promise 并行执行Promise.all()Promise.race()执行时序：宏任务/微任务手写 PromisePromise/A+ 规范Terminology 【术语】Promise States 【Promise状态】The `then` Method【then 方法】Promise实现1. 完成一个最简单的Promise2. 异步Promise3. then
2021-11-18 17:22:54
282
1
原创 关于 Redux 源码的实现及分析
Redux 源码实现及分析Redux 回顾 PartRedux 实现 及 分析 PartcreateStoregetStatesubscribedispatchenhancerapplyMiddlewarebindActionCreatorscombineReducers完整代码 Link本文将跟随 Crystal 分析并实现 Redux 的几个核心API，包括且不限于 createStore、getState、dispatch、subscribe最终效果可完成对 couter 的基本增减、异步增减功
2021-10-26 18:24:11
173
原创 算法题-字符串中的第一个唯一字符【JS实现】
给定一个字符串，找到它的第一个不重复的字符，并返回它的索引。如果不存在，则返回 -1。Demos = "leetcode"返回 0s = "loveleetcode"返回 2var firstUniqChar = function(s) { const frequency = _.countBy(s); for (const [i, ch] of Array.from(s).entries()) { if (frequency[ch] === 1) {
2021-07-03 10:02:17
342
原创 React设计模式
软件设计原则“开放封闭原则”对拓展开放，对修改封闭“单一职责”原则单一职责原则又叫“单一功能原则”，它指的是一个类或者模块应该有且只有一个改变的原因。通俗来讲，就是说咱们的组件功能要尽可能地聚合，不要试图让一个组件做太多的事情。高阶组件（HOC）:最经典的组件逻辑复用方式高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。——React 官方高阶组件的使用姿势是
2021-06-17 12:57:51
782
原创 算法题-宝石与石头【JS实现】
给定字符串J 代表石头中宝石的类型，和字符串 S代表你拥有的石头。 S 中每个字符代表了一种你拥有的石头的类型，你想知道你拥有的石头中有多少是宝石。J 中的字母不重复，J 和 S中的所有字符都是字母。字母区分大小写，因此"a"和"A"是不同类型的石头。O(j*s)var numJewelsInStones = function (jewels, stones) { let res = 0; for (let s of stones) { for (let j of jewels) {
2021-06-17 07:56:01
215
原创 算法题-最后一个单词的长度【JS实现】
给你一个字符串 s，由若干单词组成，单词之间用空格隔开。返回字符串中最后一个单词的长度。如果不存在最后一个单词，请返回 0 。单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。var lengthOfLastWord = function (s) { return s.trim().split(" ").pop().length;};var lengthOfLastWord = function (s) { let cache = ""; let p = (s = s.trim
2021-06-17 07:31:50
287
原创 React性能优化
React性能优化使用 shouldComponentUpdate 规避冗余的更新逻辑PureComponent + Immutable.jsPureComponentImmutable函数组件的性能优化:React.memo 与 useMemoReact.memouseMemo在 React 中，只要父组件发生了更新，那么所有的子组件都会被无条件更新使用 shouldComponentUpdate 规避冗余的更新逻辑shouldComponentUpdate(nextProps, nextSta
2021-06-16 12:53:41
117
原创 算法题-转换成小写字母【JS实现】
给你一个字符串 s ，将该字符串中的大写字母转换成相同的小写字母，返回新的字符串。/** * @param {string} s * @return {string} */var toLowerCase = function (s) { let str = ""; for (let c of s) { // A - Z => 65 - 90 str += c.charCodeAt() >= 65 && c.charCodeAt().
2021-06-16 07:46:52
193
原创 ReactHooks学习
React hooks 的使用原则只在React 函数中调用Hook不要再循环、条件或嵌套函数中调用Hook1、为什么“不要再循环、条件或嵌套函数中调用Hook”为了确保Hooks在每次渲染时都保持同样的执行顺序2、 Hooks 的正常运作，在底层依赖于顺序链表以 useState 为例，分析 React-Hooks 的调用链路hooks 首次渲染mountState源码mounState 的主要工作是初始化 Hooks// 进入 mounState 逻辑functi.
2021-06-02 12:58:58
109
原创 Webpack5 遇到的问题 & 解决方案
[vue-server-renderer-webpack-plugin] webpack config output.libraryTarget should be “commonjs2”.遇到问题的环境：https://zhuanlan.zhihu.com/p/362094072问题1： [vue-server-renderer-webpack-plugin] webpack config output.libraryTarget should be “commonjs2”找到 /nod..
2021-04-06 18:33:27
914
原创 Nuxt综合案例实现
前言我们要实现的Demo[小伙伴可以自行点进去看看哈~]https://demo.realworld.io/#/以下是当前Demo的相关资源列举：GitHub 仓库 https://github.com/gothinkster/realworld接口文档 https://github.com/gothinkster/realworld/tree/master/api页面模板 https://github.com/gothinkster/realworld-starter-kit/blob/ma
2021-03-31 11:11:11
365
原创 算法题-零钱兑换【JS实现】
https://leetcode-cn.com/problems/coin-change/description/给定不同面额的硬币 coins 和一个总金额 amount。编写一个函数来计算可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额，返回 -1。你可以认为每种硬币的数量是无限的。动态规划var coinChange = function(coins, amount) { const dp = new Array(amount + 1).fill(amount .
2021-03-26 18:14:50
479
原创 算法题-乘积最大子数组【JS实现】
https://leetcode-cn.com/problems/maximum-product-subarray/description/给你一个整数数组 nums ，请你找出数组中乘积最大的连续子数组（该子数组中至少包含一个数字），并返回该子数组所对应的乘积。动态规划/** * @param {number[]} nums * @return {number} */var maxProduct = function(nums) { let res = nums[0], max = .
2021-03-25 17:09:52
244
原创 算法题-最大子序和【JS实现】
https://leetcode-cn.com/problems/maximum-subarray/给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和动态规划dp方程： f(i) = Math.max(f(i), f(i - 1) + nums[i])var maxSubArray = function(nums) { for (let i = 1; i < nums.length; i++) { nums[i] = Mat.
2021-03-25 16:40:00
117
原创 算法题-三角形最小路径和【JS实现】
https://leetcode-cn.com/problems/triangle/description/给定一个三角形 triangle ，找出自顶向下的最小路径和。每一步只能移动到下一行中相邻的结点上。相邻的结点 在这里指的是 下标 与 上一层结点下标 相同或者等于 上一层结点下标 + 1 的两个结点。也就是说，如果正位于当前行的下标 i ，那么下一步可以移动到下一行的下标 i 或 i + 1 。dp方程：dp[i][j] = Math.min(dp[i + 1][j], dp[i + .
2021-03-24 14:16:26
175
原创 算法题-最长公共子序列【JS实现】
https://leetcode-cn.com/problems/longest-common-subsequence/给定两个字符串 text1 和 text2，返回这两个字符串的最长公共子序列的长度。一个字符串的 子序列 是指这样一个新的字符串：它是由原字符串在不改变字符的相对顺序的情况下删除某些字符（也可以不删除任何字符）后组成的新字符串。例如，“ace” 是 “abcde” 的子序列，但 “aec” 不是 “abcde” 的子序列。两个字符串的「公共子序列」是这两个字符串所共同拥有的子序列。
2021-03-23 15:55:43
474
原创 ECMAScript
ECMAScript前言ES2015let与块级作用域const解构数组的解构对象的解构模板字符串字符串的扩展方法函数参数参数默认值剩余参数数组展开箭头函数对象字面量对象扩展方法Object.assignObject.isProxyProxy VS Object.defineProperty()前言我们通常将 ECMA Script 看作是JS的标准化规范，实际上JS是ES的扩展语言。ES只是提供了最基本的语法，并不能支持我们实际应用的功能开发。浏览器中的JS = ES + Web APIs(DOM
2021-03-22 15:35:13
76
原创 算法题-不同路径 II【JS实现】
https://leetcode-cn.com/problems/unique-paths-ii一个机器人位于一个 m x n 网格的左上角 （起始点在下图中标记为 “Start” ）。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角（在下图中标记为 “Finish” ）。现在考虑网格中有障碍物。那么从左上角到右下角将会有多少条不同的路径？动态规划var uniquePathsWithObstacles = function(obstacleGrid) { // obstac
2021-03-22 11:21:49
167
原创 算法题-不同路径【JS实现】
https://leetcode-cn.com/problems/unique-paths一个机器人位于一个 m x n 网格的左上角 （起始点在下图中标记为 “Start” ）。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角（在下图中标记为 “Finish” ）。问总共有多少条不同的路径？动态规划var uniquePaths = function(m, n) { if (m === 0 && n === 0) return 0 let dp =
2021-03-22 11:19:22
139
原创 开篇-学习总览
专栏编写目的记录算法学习过程，以及算法习题的实现专栏更新原则专栏更新主以作者整理笔记的状态，有些知识点可能没有更新到知识链表中，但是以单篇形式存在，直接搜索相关内容查看即可已更新&正在更新知识链表二分查找...
2021-03-21 23:32:10
58
原创 算法题-寻找旋转排序数组中的最小值【JS实现】
链接：https://leetcode-cn.com/problems/find-minimum-in-rotated-sorted-array假设按照升序排序的数组在预先未知的某个点上进行了旋转。例如，数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] 。请找出其中最小的元素。var findMin = function(nums) { let left = 0, right = nums.length - 1; while(left < right) {
2021-03-19 15:28:26
83
原创 模块一：JavaScript深度学习
模块总览当前模块主要围绕以下六个相关知识点展开模块一/函数式编程模块一/JS异步编程模块一/手写Promise模块一/ES新特性模块一/TypeScript模块一/Js 性能优化模块说明本阶段主要围绕 JavaScript 语言本身以及它的周边语言进行深度介绍，让你从深度和广度两方面更深入掌握 JavaScript 这门语言以及相关编程范式，夯实前端开发基础，从而应对大型复杂应用开发，同时也为后期的高阶内容打下坚实的基础。 — 《拉勾教育大前端训练营》补充知识数据结构 深浅拷贝 .
2021-03-18 15:41:12
212
原创 webpack与grunt、gulp 的不同
三者都是前端构建工具，grunt/gulp 在早期比较流行，现在webpack相对来说比较主流，不过轻量化的任务还是会使用 gulp 处理，比如单独打包CSS文件等grunt 和 gulp 是基于任务和流(Task.Stream) 的。类似JQuery，找到一个或一类文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程webpack是基于入口的。webpack会自动递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用P
2021-03-18 15:37:32
215
原创 开篇：学习总览
本专题主要围绕拉勾大前端高薪训练营 学习过程记录专题介绍当前专题主要围绕以下七个相关模块展开模块一：JavaScript深度学习模块二：前端工程化模块三：Vue深入学习模块四：React深入学习模块五：NodeJS 全栈开发模块六：泛客户端开发模块七：商业技术解决方案与高阶技术专题更新说明当前专题为作者的整体学习笔记整理部分，笔记内容会逐步展开，长期更新内容部分说明内容主要为在拉勾教育大前端训练营中的学习笔记，中间会插入一些其他学习资源的相关理解，当前更新内容主要围绕作者..
2021-03-18 15:31:11
78
原创 算法题-搜索二维矩阵【JS实现】
链接：https://leetcode-cn.com/problems/search-a-2d-matrix编写一个高效的算法来判断 m x n 矩阵中，是否存在一个目标值。该矩阵具有如下特性：每行中的整数从左到右按升序排列。每行的第一个整数大于前一行的最后一个整数。二分法的两种实现var searchMatrix = function(matrix, target) { const array = [].concat(...matrix) let left = 0; right = ar
2021-03-18 15:06:51
187
原创 算法题-搜索旋转排序数组【JS实现】
链接：https://leetcode-cn.com/problems/search-in-rotated-sorted-array整数数组 nums 按升序排列，数组中的值 互不相同 。在传递给函数之前，nums 在预先未知的某个下标 k（0 <= k < nums.length）上进行了 旋转，使数组变为 [nums[k], nums[k+1], …, nums[n-1], nums[0], nums[1], …, nums[k-1]]（下标 从 0 开始 计数）。例如， [0,1,2,
2021-03-17 17:58:12
286
原创 函数式编程
前言我们首先来看一下当前篇章的题图，我们按照当前的思维导图来展开学习函数式编程 这个知识点。why-为什么我们需要学习函数式编程past函数式编程是一个非常古老的概念， 早于第一台计算机的诞生。today函数式编程是随着 React 的流行受到越来越多的关注Vue 3也开始拥抱函数式编程函数式编程可以抛弃 this打包过程中可以更好的利用 tree shaking 过滤无用代码方便测试、方便并行处理有很多库可以帮助我们进行函数式开发：lodash、underscore、ramda.
2021-03-08 17:59:05
154
原创 Vue: 点击按钮的时候动态给 data 增加的成员是否是响应式数据
Q： 点击按钮的时候动态给 data 增加的成员是否是响应式数据？如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么let vm = new Vue({ el: '#el' data: { o: 'object', dog: {} }, method: { clickHandler () { // 该 name 属性是否是响应式的 this.dog.name = 'Trump' } }})A：不是响应式数据Vue中data成员是在Vue初始化的
2021-03-04 15:59:57
509
1
原创 谈谈你是如何理解 JS 异步编程的，EventLoop、消息队列都是做什么的，什么是宏任务，什么是微任务？
JS 异步编程JS 是单线程模式工作的（一个时间内只能做一件事），当有较多任务的情况下，任务需要依次排队等待完成，如果遇到某一个或几个任务很耗时的情况就会给用户一种假死的状态，极大地降低了体验效果。为了解决这个问题，提出了异步的工作模式，即不会等待任务的执行，开启任务后立即往后执行下一个任务，耗时任务结束后会自动调用执行传入的回调函数EventLoop单线程意味着所有的任务必须排队依次执行，JS 的任务分为同步任务和异步任务，同步任务会进入主线程中依次执行，遇到异步任务则会将其放入消息队列中等..
2021-03-03 10:05:32
154
原创 miniVue手写实现
// 完整代码案例详见https://gitee.com/CrystalAngelLee/handwritting/tree/master/minivue-handlewritting分析Vue使用结构<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia.
2021-03-02 15:09:05
251
原创 发布订阅模式和观察者模式
发布订阅模式和观察者模式发布订阅模式观察者模式发布订阅模式 VS 观察者模式发布订阅模式订阅者、发布者、信号中心// 具体实现可参考：https://blog.csdn.net/baidu_33591715/article/details/114258885// 事件触发器class EventEmitter { constructor () { // { 'click': [fn1, fn2], 'change': [fn] } this.subs = Object.cr
2021-03-02 02:27:02
150
原创 数据驱动
数据响应式数据：指数据模型基于Vue开发时数据模型是普通的JavaScript对象数据响应式的核心是指当我们修改数据时，视图会进行更新，不需要我们进行任何的DOM操作，提高了开发效率双向绑定双向绑定指的是数据改变，视图改变；视图改变，数据也随之改变双向绑定包含了数据响应式可以使用v-model在表单元素上创建双向数据绑定数据驱动开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图Vue数据响应式原理Vue2.xhttps://cn.vuejs.org/v2/gu
2021-03-02 01:55:03
106
原创 算法题-模拟行走机器人【JS实现】
题目地址：https://leetcode-cn.com/problems/walking-robot-simulation/description/var robotSim = function (commands, obstacles) { let obstacle = {}, x = 0, y = 0, res = 0; let direction = 0; //0 = north, 1 = east, 2 = south, 3 = west for (let i = 0; i &.
2021-03-01 15:57:19
292
原创 EventEmitterの实现
Events 基本介绍Node.js的events 模块对外提供了一个 EventEmitter 对象，用于对 Node.js 中的事件进行统一管理。因为 Node.js 采用了事件驱动机制，而 EventEmitter 就是 Node.js 实现事件驱动的基础。在 EventEmitter 的基础上，Node.js 中几乎所有的模块都继承了这个类，以实现异步事件驱动架构。EventEmitter的简单使用var events = require('events');var eventEmitter
2021-03-01 14:19:21
246
原创 JS异步编程
JS异步编程JS 异步编程方案JS 异步编程的实现方式深入理解异步编程的核心 Promise理解 Generator、Async/await 等异步编程的语法糖GeneratorAsync/awaitJS 异步编程方案JS异步编程的使用回调函数、事件监听、Promise、Generator、async/await什么是同步同步就是在执行某段代码时，在该代码没有得到返回结果之前，其他代码暂时是无法执行的，但是一旦执行完成拿到返回值之后，就可以执行其他代码了。换句话说，在此段代码执行完未返回结果之
2021-03-01 11:07:54
167
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人