qq_45368052的博客

原创 Promise原理

【代码】Promise原理。

原创 节流函数（throttle）

学习笔记

原创 发抖函数（debounce）

学习笔记

原创 手写Array.prototype.reduce

通过手写reduce更好理解运行机制

原创 递归思路的案例

我老大让我写一个签署模块还有一个文件的上传模块，因为是电脑桌面端，所以这两个模块都要实现断电续签和断电续传，前前后后折腾了半个多月中途又问了我老大好多次算是终于搞定了，分享下我老大给我说的一个思路。签署模块签署有单签、选中的签和全签这三个部分首先要把点击签署的和选中签署的宗地全部存起来，我们用的NeDB本地数据库，存的时候要存两个集合，一个是要签署宗地号的集合，一个是时间戳的集合，因为签署是需要时间来进行的 用户在点击签署后 可以继续点击另一个宗地进行签署 但是在多个签署的时候要依次进行，这时这个时

原创 xlsx xlsx-style 设置导出的exce表格样式

xlsx 用来处理要导出的数据一般常用的就是json_to_sheet() 和table_to_sheet()json_to_sheet用来处理后台返回的json数据格式table_to_sheet用来处理页面中的table表格xlsx-style 用来设置导出表格的样式 上下左右居中、颜色、字体大小、表格的边框…下载npm install xlsx xlsx-style引入// 源码什么的都不需要改动import XLSX from 'xlsx';import XLSXStyle fr

原创 实现一个深度拷贝(递归拷贝,一层层的拷贝)

判断数据类型的四种方法typeofinstanceofObject.prototype.toString.callconstructor// 直接copy下面的方法去用即可function deepClone(obj, hash = new WeakMap()) { if (obj == null) return obj if (obj instanceof Date) return new Date(obj) if (obj instanceof RegExp) return new

原创 用正则实现时间格式化、获取URL地址的参数信息、大数字千分符处理

