代码的套路简单点
2018-11-06 本文已影响0人
FredericaJ
- textarea文本框自适应高度
给textarea加一个兄弟元素div,并把文本内容同时放入兄弟元素,通过兄弟元素撑开父元素高度,那么只要给textarea加上height:100%属性就行了,代码如下:
//vue项目
<temlate>
<div class="father">
<div class="brother">{{content}}</div>
<textarea class="textSelf" v-model="content"></textarea>
</div>
</template>
....
<style>
.father {
position: relative;
display: block;
width: 100%;
font-size:14px;
line-height:16px;
font-family:inherit;
.brother,,textSelf{
padding:10px 15px;
}
.brother {
position: relative;
z-index: -1;
opacity: 0;
display: block;
width: 100%;
}
.textSelf {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
border:none;
outline:none;
}
}
</style>
- 数字补0操作
slice和padStart方法
const addZero1 = (num, len = 2) => (`0${num}`).slice(-len)
const addZero2 = (num, len = 2) => (`${num}`).padStart(len, '0')
addZero1(3) // 03
addZero2(32,4) // 0032
- 判断奇偶数 & 1
const num=3;
!!(num & 1) // true
!!(num % 2) // true
- 取整 | 0
1.5 | 0 // 1
1.2 | 0 // 1
-1.9 | 0 // -1
- 使用Boolean过滤数组中的所有假值
const compact = arr => arr.filter(Boolean)
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34])
// [ 1, 2, 3, 'a', 's', 34 ]
- 判断数字
function isNumber(obj) {
return obj === +obj
}
- 判断字符串
function isString(obj) {
return obj === obj + ''
}
- 判断布尔类型
function isBoolean(obj) {
return obj === !!obj
}
- 对象属性的缩写(es6)
const obj = { x:x, y:y };
// 等同于
const obj = { x, y };
- if .. else -> 优化 -> 三目运算
let big;
if (x > 10) {
big = true;
} else{
big = false;
}
let big = x > 10 ? true : false; //三目运算
- charAt的简化
"myString".charAt(0);
//简化
"myString"[0]; //返回'm'
- ~ 的神奇用法
(~arr.indexOf('zank') ) 等价于 (arr.indexOf('zank')>-1)
- 字符串转JSON的方式,
常规的有JSON.parse(string)和eval("("+string+")"),还有一小众用法
let json = (new Function("return " + string))(); //还可用于字符串转数组等
- 用数组交换两变量的值
var a=1,
b=2;
a=[b,b=a][0];
- 判断浏览器是否IE
ie11 = !!window.MSInputMethodContext;
参考链接:如何判断是什么浏览器
仅供自娱自乐,不定期整理。