丢失的Litte_志伟的博客

原创 webpack5从入门到精通

这里有你想知道的 webpack5

原创 React-hooks 自定义分享（这里有你想要的自定义hooks）

react-hook的高级用法

原创 前端开发返回请求数据后重组数据结构的常见几种模式与解决方案

前端重组数据结构的常见几种模式与解决方案数据格式一：list = [{id: '01', name: '01',parent: null}, {id: '0101',name: '0101',parent: '01'}, {id: '010101',name: '010101',parent: '0101'}, {id: '0102',name: '01012',parent: '01'}, {id: '012',name: '012',p

原创 React核心知识点总结（全）

React知识点总结（全）一：React脚手架（create-react-app（cra））1：安装cnpm install -g create-react-app2:初始化项目create-react-app demoNmae3：了解react脚手架中的webpack配置文件​ 释放配置文件（一般不释放）npm run eject（要删除目录下的.git文件） 释放所有的webpack配置文件4：理解react设计的核心思想，一切皆为组件，可以细化一个元素5：React开发特性

原创 CSS-IN-JS

css-in-js介绍与使用

原创 手写JavaScript中的call、bind、apply方法

手写JavaScript中的call、bind、apply方法

原创 对于async，await进行封装

promise高级用法

原创 JavaScript中的构造函数与原型

首先让我们一起来了解一下什么是构造函数构造函数的定义构造函数：是通过new的方式来创建对象的一种函数，他与普通函数没有区别，但值得注意的是，构造函数的首字母应该大写在我们的js中创建对象的方式一共有三种一：通过Object构造函数来创建const obj = new Object()二：通过字面量的方式来进行创建const obj = {}三：通过自定义构造函数来创建function People (name, age){ this.name = name this.age = age

原创 JavaScript中的this难点理解

Hello 各位小伙伴 好久不见！最近也是很久没有更新文章了，正好这段时间有空，我们来研究一些原生js的this指向问题在开始之前，我们一起来看一道题目，代码如下： const obj = { a: 1, fun: function(){ console.log(this) function test(){ console.log(this)

原创 浅谈JS的深浅拷贝与实现方式

浅谈JS的深浅拷贝与实现方式一：深浅拷贝的概念以及区别深拷贝完全的复制，不会指向同一个内存地址，复制出来的对象和之前的对象是两个完全独立的对象浅拷贝不完全的复制，复制出来的对象和之前的对象指向同一个内存地址，修改其中一个内容，另外一个也会修改二：实现深浅拷贝的常用方式浅拷贝的实现方法（方式）//一：直接复制相等const obj = {name:'zhiwei', age:18}const obj1 = obj//这里obj和obj1指向同一个堆内存，修改其中的一个值，另外一个也会相应

原创 前端面试题之树结构数据标题修改（ts版本）

前端面试题之树结构数据标题修改（ts版本）需求如下当我们有如下图片的树结构当我们点击的时候，可以修改其标题内容（这里可以用modal框，也可以用输入框），这里我是用的modal框输入框输入的内容为我们的修改值，点击确定后，数据结构的title标题为我们的修改值，点击取消不修改其标题点击确定后代码如下：（因为在公司上班，所以依赖和引入库大家自行解决哈，so easy的）import React, { useState } from 'react';import { Tree, Moda

原创 TypeScript基础知识点

TypeScript基础知识点学习链接，胜洪宇老师的ts教程TypeScript静态类型定义：静态类型一旦定义即不可改变，如我们的const，且继承了类型的apilet count : number = 1//count为数字类型，不能为其他类型，同时count有了number的api，如toFiexd等等基础静态类型和对象静态类型基础静态类型 ：加上数据类型const count : number = 918const myName : string = 'zhiwei'//还有 n

原创 react原理总结

原创 安装并实现简单的redux应用

1、安装并实现简单的redux应用a、安装redux: cnpm i -S reduxb、新建一个store文件夹，暴露一个使用Redux.createStore方法创建的store对象出来c、需要新建一个reducers文件夹，暴露一个使用Redux.combineReducers合并后的reducer出来d、在reducers文件夹下边新建reduer文件进行单独的业务reducer开发e、因为action需要一个type，type一般为一个动作的类型/名字，所以需要使用静态变量来声明动作名字

原创 搭建React开发框架

搭建React开发框架a、得到一个空项目，编写全局请求地址文件b、新建src/index.js作为项目的入口文件c、新建src/pages/index.js作为项目组件分发/入口的文件d、项目中需要使用ajax请求：安装axios来实现数据交互，开发的时候需要使用http-proxy-middleware做请求代理，cnpm i -S axios http-proxy-middleware，新建src/setupProxy.js 文件来做开发请求代理：导出一个方法，方法有一个Express()实例对

原创 react中context的使用

react中context的使用context的作用：Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。使用步骤一：在react中通过我们的createContext方法创建我们的context二：一个context中包含一个provider和consumer三：创建我们的store文件，定义我们的提供者，返回我们的Context.Provider组件和Consumer组件，并在我们的Context.Provider组件给定value属性，必

原创 react路由的简单使用

react路由：HashRouter 路由 有一个#，这种模式常用BrowserRouter：路由中没有#，会发送ajax请求，返回一个页面，需要后端支持，这种模式一般不怎么使用react-router-dom；是页面开发的路由，react-router-native：是react-native（RN）开发普通hash模式下：匹配路由以什么开头，或者与当前要跳转的路由一定匹配如果出现二级路由的时候，需要使用exact来精确匹配Route：一个路由的配置对象/组件，Redirect：重定向swi

原创 React基础原理（state数据，setState方法，获取页面Dom节点，事件绑定，生命周期）

React基础原理（state数据，setState方法，获取页面Dom节点，事件绑定，生命周期）React组件内部state数据当state中的数据发送变化以后，会调用render方法重新渲染VDOM。state相当于重写，因为在react中，就有这个setState方法：为了解决多次设值state产生的多次渲染，会使用节流方法多次设值进行合并处理，相当于vue中的this.$nextTick（）方法如果需要得到重新赋值后的值，应该在回调中去拿经典使用场景：第二次ajax请求，依赖第一次aj

原创 初始React

初始React一：使用React脚手架搭建项目框架安装命令：cnpm i -g create-react-app 或 cnpm i -g cra初始化一个项目：create-react-app react-demo（项目名称）了解react脚手架中得webpack配置文件（不可逆操作）​ 使用命令 npm run eject 或者 yarn eject ；释放所有得webpack配置文件，在react中，为了保护我们的框架的完整性，需要释放我们的webpack配置文件，就必须创建一个项目版

原创 Vue项目总结

vue项目总结一：使用vue脚手架搭建项目框架具体操作步骤，参见志伟的博客二：项目开发1：系统进入页面，登录页面逻辑业务实现（路由指向）在APP端，我们的用户根据手机号，获取验证码登录。账号和密码在系统PC端的后台系统进行管理。（后台管理系统，由系统超级管理员进行用户权限设置）APP端的登录业务逻辑实现流程图（个人手绘，介意的话，参考下面德明老师的标准流程图）（德明老师的标准流程图）2：首页业务实现即相关逻辑分析项目布局优化—通用全局组件注册​ 在我们的项目会存在很多次页面跳转，以

原创 vue组件以及vue组件的生命周期

vue的组件一个 .vue后缀的文件就是一个vue组件在项目的入口文件中 main.js 作为一个组件管理文件，在main.js里面引入其他组件定义区域块（script、 template、sytle 分别为js，html，css区域快）一个vue组件必须要导出 es6的导出 exprot defult在main.js里面就可以在render里面可以使用style代码块使用scoped来声明的样式，仅供当前页面使用。不加的话，是全局的样式，是一个预样式在一个vue组件中，需要引入其他组件，

原创 vue中的状态管理器（Vuex）

vue中的状态管理器（Vuex）vuex插件 vuex是专为vue.js应用程序开发的状态管理模式原理当我们的组件数据发送改变的时候，我们这个组件的状态就改变了数据改变就为一个动作，然后store进行数据扭转，进行视图展示，然后形成一个闭环vuex提供一个仓库，为store，创建store实例对象。通过使用我们的状态管理器，可以进行组件之间的通信5个核心分别是state、getter、mutation、action以及module。：1、statestate状态数据，在state中需要定

原创 vue中计算属性和观察属性

vue中计算属性和观察属性计算属性：computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化computed:{ //默认属性为一个getters属性 fullname: function (){ //被用来计算的数据，发生变化后，当前计算值会同步进行更

原创 使用Axios库，在vue中发送ajax请求

使用Axios库，在vue中发送ajax请求一：将ajax单独出来，作为一个模块二：引入我们的axios库//这里Axios是一个静态的对象，不是axios的实例对象，通过Axios.create可以创建一个实例对象import Axios from 'axios'通过Axios.create可以创建一个实例对象//这里一些公共的配置，就写在初始化的配置中let axios = Axios.create({ baseURL:'http://www.xiongmaoyo

原创 vue中路由的简单使用

vue中路由的简单使用一：安装我们的router插件cnpm i -S vue-router二：vue中路由的种类（这里列举两种，实际有三种）1：hash路由（常用）：vue-router插件监听页面地址栏的hash值变化，来进行页面切换（hash变了，页面不会改变）2：H5 history模式：直接切换我们的地址，这种模式需要后端支持，把所有的页面路由指向我们的index.htmlvue-router为一个vue的核心插件将router注册为一个全局的组件，引入的router为一个cla

原创 vue的动态组件、vue组件继承以及混合

vue的动态组件、vue组件继承以及混合vue的动态组件在页面上使用component占位符来声明组件要放置的地方，使用名字来说明当前组件是谁<component :is="组件变量名">vue组件继承以及混合继承：vue里面的继承都是单个继承。 使用extend来继承组件extend:component混合：把多个componentOptions 混合在一起，类似于实现一个多继承mininxs:[component1,component2]多例模式每个子组件继承的属性

原创 vue的全局组件和插槽

vue的全局组件和插槽将一个vue的组件注册到Vue的构造器中，那么这个vue组件就是全局的了，这样就很方便的我们各子组件引入了（因为少写了代码）组件注册我们需要将我们的全局组件注册到我们的Vue构造器中，那么我们就可以在我们的main.js的实例对象中去注册，这样就成全局的了使用vue.use（）方法，这个方法可以传入一个对象或者函数，对象的话，使用install属性，再component方法。函数直接使用component方法。这个方法传入两个值，第一个为我们全局组件的名字，第二个我们需要注册

原创 vue的事件总线（EventBus）

vue的事件总线EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。创建EventBus Vue实例（两种方式）一：在main.js里面创建因为，我们是通过emit这个方法来触发EventBus的，而emit这个方法来触发E

原创 vue组件之间的通信

vue组件之间的通信vue中定义：在组件中定义为：parentNode这样的组件，全部转为小写，为了组件名字的可阅读性，在第二个大写字母之前加上一个下划线 ： parent-node，如果多个的话ParentNodeComp -> parent-node-comp父组件向子组件传递一：父组件给子组件传递，在子组件中接受这个属性，如果需要传递一个变量，那么这个属性需要被绑定使用 v-bind:命令二：在子组件中，需要对接收到的这个属性，变量进行定义，在script标签中，的props中父

原创 使用vue脚手架（vue-cli）搭建项目框架

使用vue脚手架（vue-cli）搭建项目框架vue-cli 安装命令一：npm install -g @vue/cli（4.0脚手架的安装命令）二：使用npm/cnpm/npx/yarn 全局安装后的文件都放在C:\Users\demin\AppData\Roaming\npm三、使用cnpm/npm uninstall @vue/cli 这个并不能完全删除我们的安装库，手动直接删除（Shift + Delete 按键永久删除安装包）（如果有一天vue使用不了），进入上面的目录，删除vue相关

原创 初步学习vue框架

初始vue一：我们在页面上修改数据，会触发页面的重排、重绘事件、并且需要查找DOM节点，并对节点进行一个DOM操作二：因为页面节点过多，现代业务需求复杂化，需要对页面节点进行频繁操作，造成的性能消耗三：这个时候我们就创建了虚拟DOM节点虚拟DOM就是一个普通的对象，这个对象对我们的页面节点进行了简单的描述，一般会包含几个属性（tag，props，children），这样我们每次更新多个节点或属性的时候，就只会进行一次DOM操作（需要把数据与我们页面的数据（用户操作对象，VDOM拷贝对象）进行一个双向

原创 初始node，用node进行数据库连接（mongodb）操作，node后端接口开发，返回前端请求响应

初始node，用node进行数据库连接（mongodb）操作，node后端接口开发，返回前端请求响应一：node是什么？1、node.js是 一个js的运行环境，node是一个后端环境，搭载的是js语言2、它可用于服务端开发，这样可以避免我们开发语言的不同，导致开发量增加（全栈）3、单线程，指主线程为一个单线程，可以是使用库来实现多线程（fork方法）4、因为它是单线程，可以用于做高并发的应用 （高并发：它通常是指，通过设计保证系统能够同时并行处理很多请求）。但高密集型计算不使用5、未来-&

原创 webpack初步认识，使用

webpack初识项目打包代码使用的工具一：webpack打包需要使用的那些webpack（webpack大部分用于单页应用的打包，只有一个html文件）打包工具，在package.json里面可以创建命令来使用webpack，或直接在cmd使用webpack命令。或创建自己的命令，npm run …命令。一般使用npm命令，为bulid，构建，打包。就会生成一个dist目录，所有打包的文件，都会在dist文件夹里面（会生成一个main.js）webpack-cli脚手架在调用webpack

原创 双向绑定介绍以及vue双向绑定的原理说明

双向绑定的原理（vue）简介：双向绑定：指的就是，绑定对象属性的改变到用户界面的变化的能力，反之亦然。换种说法，如果我们有一个user对象和一个name属性，一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了。同样地，如果UI包含了一个输入用户姓名的输入框，输入一个新值就应该会使user对象的name属性做出相应的改变。vue双向绑定的实现（2.0以上）一：通过这个方法 Object.defineProperty 来实现 双向绑定 （ vue 2.x）二：Object.prox

原创 使用node.js来连接mongodb数据库

使用node.js来连接mongodb数据库一：mongodb简介MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似json的bson格式，因此可以存储比较复杂的数据类型。Mongo最大的特点是它支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。二：准备工作1、安装node.js，官网地址：https://nodejs.org

原创 （2020年11月10日学习笔记）项目中gulp工具使用流程

项目中gulp工具使用流程一：安装全局gulp命令行工具npm i gulp-cli -g二：初始化项目(生成package.json文件)npm init三：安装局部gulpnpm gulp -D四：创建项目子文件夹五：创建gulpfile.js文件六：在gulpfile.js文件中创建任务​ 1：制定paths路径（分为src（源）与 dist（或public）等目标路径），需要制定路径的有html，js，css，imgs，libs等src源里面的文件夹​​ 2：创建h

原创 （2020年11月4日）JQuery类库常用的方法讲解

原创 （2020年11月3日学习笔记）Git的使用工具

Git工具的使用（基本使用）一：Git工具初识Git是一个免费开源的分布式版本控制系统，用于快速高效地处理各种大小型的项目。二：Git现在常用的托管平台一：Github官网地址：https://github.com全球最大的代码托管平台，服务器在国外，访问速度较慢二：码云官网地址：https://gitee.comGitee.com 是 OSCHINA.NET 推出的代码托管平台，支持 Git 和 SVN，提供免费的私有仓库托管三：CODING官网地址：https://coding.n

原创 (2020年11月3日学习笔记) 设计模式学习

设计模式概念：代表了最佳的实践，计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性设计模式的用途：设计模式在软件开发中的两个主要用途。开发人员的共同平台设计模式提供了一个标准的术语系统，且具体到特定的情景。例如，单例设计模式意味着使用单个对象，这样所有熟悉单例设计模式的开发人员都能使用单个对象，并且可以通过这种方式告诉对方，程序使用的是单例模

原创 (2020年11月2日学习笔记)闭包深入理解，对象继承的方法（原型链继承，构造继承，语法糖继承）

一：闭包​ 在一些使用场景中，我们不想使用全局变量，但是又不想每次使用后改变其值，这个时候该怎么做呢。高级一点说”一个变量既能重复使用，又不会污染全局“这时候闭包就产生了闭包的重要理解：闭包可以在全局函数里面操作另一个作用域的局部变量形成闭包的步骤一：外层函数嵌套内层函数二：内层函数访问外层函数的变量三：外层函数的返回值为内层函数（注：不是返回内层函数的结果而是内层函数）闭包的实现原理这里引用了熊大林老师的关于闭包深入理解的文章2、外层函数调用时3、外层函数调用后4、内层函数调用