怎样编写JavaScript面向对象的页面结构？

在分析了标签页组件的基本功能需求后，下面我们开始编写页面结构，具体步骤如下。

（1）编写HTML代码实现页面结构。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>

<!--内容->

<div class="tabscon">

<section class="'conactive">测试1</section>

<section>测试2</section>

<section>测试3</section>

</div>

</div>

在上述代码中，第2 ~ 16 行代码是标签页组件的顶部标签区域。第17 ~ 22行代码是标签下方的内容区域。第5 ~ 13 行代码中的每个<li>就是可以单击的标签，单击某一个标签后，就会切换到下方第19 ~ 21行代码对应的<section>内容区域。第15行的“+”是添加新标签页的按钮。第6、9、12行的class为icon- -close的<span>是每个标签右上角的“x”关闭按钮。

(2)编写JavaScript代码，由于代码比较多，将代码单独保存在一个文件中，然后在HTML页面中使用<script>标签引入。如下所示。

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

然后创建js/tab.js文件，开始编写代码。我们将整个标签页组件看成一个对象，考虑到标签页组件应该是可以被复用的，在一个页面中允许出现多个标签页组件，所以接下来我们就来编写一个Tab类，用来创建标签页对象。每当页面中需要增加一个标签页组件的时候，就通过new Tab0创建一个对象就可以了，具体代码如下：

//编写Tab类，用来创建标签页对象

class Tab {

constructor() {         //构造方法

toggleTab() {}          //切换标签页

addTab() {}             //添加标签页

removeTab() {}          //删除标签页

editTab() {}

//修改标签页            //创建标签页对象

new Tab();

(3)当页面中有多个标签页组件的时候，为了区分每一个标签页组件，可以给每个标签页设置一个id。在页面结构中，最外层的div(大盒子）的id为tab,因此就将tab通过创建创建构造方法传入，具体代码如下：

new Tab（'#tab');

然后修改constructor()方法，根据id获得大盒子的对象，将对象保存到自已的属性中，这样可以在其他方法中通过this.main使用，具体代码如下。

constructor(id) {

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