提升搜索引擎友好度的JavaScript编码策略：视图与逻辑分离

搜索引擎对JavaScript代码的友好度分析

当搜索引擎的爬虫进行索引时，对于text/html这类“文本”类型的页面，其友好度是最高的（目前阶段text/xml除外）。相比之下，text/javascript类型的代码对爬虫的友好度并不理想。如果爬虫还需要解析复杂的DHTML代码，其处理难度会显著增加，且投入产出比往往不划算。

因此，在进行DHTML编程时，若要提升代码对搜索引擎的友好度，一种较好的策略是“尽可能将DHTML代码简化为不含HTML的形式”。如何理解这一观点？

提升SEO友好度的编码策略：视图与逻辑分离

例如：

一个JavaScript菜单的实现。

<script type="text/javascript">

var navi_menu = neverDHTMLmenu();

/* addItem method

* @ pid

* @ id

* @ text

* @ href

navi_menu.addItem("0","1","home","http://www.never-online.net");

navi_menu.addItem("0","2","blog","http://blog.never-online.net");

navi_menu.addItem("0","3","music","http://www.never-online.net/music");

navi_menu.init("navigator_Container");

</script>

<script type="text/javascript">
onload = function() {
var config = {
container: document.getElementById("navigator_Container");
// and more configuration code
  }  
var navi_menu = new neverCssDHTMLMenu(config);
navi_menu.init();
</script>
<div id="navigator_Container" class="navigator_menu">
<ul>
<li><a href="http://www.never-online.net">home</a></li>
<li><a href="http://blog.never-online.net">blog</a></li>
<li><a href="http://www.never-online.net/music">music</a></li>
<!-- more... -->
</ul>
<div>

对比方法一和方法二，方法一将部分HTML封装到了neverDHTMLmenu()函数内部，但这并未带来实质性的优势，尽管我们仍可将CSS样式应用于该类。

方法二显示出诸多优势，例如实现了视图（view）与程序（program）的分离，从而支持客户端MVC模式。从另一个角度看，这有助于提高开发效率。

或许有人会问，除了菜单之外，还有哪些程序可以采用上述方法进行分离？

前文已提及，通常那些与页面交互频繁、会产生大量HTML内容并可能影响搜索引擎爬虫抓取的场景，都可以采用这种方法。当然，这仅是针对搜索引擎友好度的讨论，具体代码实现仍需根据实际情况而定。

也有朋友会问，这样做为何能提高开发效率？

例如，当美工完成模板后（假设该美工具备相关的HTML编写能力），按照XHTML标准（如上述示例所示）：

假设需要将原本的“home”改为“Default page”，那么美工需要与程序员沟通修改菜单文字，这部分沟通时间在开发过程中是必须计入的。如果需要更换模板，同样需要沟通。此外，如果原本使用JS生成的HTML是基于table构成的菜单，在改版时还需要修改程序代码，这显然不利于维护。

建议尝试此方法，其核心意义在于：JavaScript负责业务逻辑实现，而视图层仍由HTML处理。