实例:尽可能写友好的Javascript代码

所属分类: 网络编程 / JavaScript 阅读数: 261
收藏 0 赞 0 分享
在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来处理。
更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多