小易不止于搬砖的博客

原创 【前端转安卓】-Java基础知识笔记

前端开发转安卓过程中，学习java笔记

原创 自定义删除无依赖文件的webpack插件

通过自定义webpack插件，利用执行完成编译的封存阶段后，产生的产物module.fileDependencies，生成依赖的文件组。通过读文件的方式，将待扫描的文件组和有依赖关系的文件进行对比。最终暴露出项目中，不存在依赖关系的文件，并可配置将其全部删除。

原创 前端对浏览器的理解

本文包含浏览器的大部分知识，涉及面广泛。涵盖浏览器构成、内核、渲染原理、缓存、安全问题、进程线程、事件模型、事件循环、版本检测等模块以及其具体细节。

原创 forEach/map中使用await报错或没有拿到实际的返回参数解决方法

场景解释：遍历一个数组，将数组的每一项作为入参调用接口，再将返回值拼接push到新数组中，此时，使用Promise.all 等待所有接口返回后 形成一个新数组。

原创 前端常用utils方法持续更新中

常用utils方法，总结沉淀

原创 vue数据更新table内容不更新解决方法

2、为table绑定一个key，数据变化时更改key值,或者使用v-if绑定一个不重复的值触发组件渲染。table组件绑定的数据变化时，页面没有重新渲染，常见于子组件中使用table组件。创建实例时 数组在vue中没有被监听到，属于非响应式数据，数组的下标变化无法监听到。1、利用vue中重写的数组方法。3、使用$set()

原创 vue常见日期库的差异以及使用方法

注意： 24h制时 HH:MM:ss 其中 M大写，s小写 否则不准确 日期大写：yyyy-mm-dd。注意： 24h制时 HH:mm:ss 其中 m，s小写 否则不准确 日期大写：YYYY-MM-DD。注意： 24h制时 HH:mm:ss 其中 m，s小写 否则不准确 日期大写：YYYY-MM-DD。日期库格式化大小写引发的惨案 format(“YYYY-MM-DD HH:mm:ss”)

原创 JS二维数组转化为对象

New Map 将会是无重复的数据，重复key取后一个。

原创 vue2升vue3差异点学习指南

vue3的学习成本如何？习惯使用vue2的开发如何平滑转vue3？

原创 浏览器系列之 Cookie 和 SameSite 属性

Cookie 的设置、属性

原创 查看、关闭端口命令

查看端口、关闭端口命令

原创 antv G6在vue项目中的实践总结

antvG6树图 自定义节点、边；数据更新后重新渲染以及tooltip的使用

原创 el-select el-option中使用搜索图标清空时图标消失解决

el-select el-option中使用搜索图标清空时图标消失解决方案

原创 el-select、el-option添加图标，搜索选项高亮

el-select、el-option添加图标，搜索选项高亮。

原创 el-form的resetFields()坑点

el-form的resetFields()坑点之未清空数组

原创 在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

在全局npm后的依赖可以正常使用，但是在项目中使用会出现如下问题pnpm无法加载文件

原创 axios设置请求头

axios设置请求头方式

原创 vue中key 值的作用

官方文档解释：key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。v-if 中使用 key由于 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是

原创 前端模块化：AMD&CMD&commonJS&ES6

AMD实现: require.jsAMD 是异步加载模块，可以指定回调函数使用方法就是通过一个全局函数 define，把代码定义为模块，再用 require 方法加载模块遵循依赖前置原则，需要把模块需要的依赖都提前在依赖数组里声明CMD实现:sea.js懒加载: 不需要在定义模块的时候声明依赖，可以在模块执行时动态加载依赖同时支持同步和异步加载模块遵循依赖就近原则CommonJs动态引入对模块是拷贝，修改原来模块的值不会影响引用的值

原创 手写前端常用算法

