好好学习用力吃饭-CSDN博客

原创 Nodejs核心模块(一)

fs的copyFile是针对readFile和writeFile进行实现的，他们都是对文件的一次性操作，对大体积文件来说非常不合适，基于文件读写对大体积文件进行拷贝api的实现// 将A文件拷贝到B文件用read读数据存入buffer 从buffer中取数据写入B文件// 数据完全拷贝const BUFFER_SIZE = buf.length // 每次读取数据的字节数// position指定为null 自动更新读取文件的起始位置if (!console.log('拷贝完成')

2023-08-10 18:16:02 279

原创 Node.js基础介绍

node.js可以完成轻量级、高性能的web服务、前后端JavaScript同构服务、便捷高效的前端工程化一、Node.js的架构Natives modules：当前层内容又js实现，提供应用程序可直接调用库，例如fs、path、http等，JS语言无法直接操作底层硬件设置Builtin modules “胶水层”：...

2023-03-19 16:54:20 776

原创 Virtual Dom 及 diff 算法

1、JSX到底是什么使用React就一定会写jsx，jsx到底是什么呢？它是一种Javascript语法的扩展，React使用它来描述用户界面长成什么样子。虽然她看起来非常像HTML,但它确实是Javascript。在React代码执行之前，Babel会将JSX编译为React API<div className="container"> <h3>Hello React</h3> <p>React is great </p>&l

2022-02-22 17:14:10 264 2

原创 React Hooks详解

一 React Hooks介绍1、React Hooks是用来做什么的对函数型组件进行增强，让函数型组件可以存储状态，可以拥有

2021-06-23 14:12:55 2706 2

原创 Redux基础介绍及案例

一、Redux核心1.Redux核心概念及工作流程Store：存储状态的容器，JavaScript对象View：视图，html界面Actions：对象，描述对状态进行怎样的操作Reducers：函数，操作状态并返回新的状态工作流程：视图如果想改变store中的状态，他无法直接更改，他必须要先去触发action，actions会被reducer接受到，他根据actions中的type去进行判断看一下他要进行什么样的操作，reducer会根据type属性值对State中的状态进行操作

2021-06-17 15:10:04 695

原创 SSR服务端渲染基础介绍

一、概述目前我们所知的三大框架都是客户端渲染前端框架： Agular、react、Vue这些客户端渲染框架所构建的spa单页面应用的有点：用户体验好；开发效率高；渲染性能好；可维护性好；......同样这些spa单页面应用的缺点：首屏渲染时间长（所有的页面都是由js先解析html模板）、不利于SEO,因为浏览器都是爬取html，而这些单页面应用在没有解析js之前html都是没有内容的为了解决上述的缺点，借鉴了传统的服务端渲染同构应用：1、通过服务端渲染首屏直出，解决spa应用首屏渲

2021-04-07 16:57:24 234

原创 Vuex中使用本地存储

案例：购物车在我们平时使用的网站中，对于商品选用购物车再次刷新是两种场景，第一种场景是登录状态，在我们平时登录的时候使用购物车，在这种情况下，购物车的数据是通过服务端获取的。第二种场景如果是以游客模式没有登录的话，我们刷新购物车的时候数据就要在本地存储中进行获取。每一次更改数据的状态是通过mutation进行更改的，所以我们在每一次mutation提交完毕后都要把状态存储到本地localStorage中而在Vuex中为我们提供了插件来进行每一次mutation之后设置回调函数，vuex中的插

2021-04-06 11:06:39 565

原创 element-ui Table 作用域插槽

在Vue 2.6 以前，在el-table的操作中想要获取这一行的数据需要写上作用域插槽在Vue2.6以后这种写法就过时了，Vue2.6以后提供了v-slot 他们的作用是一致的<template slot-scope="scope"> <div @click="getDetail(scope.row)">1</div></template>// Vue2.6以后<template v-slot="scope">

2021-04-02 17:15:48 1082

原创 Vuex 状态管理

一、组件间通信方式回顾1、父组件给子组件传值子组件中通过props接受数据 props有两种形式，一种是数组形式一种是对象形式对象形式可以约定传值类型父组件中给子组件通过相应属性传值2、子组件给父组件传值通过自定义事件触发<child :fontSize="hFontSize" v-on:enlargeText="hFontSize += $event"></child>其中这个写法中行内注册事件里的$event,就是子组件触发事件时传入的值，在事件

2021-04-02 16:50:47 68

原创 Vue 源码模板编译总结

一、compileToFunctions(template,...)模板编译的入口函数，他的作用是先从缓存中加载编译好的render函数，如果缓存中没有找到加载编译好的render函数，就去调用compile(template,options)去编译二、compile(template,options)他的作用是第一个是合并options合并选项然后调用baseCompile(template.trim(),finalOptions)编译模板,compile函数的核心是合并选项真正进行处理的是b

2021-03-22 17:37:02 100

原创 Vue源码虚拟Dom总结

