从javascript语言本身谈项目实战


Posted in Javascript onDecember 27, 2006

从javascript语言本身谈项目实战
                                             
dulao5  2005-1-15

       随着ajax的升温,javascript越来越得到人们的重视。重要的是,ajax在一定程度上带来了web软件架构上的变化,人们把越来越多的功能分配到客户端实现,javascript子项目规模越来越大。如何更高效的使用javascript,如何更科学的组织javascript,如何更顺利的保证项目进展?我想就我的经验谈一点浅见。

一。 开发人员需要认真学习javascript语言本身
       由于javascript是“世界上最被误解的语言”, 大部分人对javascript语法并没有全面了解过,只是凭借看起来很像c或者java的关键字按照自己的理解写javascript代码。其实 javascript是一种很独特的语言,和c++/java有非常大的区别,要想用javascript做大一些的项目,开发人员必须老老实实的学习 javascript的语法。真正掌握了语法后,我们才不会把delete看成释放内存对象,才不会为到底参数传递是值传递还是引用传递而烦恼。真正理解了javascript的基于原型的OO方式,才可能写出具有良好架构的javascript程序。
       《javascript权威指南》是一本最合适的书,郑重推荐。另外ECMA262 文档可以作为参考。网上流行的jscript手册chm版本使用起来比较方便,不过这是微软的jscript实现,和标准的javascript略有区别,使用时应该注意上面的注脚信息。关于javascript的原型和OO,网上已经有很多文章介绍了,在此不再多说。

二。 良好的代码来源于良好的设计
       只有设计优良,代码才会写的漂亮。现在的javascript子项目已经不是以前web项目中的“边角料”和散兵游勇了,在较大的ajax项目内, javascript将非常复杂,ajax的异步模型也和以前顺序执行的程序设计有所区别。所以建议做javascript前首先做好设计。推荐使用用例驱动的方式,把用例分析清楚,以便全局考虑所有可能的页面交互过程,绘出页面内一些对象之间的交互图,分析一些数据对象的状态,作出精细的 javascript设计。

三。 使用设计模式,复用其他领域的设计经验
        如果javascript非常复杂,可以考虑使用一些模式。我想大部分做javascript的开发者都不是“javascript科班”出身吧:) 掌握了javascript的语言本质,就可以复用我们在其他领域的经验了。使用javascript框架或者ajax框架,使用单例模式做一个全局的数据缓冲池,或者使用观察者模式把界面对象和数据对象分离,使用命令模式实现用户的操作队列等等。

