- 博客(32)
- 收藏
- 关注
RSS订阅原创 git rebase 解析
git 对于大家肯定都不陌生， 常见的git操作也一定很熟悉。今天和大家介绍的是git 代码合并的时候，使用rebase和merge的区别。其实之前自己一直在用git merge 去合并代码，后来有听说了git rebase ，所以也尝试去了解一下git rebase。正常开发原先有一个test的工程，A在master分支上进行两次操作，并做提交c1和c2。此时A基于master拉了一个分支mywork，mywork是基于c1和c2:A在mywork分支上继续开发，并做了两次提交c3和c4，那么对应
2020-09-11 16:24:37
246
原创 h5分页加载的实现
h5分页加载功能的实现项目场景涉及到分页加载，之前文章有用过使用better-scroll 这个插件在进行处理（文章具体地址：https://blog.csdn.net/u013262823/article/details/91979851），今天我们使用滚动的方式来实现分页加载的功能，比起使用better-scroll更简单易懂，我们先介绍一下实现的大致原理：1、监听滚动事件，滚动到距离底部...
2020-03-13 15:19:18
3497
原创 无缝滚动的实现
普通代码实现滚动 <div class="m-t-20 fz12 m-l-15">普通滚动</div> <div class="scroll-box"> <div class="new-icon"> </div> <div class="n...
2020-02-26 17:55:19
394
原创 浏览器缓存机制
浏览器缓存机制解析dns缓存 、cdn缓存 、 浏览器缓存dnsdns的全称为domain name system 域名系统 域名和ip地址映射；dns 解析：通过域名,最终得到该域名对应的IP地址的过程叫做域名解析www.test.aiyi.com.cn(域名) - DNS解析 -> 10.1.201.69 (IP地址)dns缓存：有dns的地方,就有缓存。浏览器、...
2019-12-27 14:08:02
358
原创 浅谈函数防抖和节流
函数防抖和接口debounce 函数防抖函数防抖，从字面上理解就是希望函数被频繁调用的时候，在指定时间间隔内，只会被调用一次。throttle 函数节流函数节流，从字面上理解就是希望函数在指定间隔内（按照我们设定的频次）触发一次。其实说白了，函数防抖和函数的节流的最终目的还是为了节省资源。比如防止过于频繁的请求接口服务等等。根据两者特性，我也模拟出一种场景来对两者进行解释。具体场景如下：...
2019-10-23 20:07:58
182
原创 JS 闭包
闭包 closure闭包的概念: 闭包就是指有权访问另一个函数作用域中的变量的函数function outer() { var name = 'closure' // 函数内部变量 return function () { return name }}let inner = outer()console.log('inner', inner()) // 'innder', cl...
2019-10-12 16:29:47
118
原创 数组去重方法总结比较
let arr = [1,3,4,5,6,7,7,8,9,9,9,9,91,1,2,3,3,4,5,‘a’,‘ab’,‘a’,‘abc’,‘abc’]方法一 es6 Setlet list1 = []list1 = Array.from(new Set(arr))console.log(‘methods1’, list1)方法二 遍历循环 indexOflet list2 = []a...
2019-10-10 15:46:04
129
原创 bcrypt 加密以及密码验证
bcryptbcrypt，是一个跨平台的文件加密工具。由它加密的文件可在所有支持的操作系统和处理器上进行转移。它的口令必须是8至56个字符，并将在内部被转化为448位的密钥。（来自百度的定义）使用他的场景主要是: 自己正在搞的一个平台中最基本的用户注册登陆功能，本来一开始没想去考虑安全加密这块（毕竟对于后端的开发还是不太熟悉的），但后来登陆进数据中一看，用户密码赤裸裸的被展示出来，感觉太刺眼了...
2019-09-30 16:04:56
1623
1
原创 包含农历、节气、节假日的前端日历
经手了一个项目，要求前端实现一个带有农历、节假日、节气的前端日历，类似万年历的样子。当时查了一些资料，都是一些零零散散的，要么就只有农历，要么只有传统节假日，还有一些对于节气的判断，各种语言的都有，看的头大。正好项目所需，就把很多东西结合起来，封装了一个dateTransForm.js 这么一个方法。实现效果如下：首先是日历的实现，之前我有写了一篇文章链接地址如下（https://blog....
2019-09-30 15:39:36
7929
6
原创 document.getElementsByClassName('xxx')[0].clientHeight 获取元素高度之坑
vue获取元素高度为0document.getElementsByClassName(‘xxx’)[0].clientHeight获取元素高度在部分异性屏上获取的高度为0（华为novas、pro）日常开发过程中，使用了better-scoll做了上拉加载下拉刷新的功能。由于列表展示使用了absolute定位，为了不遮挡顶部的tab，所以需要做一个top的计算。最先想到的是 let h2 = ...
2019-08-19 20:55:48
9627
原创 $refs绑定元素使用时的返回值解析
$refs 定义ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。（摘录自官网）之前在第一篇博客上介绍vue组件通信的时候有介绍过ref，vue中我们经常使用其来实现对进行父子组件的传递使用。<template> <div i...
2019-08-19 20:38:37
3689
原创 Ajax 、Axios、Fetch 使用
前端常用接口请求，最先想到的是原生XHR和jquery ajax，通过使用xhr或者jquery ajax实现一个异步的http的请求。明显jquery的出现，原生xhr的已经慢慢被取代。Jquery ajax$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: func...
2019-07-08 19:44:56
231
原创 基于canvas的时钟表（vue）
基于canvas的时钟表的实现实现一个简易的时钟表主要包含以下几块内容：1、表盘数字的实现2、秒针功能实现（一秒转动Math.PI2/60 度）3、分针功能实现 (一分钟转动Math.PI2/60 度)4、时针功能实现(一小时转动Math.PI*2/12 度)5、当前具体日期功能实现(new Date())6、通过setInterval设定一个定时器，每隔一秒去获得最新的时间细节提...
2019-07-04 16:12:01
656
原创 基于canvas 实现简易的手写签名（vue）
canvas手写签名（vue）最近一直在研究canvas的东西，正好之前对手写签名这块有点兴趣。就自己基于vue写了一个简易的手写签名demo。其中原理比较简单，先生成一个canvas画布，并对canvas进行touchstart和touchmove事件进行监听。当监听touchstart事件被触发时，我们开始触发canvas里的beginPath事件并且设置moveTo原始点。当监听touc...
2019-07-04 10:20:18
3430
7
原创 React使用高德地图 （高德地图原生）（二）
React使用高德地图，之前介绍的方法是使用react-amap基于React进行封装的地图组件。除了使用这种方法，我们也可以直接使用高德原生的方法进行操作。地图插件引入首先script引入这个就不多说了,在项目的html文件里 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&k...
2019-06-18 17:17:22
5377
1
原创 React使用高德地图 （react-amap）（一）
pc版React重构，使用到了高德地图。搜了资料，发现有一个针对React进行封装的地图插件react-amap。官方网址：https://elemefe.github.io/react-amap/components/map，有兴趣的可以看下里面的API。react-amap 安装1、使用npm进行安装，目前是1.2.8版本：cnpm i react-amap2、直接使用sdn方式引入...
2019-06-18 16:53:15
17034
16
原创 上拉加载下拉刷新（better-scroll)
前端实现一个上拉加载，下拉刷新，并且滑动一定的位置能够实现回到顶部的功能。这个在移动端上来说是一个很常见的功能。之前有看到有人用bette-scroll库来实现这个功能。最基本的初始化代码如下：import BScroll from 'better-scroll'let wrapper = document.querySelector('.wrapper')let scroll = new...
2019-06-14 15:47:07
5552
原创 vue 全局样式引用
vue全局样式使用使用vue-cli 脚手架快速构建了机遇webpack的vue项目。在页面开发过程中，我们会写各种各样的css样式。写多了就会想到将相同的css样式变成全局的样式。比如这样的:$color-99: #999;$color-66: #666;$color-ff: #fff;$color-fb: #fbfbfb;$color-ee: #eee;$color-dd: #...
2019-06-12 14:52:01
9206
原创 Javascript 执行机制
Javascript执行机制介绍简单的javascript试手JavaScript是一门单线程语言node环境javascript执行机制浏览器环境和node环境对比
2019-06-06 14:19:30
134
原创 前端常用日期格式转换dateFormate.js
dateFormat.js 常用日期格式转换const WEEK_ARR = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']export class DateFormat { date constructor(date = new Date()) { this.date = this.getDate(date) ...
2019-05-21 15:04:31
2182
原创 前端js月视图日期自动补全
JS日期自动补全实现一个能够实现日期自动补全的前端日历。主要计算数据如下：（代码中dateFormat时间格式转换方法将在下一篇文章贴出）1、知道今天的日期（today）const today = dateFormat().today()2、一个月有多少天 （daysInMonth）const daysInMonth = (date) => { if(date.inde...
2019-05-21 14:57:58
2338
原创 inline-block元素设置overflow:hidden 导致相邻行内元素向下偏移的之坑
场景复现：一次开发中，出现了这种类似需求。看到设计稿后，巴拉巴拉写好了，发现问题来了：<span> <i class="iconfont icon-none c-9 fz16"></i> 未找到"</span><span class="keyValue">{{value}}</span>&l...
2019-05-10 16:14:13
689
1
原创 移动端 滑动事件与点击事件冲突
问题背景：vue中的日历通过滑动可进行月、周视图切换。监听滑动事件，根据上滑、下滑、左滑、右滑动来进行对应的切换处理。开发后发现，移动端默认滑动事件会和我们自己自定义的touch有所冲突，体验非常不好。所以要使用e.preventDefault()阻止事件默认行为，结果满足需求。后继续开发日历具有点击功能，发现在ios中完全能够点击，而在android系统中则出现了click事件触发的问题。...
2019-04-25 17:04:51
7364
原创 img 标签出现几像素的空白
开发过程中，使用设计切好的图片放入div中，发现img竟然有几像素的空白。<div class="imgTest"> <img src="./img/test3.jpg"/></div>明显发现下方有几像素的空白，还有像这样两张图片放一起的效果：问题产生的原因主要是：div属于块级元素，块级元素内部默认有行框，这个默认的行框会将块级元素撑高。im...
2019-04-17 16:38:07
436
原创 mac ssh 连接远程服务器
mac 使用终端ssh连接远程服务器最近公司项目从gitlab往git仓库上进行迁移，涉及的项目较多，运维一时没忙过来。导致很多前端项目测试环境git钩子无法生效。为了项目的正常开发测试，自己去问运维要了服务器在发布系统中进行配置。使用mac中自带的shell（terminal）可以进行ssh连接远程服务器处理。（因为mac中自动装有ssh，故不需要像windows一样需要单独安装）连接之前...
2019-04-16 10:59:18
3332
原创 Reactjs: Can't perform a React state update on an unmounted component
Reactjs 遇到的warning下方报错信息是控制台打印出的警告信息，虽然不会影响功能的执行，但是看到有一片红色的报错，会很碍眼。Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your appl...
2019-03-26 16:56:03
1968
原创 webpack4 升级
webpack4升级之坑webpack4出来已经好久，看到之前的vue-cli项目还是基于"webpack": “^3.6.0”,所以参考了一些资料，对webpack3做了升级。webpack版本升级"webpack": "^4.29.6"cnpm i 或者 npm i ，依赖安装，npm run dev 看下效果，出现一堆的错误。不难发现是webpack-dev-server 导致：...
2019-03-15 16:57:29
1066
原创 vue-cli 快速构建vue项目
vuevue算是近几年来前端非常火的技术框架。其主要核心：组件化和数据驱动。关于vue的相关知识点可参考官网 https://cn.vuejs.org/如何快速构建vue项目显得尤为重要，很明显vue-cli 为我们提供了一个非常快捷的脚手架。现在开始快速使用vue-cli：1、安装node.js下载地址:https://nodejs.org/en/download/ ，选择对应版本（w...
2019-03-12 21:25:12
170
原创 浅谈 browserslist
browserslistbrowserslist配置能够分享目标浏览器和nodejs版本在不同的前端工具。主要是为了表示当前项目的浏览器兼容情况。官方默认配置:"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8", "safari >= 7" ]对于部分配置参
2019-03-01 17:32:59
6954
原创 手写 webpack loader
webpack loader (webpack 加载器)webpack =&gt; web pack1)转换ES6语法成ES52)处理模块加载依赖3)生成一个可以在浏览器加载执行的 js 文件loader （引用定义）1、是 webpack 用于在编译过程中解析各类文件格式，并输出；2、本质上就是一个 node 模块，通过写一个函数来完成自动化的过程；3、由此我们就可以在开发模式下...
2019-01-31 17:39:34
314
原创 vue ----background-image （注意事项）
vue ----background-image坑<div class="test"></div><style lang="scss">.test {width:100px;height:100px;background-image:url("../../assects/img/test.png")}</style>这
2019-01-31 17:23:46
8295
原创 Vue组件通信（props、$ref、$emit、$attr、 $listeners）
Vue 组件通信父子组件之间的通信官网定义父子组件之间的通信关系可以总结为prop为向下进行传递，事件向上进行传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。子组件的props选项能够接受来自父组件数据。 props是单向绑定，传递方式只能是父到子ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。$emit 绑定一...
2019-01-21 11:06:14
2793
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人