百度貼吧的一段語法糖程式碼分析
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 }