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

2016-02-19 22:18 3 1 收藏

下面图老师小编跟大家分享一个简单易学的实例:尽可能写友好的Javascript代码教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

  在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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)


二、采用对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
    lia href="http://www.never-online.net"home/a/li
    lia href="http://blog.never-online.net"blog/a/li
    lia href="http://www.never-online.net/music"music/a/li
    !-- more... --
  /ul
div

  从方法一和方法二来比较,方法一把一些HTML封装到了neverDHTMLmenu()里,但这样做并没有实际的好处,虽然我们依然可以把CSS给到这个类里。

  方法二中可以看到有很多好处,比如,可以将view与program分离,可以实现客户端的MVC。换个角度说,可以提高开发效率。

  可能有些朋友会问,除了menu,还有哪些程序可以按上述的方法分离呢?

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  上面也提到了,一般与页面交互较多的,会产生大量的HTML的,会影响Search Engine的robot的,都可以采用这种方法,当然了,这些只是讨论对Search Engine的友好度,所以,任何代码都必须由实际情况而定。

  也或者有朋友问,这样为何会提高开发效率?

  比如,美工做好模板后,(假设此美工会一些相关的HTML编写)那么按照xhtml标准,(如上例如示)

  假设我要把原本的home改成Default page,那么美工得和程序员沟通,说要改这个menu的字,沟通时间在开发中也会多了。因此,在开发进度上,这个时间要算进去的。假设要改模板了,那么还得沟通。再或者假如原来用js生成的HTML是table做成的menu,要改版了,那么这个程序还得改写。不利于维护...

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

来源:http://www.tulaoshi.com/n/20160219/1628153.html

延伸阅读
标签: Web开发
下面这段代码,你知道有哪些错误吗: var g_bar = "bar";function foo(container, config) {var container = container || document,name = config.name || "无名氏",isLive = config.isLive || true;var g_bar = g_bar || "";if(g_foo) {/* your code */}}foo(document, {isLive: false}); 请仔细思考后再...
标签: Web开发
JavaScript提供脚本语言的编程与C++非常相似,它只是去掉了C语言中有关指针等容易产生的错误,并提供了功能强大的类库。对于已经具备C++或C语言的人来说,学习JavaScript脚本语言是一件非常轻松愉快的事。我们可以通过一个例子,编写第一个JavaScript程序。通过它可说明JavaScript的脚本是怎样被嵌入到HTML文档中的。JavaScript的脚本包...
标签: Web开发
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 还可以这样写   [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
标签: Web开发
本节稍稍深入地讨论关于事件处理的话题,如果你对模式、闭包和面向对象等概念还不太理解,不妨暂且等阅读完相关内容之后再回过头来阅读它,相信你会有很大收获。 1 事件处理模式        在程序设计领域,“事件处理”是一种模式,当一个对象受外部影响而改变状态时,通过消息的方式将这个状态改变...
标签: Web开发
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" html head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / titleJavaScript版代码高亮/title link href="style.css" rel="stylesheet" type="text/css" / /head body div class="menu_head"JavaScript版代码高亮显示/div div class="content" script l...

经验教程

114

收藏

73
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部