日常开发小技巧及工具整理

前言

将看到的一些好的方法收集整理,收录最新的版本,快速秒查!

如何快速对齐文字,首行不对齐

 

.demo{
    padding-left: 25px;
    text-indent: -25px;
}

 

数组解构

const {1:state1,2:state2} = [1,2,3,4,5,6]

state1 // 2
state2 // 3

 

快速获取时间戳

 

+new Date()

快速日期单数补0

 

('0'+ num).slice(-2)

样式调试技巧

 

document.designMode = ‘on’

向下取整

 

取反位运算去除浮点数原理,原理原文

~~num

动态多行文字显示

 

利用换行符\n,不再使用标签<br/>

<div>{{text}}</div>

const text = `one \n two`

div{
white-space:pre-line
}

字符串重复

 

'test '.repeat(5);

幂乘

 

2**4

文案替换

 

<div>{{['','text1','text2'][index]}}</div>

// index 为 1,2,
// 0缺位

once执行一次function

 

function once(fn) {
    let called = false;
    return function () {
        if (!called) {
            called = true;
            fn.apply(this, arguments);
        }
    };
}

function launchRocket() {
    console.log("我已经执行了");
}
const launchRocketOnce = once(launchRocket);
launchRocketOnce();
launchRocketOnce();
launchRocketOnce();

 

日期对比

 

原理: 字符串比较是逐位按字符的charCode字符码对比

// 日期格式需相同
if('2021-06-01 11:12:23'>'2021-06-02 11:12:23') {
'something'
}

去空格

 

//去左空格;
function ltrim(s){
    return s.replace(/(^\s*)/g, "");
}
//去右空格;
function rtrim(s){
    return s.replace(/(\s*$)/g, "");
}
//去左右空格;
function trim(s){
    return s.replace(/(^\s*)|(\s*$)/g, "");
}

设置对象属性

 

Object.defineProperty()描述符 函数方法,设置对象属性
		Object.defineProperty(window, 'lsConfig', {
			get: function() {
				return JSON.parse(localStorage.config || '{}');
			}
		});
第一个参数为目标对象,第二个为属性,第三个属性描述符,可以针对数据属性或访问器属性
第三个参数descriptor:有以下参数
value:属性的值,默认为undefined
writable:该属性是否可写
configurable:总开关,一旦为false,就不能设置(value,writable,configurable)
enumerable:定义对象属性是否可以在for..in或obiect.keys()中被枚举,
get:对定义的属性取值的时候会触发get对应的函数,返回结果
set:对定义的属性赋值的时候会触发set对应的函数

高德地图逆地址解析

 

//逆地理编码  
var geocoder;
var lnglatXY = new AMap.LngLat(113.3655111809422, 22.944263569914494);

//加载地理编码插件 
this.map.plugin(["AMap.Geocoder"],function(){  
geocoder=new AMap.Geocoder({ 
radius:1000, //以已知坐标为中心点,radius为半径,返回范围内兴趣点和道路信息 
extensions: "all"//返回地址描述以及附近兴趣点和道路信息,默认"base" 
}); 
//返回地理编码结果 
AMap . event . addListener(geocoder, "complete",function(data){
    var address;
    //返回地址描述
    address = data.regeocode.formattedAddress;
    console.log(address)
});
geocoder.getAddress(lnglatXY)
}); 

shim和polyfill的含义及区别

 

shim是一个库,它将一个新的api引入到一个旧的环境中,而且依靠旧环境已有的手段
polyfill就是一个用在浏览器上的shim,先检查当前浏览器是否支持某个api,如果不支持就加载对应的polyfill,这样新旧浏览器就都可以使用这个api

dpi ppi理解

 

1. dpi是dot per inch,每英寸多少点,ppi是 Pixel per inch,每英寸像素数,针对显示器的设计时,dpi=ppi。
ppi计算方法是长宽各自平方之和开方,除以对角线长度(单位英寸)。原理可以自己画个矩形勾股定理算一算。
2. ppi表示显示设备的点密度,dpi表示印刷品点密度。

 端口号被占用问题

 

