- 博客(98)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 js常用的工具库
数组篇数组去重var fruits1 = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple'];var uniqueFruits1 = Array.from(new Set(fruits1))console.log(uniqueFruits1)//["banana", "apple", "orange", "watermelon", "grape"]var uniqueFruits2 = [
2020-05-31 15:35:47
487
原创 flex弹性布局用法笔记
display:flex介绍 这个是弹性布局必须要的属性，让竖的变横弹性布局之所以功能强大灵活，是因为它打破了很多原有的规则。可以将任意元素设置为弹性布局，弹性布局会对其内部的子元素产生影响：
2020-03-16 16:45:19
453
原创 CSS的技巧写法(长期更新中~)
1.当文字多时占一行 overflow: hidden; text-overflow:ellipsis; white-space:nowrap;2.清除float的一种写法.clearfix:before,.clearfix:after{ content: " "; display: table;}.clearfi...
2018-05-09 10:24:26
446
原创 前端API: IntersectionObserver的那一二三件事
IntersectionObserver 可以监听一个元素和可视区域相交部分的比例，然后在可视比例达到某个阈值的时候触发回调。可以用来处理图片的懒加载等等
2024-05-28 17:13:26
584
原创 React-hooks相关知识点总结
随着函数式组件的不断流行，React从类式组件走上了函数式组件的时代，那么在新的React函数式编程中，hooks也成为了这个时期最广泛使用的一种方式。现在让我们总结下react hooks吧。简单理解呢 useCallback 与 useMemo 一个缓存的是函数，一个缓存的是函数的返回的结果。useCallback 是来优化子组件的，防止子组件的重复渲染。useMemo 可以优化当前组件也可以优化子组件，优化当前组件主要是通过 memoize 来将一些复杂的计算逻辑进行缓存。
2024-05-08 16:39:31
992
原创 vue采用相同子组件表单，表单清空的解决
在项目中做添加和编辑功能时候，点击父级页面的添加和编辑按钮，用的是同一个表单弹窗，数据添加和编辑用同一个弹窗，没有在弹窗使用v-if，性能不是很好，弹窗中有表单，在编辑弹窗表单数据之后关闭弹窗，然后点击添加的时候，弹窗里的表单数据还是之前编辑的数据，无法做到清空表单数据。以下为解决办法首先是不管是添加还是编辑，都需要将子组件需要的对象属性一一写出来，传给子组件，然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField()，...
2021-10-19 10:17:48
1328
原创 git小书
文章目录前言1.Git的安装与配置1.1 安装1.2 配置1.3 一台机器控制多个仓库2.工作流(与经理的对话)3. 还未建立远程仓库推送代码4. 本地已有代码，这时想创建远程仓库做关联5. 打包管理6.分支管理（多人协作）6.1多人开发的步骤6.2 解决2人同时更改同一个分支导致代码推不上去的问题6.3 解决代码冲突问题7.git reset和git revert的比较git reset方法:git revert8.git命令大全表8.1 git命令大全表8.2实用的linux命令前言Git仓库是对项
2021-07-16 16:14:38
301
1
原创 我喜欢的Array.prototype.reduce登场
1.reduce的简述reduce() 方法接受一个数组作为输入值并返回一个值，这点比起其他方法来说非常的有趣。reduce 接受一个回调函数，回调函数参数包括一个累计器【accumulator】（数组每一段的累加值，它会像雪球越滚越大），当前值【currentValue】，和索引【currentIndex】， 和当前数组【array】。reduce 也接受一个初始值【initalval】作为第二个参数:let finalVal = oldArray.reduce( (accumulator, cu
2021-07-07 11:36:18
116
原创 用docker+jenkins+github+nginx 搭建自动化构建
这里主要是介绍docker+jenkins+github+nginx 搭建自动化构建平台。首先，这里不会具体讲他们四个环境是怎么搭建的，因为网上已经有很多类似的文章了，可能只会穿插的讲讲他们搭建的时候的一些坑，以及最重要的还是讲他们怎么连通以及如何进行自动化 构建吧。 ...
2021-01-09 20:27:39
528
原创 npm link的基本用法及实例说明
如果我们想自己开发一个依赖包，在多个项目中使用它，如果直接发布到官网上固然可以，但如果修改则会非常麻烦，而且不利于在多个项目中使用。npm link命令可以帮助我们实现这个事情假如我们开发一个名为allenModule95的依赖包。首先需要在该依赖包下运行npm init命令，并编写index.js文件module.exports = { name: "allenModule95Name", sayHello: function(){ console.log(
2020-11-11 18:51:57
6360
原创 git push时候出现client_loop: send disconnect: Connection reset by peer
在git push时候将上传文件传到远程仓库时总是出错，原因是文件过大造成的，报错信息如下原因：http.postBuffer默认上限为1M,所以将上限改大就行解决方案:git config --global http.postBuffer 524288000,之后就能顺利上传了// 这里该成500M...
2020-10-15 16:40:12
10050
1
原创 js的eval代码快速解密
此方法就是对一些已经混淆过的代码进行反解密，亲测有效方法：新建一个html文件，把上面eval替换成document.write输出即可。备注，前后加xmp标签的作用是完整的输出html标签，并且不做任何转义。代码如下:<html><head><title>eval解密</title></head><body><script type="text/javascript">document.wr
2020-07-07 11:22:43
491
转载 Uncaught TypeError: cannot set property “onclick” of undefined 解决办法
如果把js内容直接放在这个head标签以内，button按钮不能正常点击更换body的背景颜色，报错提示：demo6.html:16 Uncaught TypeError: Cannot set property 'onclick' of null，分析解决办法如下：<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta nam
2020-06-24 22:04:55
6057
1
原创 Vue路由跳转的方式
router-link方式<!--不带参数--><!--name,path都行, 建议用name--> <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> <!--注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始--><!--带参数--><router-link :to="{n
2020-06-09 23:22:53
175
转载 yarn的安装和使用
yarn的简介：Yarn是facebook发布的一款取代npm的包管理工具。yarn的特点：速度超快。 Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。 超级安全。 在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。 超级可靠。 使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。 yarn的安装:下载node.js，使用npm安装npm insta...
2020-05-11 16:40:59
166
原创 Vue组件的渲染更新原理解析
本版本是对于vue2.x的总结，未来等学习了vue3，再完善对比一波！然后就是说，我们这里主要介绍原理部分，所谓二八原则，我们一切都从最重要的说起吧！一切从这张图开始让我们一步步看吧！一、初始化在new Vue()之后。 Vue 会调用_init函数进行初始化，也就是这里的init过程，它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。二、模板编译上面就是使用vue template complier（c
2020-05-10 17:55:09
1956
原创 来一波Vue.js生命周期
一、Vue生命周期的四个阶段Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。...
2020-05-10 17:40:22
262
原创 git rebase 和 git merge 的区别实验
git rebase 和 git merge 一样都是用于从一个分支获取并且合并到当前分支，但是他们采取不同的工作方式，以下面的一个工作场景说明其区别。场景：如图所示：你在一个feature分支进行新特性的开发，与此同时，master 分支的也有新的提交。首先master上有三个原始文件:然后git checkout -b feature，在feature上进行新特性的开...
2020-04-28 16:42:35
271
原创 axios学习笔记与封装
axios的介绍Axios是一个基于Promise的HTTP库。类似于Ajax, 用于HTTP请求 可以用于浏览器和node.js。既可以用于客户端，也可以用于服务端。 支持promise API 拦截请求和响应。可以在请求或响应前做一些操作。比如在请求前，给请求头加一些授权信息等。 转换请求数据和响应数据。例如在请求时，一些敏感信息需要加密，接收时需要解密。 取消请求。 自动转...
2020-04-27 16:49:59
289
原创 前端开发的角色分配
一、项目角色PM产品经理UE视觉设计师FE前端开发RD后端开发CRD移动端开发QA测试二、完整项目流程需求分析-各个角色技术方案设计-FE RD CRD开发- FE联调 - FE RD CRD测试 - FE QA上线 - FE三、各个阶段的详解1.需求分析了解背景(为什么要做这个)质疑需求是否合理需求是否闭环(比如点赞后有什么目的吗,今后有什么用)开发难度如何(比...
2020-04-16 20:38:57
1977
原创 webpack4.x 系列(七) ☞ 常见的loader、plugins、webpack内置
这部分主要是讲常见的loader和plugins部分。一、loader部分loader最好以后用对象的方式，loader执行时从下到上，从右到左的执行循序。file-loader:将文件打包到输出路径，并将打包后的路径返回，像字体打包，大图片打包等等。url-loader: 可以设置limit值，如果小于值则以base64放入js，大于这个值则以file-loader打包。其中1024B...
2020-04-15 13:53:38
246
原创 webpack4.x 系列(六) ☞ devServer的一些配置
我们都知道，在浏览器端会有同源策略，不符合同源策略(也就是协议、域名、端口号三者组成的同源策略)的资源是获取不到的。那如何能够获取一些其他网站的资源呢？答案就是跨域，那么这里就讲下devServer中常用的一些东西，然后最后重点讲下proxy的方式。一、什么devServer通过来自 webpack-dev-server的这些选项，能够用多种方式改变其行为。来看一个例子：dev...
2020-04-11 23:58:10
482
原创 webpack4.x 系列(五) ☞ webpack多页面打包
单页面应用：整个应用里面只有一个html文件。现在主流的框架，vue，react都是单页面应用。所以webpack绝大部分都是对单页面打包。那么webpack如何对多页面进行打包。目录：|- build |- webpack.common.js//公共webpack |- webpack.dev.js// 开发模式webpack，前期用merge合并 |- webpack.prod...
2020-04-07 20:12:18
270
原创 webpack4.x 系列(四) ☞ webpack打包性能优化
本章讲解是webpack打包时候能够进行的性能优化，让大型项目在打包的时候能够变得更快，这种打包运用在开发环境下，让编码打包变得快捷。1.更上技术的迭代(Node\Npm\Yarn)因为技术的更新，很大程度上化优化打包的速度，官网会对新的版本进行优化，从而提高打包的速度。2.尽可能少的模块上使用Loader比如说，我们在js打包的时候加上exclude:/node_modules/...
2020-04-06 00:08:48
462
原创 webpack4.x 系列(三) ☞ typescript的打包
2020年了，typescript都已经大规模的使用了，你要不要learn它呢！话说，我们的浏览器是不支持typescript语法的，所以为了能浏览器支持，特意用了webpack的打包技术！typescript有什么作用：代码不够规范时，会及时给与我们提示，可以让我们更严谨、规范的书写代码. 类型检查严格，减少编程中的低级错误出现. 提高我们代码的可维护性。首先我们来看一段代码：只是...
2020-04-03 18:10:38
459
原创 webpack4.x 系列(二) ☞懒加载 、Preload、Prefetch的讲解
这部分讲解是根据打包后的文件分析，我们可以使用的工具。还有chunk为什么默认用异步方式打包，以及浏览器查看代码利用率。一、打包后代码的分析我们会对打包的过程做分析，分析步骤：1.先在package.json里面的script上面写上这个，--profile--json>stats.json，如下面所示：打包会生成一个stats.json的文件2.然后Insta...
2020-04-02 13:25:28
1341
原创 webpack4.x 系列(一) ☞SplitChunksPlugin 代码分割
一、SplitChunksPlugin的概念最初，Chunks块(以及在其中导入的模块)是通过内部webpack图中的父子关系连接的。CommonsChunkPlugin被用来避免它们之间的重复依赖关系，但是进一步的优化是不可能的，所以，CommonsChunkPlugin被移除，转而继续优化，所以在webpack4引出了SplitChunksPlugin，使之可以很好地为大多数用户服务。...
2020-03-31 21:48:51
509
原创 Vue学习高级特性(三)---动态组件、异步加载组件、缓存组件、如何抽离公共逻辑
本章学习动态组件、异步加载组件、缓存组件、如何抽离公共逻辑这4部分内容。一、动态加载组件来直接上代码:<div id="app"> <!-- 动态组件绑定原理 <child-one v-if="type==='child-one'"></child-one> <child-two v-if="ty...
2020-03-24 14:38:20
1180
1
原创 vue学习高级特性(二)--$nextTick、自定义v-model
这部分来讲vue的高级特性--$nextTick和自定义v-model，写这个主要是给自己有一个大致的印象。一、$nextTick直接来看代码：<div id="demo"><ul ref="qq"> <li v-for="(item, index) in list" :key="index">{{item}}</li>&l...
2020-03-24 13:39:48
348
原创 vue学习高级特性(一)--三种插槽(slot)用法
本章主要是讲slot插槽部分，分【slot的基本使用】、【slot的具名插槽】、【slot的作用域插槽】讲解。插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。一、slot的基本使用子组件：...
2020-03-22 14:06:37
1656
原创 js的this讲解
涉及面试题：如何正确判断 this？箭头函数的 this 是什么？先记住了一句话this取什么值是在函数执行时候确定的，而不是在函数定义时候确定的！场景一：作为普通函数function foo(){ console.log(this)}foo()对于直接调用foo来说，不管foo函数被放在了什么地方，this一定是window场景二：作为对象去调用：...
2020-03-21 13:47:56
185
原创 js之词法作用域及闭包
一、作用域我们平常用的作用域叫做词法作用域，词法作用域的内涵是，作用域在词法分析阶段就被确定了（写代码的时候就确定了），也就是说，变量在代码中所处的位置 (而不是运行时所处的位置)，决定了作用域。下面介绍作用域分【全局作用域】、【函数作用域】、【块级作用域】、【作用域链】、【闭包】。看张全景图：二、全局作用域全局变量有全局作用域: 网页中所有脚本和函数均可使用。var...
2020-03-21 13:19:52
294
原创 vue学习--$emit 与 props 以及非父子组件之间的通信
一、$emit的用法主要是子组件可以使用 $emit 触发父组件的自定义事件。子组件：通过自定义组件sendCity向父组件派发<template> <div> <button @click="handleCity">changeCity</button> </div></template>...
2020-03-20 22:05:12
252
原创 vue学习--vue修饰符
一、事件修饰符vue为v-on或者@的方式提供了事件修饰符，通过点(.)表示的指令后缀来调用修饰符。如v-on:click.stop。.stop 阻止事件向外冒泡.prevent 阻止默认行为.capture 将事件冒泡改为事件捕获的方式.self 只会触发自己的默认行为，也就是说只有在e.target === e.currentTarget 才会执行。.once 只执行...
2020-03-20 19:21:33
158
原创 var 与 const let的区别
一、var 变量可以挂载在window上，而const、let不会挂载的window上。var a = 100;console.log(a,window.a); // 100 100let b = 10;console.log(b,window.b); // 10 undefinedconst c = 1;console.log(c,window.c); //...
2020-03-17 21:07:12
116
原创 前端进阶知识(一)之浏览器渲染机制
这张主要分5个环节寻行渐近的回答，分别是【什么是DOCTYPE及作用】、【浏览器渲染过程】、【重绘Reflow】、【重绘Repaint】，很多都是直接通过本人用大白话讲。一、什么是DOCTYPE及作用1.DTD（文档类型定义）：DTD就是告诉浏览器我是什么类型，浏览器根据这个判断用什么来解析渲染它。而DOCTYPE就是告诉浏览器是哪个DTD(文档类型)比如：① h5方式的，<...
2020-03-10 21:57:44
206
python爬虫自己学习资料.zip
2019-08-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人