qq_35432512的博客

原创 webpack5 之 ModuleFederationPlugin 联邦组件

Webpack 5 增加了一个新的功能 “模块联邦”，它允许多个 webpack 构建一起工作。从运行时的角度来看，多个构建的模块将表现得像一个巨大的连接模块图。从开发者的角度来看，模块可以从指定的远程构建中导入，并以最小的限制来使用。多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以单独开发和部署它们。这通常被称作微前端，但并不仅限于此。在这里插入代码片Webpack5 模块联邦让 Webpack 达到了线上 Runtime 的效果，让代码直接在项目间利用 CDN 直接

原创 小程序登录流程

原创 vue应用 - 6. vuex模块化

比如首页是一个模块，下面是首页模块的 state 模块store/home/index.jsconst homeStore = { state: { count: 0 }, mutations: { updateCount(state, data) { state.count = data; } }, actions: {}, getters: {}};export default { namespaced: true, ....

原创 vue应用 - 5. keep-alive 实现前进刷新后退缓存

1. 全局监听后退事件设置 isBack 为true// main.jswindow.onpopstate =function(){ Vue.isBack=true; console.log('页面触发返回按钮', Vue.isBack)}2. 页面进入设置 isBack 为false// router/index.jsrouter.beforeEach((to, from, next) => { Vue.isBack=false; next();})

原创 react - 7.router

Router 是路由容器放在最外层Route 代表路由配置，当前地址栏的路径是 path 的话就渲染 componentSwitch 如果当前路由匹配上了，就不再往下匹配了Redirect 如果都没有匹配上就重定向到指定页面(接收两个参数 from - 来自哪个页面的时候进行重定向， to - 重定向到哪里)匹配的 path 是前缀 url 是以 path 开头 /userexact 精确匹配安装并引入 react-router-domimport React from "react"..

原创 react - 6.插槽

children 方式import React, { Component } from 'react'class MouseComponent extends Component { state= { x: 0, y: 0 } render () { return ( <div onMouseOver={this.handleEvent}> { .

原创 react - 5.高阶组件

高阶组件其实就是一个函数，传入一个组件，返回一个新组件高阶组件可以实现逻辑的复用，但是如果逻辑比较复杂的话就难以维护了实例1：需求是一个高阶组件来统计每个函数的挂载时间import React, { Component } from 'react'function withLogger(OldComponent) { return class extends React.Component { start = null UNSAFE_component.

原创 js - 1.设计模式

一、工厂模式使用场景： 1. jQuery中只有一个$ 2. react 中的reactElement()方法 class jQuery { constructor(selector) { this.selector = selector } css() { console.log('css 操作') }}windo...

原创 react - 4. Context

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。使用步骤引入let ThemeContext = React.createContext()ThemeContext 得到一个对象 = {Provider(提供者), Consumer(消费者)}父组件向下传值export default class TextPage extends Component { constructor(props) { sup.

原创 react - 3. 生命周期

旧版生命周期import React, { Component } from 'react'export default class TextPage extends Component { static defaultProps = { name: '哈哈' } constructor(props) { super(props) this.props = props this.state = { number:

原创 react - 2. ref 的三种用法

ref 在类组件和函数组件中使用方法是不一样的类组件中ref 有三种，主流是第三种第一：类组件的使用方式参数是字符串export default class TextPage extends Component { render() { return ( <div> <input ref="a" /> + <input ref="b" /> .

原创 react - 1. 定义组件和组件的属性

使用用法：如何定义组件函数式组件(就是一个函数，接收一个属性对象，返回一个react元素)函数式组件渲染：1 - 封装函数组件的属性对象 props = {name: ‘haha’}2 - 把props传递给welcome1函数，返回一个React元素3 - 把这个React元素，也就是虚拟DOM渲染到真实DOM类组件(就是一个类，需要一个render函数，render返回返回并仅能返回一个顶级react元素)类组件渲染：1 - 封装函数组件的属性对象 props = {

原创 Vue源码 - 2.数据劫持

新建src/index.jsimport { initMixin } from "./init"function Vue(options) { // 运行 Vue 的初始化操作 this._init(options)}// 通过引入文件的方式给 Vue 原型上添加方法initMixin(Vue)export default Vue新建src/init.jsimport { initState } from './state';// 在原型上添加一个 init 的方.

原创 Vue源码 - 1. rollup 配置

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码初始化一个项目npm init -y安装依赖模块@babel/core (使用babel的核心模块)@babel/preset-env (将高级语法转换成低级语法)cross-env (设置环境变量)rollup-plugin-babel (桥梁)rollup-plugin-serve (实现静态服务)npm i rollup @babel/core @babel/preset-en.

原创 promise - 7.promise.race 源码实现

Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。function isPromise(x) { // 校验是否是 promise if((typeof x == 'object' && x !== null) || typeof x == 'function') { if(typeof x.then == 'function') { .

原创 promise - 6.promise.all源码实现

promise.all 的特点就是让所有 promise 并发执行，根据执行个数判断是否执行完毕代码实现function isPromise(x) { // 校验是否是 promise if((typeof x == 'object' && x !== null) || typeof x == 'function') { if(typeof x.then == 'function') { return true }.

原创 promise - 5.解决嵌套

需求：读取 name.txt 文件，拿到 name.txt 文件内的内容之后读取 age.txt准备文件name.txtage.txtage.txt20岁常规读取let fs = require('fs')function read(...args) { return new Promise((resolve, reject) => { fs.readFile(...args, function(err, data) { .

原创 promise - 4.源码实现实现

promisePromise 天生是一个类，类中需要传入一个 executor 执行器，默认会立即执行promise 内部会提供两个方法，可以更改 promise 的状态promise 总共有三种状态 (等待态 成功态 失败态)3-1. resolve 触发成功3-2. reject 触发失败promise 一旦成功就不会走失败，反之同理promise 中实现链式调用主要靠返回一个新的 promiseconst PENDING = 'PENDING'const RESOLVED =.

原创 promise - 3.发布订阅和观察者模式

1. 发布订阅大白话解释订阅好一件事，当这件事发生的时候，触发对应的函数订阅： on发布：emitpromise 内部也是基于发布订阅的好处多个类之间可以解耦合特点订阅方和发布方没有任何的关系实现let fs = require('fs')let e = { _obj: {}, _callback: [], on(callBack) { // 订阅就是将函数放到数组中 this._callback.push(cal

原创 vue3.0 - 1.初体验

Vue 3.0 项目初始化第一步，安装 vue-cli:npm install -g @vue/cli第二步，初始化 vue 项目：vue create vue-next-test升级 Vue 3.0 项目目前创建 Vue 3.0 项目需要通过插件升级的方式来实现，vue-cli 还没有直接支持，我们进入项目目录，并输入以下指令：cd vue-next-testvue add vue-nextvue2.0 vs 3.0默认进行懒观察(按需监听)在 2.x 版本里，不管

原创 promise - 2. 回调函数

问题描述let fs = require('fs')let obj = {}fs.readFile('./testfile/name.txt', 'utf8', (err, data) => { obj['name'] = data})fs.readFile('./testfile/age.txt', 'utf8', (err, data) => { obj['age'] = data})console.log(obj) // 返回是 {}解决方法let fs .

原创 promise - 1. 高阶函数

什么是高阶函数如果一个函数的参数是函数如果一个函数返回一个函数判断数据类型的方法 - typeof - costructor 可以找到是谁构造出来的 - instanceof 判断是谁的实例 __proto__ - Object.prototype.toString.call() 最靠谱的判断方式// 封装判断数据类型的方法function isType(type) { return function(content) { return Object.prototy.

原创 vscode - 1. 备忘记录

常用插件1. Code Runner : vscode中快速运行代码2. Code Spell Checker : 单词拼错提示3. Bracket Pair ColorIzer : 为代码中的括号们添上一抹亮色

原创 vue应用 - 4.组件传值

provider/inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效父组件：export default { provide(){ return { parentTest:this //通过provide提供自身所有属性，或者某个属性和方法 } }}...

转载 vue应用 - 3.修饰符

表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符表单修饰符.lazy我们希望失去焦点的时候再更新视图<div>{{lazyTxt}}</div> <input type="text" v-model.lazy="lazyTxt" placeholder="lazy">.trim去除value两边的空格<i...

原创 vue应用 - 1.面试必问

一. 说一下对mvvm的理解 1. mvc - 用户在视图(view)触发按钮或者事件(Controller)，控制器修改了(model),model在把修改同步到view中 M - Model 数据 V - View 视图、界面 C - Controller 控制器、逻辑处理2. Model - 模型、数据 View - 视图、模板(视图和模板是分离的) ViewModel -...

原创 JavaScript - 面试题

一. 普通函数和箭头函数的区别1. 箭头函数没有 functioin 关键字2. 箭头函数作为匿名函数，是不能作为构造函数的，不能使用new操作符进行实例3. 箭头函数不能绑定arguments，取而代之的是rest，例如： es5： function a() { console.log(arguments) } a(1,2,3,4) es6: let a = (....

原创 搭建开发环境

第一步：1.npm init2.创建src/index.js文件 - 创建webpack.dev.config.js 文件3.npm i webpack webpack-cli --save-dev4.修改package.json文件 - "dev": "webpack --config ./webpack.dev.config.js --mode development" // 启...

原创 http协议

http协议的主要特点1.简单快速2.灵活3.无连接4.无状态

原创 css盒模型

css盒模型分为标准模型和IE模型标准模型计算高度仅计算content的高度,IE模型会计算padding,border,content浏览器默认的是box-sizing: content-box，即标准模型box-sizing: border-box 指的是IE模型js获取盒模型对应的宽和高兼容性最好的方式是:window.getComputedStyle(dom).width/h...

原创 js 面向对象

1

转载 vue应用 - 2. provide与inject实用技巧

A标题