四。 调试代码的技巧
        javascript的代码不太好调试,这是由于:

  • 一般的开发人员对javascript语言本身不太精通。也就是上面提到的。
  • web项目包含较多的因素,复杂性加剧。服务端脚本、模板、html、js等很多环节都可能增加调试难度。
  • 浏览器存在兼容性问题。有可能在一个细节问题上IE、Mozilla、opera等浏览器都有差异。
  • 工具的缺乏。虽然mozilla的jsdebugger非常好用(还有bug,比如eval时调试器有些问题),但是其他浏览器环境下调试工具就不怎么样了。ms系统自带的script debug工具调试本地代码还可以,直接调试网站js代码表现欠佳。opera除了javascript控制台外我没有找到其他调试工具。

       在此我推荐几个调试技巧:

  1. 使用Mozilla firefox的jsdebugger插件。这个我不再多说了,最经典的js调试工具。在线调试远程站点的javascript效果非常棒。
  2. 把问题隔离,建立本地的html文件和js文件,使用ms script debug调试工具来调试。如果js模块比较独立,可以使用这个工具的。如果写hta的项目,这个工具当然是首选了。
  3. httpWatch 这是一个ie下的插件,非常好用,能够监视ie中的任何http会话,并能够看到http会话的原文。可以通过这个工具了解你的程序有没有和服务器产生会话,参数&返回的数据到底是什么。
  4. 在网页内建立用于调试的textarea
    可以在网页内建立一个textarea来接受你想运行的js语句,然后加一个按钮使用js的eval函数执行你输入的代码。
    这种方式非常适合在线调试,网页出错后写代码输出页面内的对象值。建议写一些dump工具函数配合使用,效果更佳。
    我非常喜欢这种方式,可以随时使用开关打开页面内隐藏的textarea进行调试,感觉很像给一台服务器接上了终端,然后使用shell可以做任何事情:) 函数可以在这里重新定义,可以任意操作界面中的任何元素,调用任何对象的任何函数,输出任何你需要的运行时刻值。
  5. 使用异常(exception)和断言(assert)
    使用try{}catch(e){}结构不光可以屏蔽出错信息,让界面更友好。我们的程序可以使用异常、抛出异常来构建一种更好的出错处理机制。
    有这样一个故事,我在使用string.localeCompare函数时随手写了这样的代码:
    var iRe = str1.localeCompare(str2);
    switch(iRe){
    0: return ....
    1: return ....
    -1:return ....
    defalut:throw "error:localeCompare return other value"
    }
    写完就忘了,没想到我的同事在linux下使用firefox时,异常被抛出了,然后我们得知:linux firefox下localeCompare返回的不只是0/1/-1,而是返回一个具体值.
    这个异常抛出有效的检测出了代码的不完美。

    firefox下的异常dump后能得到较为详细的调用栈信息,这一点非常好。IE的异常信息没有这么详细。

    异常和断言也可以结合成为一个非常有效的调试工具。
    断言(assert)是在其他语言中的一种很有效的调试工具,常常以这种形式出现:
    assert(<条件>);
    在程序处于debug状态,当条件为假时,系统中止运行并报告这个断言。由于断言是我们自己定义的,所以我们可以很容易的判断出出错的地方,进而找到bug所在。
    javascript语言没有提供宏,也没有提供assert,我们可以这样模拟
    if(_is_debug) assert = function(expression , strLable){
        if( !expression ) throw Error(strLable);
    }
    else assert = function(){};//_is_debug是一个全局变量
    这样可以实现在发生"不可能的事情"的时候,让程序在调试模式下抛出异常,在发布版本中不作理会。

    可以这样输出当前栈的调用信息,弥补刚才提到的IE中异常对象没有栈信息的缺陷:
    function callStackInfo(){
    var s="",line="";
    var cer=arguments.callee.caller;
    while(cer){
    var sf=cer.toString();
    s+=line+sf.substring(sf.indexOf('function'),sf.indexOf('{'))+"\n";
    line=".."+line;
    cer=cer.caller;
    }
    return s;
    }

本文只就javascript在web开发,特别是在ajax方面的开发做了一些讨论,主要在于管窥如何更好的使用“纯javascript”。web开发还有很多其他方面,比如xml和Dom等实际上和javascript息息相关,但是本文没有涉及,还请见谅。欢迎各位朋友就我的讨论多提意见。
--
-------------------------------------------------------------------
                                                                 dulao5 敬上

Javascript 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
基于jquery实现图片放大功能
May 07 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
JavaScript实现禁止后退的方法
Dec 27 #Javascript
utf8的编码算法 转载
Dec 27 #Javascript
ie和firefox中img对象区别的困惑
Dec 27 #Javascript
使用javascript访问XML数据的实例
Dec 27 #Javascript
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 #Javascript
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 #Javascript
破除网页鼠标右键被禁用的绝招大全
Dec 27 #Javascript
You might like
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
python写日志封装类实例
2015/06/28 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
如何用Python绘制3D柱形图
2020/09/16 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
农行实习自我鉴定
2013/09/22 职场文书
经典优秀个人求职信分享
2013/12/12 职场文书
《颐和园》教学反思
2014/02/26 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
Python 内置函数速查表一览
2021/06/02 Python
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
Java实现注册登录跳转
2022/06/16 Java/Android