前端开发中的一些tips(持续更新)
本文记录分享一些在日常开发中经常遇到的一些问题的解决方案及常用小技巧,如有错误之处还请批评指正。
CSS相关:
1.如何修改chrome记住密码后自动填充表单的黄色背景?
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #FFF;
background-image: none;
color: #333;
}
2.鼠标选中文本时添加背景色
<style>
p::selection{
color:red,
background:yellow
}
</style>
<p>Custom text selection color</p>
JS相关:
1. axios请求参数问题:
post/put有3个参数:url、data、config。
get/delete有2个参数:url、config。
get、delete请求传参区别:
get请求需要将入参的数据作为config中params属性的值,以request parameter形式发送。
delete请求需要将入参的数据作为config中data属性的值,以request body形式发送。
//get请求参数拼接在url中,如 http://www.A.com/?name="xxx"&age="18"
axios.get('url',{
params:{
name:'xxx',
age:18
}
} //delete请求参数在request body中
axios.delete('url',{
data:{
name:'xxx',
age:18
}
})
2.使用form表单,提交时按钮使用了button标签但未添加type属性,点击提交会刷新页面。
原因:form表单下的按钮在没有指定type类型的时候,button会有一个默认的type="submit"
解决办法:1.添加type="button"属性 <button type="button">确认</button>
2.使用<input type="button"/>
3.button点击事件里阻止默认行为,event.preventDefault()
4.如果配合UI框架如element等,请使用框架封装的button按钮,如 el-button
3.使用reduce方法同时实现map和filter
假设有一个数组,你需要更新它的项并且过滤出一部分,如果先使用map后使用filter的话,数组将被遍历两次,此时用reduce方法更方便。
//将数组的值翻倍并且筛选出大于40的数据项
var arr = [10,20,30,40,50];
const result = arr.reduce((list,curNum)=>{
curNum = curNum * 2;
if(curNum > 40){
list.push(curNum);
}
return list;
},[]) result; //[60,80,100]
4.使用reduce计算数组中元素出现的次数
//计算数组中元素出现的次数
var arr = ["a","b","c","d","c","a","e","b"];
var result = arr.reduce((obj,item)=>{
if(item in obj){
obj[item]++
}else{
obj[item] = 1
}
return obj
},{})
console.log(result) //{a: 2, b: 2, c: 2, d: 1, e: 1}
5.使用reduce将对象的key转换成中文
6.使用解构来交换参数数值
//以往我们通常使用 var temp = a; a = b; b = temp;
//来交换两个参数的数值,现在我们不妨用ES6提供的变量的解构赋值来代替。 let param1 = 1;
let param2 = 2;
[param1,param2] = [param2,param1];
console.log(param1) //2;
console.log(param2) //1;
7.深拷贝
function deepCopy(source) {
let target = Array.isArray(source) ? [] : {}
for (var k in source) {
if (typeof source[k] === 'object') {
target[k] = deepCopy(source[k])
}else {
target[k] = source[k]
}
}
return target
}
8.封装cookie方法
//set cookie
export function setCookie(name, value, expiredays) {
let exdate = new Date();
exdate.setTime(exdate.getTime() + expiredays*24*60*60*1000);
document.cookie = name + '=' + encodeURI(value) + ((expiredays == null) ? '' : '; expires = ' + exdate.toGMTString());
} //get cookie
export function getCookie(name, cookieText = '') {
cookieText = document.cookie;
const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
const arr = cookieText.match(reg);
let ret = '';
if (arr) {
ret = decodeURIComponent(arr[2]);
}
return ret;
} //delete cookie
export function deleteCookie(key) {
let name = decodeURI(key);
let expires = new Date(0);
document.cookie = name + '=' + '; expires = ' + expires.toUTCString();
}
9.格式化日期为YYYY-MM-DD HH:MM:SS格式
function formatDate(time){
var date = new Date(time);
var year = date.getFullYear(),
month = date.getMonth() + 1,//月份是从0开始的
day = date.getDate(),
hour = date.getHours(),
min = date.getMinutes(),
sec = date.getSeconds(); month = month < 10 ? '0' + month : month
day = day < 10 ? '0' + day : day
hour = hour < 10 ? '0' + hour : hour
min = min < 10 ? '0' + min : min
sec = sec < 10 ? '0 '+ sec : sec var newTime = year + '-' +
month + '-' +
day + ' ' +
hour + ':' +
min + ':' +
sec;
return newTime;
}
formatDate(Date.now()) //2019-07-04 17:27:28
前端开发中的一些tips(持续更新)的更多相关文章
- spring boot项目开发中遇到问题,持续更新
1.JPA中EntityManager不能执行建表语句,提示要加事务Error:javax.persistence.TransactionRequiredException: Executing an ...
- 【Go】开发中遇到的坑——持续更新
关于CGo多语言编译 问题出现在将openCV封装到go语言的时候.在编译时需要设置 CGO_ENABLED=1 GOOS=linux GOARCH=amd64 go build -o xxx mai ...
- 【转】分享前端开发中通过js设置/获取cookie的一组方法
在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. js方法的完整代码如下: var cookie = { set:function ...
- Web前端开发中的MCRV模式(转)
作者: izujian 来源: baiduux 摘要:针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为 基础,结 ...
- iOS:开发常用GitHub开源项目(持续更新)
IOS开发常用GitHub开源项目(持续更新) 数据类 开源库 作者 简介 AFNetworking Mattt 网络请求库 ASIHTTPRequest pokeb 网络请求库 Alamofire ...
- web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
- px em rem在WEB前端开发中的区别
我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...
- 一探前端开发中的JS调试技巧
前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
- WEB前端开发中的图片压缩
web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...
随机推荐
- auth.User.groups: (fields.E304) Reverse accessor for 'User.groups'
创建表,运行下面命令,出错 makemigrations 原因:继承auth_user 解决方案 在settings.py文件添加 AUTH_USER_MODEL = "app名称.类名&q ...
- 6.JavaSE之数据类型扩展及面试题讲解
整数:二进制0b 十进制 八进制0 十六进制0x 浮点数:银行业务,关于钱的,Java有个BigDecimal数学工具类,用这个计算.最好完全避免使用浮点数进行比较.因为float 是有限的离散的,它 ...
- maven版本对应的jdk
今天配置项目环境发现jdk1.6与maven-3.39不能匹配 查询jdk与maven的版本对应关系 关系网址:http://maven.apache.org/docs/history.html Ma ...
- [apue] 使用 Ctrl+S停止输出而不用挂起前台进程
之前一直知道使用 Ctrl+Z 挂起前台进程来阻止进程运行,之后可以再通过 shell 的作业控制 (jobs / fg N) 来将后台进程切换为前台,从而继续运行. 最近学到一种新的方法,对于不停有 ...
- 「 深入浅出 」java集合Collection和Map
本系列文章主要对java集合的框架进行一个深入浅出的介绍,使大家对java集合有个深入的理解. 本篇文章主要具体介绍了Collection接口,Map接口以及Collection接口的三个子接口Set ...
- 批量解决win10图标上有两个蓝色箭头的方法
双击“此电脑”,点击“C盘”,可以看到一个”用户“文件夹,双击”用户“, 选择现在正在使用的用户名,双击用户名,找到该文件夹下的”桌面“或”Desktop“点击“属性”, 在“常规”选项卡中的属于项中 ...
- c# 三种计算程序运行时间的方法
三种计算c#程序运行时间的方法第一种:利用 System.DateTime.Now // example1: System.DateTime.Now method DateTime dt1 = Sys ...
- Miniio对象储存服务器安装教程
#创建minio专用文件目录 mkdir -p /app/minio/data mkdir -p /app/minio/config chmod -R 777 /app/minio/data chmo ...
- centos7下redis安全相关
Centos7下redis安全相关 在使用云服务器时,安装的redis3.0+版本都关闭了protected-mode,因而都遭遇了挖矿病毒的攻击,使得服务器99%的占用率!! 因此我们在使用redi ...
- java 排序算法分析
一.冒泡排序(时间复杂度O(N^2)) public int[] bubbling(int[] arr){ ) return arr; ; i--){ 1 ; j < i-; j ++){ 2 ...