尽可能写"友好"的"Javascript"代码

 更新时间:2007年01月09日 00:00:00   作者:  
在Search Engine的robot搜索时,针对的type,text/html此类“文本”的友好度是最高的(现阶段text/xml除外),而text/javascript此类的友好度不理想,如果robot还要判断DHTML代码的话,那这个复杂度也是较高,而且划不来

因此,在DHTML编程时,如果要提升代码的友好度。采用的方法,较好的方法是“尽可能是把DHTML的代码简化成没有HTML的代码”。这句话如何理解?

e.g:
一个javascript menu。
方法一、采用常规的编程方法:
<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>

二、采用对Search Engine较友好的编程方法
复制代码 代码如下:
<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。换个角度说,可以提高开发效率。

可能有些朋友会问,除了menu,还有哪些程序可以按上述的方法分离呢?
上面也提到了,一般与页面交互较多的,会产生大量的HTML的,会影响Search Engine的robot的,都可以采用这种方法,当然了,这些只是讨论对Search Engine的友好度,所以,任何代码都必须由实际情况而定。

也或者有朋友问,这样为何会提高开发效率?
比如,美工做好模板后,(假设此美工会一些相关的HTML编写)那么按照xhtml标准,(如上例如示)
假设我要把原本的home改成Default page,那么美工得和程序员沟通,说要改这个menu的字,沟通时间在开发中也会多了。因此,在开发进度上,这个时间要算进去的。假设要改模板了,那么还得沟通。再或者假如原来用js生成的HTML是table做成的menu,要改版了,那么这个程序还得改写。不利于维护...

这个方法建议大家可以试试,意思主要就是JS负责业务实现,而视图则仍然交由HTML来处理。

相关文章

  • EsLint入门学习教程

    EsLint入门学习教程

    ESLint是一个代码规范和错误检查工具,下面这篇文章主要介绍了EsLint的相关资料,需要的朋友可以参考学习,下面来一起看看吧。
    2017-02-02
  • JavaScript常用全局属性与方法记录积累

    JavaScript常用全局属性与方法记录积累

    在学习javascript的过程中记录下常用的全局属性与方法,就当是知识的积累,以备日后使用,感兴趣的朋友可以了解下哈
    2013-07-07
  • js创建jsonArray传输至后台及后台全面解析

    js创建jsonArray传输至后台及后台全面解析

    下面小编就为大家带来一篇js创建jsonArray传输至后台及后台全面解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考。
    2016-04-04
  • Javascript基础:运算符与流程控制详解

    Javascript基础:运算符与流程控制详解

    这篇文章主要给大家介绍了关于Javascript中运算符及流程控制的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-10-10
  • JavaScript面向对象编程入门教程

    JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦
    2014-04-04
  • 有关JavaScript中call()和apply() 的一些理解

    有关JavaScript中call()和apply() 的一些理解

    下面小编就为大家带来一篇有关JavaScript中call()和apply() 的一些理解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 探寻JavaScript中this指针指向

    探寻JavaScript中this指针指向

    JavaScript由于其在运行期进行绑定的特性,JavaScript 中的 this 可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。
    2016-04-04
  • IE、FF、Chrome浏览器中的JS差异介绍

    IE、FF、Chrome浏览器中的JS差异介绍

    到目前为止各浏览器的HTML标准或是JS标准都还未统一,但作为一个开发人员,还是有需要了解JS在浏览器中的差异
    2013-08-08
  • 窗口没有提示自动关闭的js代码

    窗口没有提示自动关闭的js代码

    窗口没有提示自动关闭的js代码...
    2007-03-03
  • JavaScript中的跨浏览器事件操作的基本方法整理

    JavaScript中的跨浏览器事件操作的基本方法整理

    首先值得说一下,在事件处理、事件对象、阻止事件的传播等方法或对象存在着浏览器兼容性问题,开发过程中最好编写成一个通用的事件处理工具,嗯,接下来我们一起来看一下JavaScript中的跨浏览器事件操作的基本方法整理
    2016-05-05

最新评论