彻底弄懂JS事件委托的概念和作用

一、写在前头

   接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的。后面才知道,原来他要考察的是事件委托(代理)的原理,他指的是未来还不清楚会创建多少个节点,所以没办法实现给他们注册事件。

Read More

不要再混淆js的substring和substr了

一、字符串操作方法

js中字符串方法操作有很多:concat、indexOf….
这里只要介绍两种经常混淆的字符串截取方法:substring、substr

二、从例子入手

1
2
3
4
5
6
let str = 'xiaobe'//substring(start,end)
let str1 = str.substring(1,2);//substr(start,length)
let str2 = str.substr(1,2);

console.log(str1); //i
console.log(str2); //ia

可以看到str1输出的长度为1,str2输出长度为2.

Read More

table固定列的宽度,超出部分用…代替(针对普通table和antd)

一、 实现思路

我们都知道让溢出内容变成…,只需要以下:

1
overflow: hidden;text-overflow:ellipsis;white-space: nowrap;

表格里的内容直接引用这段代码可不行。
因为table的宽度我们并不能控制,我们加的内容会自动撑大表格列表宽度.
关键的一步是给table加上一个样式

1
:table-layout:fixed;

这条属性就是让table的内部布局固定大小

Read More

CSS垂直居中宝典

一、垂直居中的用处

设计稿需求

当我们抱怨设计反复不定的时候,试着理解一下。每一位开发者也会是一位用户,请多多用’用户’的角色去开发。就比如下面这图,你会更稀饭哪种格式呢?
你喜欢哪种呢
如果我们使用一个webapp,连底部icon基本的水平垂直居中都没完成,我们可能会非常失望,即使功能很亮眼。所以对待好每一个细节,因为这个细节指不定在某时被某位用户默默称赞。

Read More

深究CSS中Position的属性和特性

一、position的概念

作为布局必不可缺少的元素之一,深究其属性以及一些注意点是非常必要的。
定义:规定元素的定位类型。
position属性:

属性 描述 常用性
absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。 ★★
relative 生成相对定位的元素,相对于其在文档流正常位置进行定位。 ★★
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 ★☆
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明) ☆☆

Read More

CSS动画详解

一、使用CSS3动画代替JS动画

JS动画频繁操作DOM导致效率非常低
在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint)
可以避免占用JS主线程
这边就不细说这两者具体的低优缺点。一般做2D动画的话,可以使用CSS3的transition或animation

Read More