总体过程中，在Vue首次渲染过后再updateComponent()这个方法中调用了vm._render()和vm._update()这两个方法一、vm._render()在render方法里面它去调用了用户传过来的render函数或者是通过模板编译生成render函数，如果调用了用户传过来的render函数那么接下来调用的是vm.$createElement这个方法（它就是h函数），如果是模板编译成成的render函数它调用的是_c这个方法（它就是h函数），但是不管是哪个方法它最终调用的都是cre

2021-03-18 17:56:55 115

原创 Vue 源码 $set $delete $nextTick

一、vm.$set(Vue.set)对于数组来说$set的实质时执行了，改造过的数组splice方法，让他支持响应式在更改数组之后发送通知调用dep.notify进行视图更新根据_ob_进行判断是否是响应式的对象，因为在响应式的入口observe()方法中，回对要进行响应式的对象添加一个_ob_属性用来存放Observer对象如果要添加属性的对象是Vue和实例上的data属性则报错export function set (target: Array<any> | Object,

2021-03-17 15:42:31 122

原创 Vue源码数据响应式原理总结

响应式处理过程一、initState --> initData --> observe()响应式处理过程实现从Vue实例的init开始的，在init方法中先调用initState先初始化Vue实例的状态，在initState中调用initData方法将data中的数据注入到Vue实例中，并且调用observe()将Data中的数据转换成响应式的数据，observe就是响应式的入口二、observe(value)observe的参数就是响应式要处理的对象，observe的源码位置在

2021-03-17 10:21:52 87

原创 Vue首次渲染的过程

首先Vue先初始化所有的实例成员和静态成员，生成Vue实例再初始化完成后调用Vue实例的init方法，整个Vue首次渲染的初始化方法在Vue的init方法中调用了$mount vm.$mount()一、vm.$mount()第一个$mount是入口文件的$mount 文件位置为src\platforms\web\entry-runtime-with-complier.js 这个文件中$mount的核心作用是把模板编译成render函数，首先它会判断是否传入了render选项，如果没有传入的.

2021-03-12 15:39:30 127

原创 Virtual Dom的实现原理

一、什么是Virtual DomVirtual DOM(虚拟 DOM)，是由普通的 JS 对象来描述 DOM 对象，因为不是真实的 DOM 对象，所以叫 Virtual DOM可以使用 Virtual DOM 来描述真实 DOM，示例{ sel: "div", data: {}, children: undefined, text: "Hello Virtual DOM", elm: undefined, key: undefined}二、

2021-03-12 15:04:11 147

原创 Vue响应式原理模拟分析，实现一个最小版本的Vue

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

2021-01-11 17:50:57 156

原创 Vue-Router 原理实现

一.Vue-Router基本使用在main.js中会将router对象注入到vue实例中，注入vue实例后会创建两个属性$router和$router。第一个是路由规则，第二个为路由实例在路由规则中可以获取路由信息，在路由实例中可以获得路由方法比如push、go、replace等。此外若在开发插件过程中想要获取路由规则可以通过路由实例中的currentRoute获取路由的规则。1、动态路由动态路由有两种传参方式一种是直接通过$route.params.id获取到路由中的id占位，另一种...

2020-12-24 22:23:37 521 1

原创模块化开发规范ES Module注意事项

CommonJs规范一个文件就是一个模块每个模块都有单独的作用域通过Module.exports导出成员通过require函数载入模块CommonJs是以同步模式加载模块，CommanJs是为Node.js环境提出的模块化规范模块化标准规范在node环境中用CommonJs组织模块，在浏览器环境中用ESModules组织模块ES Modules基本特性ESM 自动采用严格模式，忽略 ‘use strict’每个ES Module 都运行在单独的私有作用域中ESM 是通过CORS

2020-06-23 23:42:30 676 1

原创 Gulp自动化构建工作流及其具体实例

Gulp的基本使用1.创建一个新的package.json的文件yarn init2.安装gulp模块yarn add gulp --dev3.在文件根目录创建一个gulpfile.js的文件作为gulp的入口文件4.gulp4.0版本以后以导出成员的方式定义任务，在最新的gulp版本中取消了同步代码模式全部采用异步代码模式，任务完成之后要以回调函数的方式对任务结束进行标记exports.foo = done => { // 传入的done作为回调函数标识任务完成 c

2020-06-19 00:51:56 219

原创 Grunt自动化构建基本使用方式

自动化构建从定义上说就是把开发时写的源代码自动化的转化成生产环境可以运行的程序，这样转化的过程称为自动化构建工作流，他的作用就是让我们脱离运行环境兼容所带来的的问题，在开发阶段使用提高效率的语法、规范和标准，他们用来构建转化那些不被支持的特性比如说浏览器环境并不支持ES6以及Sass等，其中最简单的自动化构建是NPM Scripts常用的自动化构建工具最常用的三个自动化构建工具：Grunt、Gulp、Fis。而我们最常见的Webpack其实是模块打包工具。Grunt是最早的前端自动化构建工具、他的

2020-06-15 01:08:58 261

weixin_42499553的博客