大前端
关注
分享
扫一扫
文章平均质量分 81
爱玲姐姐
大家好，我是计爱玲，英文名：Cathy，是一名前端开发工程师，热爱解锁各种前端新技术。我的爱豆是王一博，当然我也想认识更多同行的帅哥，
我的微信jal517486222,欢迎加我好友交流编程技术*^_^*
个人网站：https://jiailing.com
展开
-
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 · 2010 阅读 · 0 评论 -
React 服务端渲染框架：Next.js
React 服务端渲染框架：Next.js文章出处： 拉 勾 大前端 高薪训练营练习代码地址Next.js是React服务端渲染应用框架.用于构建SEO友好的SPA应用.支持两种预渲染方式，静态生成和服务器端渲染.基于页面的路由系统，路由零配置自动代码拆分.优化页面加载速度.支持静态导出，可将应用导出为静态网站.内置CSS-in-JS库styled-jsx方案成熟，可用于生产环境，世界许多公司都在使用应用部署简单，拥有专属部署环境Vercel,也可以部署在其他环境.一、创建 N原创 2021-01-19 07:47:38 · 1528 阅读 · 0 评论 -
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 · 1071 阅读 · 0 评论 -
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 · 2985 阅读 · 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 · 1069 阅读 · 0 评论 -
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 · 2230 阅读 · 1 评论 -
React Hooks 学习笔记
React Hooks 学习笔记文章出处： 拉 勾 大前端 高薪训练营1. React Hooks 介绍1.1 React Hooks 是用来做什么的对函数型组件进行增强，让函数型组件可以存储状态，可以拥有处理副作用的能力，让开发者在不使用类组件的情况下，实现相同的功能。1.2 类组件的不足（Hooks 要解决的问题）缺少逻辑复用的机制为了复用逻辑增加无实际渲染效果的组件，增加了组件层级，显示十分臃肿，增加了调试的难度以及运行效率的降低类组件经常会变得很复杂难以维护将一组相干的原创 2021-01-06 08:38:58 · 1045 阅读 · 0 评论 -
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 · 1005 阅读 · 0 评论 -
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 · 1043 阅读 · 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 · 802 阅读 · 0 评论 -
Virtual DOM 及 Diff 算法 - 学习笔记
Virtual DOM 及 Diff 算法 文章出处：拉 勾 大前端 高薪训练营1. JSX 到底是什么使用 React 就一定会写 JSX，JSX 到底是什么呢？它是一种 JavaScript 语法的扩展，React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML，但它确实是 JavaScript 。在 React 代码执行之前，Babel 会对将 JSX 编译为 React API.<div className="container"> <h3>.原创 2020-12-15 18:52:09 · 1169 阅读 · 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 · 2211 阅读 · 0 评论 -
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 · 1352 阅读 · 1 评论 -
大前端学习 - 就业篇
大前端学习 - 就业篇文章出处：拉 勾大前端高薪训练营买了大前端第一期的课程，是5月13号正式开课的，今天已经11月下旬了，这么快就已经过去了6个月。最近一个月里，我放慢了学习进度，主要是在准备面试的事情。班主任人很好，遇到不错的岗位都会帮我推推，还有那些同学们，也令我好感动，他们找工作的时候，也都帮我也问问，真是一群热心善良的好胖友。10月尾的时候，拉 勾联合京东搞了一场专场招聘，导师连夜帮我们改简历。我当时晚上发简历给导师的时候，已经快十一点了，结果导师帮我看了简历之后，觉得我的简历不够好，原创 2020-11-22 15:46:15 · 1257 阅读 · 2 评论 -
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 · 1322 阅读 · 0 评论 -
大前端课程 - 4.5个月学习总结
大前端课程 - 4.5个月学习总结文章内容输出来源：大前端高薪训练营时光匆匆如白驹过隙，4.5个月的大前端课程学习，让我收获了很多，也意识到虽然知识是有限的，但是随着学习的深入，发现自己不会的知识也越来越多。从几个方面记录一下最近的学习的情况吧。一、课程内容我现在已经学习了30%了，看似好像很慢，其实并不是慢，而是因为内容太丰富了，每个 Part 都有好几个模块，而每个模块差不多要学2个星期左右，因为每个模块讲的就是一个技术方向的大知识点，这些一个个模块单独拎出来都可以当一门或者几门那种几百块原创 2020-09-29 22:16:46 · 2359 阅读 · 2 评论 -
大前端学习笔记 -- Vite实现原理
Vite实现原理一、Vite介绍1. Vite概念Vite是一个面向现代浏览器的一个更轻更快的web应用开发工具它基于ECMAScript标准原生模块系统（ES Modules）实现2. Vite项目依赖Vite@vue/compiler-sfc3. 基础使用vite serve / vite build在执行vite serve的时候不需要打包，直接开启一个web服务器，当浏览器请求服务器，比如请求一个单文件组件，这个时候在服务器端编译单文件组件，然后把编译的结果返回给浏览器原创 2020-09-29 17:59:18 · 1787 阅读 · 2 评论 -
大前端学习笔记 -- Vue.js 3.0响应式系统原理
Vue.js 3.0响应式系统原理一、介绍1. Vue.js响应式回顾Proxy对象实现属性监听多层属性嵌套，在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和length属性可以作为单独的模块使用2. 核心函数eactive/ref/toRefs/computedeffecttracktrigger二、Proxy对象回顾1. 在严格模式下，Proxy的函数得返回布尔类型的值，否则会报TypeErrorUncaught Ty原创 2020-09-29 17:59:39 · 1072 阅读 · 0 评论 -
Vue3.0实现todoList案例
Vue3.0实现todolist案例代码地址：https://gitee.com/jiailing/lagou-fed/tree/master/fed-e-task-03-05/code/04-todolist1. ToDoList功能列表添加待办事项删除待办事项编辑待办事项切换待办事项存储待办事项2. 项目结构使用vue脚手架创建Vue项目，先升级vue-cli，4.5.6版本的vue-cli创建项目时可以选择vue版本。Vue CLI 的包名称由 vue-cli 改成了 @v原创 2020-09-29 18:00:07 · 5629 阅读 · 1 评论 -
大前端学习笔记 -- Composition API
Composition API一、Composition API使用1. 使用Vue3.0先创建一个空文件夹，然后进入文件夹执行npm init -y，再执行npm install vue@3.0.0-rc.1安装vue3.0创建index.html，vue3.0的使用<body> <div id="app"> x: {{ position.x }} <br> y: {{ position.y }} <br> </div原创 2020-09-29 18:00:27 · 1257 阅读 · 1 评论 -
大前端学习笔记--Vue.js 3.0
Vue.js 3.0 介绍文章内容输出来源：大前端高薪训练营一、Vue.js 源码组织方式1. 源码采用TypeScript重写提高了代码的可维护性。大型项目的开发都推荐使用类型化的语言，在编码的过程中检查类型的问题。2. 使用Monorepo管理项目结构使用一个项目管理多个包，把不同功能的代码放到不同的package中管理，每个功能模块都可以单独发布，单独测试，单独使用。3. 不同构建版本Vue3中不再构建UMD模块化的方式，因为UMD会让代码有更多的冗余，它要支持多种模块化的方式。V原创 2020-09-29 22:17:58 · 3551 阅读 · 0 评论 -
大前端学习笔记 -- 封装Vue.js组件库
封装Vue.js组件库一、组件库介绍1. 开源组件库Element-UIIView2. 组件开发方式CDD自下而上从组件级别开始，到页面级别结束3. CDD的好处组件在最大程度上被重用并行开发可视化测试二、处理组件边界情况vue中处理组件边界情况的API1. $root01-root.vue<template> <div> <!-- 小型应用中可以在 vue 根实例里存储共享数据 组件中可以通过 $原创 2020-09-29 22:27:06 · 1459 阅读 · 2 评论 -
大前端学习笔记 - 静态站点生成（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 · 3435 阅读 · 1 评论 -
大前端学习笔记 -- 搭建自己的服务器端渲染 (SSR)
搭建自己的SSR一、渲染一个Vue实例mkdir vue-ssrcd vue-ssrnpm init -ynpm i vue vue-server-renderderserver.jsconst Vue = require('vue')const renderer = require('vue-server-renderer').createRenderer()const app = new Vue({ template: ` <div id="app原创 2020-09-29 17:54:45 · 2242 阅读 · 1 评论 -
大前端学习笔记 -- 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 · 2847 阅读 · 1 评论 -
大前端学习 -- 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 · 1785 阅读 · 1 评论 -
大前端学习 -- 服务端渲染 学习笔记
服务端渲染文章内容输出来源：大前端高薪训练营一、概述1. 基于客户端渲染的前端框架AngularReactVue2. SPA单页应用优点：用户体验好开发效率高渲染性能好可维护性好缺点：首屏渲染时间长不利于SEO3. 借鉴传统的服务器渲染4. 客户端激活为SPA5. 同构应用通过服务端渲染首屏直出，解决SPA应用首屏渲染慢以及不利于SEO问题通过客户端渲染结果页面内容交互得到更好的用户体验这种方式通常称之为现代化的服务端渲染，也叫同构渲染这种方原创 2020-09-29 22:29:32 · 1167 阅读 · 0 评论 -
大前端学习--Vuex状态管理
Vuex状态管理文章内容输出来源：大前端高薪训练营一、组件内的状态管理流程1. 状态管理state：驱动应用的数据源view：以声明方式将state映射到视图actions：相应在view上的用户输入导致的状态变化二、组件间通信方式1. 父组件给子组件传值子组件通过props接受数据<template> <div> <h2>{{title}}</h2> </div></templa原创 2020-09-29 22:29:13 · 940 阅读 · 0 评论 -
大前端学习--两个多月来的收获与进步 学习总结
两个多月来的收获与进步有多少作为大前端课程的第一期学员，我已经学了2个多月了，课程质量和教学水平如何不用再重复了，之前在大前端高薪训练营 心得体会+学习笔记这篇文章里已经说过了。这两个月来有很多人向我打听这个课程如何，我都给予推荐态度。市场上的前端网课那么多，然而真正有难度、有深度的课程，少之又少，这个课程我是认可的。2020年有件一直压抑着我的事情，这周末应该算是结束了吧，所以心情有点愉悦，下周准备加大马力学习了。今晚来记录一下这两个多月来的收获与进步，好记性不如烂笔头，我习惯了隔段时间就随笔写一原创 2020-09-29 22:24:45 · 8976 阅读 · 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 · 2036 阅读 · 4 评论 -
大前端学习 -- 虚拟 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 · 1213 阅读 · 0 评论 -
大前端学习 -- 手写Vue响应式实现
手写Vue响应式实现Vue响应式一、数据驱动1.数据响应式数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率2. 双向绑定数据改变，视图改变；视图改变，数据也随之改变我们可以使用v-modle在表单元素上创建双向数据数据3. 数据驱动是Vue最独特的特性之一开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图二、数据响应式的核心原理1. Vue原创 2020-09-29 22:22:07 · 1432 阅读 · 0 评论 -
大前端学习 -- 手写 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 · 1113 阅读 · 0 评论 -
大前端学习--规范化标准 学习笔记
规范化标准 学习笔记规范化标准为什么要有规范化标准软件开发需要多人协同不同开发者具有不同的编码习惯和喜好不同的喜好增加项目维护成本每个项目或者团队需要明确统一的标准哪里需要规范化标准代码、文档、甚至是提交日志开发过程中人为编写的成果图代码标准化规范最为重要实施规范化的方法编码前人为的标准约定通过工具实现Lint常见的规范化实现方式ESLint 工具使用定制ESLint校验规则ESLint对TypeScript的原创 2020-09-29 22:22:41 · 1695 阅读 · 2 评论 -
大前端学习--模块化开发 学习笔记
模块化开发与规范化标准 学习笔记模块化开发模块化开发时当前最重要的前端开发范式之一 模块化只是思想一、模块化演变过程Stage1 文件划分方式污染全局作用域命名冲突问题无法管理模块依赖早起模块化完全依靠约定Stage2 命名空间方式每个模块只暴露一个全局对象，所有模块都挂载到这个对象上减少了命名冲突的可能但是没有私有空间，模块成员可以在外部被访问或修改模块之间的依赖关系没有得到解决Stage3 IIFE 立即执行函数使原创 2020-09-29 22:21:32 · 1680 阅读 · 3 评论 -
大前端学习--使用node、grunt、gulp实现前端项目工程化（含视频讲解）
使用node、grunt、gulp实现前端项目工程化我把录制的项目讲解视频也放在下面了，本宝宝是不是很贴心????????????????????????????????????????????????1. 概述脚手架实现的过程，并使用NodeJS完成一个自定义的小型脚手架工具脚手架的实现过程就是在启动脚手架之后，自动地去询问一些预设问题，通过回答的结果结合一些模板文件，生成项目的结构。使用NodeJS开发一个小型的脚手架工具：用yarn init初始化一个空文件夹：jal-pro在pa原创 2020-06-24 17:53:31 · 1401 阅读 · 0 评论 -
大前端学习--开发脚手架与自动化构建工作流封装
开发脚手架与自动化构建工作流封装去年6月24号开始工作，到今天刚好一周年了，纪念一下，分享最近学习的前端工程化笔记。一、前端工程化前端工程化是指遵循一定的标准和规范，通过工具去提高效率、降低成本的一种手段。1. 前端开发中遇到的问题想要使用ES6+新特性，但是兼容有问题想要使用Less/Sass/PostCSS增强CSS的编程性，但是运行环境不能直接支持想要使用模块化的方式提高项目的可维护性，但运行环境不能直接支持部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器多人原创 2020-06-24 17:41:24 · 1567 阅读 · 0 评论