项目端口号被占用Error: listen EADDRINUSE :::1002
打开cmd 输入netstat -ano找到占用端口号的pid然后tskill **即可

 drag相关api

 

标签元素设置draggable = ‘true'
dragstart事件、dragend拖拽结束、dragover拖拽在目标元素头上
dragstart拖拽效果:event.dataTransfer.effectAllowed = 'move'
dragover取消默认事件:event.preventDefault()
存数据:event.dataTransfer.setData('',xx)
取数据:event.dataTransfer.getData('')
drop:松开的时候
清除数据:event.dataTransfer.clearData('')

衍生对象按key排序算法

 

function objKeySort(obj){
	var newkey = Object.keys(obj).sort();
	var newObj = {};
	for(var i = 0;i<newkey.length;i++){
		newObj[newkey[i]] = obj[newkey[i]]
	}
	return newObj;
}

检测android chrome版本

 

navigator.userAgent.split('Chrome/')[1].slice(0,2)

z-index失效情况

 

z-index一般适用于position不为static的元素,包含absolute,fixed,relative

i++ 和++i

 

在for里没啥区别,赋值时:i++先应用i再+1,++i先加1,再自用var i,j = 1;i++ = 1;++j = 2

随机数生成速查

 

function(start,end){
var w = end - start;
n-m,包含n不包含m:parseInt(Math.randow()*w+start)
n-m,不包含n包含m:Math.floor(Math.randow()*w+start)+1
n-m,不包含n和m:Math.round(Math.randow()*w+start+1)
n-m,包含n和m:Math.round(Math.randow()*w+start)
}

加减乘除高精度计算

 

//加    
function floatAdd(arg1,arg2){    
     var r1,r2,m;    
     try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}    
     try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}    
     m=Math.pow(10,Math.max(r1,r2));    
     return (arg1*m+arg2*m)/m;    
}    
      
//减    
function floatSub(arg1,arg2){    
    var r1,r2,m,n;    
    try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}    
    try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}    
    m=Math.pow(10,Math.max(r1,r2));    
    //动态控制精度长度    
    n=(r1>=r2)?r1:r2;    
    return ((arg1*m-arg2*m)/m).toFixed(n);    
}    
       
//乘    
function floatMul(arg1,arg2)   {     
    var m=0,s1=arg1.toString(),s2=arg2.toString();     
    try{m+=s1.split(".")[1].length}catch(e){}     
    try{m+=s2.split(".")[1].length}catch(e){}     
    return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);     
}     
      
      
//除   
function floatDiv(arg1,arg2){     
      var t1=0,t2=0,r1,r2;     
      try{t1=arg1.toString().split(".")[1].length}catch(e){}     
      try{t2=arg2.toString().split(".")[1].length}catch(e){}     
        
      r1=Number(arg1.toString().replace(".",""));  
   
      r2=Number(arg2.toString().replace(".",""));     
      return (r1/r2)*Math.pow(10,t2-t1);     
}

git对文件名大小写不敏感问题

 

git config core.ignorecase false 

正则大全

 

excel在线预览

 

在线预览excel

小数位的限制输入

 

clearNoNum (item, id, num) {
      num = num || 2
      item[id] = item[id].replace(/[\u4e00-\u9fa5]+/g, '')
      item[id] = item[id].replace(/[^\d.]/g, '')
      item[id] = item[id].replace(/^\./g, '')
      item[id] = item[id]
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
      // eslint-disable-next-line no-useless-escape
      let reg = new RegExp(`^(\-)*(\\d+)\.(\\d{${num}}).*$`)
      item[id] = item[id].replace(reg, '$1$2.$3')
    }

 前端页面发布上线部署首页异常问题

 

注意替换root的正式路径。
location ~* \.(?:html)$ {
    root realu-rl;
    expires -1;
    add_header Pragma "no-cache";
    add_header Cache-Control "no-store, must-revalidate";
  }

 

版权声明:
作者:wuhou123
链接:https://wuhou.fun/50.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录