判断对象属性var uniqueObject = function(arr) { var v, r = [], o = {}; for(var i = 0; (v = arr[i]) !== undefined; i++) { !o[v] && (r.push(v), o[v] = true); } return r;};数组过滤重复项filtervar uniqueFilter = function(arr) { retur

原创 Typescript快速上手（js转ts必备）

接口interface1、定义一个接口LabelledValue ，在传参数的时候使用labelledObj：LabelledValueinterface LabelledValue { label: string;}function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label);}2、？： 可选属性interface SquareConfig { color?: string;

原创 样式污染引发的思考：scoped原理

1、用法scoped是实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。（事实上， scoped是一个boolean值）2、原理（postcss）给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性<style scoped lang="less"> .example{ color:red; }</style><template> <

原创 Arguments 对象

定义：arguments对象是所有（非箭头）函数中都可用的局部变量，我们可以用arguments[0]的形式取值类数组：arguments对象不是一个 Array 。它类似于Array，但除了length属性和索引元素之外没有任何Array属性。转化为数组var args = Array.prototype.slice.call(arguments);// 利用空数组上继承的原型方法var args = [].slice.call(arguments);// ES2015const ar

原创 vue响应式，数据劫持&发布订阅实现

vue数据双向绑定原理：数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。observer：每个对象的属性，添加到订阅者容器Dependency(Dep)中，当数据发生变化的时候发出notice通知。Watcher：某个属性数据的监听者/订阅者，一旦数据有变化，它会通知指令(directive)重新编译模板并渲染UIDep对象: 订阅

原创 TCP与UDP区别

原创 tcp三次握手、四次挥手过程

三次握手第一次握手：客户端给服务端发一个 SYN 报文，SYN=1，初始序号seq=x。此时客户端处于 SYN_SEND 状态第二次握手：服务器收到客户端的 SYN 报文之后，会以自己的 SYN 报文作为应答，SYN=1，ACK=1，确认号ack=x+1，初始序号seq=y。此时服务器处于 SYN_RCVD 的状态。第三次握手：客户端收到 SYN 报文之后，会发送一个 ACK=1 的报文，确认号ack=y+1表示已经收到了服务端的 SYN 报文。此时客户端处于 ESTABLISHED

原创 浅拷贝与深拷贝的原理、实现、区别

浅拷贝创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象浅拷贝实现function clone(target){ let cloneTarget = {}; for(const key in target){ cl

原创 element-ui popconfirm的回调函数使用

popconfirm的回调函数使用elementui: popconfirm <el-popconfirm confirm-button-text="好的" cancel-button-text="不用了" icon="el-icon-info" icon-color="red" title="这是一段内容确定删除吗？" @confirm="handlec

原创 npm源切换、管理nrm

npm查看源：npm config get registry永久切换源、设置源npm config set registry https://xxxxxxxx临时使用源npm i xx --registry https://xxxxxxx查看全局安装的包npm list -g --depth 0安装指定版本/最新版本npm i <module name>@1.0.0 //安装指定版本的模块npm i <module nam

原创 reduce 怎么用？原理与使用合集

reduce使用完全指北

原创 git stash 切换分支时不想提交又不想丢失更改

git - 拉取远程代码并且不覆盖本地修改的代码1、先将本地代码放到暂存区`git stash`2、将远程github（码云等）上面的代码拉取下来git pull 3、将第一步暂存区的代码放回本地git stash pop 4、下面继续我们平时的正常上传代码的操作即可：git add . 或者 git add -Agit commit -m '操作内容'git pushgit stash妙用以及原理1、stash当前修改git stash会把所有未提交的修改（包括暂存的

原创 Export2Excel插件导出表格内容转为excel文件

我们需要引入XLSX、file-saver两个插件再定义一个文件路径：vendor/并把Export2Excel.js文件放在此目录下 代码如下/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(table) { var out = []; var rows = table.querySelectorAll('tr'); var ra

原创 vuex-module-decorators食用方法

vuex-module-decorators

原创 前端上传文件限制指定文件类型 xls、xlsx、csv、image、video等

当我想要限制上传的文件格式时第一种csv<input type="file" accept=".csv" />.xls(Excel Files 97-2003)<input type="file" accept="application/vnd.ms-excel" />.xlsx(Excel Files 2007+ )<input type="file" accept="application/vnd.openxmlformats-officedo

原创 git提交代码流程

当我们从git仓库拉去代码后，我们当前分支将会是master，然后在实际工作中，规范要求我们创建自己的分支，开发后再进行合并，那么这一整个流程是啥样的呢？流程：1.创建自己的分支git checkout -b feat/mybranch2.查看当前分支git branch3.切换到你要开发的分支git checkout4.开发结束后提交代码git status. 查看当前被改动的文件状态git add . 所有文件暂存git commit -m ‘feat:you

原创 react-Dva数据流、dispatch

Dva 数据流话不多说先看图，分解来看，component 也就是你的组件，他的内部包含数据，方法。dispatch是什么呢？你可以理解为一个动作，他将派发action。包括effect、reducer、subscription等等。这些数据在变化后将更新你的数据state。你可以清晰的看见数据流的单向流动。Dva 结构一个Dva文件是怎样写的呢？js文件中的各个部分都有什么作用？export default { namespace:'yournamespace', state: { //存

原创 js处理数字的方法总结

常来看看！银行卡号每隔四位插入空格数字每三位用逗号分隔 适用于金额处理金额处理plus版大数相加的几种操作1（转化字符串）大数相加2阿拉伯数字转中文大写数字判断是数字

原创 vue虚拟dom树的diff算法

diff算法过程在数据更新的时候发生diff，因为数据更新会运行render函数得到虚拟dom树，最后页面重新渲染。当组件创建的时候，组件所依赖的属性或者数据变化时，会运行一个函数进行以下操作：运行render生成一颗新的虚拟dom树运行updata，传入render生成的虚拟dom树的根节点，对新旧两棵树进行对比，最终完成对真实dom的更新过程描述当组件创建和更新时，vue会执行内部的update函数，该函数使用render函数生成的虚拟dom树，将新旧两树进行对比，找到差异点，最终更新到真实d

原创 vue中v-if和v-show的区别

v-if的使用：通过判断条件进行显示v-show:控制元素显示或隐藏区别：v-if 是通过操作DOM树进行元素的显示或隐藏，他会直接从DOM树中移除或添加一个元素。切换过程中会销毁监听事件或子组件。适合不频繁的改变元素，且通过后端接口调用的数据进行控制时，操作DOM切换消耗较大。v-show：通过控制元素的display属性为none进行隐藏、block显示。改变的仅仅是css属性。适合频繁改变元素状态，他带来的消耗是重绘，渲染消耗。例子：可以在控制台观察DOM结构<div id="ap

原创 jQuery animate()left的注意

.music{ width: 550px; height: 120px; background: rgb(10, 0, 0); position: relative; left: 0; margin-left: 0; bottom: -7px; opacity: 0.8; box-shadow: 15px 10px 10px 1px #8c8f82;}把position:relativer然后animate中的left,top才