前端的自我修养

HTML/CSS/JS 内容、样式和行为分离原则

如果你去面试可能会被问道如下问题

请你说一下你对前端内容样式行为分离的原则?

如果你初出茅庐可能会这样回答 html负责内容css负责样式js负责行为

但是这是大家都认可的真理，我为什么要解释原因呢！

正确做法！！！ 你该这样用初中几何常用套路「反证法」

请看解题思路(如果你是程序员这就是「伪代码」)

1
2
问：人类为什么吃饭
答: 如果不吃饭人类就会死，所以人类需要吃饭

你该这样回答

  1. 如果html负责样式
  • 会让html变得很复杂
  • 很难区分这些标签的逻辑结构
1
2
3
4
5
<body bgcolor=red>
    <center>
        <font color=red>你好</font>
    </center>
</body>
  1. 用css表示内容
  • 人类选不中
  • JS取不到 
1
2
3
4
5
6
7
8
9
<style>
    div::after{content:'你好你好你好'}
</style>
<body>
    <div id="xxx"></div>
    <script>
        console.log(xxx.innerText) // 啥都没
    </script>
</body>
  1. 用JS控制样式

你该避免使用jQuery的 show/hide方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <div id="xxx"></div>
     <script src="jquery.js"></script>
    <script>
       
       $("#xxx").hide() // display:none; 隐藏没有任何问题

       $("#xxx").show() // 但是 show就有问题了
       /*
       display:inline-block;
       display:flex;
       display:inline;
       */
    </script>
</body>

show()之后你很难定位 div隐藏之前是什么 可能是flex也可能是 block

因为jQuery为了让你使用它的库，就特殊处理了

  • 在你hide的时候把display这个值存起来
  • 当你show的时候把display这个值赋回去

问题来了，如果div一开始display:none

show() 之后会是什么呢？ 经过测试竟然是block
凭啥?凭啥?凭啥?

JS该这样使用

通过class样式 来表示不同的状态去切换

1
2
3
4
<div id="xxx"></div>

$("#xxx").addClass('active')
$("#xxx").removeClass('active')

人在江湖

有的时候需要你迫不得已的用JS去操作样式，那就只能违反原则，但是你不该总是违反原则

追溯到故事情节：天龙八部有一集阿紫被打伤乔峰各种救，去寻医，但是药店伙计告诉他没救了，此时突然一个地主家伙计来了说他家老爷不行了有没有办法，老掌柜的说快去拿“人参”，而此时纵是大侠气概的乔峰也「迫不得已」抢走了人参

基本的职业素养

不要让「img」变形

  • 你可以指定宽高,或者强行要求UI给你指定尺寸的图

关于「img」的坑

因为「img」是一个可替换元素,所以当图片下载失败的时候就会显示alt里的内容

1
<img src="xxx.jpg"  alt="图片1">

由于你没有指定宽高，假如是三个并排的img(不出意外是float或者flex-start)

由于第一张图加载速度慢，后面的img就不得不挤过来，直到图1 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
正常加载
|--------| |--------||--------|
|--------| |--------||--------|
|   图1  | |   图2  ||   图3   |
|--------| |--------||--------|

图1还没加载过来 没指定宽高导致后面的img补位
|图1||--------||--------|
     |--------||--------|
     |   图2  ||   图3   |
     |--------||--------|
图1回来了
|--------| |--------||--------|
|--------| |--------||--------|
|   图1  | |   图2  ||   图3   |
|--------| |--------||--------|

就是因为你没有指定宽高所以在图片没回来的时候占据很小的空间，而当图1正常加载后 图2图3就必须给图1退出位置

这样的结果就会导致「重排」

重排是很耗性能的，页面性能优化的注意点就是

如果你已知图片的宽高你最好写在上面避免图片未加载的「让位」(腾地)