❝要么变强改变世界
要么一直做被伤害的人
❞
前言
一个农夫经过河边,斧头掉进了河里,刚好砸中了河神。
河神说, 我这里有一把金斧头和一把银斧头,哪把斧头是你的?
农夫说, 我掉进河里的是一把生锈的斧头
河神被农夫的诚实感动了,于是把两把斧头都送给了他
农夫高高兴兴的回家了,仔细打量着这两把斧头,一下子傻眼了,原来一把是全斧头,一把的很斧头
这TM是PDD上买的吧!!
你有过购物体验吗?怎样才能找到自己满意的商品呢?
做好吃土准备了吗?还在等什么,出发!
1 Input
合成事件
单机,双机,不如一起去吃鸡
左撩,右撩,不如一起喝农药
代码片段
<input
@compositionstart="handleCompositionStart"
@compositionupdate="handleCompositionUpdate"
@compositionend="handleCompositionEnd"
>
技巧解析
❝常规事件:点击,双击,左滑,右滑
❞
文本合成事件倒是少见!
还真是涨姿势了,有木有 文本合成系统 传送门
2 migrating
虚拟DOM
你有过碎屏的体验吗?那叫一个爽啊
后来出现了手机膜,再后来出现了钢化膜,再后来闭着眼睛摔碎了
妈,我手机摔碎了,这下可以换新的了吧
「旧的不去,新的不来嘛」
代码片段
mounted() {
...
const { props = {}, events = {} } = this.getMigratingConfig();
const { data, componentOptions } = this.$vnode;
const definedProps = data.attrs || {};
const definedEvents = componentOptions.listeners || {};
...
}
技巧解析
❝真实DOM不好用吗?
❞
好用啊,就是太好用了,所以才不用
怎么讲?
屏幕比膜清晰吧,可修起来代价太大! 所以,用vNode——本质上是对象,来描述真实的DOM,操作起来更廉价
如果你是土豪,那就当我没说过 虚拟DOM 传送门
3 calcTextareaHeight
样式操作
还记得那个小偷吗?
把那个箱子给偷走了,别人家的老公还傻傻不知道!
果然,一次性打包操作,省时又省力
代码片段
function calculateNodeStyling(targetElement) {
const style = window.getComputedStyle(targetElement)
const boxSizing = style.getPropertyValue('box-sizing')
const paddingSize = (
parseFloat(style.getPropertyValue('padding-bottom')) +
parseFloat(style.getPropertyValue('padding-top'))
)
...
}
export default function calcTextareaHeight(
targetElement,
minRows = 1,
maxRows = null
) {
if (!hiddenTextarea) {
hiddenTextarea = document.createElement('textarea');
document.body.appendChild(hiddenTextarea);
}
hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
...
}
calcIconOffset(place) {
if (this.$slots[pendant]) {
el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
} else {
el.removeAttribute('style');
}
}
技巧解析
❝el.style.left
❞
el.style.top
el.style.paddingLeft
你还在一个个操作吗?
何不试试一次性操作
window.getComputedStyle(el)
el.setAttribute('style', style)
el.removeAttribute('style')
4 merge
对象扩展
00后已经陆陆续续有了对象?
作为90的你,狗粮吃够了吗?
不够?再给你扩展几个!
代码片段
export default function(target) {
for (let i = 1, j = arguments.length; i < j; i++) {
let source = arguments[i] || {};
for (let prop in source) {
if (source.hasOwnProperty(prop)) {
let value = source[prop];
if (value !== undefined) {
target[prop] = value;
}
}
}
}
return target;
}
textareaStyle() {
return merge({}, this.textareaCalcStyle, { resize: this.resize });
},
技巧解析
❝多个对象合并成一个对象,返回新对象
❞
哪来的血轮眼,莫不是卡卡西 T_T
那个爱化妆的孩子,定Object.freeze
爱乱跑的孩子,集合Object.assign
还有其他法子吗,解构一下 {...a}
对象拷贝 传送门
「有的人一开始就注定离开」 「我却仍愿用一生等他回来」
❝我是一只七秒记忆的鱼
带你来一场奇妙的旅行
❞