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


Posted in Javascript onOctober 09, 2006

在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 相关文章推荐
Jquery 的扩展方法总结
Oct 01 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
splice slice区别
Oct 09 #Javascript
获取DOM对象的几种扩展及简写
Oct 09 #Javascript
js几个不错的函数 $$()
Oct 09 #Javascript
使用Javascript和DOM Interfaces来处理HTML
Oct 09 #Javascript
激活 ActiveX 控件
Oct 09 #Javascript
自动更新作用
Oct 08 #Javascript
许愿墙中用到的函数
Oct 07 #Javascript
You might like
基于递归实现的php树形菜单代码
2014/11/19 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
php curl常用的5个经典例子
2017/01/20 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
PHP7内核之Reference详解
2019/03/14 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Python重新引入被覆盖的自带function
2014/07/16 Python
Python实现从url中提取域名的几种方法
2014/09/26 Python
分享python数据统计的一些小技巧
2016/07/21 Python
Python 的类、继承和多态详解
2017/07/16 Python
python实现list由于numpy array的转换
2018/04/04 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
精伦电子Java笔试题
2013/01/16 面试题
中职应届生会计求职信
2013/10/23 职场文书
生产车间主管岗位职责
2013/12/28 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
Python基础之元类详解
2021/04/29 Python
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js