实例:尽可能写友好的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对单选框(radio)操作的小例子
Apr 25 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 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和.net中des加解密的实现方法
2013/02/27 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP实现文件下载详解
2014/11/27 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
javascript 面向对象的JavaScript类
2010/05/04 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
python进程和线程用法知识点总结
2019/05/28 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
职业女性的职业规划
2014/03/04 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
党支部考察意见范文
2015/06/02 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技