实例:尽可能写友好的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 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
关于延迟加载JavaScript
May 05 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
Jquery-data的三种用法
Apr 18 jQuery
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
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多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
js href的用法
2010/05/13 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
《乡下孩子》教学反思
2014/04/17 职场文书
个人贷款收入证明
2014/10/26 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python