首頁技術(shù)文章正文

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

更新時間:2021-08-18 來源:黑馬程序員 瀏覽量:

IT培訓班

在分析了標簽頁組件的基本功能需求后,下面我們開始編寫頁面結(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”關(guān)閉按鈕。

(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);
}









分享到:
在線咨詢 我要報名
和我們在線交談!