怎樣編寫(xiě)JavaScript面向?qū)ο蟮捻?yè)面結(jié)構(gòu)？

在分析了標(biāo)簽頁(yè)組件的基本功能需求后，下面我們開(kāi)始編寫(xiě)頁(yè)面結(jié)構(gòu)，具體步驟如下。

（1）編寫(xiě)HTML代碼實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)。CSS樣式代碼請(qǐng)參考本書(shū)配套源碼。

 <div class="tabsbox" id="tab">
 
<!--標(biāo)簽-- >

<nav class="firstnav">

 <ul>
 
<li class="liactivel">

<span>測(cè)試1</span><span class="iconfont icon-close"></span>

</1i>

<1i>

</li>

<span>測(cè)試2</span><span class="iconfont icon-close"></span>

</li>

<1i>

<span>測(cè)試3</span><span class="iconfont icon-close"></span>

</li>

</ul>

<divclass=" tabadd"><span>+</span></div>

</nav>

<!--內(nèi)容->

<div class="tabscon">

<section class="'conactive">測(cè)試1</section>

<section>測(cè)試2</section>

<section>測(cè)試3</section>

</div>

</div>

在上述代碼中，第2 ~ 16 行代碼是標(biāo)簽頁(yè)組件的頂部標(biāo)簽區(qū)域。第17 ~ 22行代碼是標(biāo)簽下方的內(nèi)容區(qū)域。第5 ~ 13 行代碼中的每個(gè)<li>就是可以單擊的標(biāo)簽，單擊某一個(gè)標(biāo)簽后，就會(huì)切換到下方第19 ~ 21行代碼對(duì)應(yīng)的<section>內(nèi)容區(qū)域。第15行的“+”是添加新標(biāo)簽頁(yè)的按鈕。第6、9、12行的class為icon- -close的<span>是每個(gè)標(biāo)簽右上角的“x”關(guān)閉按鈕。

(2)編寫(xiě)JavaScript代碼，由于代碼比較多，將代碼單獨(dú)保存在一個(gè)文件中，然后在HTML頁(yè)面中使用<script>標(biāo)簽引入。如下所示。

<script src="js/tab.js"></script>

然后創(chuàng)建js/tab.js文件，開(kāi)始編寫(xiě)代碼。我們將整個(gè)標(biāo)簽頁(yè)組件看成一個(gè)對(duì)象，考慮到標(biāo)簽頁(yè)組件應(yīng)該是可以被復(fù)用的，在一個(gè)頁(yè)面中允許出現(xiàn)多個(gè)標(biāo)簽頁(yè)組件，所以接下來(lái)我們就來(lái)編寫(xiě)一個(gè)Tab類(lèi)，用來(lái)創(chuàng)建標(biāo)簽頁(yè)對(duì)象。每當(dāng)頁(yè)面中需要增加一個(gè)標(biāo)簽頁(yè)組件的時(shí)候，就通過(guò)new Tab0創(chuàng)建一個(gè)對(duì)象就可以了，具體代碼如下：

//編寫(xiě)Tab類(lèi)，用來(lái)創(chuàng)建標(biāo)簽頁(yè)對(duì)象

class Tab {

constructor() {         //構(gòu)造方法

toggleTab() {}          //切換標(biāo)簽頁(yè)

addTab() {}             //添加標(biāo)簽頁(yè)

removeTab() {}          //刪除標(biāo)簽頁(yè)

editTab() {}

//修改標(biāo)簽頁(yè)            //創(chuàng)建標(biāo)簽頁(yè)對(duì)象

new Tab();

(3)當(dāng)頁(yè)面中有多個(gè)標(biāo)簽頁(yè)組件的時(shí)候，為了區(qū)分每一個(gè)標(biāo)簽頁(yè)組件，可以給每個(gè)標(biāo)簽頁(yè)設(shè)置一個(gè)id。在頁(yè)面結(jié)構(gòu)中，最外層的div(大盒子）的id為tab,因此就將tab通過(guò)創(chuàng)建創(chuàng)建構(gòu)造方法傳入，具體代碼如下：

new Tab（'#tab');

然后修改constructor()方法，根據(jù)id獲得大盒子的對(duì)象，將對(duì)象保存到自已的屬性中，這樣可以在其他方法中通過(guò)this.main使用，具體代碼如下。

constructor(id) {

   this.main = document.querySelector (id);
}