qq_42928070的博客

原创 PC端自适应（vue）&& 移动端+vant

npm i lib-flexible -Snpm i px2rem-loader -D安装完成以后在main.js引入import 'lib-flexible'在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。我们只需在 cssLoader 后再加上...

原创 vue3 naive垃圾控件bug

vue3 naive

原创 问题记录： flex布局

flex布局和overflow关系，flex布局下使用ivew/element Table自动收缩动画或不收缩，设置overflow后异常消失

原创 render组件值未修改问题

render: (h, params) => { const { sortNum, id } = params.row; return h( 'Input', { props: { value: (sortNum || sortNum === 0) ? sortNum : '', size: 'small', maxlength: 4, }, ...

原创 前端文档整理

vue-press 查看面试笔记 查看

原创 webpack打包策略、treeShaking

打包策略选择合适的打包粒度，生成的单文件大小不要超过500KB充分利用浏览器的并发请求，同时保证并发数不超过6尽可能让浏览器命中304，频繁改动的业务代码不要与公共代码打包避免加载太多用不到的代码，层级较深的页面进行异步加载基于以上原则，我选择的打包策略如下：第三方库如vue、jquery、bootstrap打包为一个文件公共组件如弹窗、菜单等打包为一个文件工具类、项目通用基类打包为一个文件各个功能模块打包出自己的入口文件各功能模块作用一个SPA，子页面进行异步加载代码分离

原创 未解决问题

dom异步加载到列表中将表格中某一列code通过调用接口查找转为name问题

原创 Vue封装双向数据绑定组件、对象传参

使用v-bind 对象传参v-model 传参v-bind:xxx.sync双向绑定传参<template> <div> <div>{{proxy.value}}</div> <h4>{{age}}</h4> <h3>{{modelProp}}</h3> <h2>{{syncProp}}</h2> <el-button @cl..

原创 ts使用笔记

ts中使用中括号获取属性值，即val = obj[key]解决方法1.2. 在tsconfig.json中配置suppressImplicitAnyIndexErrors为true

原创 vue3+ts使用js插件

解决方法：如果npm仓库含有@types/XXX安装包，可以使用npm i @types/XXX下载如果没有则自己声明一个xxx.d.ts 文件，文件内抛出any类型的文件文件内容 declare module 'vue3-cron' （例如使用vue3-cron）最后：记得重启编辑器(idea)...

原创 flex垂直居中问题

.container{ display: flex; justify-content: center; aligin-items: center;}垂直居中当内容超过container，上方会超出容器设置.item{ margin: auto;}或：justify-content: safe centeralign-self: safe center

原创 v-bind绑定对象

父组件子组件// 子组件this.myName = 111;this.myValue = 222

原创 文件转二进制文件流

// 将文件转为二进制export function fileParse(file, type) { const caseType = { 'base64': 'readAsDataURL', 'buffer': 'readAsArrayBuffer' } const fileRead = new FileReader() return new Promise(resolve => { fileRead[caseType[type

原创 mixin和组件生命周期

总结： mixin生命周期总在组件生命周期之前执行mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > mixin的mounted >父mounted...

原创 deepClone深拷贝

function cloneDeep(data) { let t = type(data), o, i, ni; if (t === 'array') { o = []; for (i = 0, ni = data.length; i < ni; i++) { o.push(cloneDeep(data[i])) }; return o; } else if (t === 'object') { o = {}; for (i in

原创 资料文件记录

package.json配置：https://www.cnblogs.com/wjlbk/p/12884673.html

原创 手写 JSON.stringify()

function getType(attr) { let type = Object.prototype.toString.call(attr); let newType = type.substr(8,type.length-9); return newType;}export function StringIfy(obj) { if(typeof obj !== "object" || getType(obj) === null) { return

原创 多层级vue Router递归取出最底层

/** * 取出所有最底层的路由 * @returns {Array} */export function flattenDeep(routeArr, arr=[]) { routeArr.forEach(route => { if (route.children && Array.isArray(route.children)) { flattenDeep(route.children, arr) } else

原创 Vue.use为什么要使用install

疑问：Vue.use注册插件和Vue.prototype.xxx挂载方式有什么区别，使用Vue.use优势在哪，为什么使用，为什么不使用Vue.prototype.xxx从源码分析：// Vue源码文件路径：src/core/shared/util.jsexport function toArray (list: any, start?: number): Array<any> { start = start || 0 let i = list.length - start .

原创 webworker

仅作使用记录<script id="worker" type="app/worker"> addEventListener('message', function (e) { console.log("scrip",e) postMessage(e.data); }, false);</script><script> var blob = new Blob([document.querySelector('#worker.

原创 手写js实现new

new的过程：1.创建新对象；2.将新对象的原型指向构造函数；3.将构造函数的属性绑定到新对象上；4.返回新对象；根据步骤我们一一实现function myNew(fn,...args){ let obj = {}; obj.__proto__ = fn.prototype; const result = fn.call(obj,...args); return result == 'object' ? result : obj;}...

原创 发布订阅者模式以及vue中使用解析

发布订阅模式：也称作观察者模式，定义对象间的一对多的依赖关系，当一个对象的状态发 生改变 时，所有依赖于它的对象都将得到通知； 编码中常用的场景：//订阅事件window.addEventListener('click',()=>{ alert("监听到某事件")})//发布事件window.click() 举个例子：B是天气预报中心，用户A想从B处获取天气预报；A就要将自己的联系方式储存到B处，当天气预报更新以后，B发送天气信息给A； 此处：存储就相当.

原创 import和require区别

1. 写法不一致exports/require写法const fs = require('fs') exports.fs = fs module.exports = fsimport/export写法import fs from 'fs'import {default as fs} from 'fs'import * as fs from 'fs'import {readFile} from 'fs'import {readFile as read} from 'fs'imp

原创 addEventListener监听事件，以及初始加载页面触发问题

addEventListener("click",function(){},true);第三个参数：为true时捕获，false时冒泡;vue中使用methods:{ getPic(){ console.log("触发监听") if (window.defectPic !== "END") { this.picData = "data:image/png;base64," + window.defectPic; if (this.submitImgArr.length &l

原创 数据类型判断typeof instanceof

正则、null、array 、Date等都为object；instanceofconst [a3, b3, c3, d3] = [[], {}, new Date(), /\s/];console.log(a3 instanceof Array); // trueconsole.log(b3 instanceof Object); // trueconsole.log(c3 instanceof Date); // trueconsole.log(d3 instanceof RegExp); .

原创 vue报错整理

1.报错的原因是因为当前页面中的变量名与事件名一致发生了冲突

原创 Tcp

TCP链接建立和关闭（3次握手4次挥手）客户端发送SYN包（SYN = 1, seq = x）至服务端，并处于SYN_SENT状态，等待服务器确认服务端解析SYN，并发送SYN + ACK（SYN = 1, ACK = x + 1, seq = y）包至客户端，并处于SYN_RECV状态，允许建立链接（告知服务器已做好准备，可以发送数据）客户端获取SYN + ACK 并发送ACK（ACK = y + 1， seq = z）包至服务端，链接建立成功。（即将开始发送数据）TCP向服务端发送带有FIN

原创 vue 自定义组件v-model实现双向绑定

model2.2.0 新增类型：{ prop?: string, event?: string }详细：允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。Example：Vue.component('my-checkb

原创 闭包

1.可以读取函数内部的变量2.让这些变量的值始终保存在内存中

原创 axios终止请求

当条件搜索时，快速频繁点击某一个搜索项，如果上一次的请求时间过长而下一次的请求时间较短时，上一次的请求结果将会覆盖下一次的请求数据，造成显示得结果数据不是我们预期的结果，影响用户使用。axios方法中提供了取消请求的接口：axios详细介绍封装axios情况：api封装文件：export const postCancleRequest = (url, params, that) => { return axios({ method: 'post', ur

原创 babel/polyfill

Babel官方文档：https://babeljs.io/docs/en/configurationbabel:目前接触到的是将ES6转换为ES5；polyfill：对浏览器不支持的API进行转换；（暂做笔记，后续更新）

原创 CSRF 和 XSS 的区别 Async/Promise/Generator apply、call与bind

CSRF 和 XSS 的区别区别一：CSRF：需要用户先登录网站A，获取 cookie。XSS：不需要登录。区别二：（原理的区别）CSRF：是利用网站A本身的漏洞，去请求网站A的api。XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。apply、call与bindapply传数组或对象，但对象无作用...

原创 手写js--forEach

forEachif(!Array.prototype.myEach){ Array.prototype.myEach = function(callback,thisArg){ var T ,k; console.log("this===",this,thisArg) if(this === null){ throw new TypeError('this is null or not defined'); } var O = Object(this); consol

原创 浏览器的工作原理

记录：https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#Event_loop

转载 js数组内存分配

JavaScript 中的数组有很多特性：存放不同类型元素、数组长度可变等等，这与数据结构中定义的数组结构或者C++、Java等语言中的数组不太一样，那么JS数组的这些特性底层是如何实现的呢，我们打开V8引擎的源码，从中寻找到了答案。V8中对数组做了一层封装，使其有两种实现方式：快数组和慢数组，快数组底层是连续内存，通过索引直接定位，慢数组底层是哈希表，通过计算哈希值来定位。两种实现方式各有特点，有各自的使用情况，也会相互转换。一、背景使用 JS 的数组时，发现 JS 的数组可以存放不同类型的元素、并且

原创 重绘和回流

重绘和回流（重排）的区别和关系？#重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流注意：JS 获取 Layout 属性值（如：offsetLeft、scrollTop、getComputedStyle 等）也会引起回流。因为浏览器需要通过回流计算最新值回流必将引起重绘，而重绘不一定会引起回流DOM结构中的各元素都有自己的盒子，这些都需要浏览器根据各种样式来计算并更具结果将元素放到它该出现的位

原创 js遍历

原创 position、float、z-index分层问题

记录

原创 npm scripts命令

在webpack执行命令之后可以添加一些参数，这些参数都有自己的作用，下面是参数列表：$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包$ webpack --watch //监听变动并自动打包$ webpack -p//压缩混淆脚本，这个非常非常重要！$ webpack -d//生成map映射文件，告知哪些模块被最终打包到哪里了其中的 $ webpack --progress //显示进度条$ webpack --

转载 webpack配置

一、多个入口文件之前我们配置的都是 一个入口var webpack = require('webpack');var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');module.exports = { //页面入口文件配置 entry: { index: './src/index.js' }, //入口文件输出配置 output: {