- 博客(14)
- 资源 (1)
- 收藏
- 关注
原创 flex实现上中下布局
上中下、上下布局是我们网页开发中常用的布局,下面我将用flex实现这两种布局。上中下布局特点: 头尾固定,内容自适应思路: 整个盒子为layout,使用flex纵向排列,宽高为100%;header和footer均为flex-shrink: 0;,强制不缩放。main的flex-grow: 2;,默认放大,且自动滚动。经过以上操作,就实现了经典是上中下布局。布局<div id="layout"> <header id="header">这里是头部</heade
2021-04-20 11:42:09
15313
原创 js手写事件Event、手写订阅模式、手写event.js
简介: 观察者模式或者说订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。通俗来说,就像订报纸一样,只要你订阅了这个报纸,当新报发布的时候你就会收到新报纸的推送。许多场景都运用了这种订阅模式,如vue.$on、vue.$emit;Node中的EventEmitter等。其实现也是相对来说比较简单的,废话不多说,直接上代码class Event { constructor() { this.h
2020-09-10 00:42:12
1020
原创 轻松搞懂js原形和原型链,只需要打开Chrome
想要搞懂原型链,你只需打开Chrome,看再多理论,如果自己不动手,也是很难掌握的。下面就跟着笔者一步一步来console吧!
2020-08-31 11:11:56
680
2
原创 Vue商城项目、练手项目、基于Vue+Node.js+TypeScript实现的商城项目
前言: 作为Vue的初学者,经常会苦恼于没有项目练手,曾经的我也是这样子的,因此想开发一个项目提供给前端初学者。这个项目难度适中,适合初学者去开发和参考,本项目提供了现成的前后端源码、接口文档及设计图,大家可以参考设计图去实现一个商场项目,根据接口文档去对接接口,如果中间有任何问题的也欢迎加微信或QQ咨询。觉得还不错的点个Star哦~丑小喵商城说明文档项目地址预览地址:https://mall.cxmmao.com/#/接口文档:https://mall.cxmmao.com/cat-mall-ap
2020-08-29 12:21:56
5664
3
原创 手写简易版axios拦截器,实现微信小程序wx.request的封装与拦截
axios是一个功能强大的网络请求库,其中拦截器又是axios的精髓。在小程序的开发或者需要手动实现ajax的时候,没有实现对请求的拦截,开发的时候非常不方便,因此手写一个简易版的axios拦截器。
2020-08-15 17:40:18
1868
4
原创 小程序远程清除线上缓存
小程序怎么清除线上缓存呢小程序缓存是小程序优化中经常要用到的,但随着版本的迭代,有些缓存字段已经更改或者不需要使用了,而且可能对我们新的版本产生影响,那要怎么清除线上缓存呢?其实很简单,每次更新前在程序内配置一个版本号,只要检测到版本号不一样,就清除以前的缓存,具体实现如下config.jsmodule.exports = { VERSION: '1.0'}update-ve...
2020-01-14 11:57:53
598
原创 vue 3.0用history路由打包后出现空白页面
vue 3.0用history路由打包后出现空白页面,出现这个问题可以先检查两个方面1. 打包路径是否有误,这个打开控制台就可以看到,如果有出现报错,则说明打包的路径不对,这时要修改打包的路径。比如项目是放在/dist/下,访问的路径为http://127.0.0.1/dist/,那打包的路径要修改为/dist/router.js的设置export default new Router({...
2019-12-08 10:47:44
3999
原创 vue滑动进度条组件,可点击、可拖拽
刚好碰到一个功能是做audio自定义播放样式的,但又没有相关的组件,因此自己封装一个,分享给大家。大家可根据自己的需求进行样式的修改,其中有bug和不足的,欢迎大家指出。效果图录屏有点边框,请忽略~组件c-progress的使用导入import CProgress from './../components/c-progress'使用<c-progress class="c...
2019-11-24 19:29:17
10507
36
原创 js重写console.log函数
在前端开发中console.log是我们必不可少的调试工具,但是原生的console.log有两点不能很好地满足我们的需求 1. 开发时需要log,但是上线时希望去掉log,但我们不可能每一行都删掉 2. 对于Object和Array等引用类型,打印的时候是打印引用地址的值,并不是程序当前时刻的值,有时不注意就会发现打印前后是一样的,给调试带来了一定的困难
2019-10-25 22:52:14
7396
1
原创 原生ajax发送get、post请求
原生ajax发送get、post请求ajax.jstest.htmlapp.js原生ajax会有跨域问题,后台要允许跨域访问,这里是express框架以上就是原生ajax的简单运用,在一些轻量级的应用上可以自己封装一个小的ajax函数,而不用引入第三方的包,从而使代码的体积更小化ajax.jsconst ajax = {}ajax.request = function (url,data,...
2019-10-21 11:08:15
253
转载 学习日记-css限制行数
限制换行代码 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; 测试:<text>测试高级人参水果很好吃啊啊啊啊啊哈哈哈哈哈</text>完整代码如下:text { colo...
2019-09-08 18:22:45
143
原创 Webstorm安装px2rem插件
做过前端开发的都知道,前端开发适配是一个头疼的问题,各种尺寸要算来算去,现在终于可以解决这个烦恼了,安装px2rem插件,一键解决px与rem换算的问题。现在就来演示一下怎么在webstorm怎么安装px2rem在插件。1、打开webstorm,点File --> Settings2、依次点击:Plugins --> Marketplace;输入px后回车,可以看到如下的列表;...
2019-08-24 12:06:58
3149
1
原创 Vue移动端适配,Vue一键px2rem,px2rem-loader安装使用教程
上一篇介绍了怎么安装Webstorm插件px2rwd,在开发中可以帮助我们快速地进行px和rem的换算。下面来介绍一种在Vue中px2rem的模块,该模块会自动地将px转换成rem,而不用再去换算,方便我们以后去检查项目。在写项目的过程中,我们直接写px即可,它会根据我们屏幕的大小自动地进行px和rem的换算,非常方便,快来看一下吧前提准备:已经是使用vue-cli搭建好的项目vue-cli搭...
2019-08-24 12:03:30
4562
1
转载 socket.io报错解决方法:[TypeError]: fn.bind is not a function)
socket.io报错解决方法:[TypeError]: fn.bind is not a function解决办法解决办法这是由于版本问题,只需将io.socket.clients(room)改成io.sockets.adapter.rooms[room]即可如图:// let usersInRoom = io.sockets.clients(room); //旧版本写法 le...
2018-11-01 09:11:45
5577
vuedevtool.zip
2019-10-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人