在HTML中实现比DocBook更好用的自动节编号

在HTML中，自动编号的标签是

.

 

我喜欢吃的水果有：

1. 西瓜
2. 苹果
3. 梨

 

结果如下 ：

 

我喜欢吃的水果有:

1. 西瓜
2. 苹果
3. 梨

看起来很简单。其实不然。假设我应邀写一篇如何赚钱的文章。下面是拟好的提纲。

 

1. 我们能赚钱吗
能。

 

2. 赚钱方法简介


  2.1 当劳工
勤劳致富，大力推荐。

 

  2.2 卖血
    2.2.1 卖自己的血
只要撑得住，也是推荐的。

 

    2.2.2 卖别人的血
别人若同意，我也不反对。

 

2.3 编程
  2.3.1 外包
听说是个赚钱的好方法，但是，你要人家的钱，人家要你的命。

 

  2.3.2 自己承接
最好先在Google上推销自己。

 

3. 努力赚钱，作明日之比尔盖茨
我要养家，要糊口，要当比尔盖茨！但如果人人这么想，比尔盖茨还能成为比尔盖茨了吗？

 

4. 结论

赚钱真难！ 

 

我用

来实现：

 

 

1. 我们能赚钱吗

   能。

2. 赚钱方法简介
   1. 当劳工

      勤劳致富，大力推荐。

   2. 卖血
      1. 卖自己的血

         只要撑得住，也是推荐的。

      2. 卖别人的血

         别人若同意，我也不反对。

   3. 编程
      1. 外包

         听说是个赚钱的好方法，但是，你要人家的钱，人家要你的命。

      2. 自己承接

         最好先在Google上推销自己。

3. 努力赚钱，作明日之比尔盖茨

   我要养家，要糊口，要当比尔盖茨！但如果人人这么想，比尔盖茨还能成为比尔盖茨了吗？

4. 结论

   赚钱真难！

 

其效果如下：

 

1. 我们能赚钱吗

   能。

2. 赚钱方法简介
   1. 当劳工

      勤劳致富，大力推荐。

   2. 卖血
      1. 卖自己的血

         只要撑得住，也是推荐的。

      2. 卖别人的血

         别人若同意，我也不反对。

   3. 编程
      1. 外包

         听说是个赚钱的好方法，但是，你要人家的钱，人家要你的命。

      2. 自己承接

         最好先在Google上推销自己。

3. 努力赚钱，作明日之比尔盖茨

   我要养家，要糊口，要当比尔盖茨！但如果人人这么想，比尔盖茨还能成为比尔盖茨了吗？

4. 结论

   赚钱真难！

可以看出，无论是从书写习惯上，还是效果上看，都不能取得较理想的效果。这是为什么我们很少看到别人

使用来编排文章的原因。

 

DocBook中有专门解决此问题之道，主要通过、......来实现。

 

  

 

 从结构上来看，比

强赚钱方法简介多了。但DocBook也有一问题：如果我们要将一级上升，除将的内容移出之外，还必须将标签改为。如果又包括了众多的、等，则需对这些节一一变更。

下面，我们来实现一个比DocBook还更好用的类似小工具。仿造DocBook的结构，先编写下面的HTML代码。

我们能赚钱吗

能。

赚钱方法简介

当劳工

勤劳致富，大力推荐。

卖血

卖自己的血

只要撑得住，也是推荐的。

卖别人的血

别人若同意，我也不反对。

编程

外包

听说是个赚钱的好方法，但是，你要人家的钱，人家要你的命。

自己承接

最好先在Google上推销自己。

努力赚钱，作明日之比尔盖茨

我要养家，要糊口，要当比尔盖茨！但如果人人这么想，比尔盖茨还能成为比尔盖茨了吗？

结论

赚钱真难！

这种结构，我们不必关心各段具体是几级节点。因此若需重新调整结构，只须调整物理位置即可，无须修改div的class.

我们准备使用JQuery来助力。

因为Google可以提供JQuery调用，因此只需直接调用其就行了，不必再虽行下载JQuery。为方便使用，我在下面创建了一个对象。

 

 定义了一个名为levelIndexManager类变量，此类的接口如下：

getIndex(): 返回各级节点的标签，如“1.”、“2.3.1”。

levelUp(): 调用此方法，告知levelIndexManager我们需要设置取得下一级节点标签，levelIndexManager自动在内部设置各级节点标签，之后使用getIndex()即可返回所需标签。

levelDown(): 调用此方法，告知levelIndexManager返还上一级节点标签，之后使用getIndex()即可返回所需标签。

 有时候，我们还需用到levelIndexManager的level属性，以了解当前是第几级。

 

 为方便使用，getIndex()方法中在第一次调用时会自动检查并初始化。

 

 levelIndexManager主要利用JavaScript数组来实现堆栈功能。

 

 关于levelIndexManager，我们仅需了解其接口方法就行，不必拘泥于细节。

 

紧随着levelIndexManager的定义，编写以下代码：

 

调用JQuery库后，待页面加载完毕，调用processChain()函数。此函数是实现本文功能的重点。功能不复杂，对于body之下每个sect，将其sectTitle取出，调用levelIndexManager.getIndex()以获取正确的节编号后，修改sectTitle的内容。难点在于如何告诉levelIndexManager，何时需要设置下一级节编号。函数的倒数第二行递归调用processChain()函数，以处理每个sect之下的子节点。因此，这是调用levelIndexManager.levelUp()的好时机。处理完子节点后，立即调用levelIndexManager.levelDown()返回上一级节点。而对于没有子节点的，processChain()立即返回。虽然此时levelUp()及levelDown()也被调用了，但没有关系，只要它们成对被调用，只不过多进行了一次进栈及出栈的动作而已，丝毫不影响节点编号的正确设置。

 

至此，我们成功地在HTML中实现了比DocBook还更好用的自动编排节标签的功能，使得我们在使用HTML写文章时更加便捷。