怎樣編寫JavaScript面向?qū)ο蟮捻撁娼Y(jié)構(gòu)？

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

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

 <div class="tabsbox" id="tab">
 
<!--標簽-- >

<nav class="firstnav">

 <ul>
 
<li class="liactivel">

<span>測試1</span><span class="iconfont icon-close"></span>

</1i>

<1i>

</li>

<span>測試2</span><span class="iconfont icon-close"></span>

</li>

<1i>

<span>測試3</span><span class="iconfont icon-close"></span>

</li>

</ul>

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

</nav>

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

<div class="tabscon">

<section class="'conactive">測試1</section>

<section>測試2</section>

<section>測試3</section>

</div>

</div>

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

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

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

然后創(chuàng)建js/tab.js文件，開始編寫代碼。我們將整個標簽頁組件看成一個對象，考慮到標簽頁組件應該是可以被復用的，在一個頁面中允許出現(xiàn)多個標簽頁組件，所以接下來我們就來編寫一個Tab類，用來創(chuàng)建標簽頁對象。每當頁面中需要增加一個標簽頁組件的時候，就通過new Tab0創(chuàng)建一個對象就可以了，具體代碼如下：

//編寫Tab類，用來創(chuàng)建標簽頁對象

class Tab {

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

toggleTab() {}          //切換標簽頁

addTab() {}             //添加標簽頁

removeTab() {}          //刪除標簽頁

editTab() {}

//修改標簽頁            //創(chuàng)建標簽頁對象

new Tab();

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

new Tab（'#tab');

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

constructor(id) {

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