1. 程式人生 > 實用技巧 >百度貼吧的一段語法糖程式碼分析

百度貼吧的一段語法糖程式碼分析

function r(){var i="\u5176\u4ed6";return"1"==t.is_zone_forum&&(i="\u6838\u5fc3\u533a"),$("#tab_forumname").parent(".j_tbnav_tab").hasClass("focus")?i="\u770b\u5e16":$("#tab_picture").parent(".j_tbnav_tab").hasClass("focus")?i="\u56fe\u7247":$(".j_tbnav_tab").eq(2).hasClass("focus")?i="1"==t.is_zone_forum?"\u56fe\u7247":"\u7cbe\u54c1":$(".j_tbnav_tab").eq(3).hasClass("focus")?i="1"==t.is_zone_forum?"\u7cbe\u54c1":"\u7fa4\u7ec4":$(".j_tbnav_tab").eq(4).hasClass("focus")&&(i="\u7fa4\u7ec4"),i}

Unicode轉中文,Tab對齊

 1 function r() {
 2     var i = "其他";
 3     return  "1" == t.is_zone_forum && (i = "核心區")
 4             ,$("#tab_forumname").parent(".j_tbnav_tab").hasClass("focus") 
 5                 ? i = "看帖" 
 6                 : $("#tab_picture").parent(".j_tbnav_tab").hasClass("focus") 
7 ? i = "圖片" 8 : $(".j_tbnav_tab").eq(2).hasClass("focus") 9 ? i = "1" == t.is_zone_forum 10 ? "圖片" 11 : "精品" 12 : $(".j_tbnav_tab").eq(3).hasClass("focus")
13 ? i = "1" == t.is_zone_forum 14 ? "精品" 15 : "群組" 16 : $(".j_tbnav_tab").eq(4).hasClass("focus") && (i = "群組") 17 ,i 18 }

下面分析這段程式碼:

首先定義了字串 i,初始值="其他"

var i = "其他";

然後return 逗號表示式 ,可以將上方程式碼概括為return 表示式1,表示式2,表示式3

(仔細看,第4行最前面有逗號,第17行最前面有逗號)

表示式1

"1" == t.is_zone_forum && (i = "核心區")

表示式2

$("#tab_forumname").parent(".j_tbnav_tab").hasClass("focus") 
    ? i = "看帖" 
    : $("#tab_picture").parent(".j_tbnav_tab").hasClass("focus") 
        ? i = "圖片" 
        : $(".j_tbnav_tab").eq(2).hasClass("focus") 
            ? i = "1" == t.is_zone_forum 
                ? "圖片" 
                : "精品" 
            : $(".j_tbnav_tab").eq(3).hasClass("focus") 
                ? i = "1" == t.is_zone_forum 
                    ? "精品" 
                    : "群組" 
                : $(".j_tbnav_tab").eq(4).hasClass("focus") && (i = "群組")

表示式3

i

逗號表示式的運算規則:【逗號表示式從左往右運算,整個逗號表示式的值是最後一個表示式的值】

逗號表示式中的最後一個表示式是表示式3,也就是 i,所以return 逗號表示式 其實是

return  i

下面分析表示式1

"1" == t.is_zone_forum && (i = "核心區")

表示式1用到了邏輯運算子的短路運算

此處是邏輯與&&,可概括為 表示式a && 表示式b

邏輯與&& 兩邊的表示式,同真才為真,有假即為假

也就是說,只要表示式a為假,那麼整個邏輯表示式肯定為假,不必運算表示式b【表示式b被"短路"】

只有表示式a為真時,才會運算表示式b

表示式1沒有賦值給其他變數,實際上就是隱晦的if語句("1"放在左邊是為了防止 相等==寫成賦值=)

if("1" == t.is_zone_forum)
{
    i = "核心區"
}

下面分析表示式2

 1 $("#tab_forumname").parent(".j_tbnav_tab").hasClass("focus") 
 2     ? i = "看帖" 
 3     : $("#tab_picture").parent(".j_tbnav_tab").hasClass("focus") 
 4         ? i = "圖片" 
 5         : $(".j_tbnav_tab").eq(2).hasClass("focus") 
 6             ? i = "1" == t.is_zone_forum 
 7                 ? "圖片" 
 8                 : "精品" 
 9             : $(".j_tbnav_tab").eq(3).hasClass("focus") 
10                 ? i = "1" == t.is_zone_forum 
11                     ? "精品" 
12                     : "群組" 
13                 : $(".j_tbnav_tab").eq(4).hasClass("focus") && (i = "群組")

表示式2用到了條件運算子 ?:(唯一的三目運算子/三元運算子)

條件運算子有一個冒號和一個問號,可概括為 邏輯表示式 ? 表示式a : 表示式b (左式整體可稱為條件表示式)

類似於

if( 邏輯表示式 )

{

  表示式a

}

else

{

  表示式b

}

只不過條件表示式本身還有值,其中哪個表示式執行,條件表示式整體就等於那個式的值

舉個例子:求兩數最大值 max=(a>b)?a:b 【條件表示式整體賦值給max】

相當於

if(a>b)

{

   max=a //條件表示式的值就是變數a的值

}

else

{

  max=b //條件表示式的值就是變數b的值

}

