作為微博的頁(yè)面構(gòu)建工程師，主要職責(zé)就是利用html&css，高質(zhì)量的完成靜態(tài)頁(yè)面的制作，保證項(xiàng)目的按時(shí)完成。而頁(yè)面需要的js效果則交給下游的js前端工程師去做。在微博，這兩個(gè)崗位是分開(kāi)的。但在大家的思維定勢(shì)里可能覺(jué)得這兩個(gè)崗位應(yīng)由一個(gè)人來(lái)完成最好，畢竟，頁(yè)面構(gòu)建工程師寫(xiě)的html結(jié)構(gòu)不一定是js工程師想要的那種，js工程師可能有更高效的方式。所以，在頁(yè)面構(gòu)建之前最好能與js工程師溝通一下，把實(shí)現(xiàn)方案確定好。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),臨桂企業(yè)網(wǎng)站建設(shè),臨桂品牌網(wǎng)站建設(shè),網(wǎng)站定制,臨桂網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,臨桂網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

但在實(shí)際項(xiàng)目流程中，當(dāng)進(jìn)行到頁(yè)面構(gòu)建的時(shí)候，產(chǎn)品經(jīng)理可能還沒(méi)安排到j(luò)s資源，這時(shí)我們只能按照產(chǎn)品的需求和自己的想法去寫(xiě)html結(jié)構(gòu)，不僅要考慮到設(shè)計(jì)稿的還原度、瀏覽器的兼容性、以后可能要添加的新功能的預(yù)見(jiàn)位置，還要考慮怎樣寫(xiě)html結(jié)構(gòu)能讓js最省事的完成產(chǎn)品的交互效果。作為一名有責(zé)任感的頁(yè)面構(gòu)建工程師，表示亞歷山大！所以，我們經(jīng)常查看頁(yè)面源碼時(shí)，會(huì)發(fā)現(xiàn)這樣的注釋?zhuān)脕?lái)告訴js工程師怎么去操作dom結(jié)構(gòu)。

有時(shí)為了做到最簡(jiǎn)，我們要考慮好久，前一陣子的倫敦奧運(yùn)會(huì)，微博首頁(yè)右側(cè)要添加一個(gè)奧運(yùn)金牌榜的模塊，要求有收起和展開(kāi)的按鈕，用來(lái)顯示不同的內(nèi)容。

對(duì)網(wǎng)站來(lái)說(shuō)這是很稀松平常的交互效果。具體html實(shí)現(xiàn)可能有同學(xué)會(huì)想到，做兩個(gè)div，各自包含展開(kāi)的內(nèi)容和收起的內(nèi)容。在點(diǎn)擊展開(kāi)按鈕時(shí)出現(xiàn)一個(gè)，另一個(gè)隱藏；而在點(diǎn)擊收起的時(shí)候做相反的處理。這種事本身也沒(méi)有對(duì)與錯(cuò)，能實(shí)現(xiàn)效果就好。但作為出現(xiàn)在微博首頁(yè)的模塊，并且出現(xiàn)在第一屏的位置，對(duì)性能的優(yōu)化肯定是要做足的。能盡量在我們css這一層做的，決不放到j(luò)s那邊去做。我的處理方式是把收起展開(kāi)的樣式都寫(xiě)好，放在一起，讓js在默認(rèn)展開(kāi)或點(diǎn)擊展開(kāi)的時(shí)候顯示turn_olym_on，在點(diǎn)擊收起的時(shí)候更換為turn_olym_off，這樣js就只是更換一個(gè)class名的代碼量，而對(duì)于展開(kāi)收起的兩個(gè)按鈕，我也通過(guò)更換的class名來(lái)顯示和隱藏。

具體html代碼：

在這里把所有用到的代碼全部放在一起，把某種狀態(tài)時(shí)不用顯示的隱藏掉，比如展開(kāi)狀態(tài)時(shí)，class=”show_less W_linecolor”的div和展開(kāi)的按鈕class=”W_moredown”不用顯示，就可以在最外層的div上寫(xiě)：

css暫時(shí)隱藏掉這兩元素：

而當(dāng)收起的時(shí)候，最外層的div就變成：

css則把之前隱藏的兩個(gè)元素顯示出來(lái)，并把需要隱藏的排行榜四五名class=”no_45″的tr標(biāo)簽、賽事重點(diǎn)的class=”show_more”及收起的按鈕class=”W_moreup”隱藏：

這樣，就只需要js在點(diǎn)擊收起的時(shí)候把turn_olym_on換成turn_olym_off，而點(diǎn)擊展開(kāi)的時(shí)候把turn_olym_off換成turn_olym_on就可以了，其余的隱藏展示全部有css來(lái)搞定。

總結(jié)：

了解一些上下游工作的知識(shí)，讓上下游溝通更順暢，提高工作效率，是我們共同的目標(biāo)。

頁(yè)面構(gòu)建的工作，面臨著很多的挑戰(zhàn)，眼下html5的新標(biāo)簽、高級(jí)瀏覽器原生支持的各種api，還有css3新鮮好玩的新屬性等等。都需要我們?nèi)W(xué)習(xí)，不求完全掌握，但求能了解熟悉，能知道是怎么回事。把學(xué)到的新知識(shí)應(yīng)用到實(shí)際項(xiàng)目中，對(duì)公司對(duì)團(tuán)隊(duì)對(duì)自己都有益。

元芳，你怎么看？

分享名稱：頁(yè)面構(gòu)建和js前端不得不說(shuō)的那點(diǎn)事兒
網(wǎng)站路徑：http://weahome.cn/article/cjiiis.html