按钮点击水波效果

Material Design设计按钮点击效果比较酷炫,每次点击按钮都会产生一次水波涟漪的效果。

可以css和canvas来实现这种效果。

清空git缓存

清空git缓存

1
2
3
git rm -r --cached .
git add .
git commit -m 'update .gitignore'

JS原生图片懒加载

图片懒加载

懒加载是前端优化的一种技术,旨在用户进入页面后,当滚动页面将要到达图片位置时才加载图片。
加快页面加载速度,极大的提升了用户体验,也避免了用户进入页面之后就发送n多个图片请求,服务器吃不消啊!

实现原理

先将图片的 src 设置为空或者小的图片,将真实的图片地址存在 img 的自定义属性中,比如 data-src 中,等到页面滚动至图片位置时将真实图片位置复制给 src 属性。

  1. 页面中的 img 元素,如果没有 src 属性,浏览器就不会发出请求去下载图片
  2. 用户滚动页面至图片位置时,img 元素获取到真正的路径后,开始发送请求加载图片

React-JSX

JSX语法

JSX 既不是字符串也不是HTML,是JavaScript的语法扩展,将被解析成JavaScript的一个对象。JSX用于生成React的“元素”。JSX中可以嵌入js表达式,用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- more -->
```javascript
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}

const user = {
firstName: 'Harper',
lastName: 'Perez'
}

const element = (
<h1>Hello, {formatName(user)} !</h1>
)

ReactDOM.render(
element,
document.getElementById('root')
)

JSX指定属性

  • 使用引号将字符串文字指定为属性值

    1
    const element = <div tabIndex="0"></div>
  • 使用花括号

    1
    2
    ```javascript
    const element = <img src={user.avtarurl} />

JXS包含子标签

JSX可以包含子标签

  • JSX最外层只能包含一个标签,父标签内可以嵌套任意的子标签
  • JSX 标签内的属性命名约定使用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    ```javascript
    const element = (
    <div className="demo">
    <h1>Hello!</h1>
    <h2>Good to see you!</h2>
    </div>
    )

    const elemtent = (
    <div tabIndex="0"></div>
    )

JSX转换

Bebel将JSX转换编译成

1
2
3
4
5
6
7

```javascript
const element = (
<h1 className="greeting">
Hello, World!
</h1>
)

1
2
3
4
5
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, World!'
)

以上两种方式是等价的,最后都会转换成React Elements,这些对象组成页面的DOM并且保持更新。

解析为react Elements

1
2
3
4
5
6
7
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, World!'
}
}

CSS中的content和attr

content和attr表达式,它们能在你的页面下面悄悄的使用CSS来生成内容,下面让我们看看attr和content如何相互配合产生神奇效果的。

基本content用法

content属性能让程序员使用CSS往页面元素里填写内容:

1
2
3
.myDiv:after {
content: "我是一个使用*content*属性生产的静态文字";
}

Uncaught TypeError: angular.module(...).provider(...).info is not a function

package.json中angular版本与ngSanitize版本不一致导致错误:
Uncaught TypeError: angular.module(…).provider(…).info is not a function

#github issue 上问题解答

CSS实现元素水平垂直居中

在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。块级元素的水平居中比较容易,直接设置元素的

0 auto```就可以实现,垂直居中相对来说是比较复杂一些的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- more -->
## 高度位置,使用绝对定位

```css
.parentElem {
position: relative;
}

.childElem {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

父容器高度已知

且只有一个元素,只要使用相对定位即可

1
2
3
4
5
6
7
8
9
.parentElem {
height: 200px;
}

.childElem {
position: relative;
top: 50%;
transform: translateY(-50%);
}

水平居中方案

行内元素

1
text-aligin: center;

块级元素,宽度固定

1
margin: 0 auto;

块级元素,宽度不定

1
margin: 0 auto;

vertical-align 垂直对齐

  1. 元素默认垂直对齐方式为基准对齐(baseline)
  2. 继承性: 不继承
  3. 适用于行内元素和单元格(table-cell)元素

语法

  • : 基准线
    1
    2
    3
    4
    5
    6
    7
    8
    9
    > * ```middle``` : 中部对齐
    > * ```top``` : 顶端对齐
    > * ```bottom``` : 底端对齐
    > * ```text-top``` : 与文本顶部对齐
    > * ```text-bottom``` : 与文本底部对齐
    > * ```sub``` : 下标
    > * ```super``` : 上标
    > * ```<百分比>```,```<长度>``` : 可为负数
    > * ```inherit

垂直对齐属性

图片本身没有基线,则将其底部与父元素的基线对齐。

参考:垂直对齐:vertical-align属性

头条前端面试

头条前端面试题

前两天收到头条的面试邀请,面完后回忆起大部分面试问题,供大家参考一下

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×