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


Posted in Javascript onJanuary 09, 2007

在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来处理。

Javascript 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
js函数调用的方式
May 06 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
ECMAscript 变量作用域总结概括
Aug 18 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
用Node写一条配置环境的指令
Nov 14 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 #Javascript
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 #Javascript
一个对于js this关键字的问题
Jan 09 #Javascript
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 #Javascript
根据分辩率调用不同的CSS.
Jan 08 #Javascript
如何用javascript判断录入的日期是否合法
Jan 08 #Javascript
[IE&amp;FireFox兼容]JS对select操作
Jan 07 #Javascript
You might like
PHP自动更新新闻DIY
2006/10/09 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
vue项目中使用百度地图的方法
2018/06/08 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
详解django2中关于时间处理策略
2019/03/06 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
简历自我评价怎么写呢?
2014/01/06 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
Python自动化测试PO模型封装过程详解
2021/06/22 Python
一文简单了解MySQL前缀索引
2022/04/03 MySQL
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python