爱玲姐姐的博客

记录学习的点点滴滴~ 如有写得不恰当之处，请在评论区留言，我的邮箱会立刻收到您的评论。如果您觉得写得不错，请给我点个赞再走吧~如有更多问题探讨也可以加我qq:517486222,微信jal517486222

原创 2022苏州微软前端社招面经

2022苏州微软前端社招面经面试形式：线上视频面试，使用Microsoft Teams软件，可以开启摄像头和屏幕共享。第一轮面试时间：2022-3-24 10:30 时长：1小时先是英文自我介绍，然后英文交流几句，差不多十来分钟吧。我的英文自我介绍是提前准备过，背的滚瓜烂熟了，为的就是防止面试时一紧张就卡顿结巴😂。然后面试官让我用英文介绍一下快排算法，我就随便讲了讲，其实我英文也不是很好，主要就几个关键词：quick sort, partition, two arrays, base va

2022-04-02 11:09:50 5777 10

原创 Vscode中使用Git可视化面板管理代码仓库 - 视频教程

Vscode中使用Git可视化面板管理代码仓库 - 视频教程一、视频演示： 1.本地初始化Git仓库推送到远程 2.拉取远程Git仓库到本地 3.git的增删改文件操作

2021-01-24 14:24:33 5316 9

原创 React 静态站点生成器： Gatsby

React 静态站点生成器： Gatsby文章出处：拉勾大前端高薪训练营练习代码地址Gatsby 是一个静态站点生成器,官网地址是：https://www.gatsbyjs.cn/一、静态应用的优势访问速度快更利于 SEO 搜索引擎的内容抓取部署简单二、Gatsby 总览基于 React 和 GraphQL, 结合了 webpack, babel, react-router 等前端领域中最先进工具，开发人员开发体验好；采用数据层和UI层分离而不失 SEO 的现代前端开发

2021-01-19 07:52:09 1753

原创 React 服务端渲染框架：Next.js

React 服务端渲染框架：Next.js文章出处：拉勾大前端高薪训练营练习代码地址Next.js是React服务端渲染应用框架.用于构建SEO友好的SPA应用.支持两种预渲染方式，静态生成和服务器端渲染.基于页面的路由系统，路由零配置自动代码拆分.优化页面加载速度.支持静态导出，可将应用导出为静态网站.内置CSS-in-JS库styled-jsx方案成熟，可用于生产环境，世界许多公司都在使用应用部署简单，拥有专属部署环境Vercel,也可以部署在其他环境.一、创建 N

2021-01-19 07:47:38 1447

原创 React 原生实现服务端渲染

React 原生实现服务端渲染文章出处：拉勾大前端高薪训练营练习代码地址一、服务器端渲染快速开始1. 实现 React SSR引入要渲染的 React 组件通过 renderToString 方法将 React 组件转换为 HTML字符串将结果 HTML 字符串响应到客户端renderToString 方法用于将 React 组件转换为 HTML 字符串，通过 react-dom/server 导入.2. webpack 打包配置问题: Node 环境不支持 ESM.

2021-01-19 07:45:09 1023

原创 Chakra-UI 学习笔记

Chakra-UI 学习笔记文章出处：拉勾大前端高薪训练营现代化 React UI 框架 Chakra-UI1. Chakra-UI 介绍Chakra UI是一个简单的，模块化的易于理解的UI组件库.提供了丰富的构建React应用所需的U|组件.文档: https://next.chakra-ui.com/docs/getting-startedChakra UI内置Emotion,是CSS-IN-JS解决方案的集大成者基于Styled-Systems https://style

2021-01-06 08:45:36 2788 1

原创 CSS-IN-JS 学习笔记

CSS-IN-JS 学习笔记文章出处：拉勾大前端高薪训练营集成 CSS 代码在 JS 文件1. 为什么会有 CSS-IN-JSCSS-IN-JS 是 WEB 项目中将 CSS 代码捆绑在 JS 代码中的解决方案，这种方案旨在解决 CSS 的局限性，例如缺乏动态功能，作用域和可移植性。2. CSS-IN-JS 介绍CSS-IN-JS 方案的优点：让CSS代码拥有独立的作用域，阻止CSS代码泄露到组件外部，防止样式冲突。让组件更具可移植性，实现开箱即用，轻松创建松耦合的应用程序。

2021-01-06 08:44:01 978

原创 Formik 学习笔记

Formik 学习笔记文章出处：拉勾大前端高薪训练营1. Formik1.1 Formik 介绍增强表单处理能力，简化表单处理流程官网1.2 Formik 下载npm install formik2. Formik 增强表单2.1 Formik 基本使用使用 formik 进行表单数据绑定以及表单提交处理import { useFormik } from 'formik'function App () { const formik = useFormik({ini

2021-01-06 08:41:26 2183 1

原创 React Hooks 学习笔记

React Hooks 学习笔记文章出处：拉勾大前端高薪训练营1. React Hooks 介绍1.1 React Hooks 是用来做什么的对函数型组件进行增强，让函数型组件可以存储状态，可以拥有处理副作用的能力，让开发者在不使用类组件的情况下，实现相同的功能。1.2 类组件的不足（Hooks 要解决的问题）缺少逻辑复用的机制为了复用逻辑增加无实际渲染效果的组件，增加了组件层级，显示十分臃肿，增加了调试的难度以及运行效率的降低类组件经常会变得很复杂难以维护将一组相干的

2021-01-06 08:38:58 1007

原创 React状态管理工具 - MobX学习笔记

React状态管理工具 - MobX文章出处：拉勾大前端高薪训练营1. Mobx 简介1.1 Mobx 介绍简单，可扩展的状态管理库Mobx 是由 Mendix（代码开发平台）, Coinbase（比特币公司）, Facebook 开源和众多个人赞助商所赞助的React 和 Mobx 是一对强力组合， React 负责渲染应用状态， Mobx 负责管理应用状态供 React 使用1.2 MobX 浏览器支持MobX 5 版本运行在任何支持 ES6 Proxy的浏览器，不支持 IE

2020-12-28 21:11:29 965

原创 React 状态管理工具 - Redux 学习笔记

React 状态管理工具 - Redux文章出处：拉勾大前端高薪训练营1. Redux 核心1.1 Redux 介绍JavaScript 状态容器，提供可预测化的状态管理1.2 Redux 核心概念及流程Store: 存储状态的容器，JavaScript 对象View: 视图，HTML页面Actions: 对象，描述对状态进行怎样的操作Reducers: 函数，操作状态并返回新的状态1.3 Redux 使用：计数器案例<!DOCTYPE html><h

2020-12-28 21:09:58 938 3

原创 React基本使用 - 学习笔记

React基本使用文章出处：拉勾大前端高薪训练营1. React 介绍React 是一个用于构建用户界面的 JavaScript 库，它只负责应用的视图层，帮助开发人员构建快速且交互式的 web 应用程序。React 使用组件的方式构建用户界面。2. JSX 语法在 React 中使用 JSX 语法描述用户界面，它是一种 JavaScript 语法扩展。在 React 代码执行之前，Babel 会将 JSX 语法转换为标准的 JavaScript API。JSX 语法就是一种语

2020-12-15 18:55:55 773

原创 Virtual DOM 及 Diff 算法 - 学习笔记

Virtual DOM 及 Diff 算法文章出处：拉勾大前端高薪训练营1. JSX 到底是什么使用 React 就一定会写 JSX，JSX 到底是什么呢？它是一种 JavaScript 语法的扩展，React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML，但它确实是 JavaScript 。在 React 代码执行之前，Babel 会对将 JSX 编译为 React API.<div className="container"> <h3&gt.

2020-12-15 18:52:09 1083 1

原创 React核心源码解读 - 学习笔记

《1. 配置 React 源码本地调试环境使用 create-react-app 脚手架创建项目npx create-react-app react-test弹射 create-react-app 脚手架内部配置npm run eject克隆 react 官方源码 (在项目的根目录下进行克隆)git clone --branch v16.13.1 --depth=1 https://github.com/facebook/react.git src/react链接本地源码/

2020-12-15 18:47:15 1926

原创 Fiber 学习笔记

Fiber 学习笔记文章出处：拉勾大前端高薪训练营1. 开发环境配置1.1 文件夹结构文件 / 文件夹描述src存储源文件dist存储客户端代码打包文件build存储服务端代码打包文件server.js存储服务器端代码webpack.config.server.js服务端 webpack 配置文件webpack.config.client.js客户端 webpack 配置文件babel.config.jsonbabel

2020-12-15 18:44:29 1284 1

原创 2020.11.12 北京字节前端电话面试

2020.11.12 北京字节前端电话面试当时没有及时做记录，现在想想还是得记录一下，能想起来多少是多少这次面试是包包同学推的，本来简历筛选都没过，是包包极力推荐才有了面试机会，真的很感谢包包1. redux中间件有了解吗2. Hooks有了解吗3. Canvas了解吗4. 开发过程中图表组件用的是是什么，看过Echarts的源码吗5. 在开发过程中遇到了哪些难点...

2020-11-22 15:53:55 1508 6

原创大前端学习 - 就业篇

大前端学习 - 就业篇文章出处：拉勾大前端高薪训练营买了大前端第一期的课程，是5月13号正式开课的，今天已经11月下旬了，这么快就已经过去了6个月。最近一个月里，我放慢了学习进度，主要是在准备面试的事情。班主任人很好，遇到不错的岗位都会帮我推推，还有那些同学们，也令我好感动，他们找工作的时候，也都帮我也问问，真是一群热心善良的好胖友。10月尾的时候，拉勾联合京东搞了一场专场招聘，导师连夜帮我们改简历。我当时晚上发简历给导师的时候，已经快十一点了，结果导师帮我看了简历之后，觉得我的简历不够好，

2020-11-22 15:46:15 1223 2

原创 2020-11-19 南京途牛前端现场面试

2020-11-19 南京途牛前端现场面试一、笔试由于是在现场做的笔试，还交了手机，所以不记得具体选项了，只能记录个大概1. （选择题）哪一个不是XmlHttpRequest对象的属性2. （选择题）NodeJS是什么3. （填空题）几行JS代码，考察this问题，要填链式调用的函数内部的this访问的属性的输出结果4. （填空题）几行JS代码，考察var、let定义变量的作用域问题，要填一个变量的输出结果5. （问答题）Linux发行版的优缺点6. （问答题）Linux中如何在/opt/t

2020-11-22 10:12:51 1435

原创 2020-11-19百度前端一面面试题

2020-11-19百度前端一面面试题视频面试的，聊了一个多小时，对方是个93年的小哥哥，我没答上来的地方，他都会再跟我讲一遍，人很好。这次我就简单的记录一下题目了如何实现水平垂直居中Position属性的几种区别讲一下盒子模型BFC怎么实现如何实现左右固定，中间自适应的布局用JS实现一个柯里化函数用JS实现一个栈实现一个TS类，如Partial 、TickJS任务执行机制HTTPS的是如何进行数据加密的...

2020-11-21 09:14:10 3060 6

原创 NodeJS的框架Express

Express总结内容来自今年寒假在家学习的一个PPT1. Express框架简介及初体验1.1 Express框架是什么Express是一个基于Node平台的web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。我们可以使用 npm install express 命令进行下载。1.2 Express框架特性提供了方便简洁的路由定义方式对获取HTTP请求参数进行了简化处理对模板引擎支持程度高，方便渲染动态HTML页面提供了中间件机制有效控制HTTP请求拥有大量第三方

2020-11-11 19:00:36 922

原创 node结合art-template 模板引擎创建模板文件

art-template 模板引擎1. art-template 模板引擎的基础概念1.1 art-template 模板引擎art-template 模板引擎是第三方模块。让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。 // 未使用模板引擎的写法 var ary = [{ name: '张三', age: 20 }]; var str = '<ul>'; for (var i = 0; i < ary.length; i++) { str

2020-11-11 13:49:59 850

原创 Webpack重要知识点快速汇总

Webpack 的面试考点Webpack 已经是前端打包构建的不二选择每日必用，面试必考webpack是一个成熟的工具，重点在于配置和使用，原理并不高优一、基本配置安装配置yarn add webpack webpack-cli -Dhash是为了前端在代码不变的情况下命中缓存，从本地读取，提高速度mode: 'production',entry: path.join(srcPath, 'index.js'),output: { path: distPath, filenam

2020-11-07 08:14:03 1071

原创 2020.10.29腾讯QQ音乐社招前端电话一面总结

2020.10.29腾讯QQ音乐社招前端电话一面总结面试官晚上19:16打过来的，聊了44分钟，到八点准备结束的。无论过没过，都记录一下面试过程吧，也可以让各位没面过腾讯的打工人知道面试过程中的具体细节是怎么样的，并不是问几个大问题，而是在几个大问题的基础上根据你的回答，再去问一些小问题。前言【面试官】：先自我介绍下吧【我】：我现在是在南京工作，工作一年多了，公司里用的是React框架，接下来我也打算以React为主技术栈。【面试官】：嗯，没了吗【我】：嗯…【面试官】：你换工作的原因是什.

2020-10-30 17:09:23 5232 21

原创 Babel在面试过程中的考点

Babel在面试过程中的考点Babel功能：解析JS新语法，转化成低版本语法供浏览器使用。一、环境搭建 & 基本配置yarn init -yyarn add @babel/cli @babel/core @babel/preset-env @babel/plugin-transform-runtime -Dyarn add @babel/polyfill @babel/runtimebabel配置文件.babelrc ：{ "presets": [ [ "@b

2020-10-29 07:08:02 1149

原创 2020.10.27 北京阿里大文娱一面总结

2020.10.27 北京阿里大文娱一面总结先说结果：没过????☹️????☹️????☹️晚上七点中面试官准时打来了电话，他先是自我介绍了一下，然后就说今晚的面试就是沟通几个问题的思路和方向，没有标准答案，都是开放性题目。嗯···果然如此~~~你们公司的项目工作流程是怎样的？【我】：什么流程···？【面试官】：就是产品这边谁跟你对接？有没有约定？接到项目需求后有没有系统化分析和评审？一直到上线的过程是怎样的？【我】：我们一般是技术经理跟我们对接，技术经理去跟产品那边对接，项目需求也都是技术

2020-10-28 08:04:01 1248 4

原创 2020.10.20英语前端电话面试总结

2020.10.20英语前端电话面试总结人生第二次前端面试，这次面的这个前端岗位是需要有很好的英语口语沟通能力的，我英语很差，面试官让我用英语自我介绍几句就说了解到了我的水平了，嘤嘤嘤···所以英语这方面就没什么好说的了，我也知道自己英语差~所以还是记录一下问到的技术方面的题目吧1. 对函数式编程的理解【我的回答】：函数式编程是一种编程范式，相同的输入永远得到相同的输出，不会产生副作用。【面试官】：嗯···（我答得不是很全面）参考答案：阮一峰老师《函数式编程初探》："函数式编程"是一种"

2020-10-24 13:33:30 4431 12

原创大前端课程学习心得体会+学习笔记

大前端课程学习心得体会+学习笔记心得体会已经学习了两周半的大前端课程了，课程质量真的是好得没话说，我看过很多前端的课程，但从没有哪家课程能将前端的知识体系划分的如此全面细致，还能保证每一个知识点还都能讲得如此透彻，在讲知识点的基础上还能开篇幅去讲思想，更是难得。比如下面的函数式编程，这种编程范式我之前从来都没使用过，更不知道柯里化、函数组合为何物。直到在拉钩大前端课程中，每一个知识点的学习，都让我有种重获新生的感觉，仿佛以前学习的东西都白学了，只知道简单的用法，不了解核心原理，更不会用高级特性。现在每学

2020-09-30 10:36:23 9037 12

原创大前端学习 -- NuxtJS学习笔记

NuxtJS学习笔记文章内容输出来源：大前端高薪训练营代码仓库地址：https://gitee.com/jiailing/nuxtjs-demo，在多个分支里都有代码一、Nuxt.js是什么一个基于Vue.js生态的第三方开源服务端渲染应用框架它可以帮我们轻松的使用Vue.js技术栈构建同构应用官网：https://zh.nuxtjs.org/Github仓库：https://github.com/nuxt/nuxt.js二、Nuxt.js的使用方式初始化项目已有的Node.j

2020-09-30 10:35:37 1745 1

原创大前端学习 -- 虚拟 DOM 和 Diff 算法学习笔记

虚拟 DOM 和 Diff 算法Virtual DOM的实现原理一、Virtual DOM介绍1. 什么是Virtual DOMVirtual DOM（虚拟DOM），是由普通的JS对象描述DOM对象，因为不是真实的DOM对象，所以叫做Virtual DOM真实的DOM成员非常非常多，所以创建一个DOM对象的成本非常高可以通过Virtual DOM来描述真实DDOM，示例：{ sel: 'div', data: {}, text: 'Hello Virtual DOM'

2020-09-29 22:30:36 1136

原创大前端学习 -- 手写 Vue Router

手写 Vue RouterVue-Router代码仓库地址：https://gitee.com/jiailing/lagou-fed/tree/master/fed-e-task-03-01/code/06-my-vue-routervue-router核心代码:App.vue<template> <div id="app"> <div id="nav"> <router-link to="/">Home</route

2020-09-29 22:30:01 1078

原创大前端学习 -- 服务端渲染学习笔记

服务端渲染文章内容输出来源：大前端高薪训练营一、概述1. 基于客户端渲染的前端框架AngularReactVue2. SPA单页应用优点：用户体验好开发效率高渲染性能好可维护性好缺点：首屏渲染时间长不利于SEO3. 借鉴传统的服务器渲染4. 客户端激活为SPA5. 同构应用通过服务端渲染首屏直出，解决SPA应用首屏渲染慢以及不利于SEO问题通过客户端渲染结果页面内容交互得到更好的用户体验这种方式通常称之为现代化的服务端渲染，也叫同构渲染这种方

2020-09-29 22:29:32 1128

原创大前端学习--Vuex状态管理

Vuex状态管理文章内容输出来源：大前端高薪训练营一、组件内的状态管理流程1. 状态管理state：驱动应用的数据源view：以声明方式将state映射到视图actions：相应在view上的用户输入导致的状态变化二、组件间通信方式1. 父组件给子组件传值子组件通过props接受数据<template> <div> <h2>{{title}}</h2> </div></templa

2020-09-29 22:29:13 854

原创大前端学习笔记 -- 封装Vue.js组件库

封装Vue.js组件库一、组件库介绍1. 开源组件库Element-UIIView2. 组件开发方式CDD自下而上从组件级别开始，到页面级别结束3. CDD的好处组件在最大程度上被重用并行开发可视化测试二、处理组件边界情况vue中处理组件边界情况的API1. $root01-root.vue<template> <div> <!-- 小型应用中可以在 vue 根实例里存储共享数据组件中可以通过 $

2020-09-29 22:27:06 1385 2

原创大前端学习--两个多月来的收获与进步学习总结

两个多月来的收获与进步有多少作为大前端课程的第一期学员，我已经学了2个多月了，课程质量和教学水平如何不用再重复了，之前在大前端高薪训练营心得体会+学习笔记这篇文章里已经说过了。这两个月来有很多人向我打听这个课程如何，我都给予推荐态度。市场上的前端网课那么多，然而真正有难度、有深度的课程，少之又少，这个课程我是认可的。2020年有件一直压抑着我的事情，这周末应该算是结束了吧，所以心情有点愉悦，下周准备加大马力学习了。今晚来记录一下这两个多月来的收获与进步，好记性不如烂笔头，我习惯了隔段时间就随笔写一

2020-09-29 22:24:45 8715 8

原创大前端学习 -- Vue.js源码分析（响应式、虚拟DOM、模板编译和组件化）-- 总结

Vue.js源码分析（响应式、虚拟DOM、模板编译和组件化）Vue.js源码剖析-响应式原理一、准备工作1. Vue源码的获取项目地址：https://github.com/vuejs/vueFork一份到自己仓库，克隆到本地，可以自己写注释提交到GitHub为什么分析Vue2.6到目前为止Vue3.0的正式版还没有发布新版本发布后，现有项目不会升级到3.0，2.x还有很长的一段过渡期3.0项目地址：http://github.com/

2020-09-29 22:23:12 1980 4

原创大前端学习--规范化标准学习笔记

规范化标准学习笔记规范化标准为什么要有规范化标准软件开发需要多人协同不同开发者具有不同的编码习惯和喜好不同的喜好增加项目维护成本每个项目或者团队需要明确统一的标准哪里需要规范化标准代码、文档、甚至是提交日志开发过程中人为编写的成果图代码标准化规范最为重要实施规范化的方法编码前人为的标准约定通过工具实现Lint常见的规范化实现方式ESLint 工具使用定制ESLint校验规则ESLint对TypeScript的

2020-09-29 22:22:41 1653 2

原创大前端学习 -- 手写Vue响应式实现

手写Vue响应式实现Vue响应式一、数据驱动1.数据响应式数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率2. 双向绑定数据改变，视图改变；视图改变，数据也随之改变我们可以使用v-modle在表单元素上创建双向数据数据3. 数据驱动是Vue最独特的特性之一开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图二、数据响应式的核心原理1. Vue

2020-09-29 22:22:07 1385

原创大前端学习--模块化开发学习笔记

模块化开发与规范化标准学习笔记模块化开发模块化开发时当前最重要的前端开发范式之一模块化只是思想一、模块化演变过程Stage1 文件划分方式污染全局作用域命名冲突问题无法管理模块依赖早起模块化完全依靠约定Stage2 命名空间方式每个模块只暴露一个全局对象，所有模块都挂载到这个对象上减少了命名冲突的可能但是没有私有空间，模块成员可以在外部被访问或修改模块之间的依赖关系没有得到解决Stage3 IIFE 立即执行函数使

2020-09-29 22:21:32 1604 3

原创大前端学习笔记 -- NuxtJS项目案例--RealWorld（Nuxt脚手架创建项目、Git Actions自动发布和PM2部署）

NuxtJS项目案例–RealWorld（创建Nuxt项目、Git Actions自动发布和部署）一、案例项目realworld介绍1. 案例项目介绍案例名称：RealWorld这是一个开源的学习项目，目的就是帮助开发者快速学习新技能。GitHub仓库：https://github.com/gothinkster/realworld在线实例：https://demo.realworld.io/2. 案例相关资源页面模板：https://github.com/gothinkster/real

2020-09-29 22:19:02 2652 1

原创大前端学习笔记 - 静态站点生成（Gridsome静态站点方案、GraphQL查询数据、Strapi生成接口、自动部署到Vercel）

静态站点生成文章内容输出来源：大前端高薪训练营一、Gridsome基础知识1. Gridsome是什么一个免费、开源、基于VUE.js技术栈的静态网站生成器官方网址：https://gridsome.orgGitHub: https://github.com/gridsome/gridsome2. 什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具这个功能也叫做预渲染生成的网站不需要类似PHP这样的服务器只需要放到支持静态

2020-09-29 22:18:30 3299 1