尽可能写"友好"的"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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
js控制input框只读实现示例
Jan 20 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
添加到收藏夹代码(兼容几乎所有的浏览器)
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 bootstrap实现简单登录
2016/03/08 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
ES6 十大特性简介
2020/12/09 Javascript
Python中的hypot()方法使用简介
2015/05/18 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
python学生信息管理系统实现代码
2019/12/17 Python
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
优秀教师的感人事迹
2014/02/04 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
学习雷锋倡议书
2014/04/15 职场文书
物流专业自荐信
2014/05/23 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
JavaScript设计模式之原型模式详情
2022/06/21 Javascript