- 博客(26)
- 收藏
- 关注
RSS订阅原创 前端工程规范，添加prettier，commitlint
背景问题1：在我们团队协作开发中， 老是遇到这样的问题， 由于每个人的编辑器格式化代码的设置不一样，导致你格式化的时候出现一大片代码更改。问题2： 在平时提交代码的时候有的同学，很随意， 修复了一个bug就是，fix，然后没有什么描述，通过提交记录很难判断他更改了什么。解决方法代码格式化 ---- 项目配置 prettier代码提交规范 — commitlint实践（prettier）项目引入prettieryarn add --dev --exact prettier新建文件 .
2021-10-27 16:27:23
406
原创 前端面试必问基础
html盒子模型文档dtd块状元素， 空元素， 行内元素csscss居中方式定位两拦布局怎么实现（双飞翼布局， 圣杯布局）flex 布局 属性 详解。 flex： 1 缩写代表什么意思。 flex：0 和flex： 1的区别浏览器的回流和重绘js作用域链， js预编译闭包（原理及应用）， 继承， 面向对象跨域， jsonp原理函数的节流和防抖。深拷贝（考虑循环引用）、浅拷贝事件委托设计模式（单例模式， 观察者模式）浏览器缓存（强缓存协商缓存）cookie的详细
2021-03-22 16:48:21
249
原创 vue-cli3 使用jsx踩坑(Duplicate declaration “h“ (This is an error on an internal node. Probably an inter)
近来想在vue-cli3的项目中使用jsx的语法，然后按照网上教程一顿百度，也看了vue官方文档，按照官方文档一顿操作点击插件配置babel一顿配置瞬间感觉自己好棒棒，一下子配好了，殊不知- 结论！！！！！！！！！！！！！！！百思不得骑姐， 我是按文档来的啊， 然后一查资料，殊不知vue-cli已经内置了jsx的支持， 根本不需要自己额外配置。天啦撸~~， 希望各位同僚也不要犯同种错误。...
2021-01-28 11:32:40
4700
10
原创 函数的防抖和节流
同很多人一样，起初我对函数防抖和节流的概念很模糊，但经过我一番学习之后，分享一下我的学习心得。概念函数防抖：延迟要执行的动作， 若在延迟时间内动作再次被触发，取消 之前开启的动作，则重新开始计时，重新触发。例子： 若电脑休眠时间是一分钟， 如果在这期间我们动了鼠标，他又会重新开始计时，一分钟再休眠。实现： 定时器。应用： 搜索框搜索函数节流： 设定一个特定的时间，让函数在特定的时间内只执行一次，不会频繁执行实现： 定时器应用： 鼠标滚轮滚动实战函数防抖：搜索框。每一次输入都会
2020-11-20 16:38:10
165
1
原创 浏览器缓存之强缓存和协商缓存
在我们的网页浏览过程中， 我们通常会有一种感觉，就是一个新的网页除了第一次打开慢一点，第二次，第三次打开就会快了很多，这里就采用了我们的浏览器的缓存策略， 接下来就让我们一起来了解他。1.缓存定义： 浏览器将用户之前请求的数据存储起来(浏览器内存， 磁盘，硬盘)， 当用户再次访问的时候，直接从本地请求数据。2.缓存的好处减少请求个数节省带宽， 避免浪费不必要的网络资源减轻服务器压力提升用户体验，加快访问速度3.缓存分类
2020-11-19 22:23:41
297
1
原创 vue双向绑定原理之Object.defineProperty的应用
众所周知，vue2.0的双向数据绑定使用es6的Object.defineProperty方法实现的，本文我讲会为大家仔细讲解之间的实现原理。Object.defineProperty() 法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。这个方法接收三个参数， Object.defineProperty(obj, prop, desc)obj 需要定义属性的当前对象.prop 当前需要定义的属性名.desc 属性描述符(configurable, enu
2020-07-01 13:37:57
357
2
原创 javascript特效之滑动滑块登录
在网上经常看到那种登录的时候有个滑块可以拖动，拖到到最右侧然后自动登录的效果，今天我来自己实现一下，大家一起学习。
2020-06-17 16:57:10
480
原创 javascript特效之瀑布流
最近给大家分享一下在项目中用原生js实现的瀑布流特效。要实现瀑布流，先让我们来看看他的实现步骤。1.给div设置浮动。 float：left。2. 计算可视宽度下，每一行能放多少个3. 把第一排的的元素的高度，存入一个数组中， 找到里面最小的高度，给后面的行设置定位，改变top，left。高度累加。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me
2020-06-17 10:21:56
148
原创 javascript之原型链和继承
今天我和大家一起复习学习一下javascript中的原型链和继承。原型链下面用一张图带大家看清楚原型链构造函数的原型有一个constructor属性指向构造函数本身，实例的隐式原型_proto_指向构造函数的原型。Person.prototype.constructor === Person //trueperson._proto_ === Person.prototype // true继承（原型继承、构造函数继承、组合继承，寄生式继承，寄生组合式继承）原型继承// 父类
2020-06-15 12:15:58
244
原创 javascript之箭头函数
箭头函数有几个使用注意点。（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。this对象的指向是可变的，但是在箭头函数中，它是固定的。箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），
2020-06-14 14:44:29
218
原创 webpack性能优化之DllPlugin插件的使用
在我们的项目开发中，如果使用webpack来打包编译我们的项目，我们都会遇到一个问题，当项目的依赖变得越来越多时，我们会发现webpack的打包速度会越来越慢，怎么去解决这个问题呢。首先我们先思考一个问题，webpack打包的时候是把所有文件都打包，但是对于我们引入的那些第三方库它是不会变的，有必要每次都打包吗？我们是不是可以把这些东西都提取出来，只打包一次，让页面引入我们打包生成的库文件，这样以后每次打包就都把这个第三方的库排除在外了，只在第一次打包的时候打包一次。这个功能的实现就是我们今天要说到的web
2020-05-15 11:12:07
1165
原创 webpack4从零开始项目构建（entry，output，module，plugins, devServer）介绍和使用
webpack作为我们项目开发中广发应用的一款模块打包工具，如果你对它还不熟悉的话，如果你还停留在npm run dev的话，接下来就跟我一起来走近webpack，了解它，拥抱它，本文介绍的是webpack4的版本。1. webpack的安装全局安装// webpack-cli 可以使webpack能够被命令运行npm install webpack webpack-cli -g// 打包jswebpack xxx.js局部安装（全局安装可能会使一些webpack3的项目无法运行，这
2020-05-14 15:06:18
335
原创 websocket之socket.io前后端联调详解（nodejs方向）
在我们的开发中，传统的ajax是客户端向服务器发送请求，你需要拿什么数据就要发什么请求，像那种数据不断变化的，我们只能隔一会请求一次，隔一会请求一次，这就是我们常说的ajax轮询，但是websocket的出现极大的改善了这一现状，一旦建立连接，服务器就能主动的向客户端发送数据，美滋滋。接下来我带大家来领会websocket的奥妙吧，看看实战项目中的websocket前后端联调是怎么实现的。1. 在服务端express中使用socket.io// sockeet 在nodejs中需要与nodejs服务建立
2020-05-13 14:08:46
940
原创 react核心api之setState详解
react的核心api-setState想必大家是再熟悉不过了，本文我讲仔细来讲解它的三大特性，你可能有意向不到的收获哦不可变值有时同步有时异步可能会被合并有些同学看到这三个概念可能会有点疑惑，不要担心，接下来我会为大家一一讲解。1. 不可变值不可变值得意思是在state的中声明的值， 不可在setState之前改变(react官方推荐)，例如class demo01 extends React.Component{ constructor(props){ super(props)
2020-05-12 14:28:07
352
原创 MongoDB的基本操作及node中mongoose的使用
1.mongoDB的安装（下载地址）下载mongoDB后一路下一步安装完毕之后，配置环境变量2. 配置环境变量在系统环境变量path路径添加mongodb下载的bin目录所在地址，我下载的是c盘，路径就是（C:\Program Files\MongoDB\Server\4.2\bin）3. mongoDB基本操作1.mongod --version（安装成功配置环境变量之后可以查看版本）2. 启动，停止数据库启动：/*默认执行mongod命令 所处盘符的根目录下/data/db作为自己的
2020-05-10 16:09:55
796
原创 react前端面试汇总
1. react 生命周期挂载constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。componentWillMount() => componentDidMount() =...
2020-04-21 13:49:53
236
原创 js实现二分查找法
二分查找法： 对于有序的数列， 才能使用二分查找法。 假设有一个数组长度为n，开始查找范围为[0,n-1],从一个数组的中间位置m，开始查找，如果这个数是，那我们就找到了，如果不是，比较要找的这个数和中间数的大小，如果大于中间的这个数，就从中间这个数+1的位置的右侧查找[m+1, n-1]，又取这个区间中间的， 如此查找，小于也是一样的逻辑，直到找到为止。接下来我就用js实现这段逻辑。/** ...
2020-04-15 16:09:15
495
原创 axios请求封装，实现get，post（json格式），postForm（表单提交）方法
在我们项目开发过程中，离不开与后台的交互，那就是我们常说的掉接口，在脱离了jquery开发体系，在我们的框架vue，react，等的开发中axios脱颖而出，下文代码示例工作中自己封装的请求。import axios from 'axios';import { message } from 'antd';import qs from 'qs';import config from '@c...
2020-04-13 15:53:56
3002
原创 localStorage工具类的封装分享
在实际项目开发的过程中，我们难免会用到本地缓存这些东西，像cookie，localStorage，sessionStorage啊，虽然这些很简单，今天分享一个基于localStorage工具类的封装。/** * localStorage 帮助类 * 小提示： 用static修饰的方法，可以用类型加方法名自己调用 */class localStorageUtil { /** * lo...
2020-04-13 11:28:45
658
原创 input失去焦点事件与按钮保存事件冲突事件的解决方法
在我们实际开发过程中，表单很多的情况下，对每个表单值改变的时候做事件监听，一般都选在失去焦点的时候触发失焦事件，而不是在输入的时候做事件处理，这样会消耗性能或资源，造成页面卡顿什么的。但是失焦触发也有一个问题，就是在输入完，直接点击按钮保存的时候， 按钮的点击事件会失效， 这是因为失焦事件总是优先其它事件先触发，导致输入完成之后点击提交按钮无效。这里有2种解决方法， 将按钮的点击事件换成mous...
2020-04-12 11:25:18
1967
原创 js精度计算问题，结合decimaljs的解决方法
在我们日常开发中，经常遇到两个数的加减乘除，通常正常的加减一般没有问题，但是遇到小数点，此时就很令人头痛了，例如0.1+0.2 === 0.3 ???? 打开控制台一看晕了0.1+0.2 = 0.30000000000000004为了解决这种问题，网上有很多的办法，下面讲一下我在财务系统中结合decimaljs的处理计算精度的经验。直接实现了加减乘除一个工具类/** * * 下面方...
2020-04-11 19:24:05
893
原创 react + axios请求拦截实现全局loading组件
在我们的后台管理系统开发过程中，我们经常有这样一种需求， 比如在请求一个接口的时候打开loading加载，然后在请求成功之后关闭loading。这样写起来实在繁琐，下文实现了一个全局的loading，只要有请求就会有loading状态打开和关闭的操作。二话不多说上代码。实现思路：：实现一个计数的全局类，在请求之前计数加一，成功后计数减一，订阅这个状态的变化，控制loading组件的加载impo...
2020-04-11 18:56:11
2592
原创 web前端面试题（常问-概念篇）
1、http与https的的区别https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。3.http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的...
2020-04-11 13:01:47
1663
原创 vue前端面试题汇总（常问-进阶篇）
vue前端面试题汇总（常问-进阶篇）)vue中computed和watch的区别1.computed的用法是一个计算属性,类似于过滤器,对绑定到view的数据进行处理。computed上面的属性不可在vue data中声明，不能做异步处理 data: { firstName: 'Foo', lastName: 'Bar' }, computed: { ful...
2020-03-28 12:27:44
1750
3
原创 js将数字的金额转换成中文大写金额
最近在工作的时候遇到要把数字的金额转成中文大写，例如，600.99 转成陆佰元玖角玖分！好了废话不多说，开始上代码。function moneyToCapital(num) { var fuhao = ""; var text = num + ""; if (text.indexOf("-") > -1) { num = text.replace("...
2018-10-25 14:13:46
4140
1
原创 new Date()设置日期在IOS的兼容问题
最近开发在写时间控件 比较时间大小的时候遇到一个很奇葩的问题，真是的服。2.代码 () new Date('2018-01-02').getTime() // 在ios 上会 报错 Cannot read property 'getTime' of undefined ()解决办法 字符串中含有‘-’ 的 时间 用正则表达式 replace 掉 例如() var a= ''...
2018-10-23 20:30:49
840
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人