因為本段程式碼的條件表示式並沒有賦值給變數,所以直接改寫為if else

先分析表示式2的前兩行

$("#tab_forumname").parent(".j_tbnav_tab").hasClass("focus") 
    ? i = "看帖" 

改為if語句

if( $("#tab_forumname").parent(".j_tbnav_tab").hasClass("focus") )
{
    i = "看帖"
} 

分析3,4行。第3行是else語句,後面又巢狀條件運算子

: $("#tab_picture").parent(".j_tbnav_tab").hasClass("focus") 
    ? i = "圖片" 

改為else if

else if( $("#tab_picture").parent(".j_tbnav_tab").hasClass("focus") )
{
    i = "圖片"
}

先分析第5行。第5行是else語句,後面又巢狀條件運算子

: $(".j_tbnav_tab").eq(2).hasClass("focus") 

改為else if

else if( $(".j_tbnav_tab").eq(2).hasClass("focus") )
{

再分析6,7,8行。因為兩個問號挨在一起,所以合併分析

因為賦值運算子優先順序低於相等關係運算符,所以先判斷相等關係,再執行條件表示式,最後條件表示式整體賦值給變數 i

? i = "1" == t.is_zone_forum 
        ? "圖片" 
        : "精品" 

與第5行的分析合併

else if( $(".j_tbnav_tab").eq(2).hasClass("focus") )
{
    if( "1" == t.is_zone_forum )
    {
        i="圖片"
    } 
    else
    {
        i="精品"
    }
}

先分析第9行。第9行是else語句,後面又巢狀條件運算子

: $(".j_tbnav_tab").eq(3).hasClass("focus") 

改為else if

else if( $(".j_tbnav_tab").eq(3).hasClass("focus") )
{

再分析10,11,12行。因為兩個問號挨在一起,所以合併分析

因為賦值運算子優先順序低於相等關係運算符,所以先判斷相等關係,再執行條件表示式,最後條件表示式整體賦值給變數 i

    ? i = "1" == t.is_zone_forum 
        ? "精品" 
        : "群組" 

與第9行的分析合併

else if( $(".j_tbnav_tab").eq(3).hasClass("focus") )
{    
    if( "1" == t.is_zone_forum )
    {
        i="精品" 
    }
    else
    {
        i="群組"
    }
}

最後分析第13行,第13行是else語句,後面又有邏輯與&&運算子的短路運算

: $(".j_tbnav_tab").eq(4).hasClass("focus") && (i = "群組")

改為else if

else if( $(".j_tbnav_tab").eq(4).hasClass("focus") )
{
    i = "群組"
}

表示式2改為

if( $("#tab_forumname").parent(".j_tbnav_tab").hasClass("focus") )
{
    i = "看帖"
} 
else if( $("#tab_picture").parent(".j_tbnav_tab").hasClass("focus") )
{
    i = "圖片"
}
else if( $(".j_tbnav_tab").eq(2).hasClass("focus") )
{
    if( "1" == t.is_zone_forum )
    {
        i="圖片"
    } 
    else
    {
        i="精品"
    }
}
else if( $(".j_tbnav_tab").eq(3).hasClass("focus") )
{    
    if( "1" == t.is_zone_forum )
    {
        i="精品" 
    }
    else
    {
        i="群組"
    }
}
else if( $(".j_tbnav_tab").eq(4).hasClass("focus") )
{
    i = "群組"
}

最終,原始碼和等價程式碼對比

function r() {
    var i = "其他";
    return  "1" == t.is_zone_forum && (i = "核心區")
            ,$("#tab_forumname").parent(".j_tbnav_tab").hasClass("focus") 
                ? i = "看帖" 
                : $("#tab_picture").parent(".j_tbnav_tab").hasClass("focus") 
                    ? i = "圖片" 
                    : $(".j_tbnav_tab").eq(2).hasClass("focus") 
                        ? i = "1" == t.is_zone_forum 
                            ? "圖片" 
                            : "精品" 
                        : $(".j_tbnav_tab").eq(3).hasClass("focus") 
                            ? i = "1" == t.is_zone_forum 
                                ? "精品" 
                                : "群組" 
                            : $(".j_tbnav_tab").eq(4).hasClass("focus") && (i = "群組")
            ,i
}

 1 function r() {
 2     var i = "其他";
 3     if( $("#tab_forumname").parent(".j_tbnav_tab").hasClass("focus") )
 4     {
 5         i = "看帖"
 6     } 
 7     else if( $("#tab_picture").parent(".j_tbnav_tab").hasClass("focus") )
 8     {
 9         i = "圖片"
10     }
11     else if( $(".j_tbnav_tab").eq(2).hasClass("focus") )
12     {
13         if( "1" == t.is_zone_forum )
14         {
15             i="圖片"
16         } 
17         else
18         {
19             i="精品"
20         }
21     }
22     else if( $(".j_tbnav_tab").eq(3).hasClass("focus") )
23     {    
24         if( "1" == t.is_zone_forum )
25         {
26             i="精品" 
27         }
28         else
29         {
30             i="群組"
31         }
32     }
33     else if( $(".j_tbnav_tab").eq(4).hasClass("focus") )
34     {
35         i = "群組"
36     }
37     return i
38 }