前端菜鸟的学习历程
文章平均质量分 79
菜鸟小七_hhh
努力努力再努力!!! 加油加油再加油!!!
展开
-
React事件系统
react事件系统原创 2022-12-06 19:28:06 · 531 阅读 · 1 评论 -
Fiber
fiber 是 React 16 对React核心算法的依次重写。Fiber 会使原本同步的渲染过程变成异步的。原创 2022-12-06 16:50:36 · 574 阅读 · 0 评论 -
web性能优化(下)
web性能优化原创 2022-12-06 11:19:06 · 284 阅读 · 0 评论 -
前端性能优化
web性能监测与优化原创 2022-12-06 09:52:42 · 175 阅读 · 0 评论 -
package.json中bin的用法
package.json中bin的用法原创 2022-06-10 19:06:19 · 2018 阅读 · 0 评论 -
Javascript中的堆栈存储
堆、栈堆: 动态分配的内存,大小不定也不会自动释放。栈:自动分配的内存空间,它由系统自动释放;js的数据类型基础数据类型(存储于栈内存)undefinednullbooleanstringnumbersymbolbigint引用数据类型(存储于堆内存,栈内存存储指针,指向堆内存地址)objecta. functionb. arrayc. dated. mathe. regexp因为引用类型值的大小是不固定的,所以只能将其存储在可以动态分配内存的堆空间中。原创 2022-05-27 16:37:13 · 285 阅读 · 0 评论 -
React 基础
React介绍React是用于构建用户界面的JavaScript库。在React中all in js,一切使用的都是JavaScript。React只负责应用程序的视图层,在react中没有把构建用户界面和构建用户界面的逻辑进行区分,所以使用react可以轻松构建出强交互式的web应用程序,在react当中是使用组件的方式来构建用户界面的。JSX 语法在React中使用jsx语法描述用户界面,他是一种JavaScript语法扩展在React代码执行之前,Babel会将JSX语法转换为标准的J原创 2021-02-24 19:55:26 · 2298 阅读 · 2 评论 -
Vue.js 3.0
Vue.js 3.0 和2.0的区别源码组织方式的变化vue3.0的源码全部采用TypeScript重写。(在大型项目中推荐使用类型化的语言)使用Monorepo管理项目。使用一个项目管理多个包,把独立的功能模块都提取到不同的包中,把不同功能的包放到一个package里面管理,这样每个功能模块划分都很明确,模块之间的依赖关系也很明确,并且每个功能模块都可以单独测试单独发布单独使用packages目录结构Composition API(组合API)他是为了解决在遇到大型项目时,遇到超大组件使原创 2021-01-23 11:48:47 · 6448 阅读 · 0 评论 -
封装Vue组件库
组件库介绍组件开发方式CDD自下而上从组件级别开始,到页面级别结束好处:组件在最大程度上被重用并行开发可视化测试、处理组件便捷情况$attrs 把父组件中非prop属性绑定到内部组件。注:如果是class和style属性的话还是会绑定到子组件最外层标签上的。$listeners 把父组件中的DOM对象的原生事件绑定到内部组件$root 获取根实例$parent 获取父组件实例$children 获取子组件实例provide/inject 依赖注入。注:inject进来原创 2021-01-17 16:36:31 · 744 阅读 · 0 评论 -
SSR
Vue SSR 介绍Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染(同构应用)解决方案使用它可以构建同构应用使用场景:更快的首屏渲染速度更好的 SEO搭建自己的服务器端渲染 (SSR)渲染一个Vue实例npm init -ynpm i vue vue-server-renderderindex.js// 第 1 步:创建一个 Vue 实例 const Vue = require("vue");原创 2021-01-17 15:38:08 · 609 阅读 · 0 评论 -
Nuxt.js发布部署
使用命令打包https://zh.nuxtjs.org/guide/commands配置命令,package.json中添加如下内容、令描述nuxt启动一个热加载的web服务器(开发模式)nuxt build利用 webpack 编译应用,压缩 JS 和 CSS 资源(发布用)。nuxt start以生产模式启动一个 Web 服务器 (需要先执行nuxt build)。nuxt generate编译应用,并依据路由配置生成对应的 HTML 文件 (用于原创 2020-12-30 19:38:18 · 1465 阅读 · 0 评论 -
Nuxt.js现代化服务端渲染
现代化的服务端渲染对于Vue所构建的单页面应用(SPA)虽然具有用户体验好,渲染性能好,可维护高等优点。但也有一些缺陷,其中只要涉及两点:首屏加载时间长因为用户需要等待客户端JS解析执行完成才能看到页面不利于SEO当搜索引擎爬取网站HTML文件时,单页应用的HTML没有内容,因为他需要客户端JS解析才能生成网页内容。因此,就出现了现代化的服务端渲染,也叫同构渲染。就是指服务端构建渲染+客户端构建渲染。Nuxt.js 是一个基于 Vue.js 生态开发的一个第三方服务端渲染框架,通过它我们可原创 2020-12-26 11:15:06 · 578 阅读 · 0 评论 -
Vuex状态管理
Vue最核心的两个功能:数据驱动和组价化。组件化开发的优势就是:更快的开发效率和更好的可维护性状态管理包含以下几部分:state:驱动应用的数据源view:以声明的方式将state映射到视图actions:响应在view上的用户输入导致的状态变化什么是vuexVuex是专门为Vue.js设计的状态管理库它采用集中式的方式存储需要共享的数据从使用的角度,他就是一个JavaScript库他的作用是进行状态管理,解决复杂组件通信,数据共享什么情况下使用Vuex多个视图依赖于同一状原创 2020-12-22 14:39:06 · 870 阅读 · 0 评论 -
Vue源码解析
主要目录结构scripts:构建相关的脚本和配置文件dist:构建后的文件flow:Flow的类型声明packages:vue-server-render 和 vue-template-compiler,它们作为单独的NPM包发布test:所有的测试代码examples:实例代码types:TypeScript 类型定义src:源代码compiler : 与模版编译相关的代码core : Vue核心库(通用的、与平台无关的运行时代码)observer :实现变化侦测的代码vdom原创 2020-12-20 15:38:28 · 6317 阅读 · 3 评论 -
实现一个小型Vue
数据驱动数据响应式、双向绑定、数据驱动数据响应式数据响应式中的数据指的是数据模型,在vue中数据模型仅仅是普通的js对象,而当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率双向绑定(包含数据响应式)数据改变,视图改变,视图改变,数据也随之改变我们可以使用v-model在表单元素上创建双向数据绑定数据驱动是Vue最独特的特性之一在vue开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图数据响应式核心原理vue2.x官方文档说明如下原创 2020-12-03 11:02:42 · 269 阅读 · 0 评论 -
Virtual DOM
Virtual DOMVirtual DOM(虚拟DOM)。是由普通的JS对象来描述DOM对象,因为不是真实的DOM对象,所以叫Virtual DOMVirtual DOM的好处是当状态发生改变时不需要立即更新DOM,只需要创建一个虚拟树来描述DOM,Virtual DOM内部将弄清楚如何有效(diff)的更新DOM虚拟DOM可以维护程序的状态,跟踪上一次的状态通过比较前后两次状态的差异更新真实DOM虚拟DOM的作用维护视图和状态的关系复杂视图情况下提升渲染性能除了渲染DOM以外,还可原创 2020-11-30 11:59:19 · 379 阅读 · 0 评论 -
Vue-Router原理实现
router回顾router的使用步骤:创建路由相关的组件(视图)注册路由插件,调用vue.use注册VueRouter创建router对象,同时配置路由规则注册router对象,就是在创建vue实例的时候,在选项里面配置创建好的router对象通过router-view设置占位,当路径匹配成功之后会将匹配到的组件替换router-view的位置通过router-link创建链接补充:Vue.use的作用是注册组件,内部接收一个参数,如果参数是函数,则vue.use直接调用函数注册组件,原创 2020-11-26 09:58:53 · 213 阅读 · 0 评论 -
规范化标准
EsLint最为束流的JavaScript Lint工具 检测JS代码质量ESLint很容易统一开发者的编码风格ESLint可以帮助开发者提升编码能力ESLint安装步骤初始化项目安装ESLint模块为开发依赖 npm install eslint --save-dev通过CLI命令验证安装结果 npx eslint --version npx是npm最新版本中集成的工具,只要安装最新版本的npm 就可以使用npx命令ESLint检查步骤编写“问题”代码使用eslint执行检测原创 2020-11-22 12:01:37 · 182 阅读 · 0 评论 -
Rollup ES Modules打包器
相比于webpack,Rollup更为小巧。但Rollup仅仅是一款ESM打包器,Rollup中并不支持类似HMR这种高级特性。他的目的就是提供一个充分利用ESM各项特性的高效打包器原创 2020-11-21 16:01:38 · 2807 阅读 · 0 评论 -
Webpack
模块打包工具的由来引入模块化会产生的问题:ES Modules存在环境兼容问题模块文件过多,网络请求频繁所有的前端资源都需要模块化由此就需要模块打包工具编译代码。将开发阶段编写的包含新特性的代码转换为能够兼容绝大多数浏览器环境的代码、将散落的模块文件打包到一起支持不同类型的前端资源类型,可以构成对于整个前端应用的模块化方案模块化工具概要Webpack将零散的模块代码打包到同一个js文件当中将需要编译转换的代码通过模块加载器(Loader)进行编译转换代码拆分,将应用当中的代码原创 2020-11-20 20:43:40 · 168 阅读 · 0 评论 -
模块化开发
模块化概述模块化只是一个思想,并不包含具体的实现模块化的演变过程stage1:文件划分方式最原始的文件划分,具体的做法就是将每个功能以及相关的一些状态数据单独存放到不同的文件当中,约定每一个文件就是一个独立的模块,然后将模块引入到页面当中,一个srcipt标签对应一个模块,在代码当中直接调用模块当中的全局成员,成员有可能是变量也有可能是函数,缺点:1. 污染全局作用域,2.命令冲突问题,3.无法管理模块之间的依赖关系。完全依靠约定。stage2:命名空间方式约定每一个模块只暴露出一个全局的原创 2020-11-18 20:49:07 · 429 阅读 · 0 评论 -
前端工程化(下)之自动化构建
自动化构建自动化:通过机器代替手工完成一些工作构建:转换开发中的自动化构建就是把开发中写出来的代码自动的转换成生产环境可以运行的代码,这个过程叫做自动化构建工作流npm scripts实现自动化构建最简单的方式。主要解决在项目开发阶段重复的一些命令,可以在里面定义一些与项目开发有关的脚本命令,这样就可以让这些命令跟着项目一起维护,便于后期在开发过程中的使用键名:命令的名称值:需要执行的命令注:scripts可以自动的去发现node_modules里面的命令,所以不需要写完整的命令,只需要写命原创 2020-11-13 17:59:46 · 155 阅读 · 0 评论 -
前端工程化(上)之 脚手架工具
工程化概述工程化之前主要面临的问题传统语言或语法的弊端无法使用模块化/组件化重复的机械式工作代码风格不统一、质量不保证依赖后端服务接口支持整体依赖后端项目工程化表现一切以提高效率、降低成本、质量保证为目的的手段都属于【工程化】一些成熟的工程化集成:create-react-appvue-cliangular-cligatsby-cli脚手架工具前端工程化的发起者脚手架的本质作用创建项目基础结构、提供项目规范和约定相同的组织结构相同的开发范式相同的模块依赖原创 2020-11-12 18:48:42 · 681 阅读 · 0 评论 -
JavaScript性能优化
内存管理内存: 由可读写单元组成,表示一片可操作空间管理:人为的去操作一片空间的申请、使用和释放内存管理:开发者主动申请空间、使用空间、释放空间管理流程:申请—使用—释放JavaScript中的垃圾回收JavaScript中内存管理是自动的对象不再被引用时是垃圾对象不能从根上访问到时是垃圾JavaSrcipt中的可达对象可以访问到的对象就是可达对象(引用,作用域链)可达的标准是从根出发是否能被找到JavaScript中的根就可以理解为是全局变量对象GC算法介原创 2020-11-05 15:57:37 · 154 阅读 · 0 评论 -
ECMAScript新特性
JavaScript是ECMAScript的扩展语言,ECMAScript只提供了基础的语法。在浏览器环境中:js = Bom + Dom + ECMAScript在浏览器环境中:js = fs + net+ ECMAScript +etc.JavaScript语言本身指的就是ECMAScript。ES2015新特性:解决原有语法上的一些问题或者不足(例如let,const所提供的块级作用域)对原有语法进行增强(例如解构,展开,模板字符串)全新的对象,全新的方法,全新的功能(例如promi原创 2020-11-02 10:38:59 · 189 阅读 · 0 评论 -
TypeScript
TypeScript是JavaScript超集(superset)TypeScript 安装(npm)安装typescript依赖npm i typescript -D这一步安装完成之后其实就可以使用tsc命令来执行TypeScript的相关代码了配置tsconfig.json文件tsc --init 生成的配置文件如下:{ "compilerOptions": { "target": "es5", // 指定ECMAScript目标版本 "lib": ["ES2015原创 2020-10-30 17:57:44 · 235 阅读 · 0 评论 -
TypeScript前篇类型系统与Flow
TypeScript是一门基于JavaScript之上的编程语言,它解决了JavaScript语言自有的类型系统的不足。通过使用Type Scrip大大的提高了代码的可靠程度。类型系统强类型与弱类型(类型安全)弱类型语言层面不会限制实参类型强类型有更强的类型约束,而弱类型中几乎没有什么约束强类型中不允许有随意的隐式类型转换,而弱类型是允许的强类型在编译阶段去限制类型,而弱类型是在运行阶段通过代码层面逻辑判断限制类型变量类型可以随时改变的特点不是强弱类型的差异静态类型与动态类型(类型检查)原创 2020-10-30 14:14:00 · 169 阅读 · 1 评论 -
异步编程
JavaScript是单线程模式,所以在程序运行的过程中,很有可能会由于之前任务执行时间过长而造成后面任务的阻塞。然而虽然js是单线程模式的,但浏览器并不是单线程的,所以就出现了异步编程的解决方案。异步的执行过程以setTimeout为例:将setTimeout压入到调用栈(Call stack)然后内部api(Web APIs)为setTimeout开启了一个倒计时器,这个倒计时器是单独工作的,并不会受到当前js线程影响,所以开启倒计时器后,Call stack对应setTimeout的调用就已原创 2020-10-27 16:25:12 · 130 阅读 · 0 评论 -
函数式编程(下)
之前是函数式编程的一些基础笔记,以下是我认为比较难理解的一些函数式编程的内容,所以单独写一篇笔记。Functor 函子函数式编程运算不直接操作值,而是由函子完成函子具有map方法,map方法可以运行一个函数对值进行处理(变形关系)把函子比喻成一个盒子,这个盒子里封装了一个值想要处理盒子中的值,我们需要给盒子的map方法传递一个处理值的函数(纯函数),由这个函数来对值进行处理最终map方法返回一个包含新值的函子class Container { // of 静态方法,可以省略new关原创 2020-10-25 08:56:15 · 151 阅读 · 0 评论 -
函数式编程(上)
函数式编程函数式编程主要描述的是数据(函数)之间的映射。函数是一等公民函数可以存储在变量中函数可以作为参数函数可以作为返回值高阶函数函数可以作为参数// 模拟封装一个filter,获取一个数组中所有的偶数function filter (arr, fn) { let results = []; for (val of arr) { if (fn(val)) results.push(val); } return results;}原创 2020-10-24 15:03:00 · 141 阅读 · 0 评论