尽可能写"友好"的"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中this关键字(翻译+自我理解)
Oct 20 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
python字典序问题实例
2014/09/26 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
django使用channels实现通信的示例
2020/10/19 Python
python爬虫请求头的使用
2020/12/01 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
售后服务承诺书
2014/03/26 职场文书
一体化教学实施方案
2014/05/10 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
2014年民政工作总结
2014/11/26 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
三八妇女节主持词
2015/07/04 职场文书
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS