hjhfreshman的博客

原创 js的事件循环机制，同步和异步，以及宏任务与微任务的执行顺序

前置知识点（重要）：1.什么是事件循环：js是单线程语言，同个时间执行一件事（同步），但是他可以有一个异步队列，遇到异步操作（比如说ajax这种阻塞时间很久的事情）把它先放入异步队列，并且继续往下执行，当同步队列执行完了，他就会去异步队列里面找刚才存放起来的事件，然后按顺序执行他们。2.异步队列又包含宏任务和微任务，微任务先与宏任务执行宏任务有：#浏览器NodesetTimeout√√setInterval√√setImmediatex√reque

原创 数据治理平台相关知识

主要根据选择的标准体系，进行对标，落标等操作。

原创 create-react-app 后需要npm run eject

在用creata-react-app脚手架构建react项目的时候， 当我们使用软件打开之后，会发现共有几个文件 其中： 1.node_modules是各个插件存放位置 2.public用于放置静态资源，里面的资源不会参与构建 3.src是源码文件，一般做开发就在这个文件夹，会参与打包构建 重点来了： 在package.json中： 只有三个依赖，分别是react，react-dom,react-scrip...

转载 h5实现一键复制到粘贴板 兼容iOS

copyText = (text) => { // 数字没有 .length 不能执行selectText 需要转化成字符串 const textString = text.toString(); let input = document.querySelector('#copy-input'); if (!input) { input = document.createElement('input'); input.id = "copy-in.

原创 webpack依赖

package.json{ "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack", "dev": "webpack-dev-server" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "

原创 webpack的基本使用

文章地址

原创 前端面试知识点归纳：vue,react,webpack,bable,项目开发

原创 实现深拷贝的常用方法

1.递归实现深拷贝function deepClone(obj){ let objClone = Array.isArray(obj)?[]:{}; if(obj && typeof obj==="object"){ for(key in obj){ if(obj.hasOwnProperty(key)){ //判断ojb子元素是否为对象，如果是，递归复制 if(obj[

原创 react使用中的注意事项（持续更新）

1.state值不可直接修改，且在state操作过程中，也需要确认state原来的值没被修改。例如const [arr,setArr] = useState([1,2,3])const [obj,setObj] = useState({a:1,b:2})1.需求：向arr数组加入一个数字4元素,向对象obj加一个属性c:3//错误写法：arr.push(4)obj.c = 3// 正确写法setArr([...arr,4])setObj({...obj,c:3})2.需求 操作过程

转载 JavaScript 中 call()、apply()、bind() 的用法

其实是一个很简单的东西，认真看十分钟就从一脸懵B 到完全 理解！先看明白下面：例 1obj.objAge; // 17obj.myFun() // 小张年龄 undefined例 2shows() // 盲僧　比较一下这两者 this 的差别，第一个打印里面的 this 指向 obj，第二个全局声明的 shows() 函数 this 是 window ；1，call()、apply()、bind() 都是用来重定义 this 这个对象的！如：obj.myFun.call(

原创 koa的基本使用

主要实现了以下几个知识点：1.koa中的路由如何引入2.处理get请求，及获取参数3.处理post请求，及获取参数4.使用中间件koa-bodyparser（获取请求参数），koa-static（解析静态文件），5.操作封装后的mongodb数据库，如何封装可以看我之前的文章：封装koa操作mongodb数据库方法直接上代码，对应功能有注释const koa = require("koa")const router = require("koa-router")() // 路由const

原创 koa操作mongodb，封装mongdb操作方法

在koa中使用MongoDB数据库。 更多方法请访问nodejs操作MongoDB数据库 MongoDB增、删、改、查;安装安装MongoDBnpm install mongodb --save引入中间件引入mongodb下面的连接模块MongoClient// 引入MongoDB 连接模块const MongoClient = MongoDB.MongoClient;配置中间件定义数据库连接的地址以及配置数据库的名称let url = "mongodb://localhost:.

原创 nodejs操作mongodb数据库

nodejs操作mongodb数据库const {MongoClient} = require("mongodb")const url = "mongodb://127.0.0.1:27017"const client = new MongoClient(url)const dbName = "goods"client.connect(err => { if(err){ console.log('err'); return } console.log

转载 nodejs的koa中cookie和session的使用，cookie和session的区别

1.cookie是存储于访问者的计算机中的数据，用于同一浏览器访问同一域的时候共享数据2.HTTP是无状态协议。也就是说：当你浏览了一个页面，然后跳转到同一个网站的另一个页面，服务器无法认识到这是同一个浏览器在访问同一个网站。每次的访问是没有关系的，也就是说服务器无法检测到这个状态特点：保存在客户端、用于同一浏览器访问同一个域的时候共享数据作用，例如：1.保存用户信息2.浏览历史记录3.10天免登录1.koa中设置cookie的值1.设置cookie：router.get('/', asy

原创 Koa中使用art-template模板引擎，以及如何接受post请求等

直接上代码，每个代码的作用都有注释：实现了以下功能：1.koa中如何使用路由2.koa中如何使用art-template模板引擎3.koa中如何使用koa-static解析静态文件4.koa中如何接受post请求并通过koa-bodyparser拿到参数app.jsconst koa = require("koa")const router = require("koa-router")() // 路由const render = require("koa-art-template") /

原创 什么是MVC和MVVM，两个例子读懂它们！

MVC：Model、View、ControllerM:数据层，V：视图层，C：负责数据和视图交互的控制层他们是如何工作的？举例子：C是老板，M是一堆文件，V是展示这些文件的展台，老板( C )负责自己处理这些文件（M）如何展示到展台（V）MVVM：Model、View、ViewModel。M:数据层，V：视图层，VM：数据视图交互的工具（封装了交互的规，方法）举例子：C还是老板（不过现在角色不是很重要，只负责发布命令），M是一堆文件，V是展示这些文件的展台，老板觉得自己展示很累，就使用了一个工具

原创 什么是koa中间件，他们的执行顺序是什么样的？

koa中间件koa中，中间件分为应用级和路由级//应用级app.use(async (ctx, next) => { //应用级中间件 ，先执行中间件，再匹配路由 console.log("进入应用级中间件2"); next() console.log("出应用级中间件2");})// 路由级router.get("/", async (ctx,next) => { // 路由级中间件 console.log('进入路游级'); next() console.

转载 useCallback()和useMemo()的作用

React.memo()React.useCallback()React.useMemo()React.memo()问题React 中当组件的 props 或 state 变化时，会重新渲染视图，实际开发会遇到不必要的渲染场景。看个例子：子组件：function ChildComp () { console.log('render child-comp ...') return <div>Child Comp ...</div>}父组件：function

原创 vue3 学习笔记

vue3 学习笔记1.reavtive是递归监听实现的，即可以通过obj.a.b直接修改对象，视图会更新，如果数据量大，性能消耗也大。2.shallowReactive和shallowRef,非递归监听，可以用triggerRef来触发ref的更新。数据量非常大的时候使用。3.ref本质是reactive({value:"值"})，所以js访问的时候要加.value,然而渲染的时候会有一个__v_isRef:true标记，所以模板会直接识别自动加。value，不需要.value...

原创 Vue3.0的有优点有哪些？它比vue2快在哪？

1.Vue3.0六大亮点Performance：性能比Vue 2.x快1.2~2倍Tree shaking support：按需编译,体积比Vue2.x更小Composition API: 组合API(类似React Hooks)Better TypeScript support：更好的 Ts 支持Custom Renderer API：暴露了自定义渲染APIFragment, Teleport(Protal), Suspense：更先进的组件2.Vue3.0是如何变快的?diff算法

原创 vue3.0和vue2的区别

一、默认进行懒观察（lazy observation）　　在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。二、更精准的变更通知。　　举例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。三、3.0 新加入了 Ty.

原创 vue3.0新特性及用法

createApp在 Vue 3 中，改变全局 Vue 行为的 API 现在被移动到了由新的 createApp 方法所创建的应用实例上。vue3.0中使用createApp 来创建vue实例import { createApp } from 'vue'import App from './App.vue'const app = createApp(App);app.mount('#app');main.js 下加载router、vueximport { createApp } from

原创 redux，react-redux之间的关系

Redux 和react-redux之间的关系首先要理解的是：redux 是独立的，和react没有任何关系，想要在react中使用redux需要进行一些列的操作把它们连接起来，这一些列的操作即为：react-reduxRedux是什么？redux 是一种数据状态管理模式，就相当于 vuex ，当我们要做的项目中有很多组件需要共享数据时，这时候就可以用 redux 搭建。Redux的三个原则：唯一数据源，保持状态只读（只能通过调用dispach的形式来修改状态），数据改变只能通过纯函数（reduce

原创 git远程仓库中master及其余分支间代码的合并

1、将分支代码feature-v3同步到master上git checkout feature-v3git add .git c...

转载 从零开始创建react项目的三种方法（转）

文章链接：https://www.jianshu.com/p/68e849768d8e

原创 react周期函数介绍

创建阶段componentWillMount ：可以访问state,虚拟dom还未创建好。render:虚拟dom创建好了。componentDidMount:可以操作页面上的dom元素，最早操作dom的地方。运行阶段shouldComponentUpdate(nextProps,nextState){ return true/false } ： 通过true/false是否需要更新do...

原创 axios的http拦截

axios的http拦截 // 引入axios以及element ui中的loading和message组件import axios from 'axios'import { Loading, Message} from 'element-ui' // 超时时间 axios.defaults.timeout = 5000 // http请求拦截器var loadingin...

原创 解决引用flexible.js使第三方ui样式缩小的方法

地址：https://www.cnblogs.com/skylineStar/p/10036525.html

原创 vue中使用flexible.js并配合px2rem-loader实现移动端布局

适配移动端flexible.js适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应1.安装lib-flexible.jsnpm install lib-flexible --save2.在项目入口文件main.js中引入lib-flexibleimport 'lib-flexible/flexible.js'3.px转换rem使用...

原创 js时间格式化 YYYY/MM/DD HH:MM:SSS

/** * 将"2018-05-19T08:04:52.000+0000"这种格式的时间转化为正常格式 * @param time */function timeFormat(time) { var d = new Date(time); var year = d.getFullYear(); //年 var month = d.getMonth...

原创 vue中使用富文本编辑器wangEditor及踩坑

因为上传图片的问题使用过了各种富文本，最后发现还是这个比较好用。分享记录一下。安装npm install wangeditor --save新建一个wangeditor.vue（组件），代码内容如下<template lang="html"> <div class="editor"> <div ref="toolbar" class="toolb...

转载 在vue中使用MD5加密

npm安装：npm install --save js-md51.在需要使用的项目文件中引入：import md5 from 'js-md5';使用：md5('holle') // bcecb35d0a12baad472fbe0392bcc043 2.或者在main.js文件中将md...

转载 使用vue-qriously插件，在vue项目中生成二维码

之前使用qrcodejs2发现二维码内容的长度太长会出问题，所以改用vue-qriously 代码案例安装npm install vue-qriously --save-devmain.js 入口文件import Vue from 'vue'import VueQriously from 'vue-qriously'Vue.use(VueQrious...

转载 vue router.beforeEach跳转路由验证用户登录状态

使用vue判断验证用户登录状态导航钩子类似于生命周期钩子，包含路由进入前，进入后，更新时，退出前等几个周期，主要用于控制导航的前进后退或跳转等。其中router.beforeEach就是路由进入前的周期，同时有路由的来源...

原创 promise的链式调用

//new一个promise对象并在里面执行第一个异步方法var promise = new Promise(function(resolve,reject){ axios({ method: 'post', url: common.getApi() + '/api/doctorDept/getAllDoctorDept', }).then(res...

原创 Promise的简单使用例子

可以把resolve()看作是promise实例 成功时的出口 ，而reject()即为失败时的出口下面是简单的例子var a = 0var promise = new Promise(function(resolve,reject){ setTimeout(function(){ a = 3 resolve(a) //模拟在异步操作成功时把a给resolve（）也可以直接res...

原创 前端实现模糊查询

使用正则匹配的方式4行核心代码const a = '你好'//用户输入的字符串const regstr = ['',...a,''].join('.*')const reg = new RegExp(regstr)console.log(reg.test('sssni你，好')) //true...

原创 后端返回文件，前端下载导出

this.axios({ url:this.common.getApi() + '/sys/api/convertgifs/downloadConvertGifs', method:'get', params: { ids: this.ids }, responseType: 'blob', }).then((res)...

原创 elementui中给input框赋值成功后input框不能进行编辑问题

选中一项后，input框不能进行编辑<el-select v-model="input.memoStyle" placeholder="Log Landlord Call" @change="memoStyleChange"> <el-option v-for="item in options" ...

转载 vue中使用vuex结合sessionStorage做的登录功能

最近做项目需要保存用户登录状态，要做到刷新页面用户状态不变，以及实现登出功能。实际上是很简单的，但是对于vue新手来说，我找了好几个网址都讲的不是很清楚，磕磕绊绊理清了关系，在这里总结一下。首先，vuex安装完成之后，构建如下目录：vuex目录结构这样做的目的是降低代码的耦合度，方便以后的修改与维护。然后，vuex中几个文件详情如下...