~function(){ <!-- formatTime:时间字符串的格式化处理 @params template:[string] 我们最后期望获取日期格式的模板 模板规则:{0}->年 {1~5}->月日时分秒 @return [string]格式化后的时间.

原创 验证一个字符串中哪个字母出现的次数最多，多少次

<!-- 去重的方法 --> let str = 'zhugeliangdirenjie' let obj = {} [].forEach.call(str,char => { if(typeof obj[char] !== 'undefined'){ obj[char]++ return } obj[char] = 1 }) let max = 1,.

原创 其它正则捕获的方法

1、test 也能捕获(本意是匹配)let str = '{0}年{1}月{2}日'let reg = /\{(\d+)\}/gconsole.log(reg.test(str)) // => trueconsole.log(RegExp.$1) // => '0'console.log(reg.test(str)) // => trueconsole.log(RegExp.$1) // => '1'console.log(reg.test(str)

原创 正则捕获的贪婪性

let str = 'lalala123dadada123'// => 正则捕获的贪婪性：默认情况下，正则捕获的时候，是按照当前正则所匹配的最长结果来获取的let reg = /\d+/gconsole.log(str.match(reg)) // => ['123','123']// => 在量词元字符后面设置 ? 取消捕获时候的贪婪性(按照正则匹配的最短结果来获取)let str = 'lalala123dadada123'let reg = /\d+?/gconso

原创 正则的分组捕获

// => 身份证号码let str = '123456198010101931'let reg = /^(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(?:\d|X)$/console.log(reg.exec(str))console.log(str.match(reg))// => ["123456198010101931", "123456", "1980", "10", "10", "3", "1", index: 0, input: "12345

原创 正则的捕获

实现正则捕获的方法正则 RegExp.prototype 上的方法 1.exec 2.test字符串 String.prototype 上支持正则表达式处理的方法 1.replace 2.match 3.splite ....../** 实现正则捕获的前提是:当前正则要和字符串匹配,如果不匹配捕获的结果是null*/let str = 'xiaofei123xiaodan456'let reg = /\d+/console.log(reg.

原创 常用的正则表达式

1、验证是否为有效数字/** 规则分析* 1、可能出现 + - 号，也可能不出现 [+-]?* 2、一位数0-9都可以，多位数不能是0 (\d|([1-9]\d+))* 3、小数部分可能有也可能没有，一旦有后面必须有小数点+数字 (\.\d+)?*/let reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/2、验证密码// => 数字、字母、下划线 6~16位let reg = /^\w{6,16}$/3、验证真实姓名 1.汉字 /^[\

原创 常用元字符的详细解析

元字符详细解析^ $let reg = /^\d/ 以数字开头let reg = /\d$/ 以数字结尾^ $两个都不加:字符串中包含符合规则的内容即可let reg = /\d+/^ $两个都加:字符串只能是和规则一致的内容let reg = /^\d+$/\(可以把有意义的转换成无意义的 也可把无意义的转换成有意义的)基于转义字符,让其只能代表小数点let reg = /^2\.3$/把特殊的符号转换为普通的符号let reg = /^\\d$/x|ylet reg =

原创 初识正则

RegExp用来处理字符串的规则1、只能处理字符串2、它是一个规则:可以验证字符串是否符合某个规则(test)，也可以把字符串中符合规则的内容捕获到(exec/match…)编写正则表达式创建方式有两种1、字面量创建方式(两个斜杠之间包起来的，都是用来描述规则的元字符)let reg1 = /\d+/2、构造函数模式创建 两个参数: 1.元字符字符串 2.修饰符字符串let reg2 = new RegExp("\\d+")正则表达式由两部分组成1、元字符2、修饰符常用的元字符

原创 AXIOS的基础应用

axios是基于Promise封装的一款AJAX库 (核心是:XMLHttpRequest)链接: link.基于axios发送AJAX请求，返回的结果都是一个Promise实例=>AJAX请求成功(网络层成功:状态码以2开头)=>对应的Promise实例也是成功Qs 中有三个方法 formats parse stringifyQs.stringify({name:"xiaoyu",age:22},{arrayFormat: 'brackets'})输出结果在下"name=xi

原创 async和await的基础语法

async 和 await 是 Promise的语法糖async是对函数的一个修饰:使一个函数返回Promise实例await是等待一个Promise实例成功后执行函数中想要使用await，需要把方法基于async修饰才可以await只有当前实例状态为成功，才会去执行其后面的代码(代码为失败，后面的代码则不会执行)async function func(){ return 10}console.log(func());// 控制台的返回结果 在下面Promise {<resol

原创 PROMISE基础语法

Promise是用来解决js中的异步编程问题let p1 = new Promise([executor])new Promise 创建 Promise 的实例时 一定要传一个executor函数new 的时候首先第一件事情就是把[executor]函数执行会给[executor]函数传递两个实参信息:resolve函数 和 reject函数Promise状态status/Promise valuenew Promise的时候，初始状态是(status):pending value:un

原创 ES3、5和ES6中的变量提升区别

现在最新版本的浏览器–> 向前兼容 ES3、5 规范1.判断体和函数体等不存在块级上下文，上下文只有全局和私有2.不论条件是否成立，带function的都要提前声明+定义–> 向后兼容 ES6 规范1.存在块级作用域，大括号中出现let、const、function…都会被认为是块级作用域2.不论条件是否成立，带function的只提前声明，不会提前赋值了块级作用域没有自己的this，用的是上下文中的 this (和箭头函数类似) 也没有arguments 更不会进行形参赋值只有

原创 Node-EXPRESS

/** * npm install express express-session body-parser * express 框架 * express-session * body-parser 真实项目中处理 客户端通过POST请求基于请求主体传过来信息的解析 */const express = require('express'), config = require('./config'), // npm install body-parser bodyP

原创 Node-web服务器创建(静态资源和API接口请求)

const http = require("http")const url = require("url")const fsPromise = require("./lib/myFs")// npm install mime(返回文件类型)const mime = require("mime")// npm install qs(返回文件类型)const qs = require("qs")/** * 创建一个 WEB服务 * http.createServer() 创建服务

原创 Node中的FS内置模块

fs内置模块赋予了在NODE环境下操作 I/O 的能力默认I/O的异步操作是基于回调函数处理的不论是readFile还是writeFile 都必须要写回调函数获取绝对路径的两个方法const path = require("path")console.log(path.resolve(""));=> 上面这两步 也可以获取绝对路径 下面这一个也可以console.log(__dirname)const fs = require("fs")// => 1.readFile/

原创 Node中的事件驱动机制和CommonJs规范

Node.js 是一个基于Chrome V8引擎的JavaScript运行时(Node.js is a JavaScript runtime built onChrome’s V8 JavaScript engine )在NODE中创建一个js文件就相当于创建了一个模块真实工作中使用NODE的几种常见场景npm模块管理和webpack以及CommonJS模块导入导出等webpack-dev-server proxy(跨域)javascript + node.js的全栈开发 JSON、R

原创 webpack

webpack 的用途帮我们处理 依赖的文件(依赖的资源)转换 依赖的模块 (浏览器不支持的模块)项目优化先初始化npm init -y 初始化后会自动创建package.json文件本地安装webpacknpm install webpack webpack-cli --save-dev查看webpack 版本webpack -vnpm 的版本在5.2以上 就可以用 npx0 配置打包npx webpack在 package.json文件中手动设置 执行的命令"

原创 mouseover和mouseenter的本质区别

<div id="outer"> <div id="inner"> <div id="center"></div> </div></div><script> center.onmouseenter = function () { console.log("center enter"); } center.onmouseleave = function () { console.log("center

原创 事件的传播机制

事件的传播机制1、捕获阶段:从最外层向最里层事件源依次进行查找(目的:是为冒泡阶段事先计算好传播的层级路径) =>CAPTURING_PHASE:12、目标阶段:当前元素的相关事件行为触发 =>AT_TARGET:23、冒泡传播:触发当前元素的某一个事件行为，不仅它的这个行为被触发了，而且它所有的祖先元素(一直到window)相关的事件行为都会被依次触发(从内到外的顺序) =>BUBBLING_PHASE:3 (Event.prototype)<div id="out

原创 阻止默认行为

<!-- A标签的默认行为1: 页面跳转 A标签的默认行为2: 锚点定位--><!-- 锚点定位 --><a href="http://www.zhufengpeixun.cn/#free_course">珠峰培训</a><!-- target="_black" 新打开一个标签页显示 --><a href="https://www.baidu.com/" target="_black">百度</a>

原创 Vue-vuex

state存储数据(任何一个组件都可以调用)// store/index.jsstate: { count: 666888, qqq: 123, www: 456}// 组件中使用方法// 一 直接使用<p>{{$store.state.count}}</p><p>{{$store.state.qqq}}</p><p>{{$store.state.www}}</p>// 二 简易使用<h1>{

原创 VueRouter

vue-router vuex 都是vue的插件Vue.use 传的参数 若是一个对象 则会找对象中的 install方法执行 并且会传一个 Vue进去 若是一个函数 则会直接当作 install方法执行$router 存放的是方法 ------- $route 存放的是属性path: '/home', // 走的路径name: 'Home', // 路径对应的名字redirect: "/home1", // 走到 Home组件之后 再定向到 /home1这个路径 重定向meta: { ti

原创 VUE自定义指令

filters 和 directives(自定义指令) 里面的this都不是当前的实例// 子组件<h2 v-color="color">自定义指令</h2><h2 v-color>自定义指令</h2>data() { return { color: "red" };},directives: { // filters 和 directives(自定义指令) 里面的this都不是当前的实例 color(el, bindings) {

原创 VUE插槽

插槽// 父组件<my-h2>猪猪雨</my-h2>//子组件<h2> <slot></slot> <!-- <slot></slot> 代表了 my-h2组件标签内部包含的内容 slot 标签里面的内容 是默认的展示值 (当my-h2组件标签的为空标签时展示) --></h2>具名插槽// 父组件<my-h2> <

原创 VUE组件传递参数

谁用谁，谁就是父组件全局组件和局部组件名字冲突时 局部组件会把全局组件顶替掉父向子传递参数 通过 属性 的方式父页面向子组件 ul-com 通过属性名 list 传递了一个数组数据 <ul-com :list="[1,2,3,4]">子组件通过 props 进行接收数据 props:{ list:Array ...

原创 VUE-ref

ref 用来 获取 DOM元素写了好几个ref 它只能获取最后一个如果是用v-for循环出来的他能获取一组 DOM元素VUE 的 DOM更新是异步的$nextTick 接收一个回调函数 该回调函数会在下一次DOM更新完成之前触发 类似一个 事件池this.$nextTick(() => { console.log(this.$refs.qqq); //控制台输出6个元素...

原创 VUE组件

组件的简单实用1.组件的定义在 src 目录下新建 文件夹 components 用来存放组件在 components 目录下直接新建组件 *.vue2.组件的引入在页面中 引入 组件 " import 组件名 from ‘组件路径’ "3.组件的注册在页面中的实例中，新增属性 components属性 components 是一个对象，把组件放进去注册4.组件的使用...

原创 安装sass

npm i node-sass sass-loader在命令行内若是安装sass不成功，可以在项目里创建一个.npmrc 文件 然后把下面的三行代码写入 再重新安装在项目内添加一个 .npmrc 文件：phantomjs_cdnurl=http://cnpmjs.org/downloadssass_binary_site=https://npm.taobao.org/mirrors/nod...

原创 react生命周期钩子函数

import React from 'react';import reactDOM from 'react-dom';class App extends React.Component { constructor(props) { super(props); } static getDerivedStateFromProps(props, state...

原创 react表单

非受控组件: 表单元素不受组件控制受控组件: 表单元素的内容 是依赖于本组件的数据; 写了value之后 必须有onChange事件与之对应import React from 'react';import reactDOM from 'react-dom';/** * 非受控组件: 表单元素不受组件控制 * 受控组件: 表单元素的内容 是依赖于本组件的数据; 写了va...

原创 react-ref

import React from 'react';import reactDOM from 'react-dom';/* ref=字符串 这种方式 将来会被废弃掉 ref={(el)=>{this.自定义属性=el}} 通用 通过ref 我们可以获取元素 也可以获取组件 跟VUE一致*/class Count extends React.Componen...

原创 面向对象练习题