51Testing软件测试论坛

标题: 如何编写JavaScript脚本库 [打印本页]

作者: 雨中漫步_012    时间: 2018-4-3 16:37
标题: 如何编写JavaScript脚本库
做Web开发已经四年,或多或少积累了一些JavaScript脚本。比如,限制input只允许输入数字的脚本;敲回
车自动转到下一个控件,相当于Tab键的作用一样;因为JavaScript数值运算的结果常常不是我们想要的,还
得有浮点数运算(加减乘除)函数。每次有JavaScript需求时,常常是在网上找需要的脚本,直接拷贝到asp
x文件中,或者新建JavaScript文件,然后添加引用


<script src="JScript.js" type="text/javascript"></script> ,以这种方式来完成客户端脚本的制作。毕竟对J
avaScript的需求不多,也就没有花很大的力气去学。

最近公司的项目不忙,空闲的时间赶忙补习一下脚本的知识。网上有很流行的JQuery脚本库,在园子里也有
大量的文章讨论怎么去用。以我亲身体会,JavaScript和正则表达式一样,常学常忘。学过的知识不用,很
快就会忘记。特别是和应用相关的内容,比如PageMethods怎么用,客户短回调如何实现,如何用JavaScrip
t调用Web服务,在项目中用过多次,但是一被同事问起来,还是模模糊糊的,很难说出个所以然来。我有
一个办法是制作demo,把各种效果的demo做好,分门别类的放在一起,然后用的时候去搜索,这样可以节
省很多时间。另外一种办法就是今天这篇文章提到的,把做过的JavaScript整理一下,制作成比较通用的脚本
库,方便复用。整理的含义是,对函数进行适当的调整,让它能不仅能满足当前项目的需求,还要能满足未
来项目的需求,另一个含义是要规范命名和组织结构,写好样例代码,用起来的时候方便。有时候在网上下
载了很多JavaScript实用脚本,但是忘记下载它的测试脚本,不知道怎么去用,还不如到网上重新搜索来得方
便。

JavaScript被定义为一种基于对象的脚本语言,一方面它以DOM对象模型和DOM对象中的方法为基础,另
一方面,它又不具备面向对象语言的继承,多态的特性。ASP.NET AJAX对JavaScript进行了扩展,使我们
可以以面向对象的方式来组织JavaScript脚本。我这里的主要工作是封装,把现有的代码封装起来,方便下
次复用。于是,有两种方法来组织现有的JavaScript代码库。
我以JavaScript中倍受争议的浮点运算中的加法和减法运算为例子,看看如何把它们封装起来
JavaScript风格
  1. function Math() {   }
  2. //加法
  3. Math.prototype.Add=function(arg1,arg2){
  4. var r1,r2,m;
  5. try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
  6. try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
  7. m=Math.pow(10,Math.max(r1,r2))
  8. return (arg1*m+arg2*m)/m
  9. }
  10. //减法
  11. Math.prototype.Subtraction=function(arg1,arg2){
  12.      var r1,r2,m,n;
  13.      try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
  14.      try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
  15.      m=Math.pow(10,Math.max(r1,r2));
  16.      n=(r1>=r2)?r1:r2;
  17.      return ((arg1*m-arg2*m)/m).toFixed(n);
  18. }
  19. 调用方式
  20. var math=new Math();
  21. var result=math.Add(2.0,4.0);
  22. AJAX风格
  23. Type.registerNamespace(“Utility”);
  24. Utility.Math=function(larg,rarg)
  25. {
  26.   this._left=larg;
  27.   this._right=rarg;
  28. }
  29. Utility.Math.prototype=
  30. {

  31. //加法函数
  32. Add:function ()
  33. {
  34. var r1,r2,m;
  35. try{r1=left.toString().split(".")[1].length}catch(e){r1=0}
  36. try{r2=right.toString().split(".")[1].length}catch(e){r2=0}
  37. m=Math.pow(10,Math.max(r1,r2))
  38. return (left*m+right*m)/m
  39. }
  40. //减法函数
  41. Subtraction: function(){
  42.      var r1,r2,m,n;
  43.      try{r1=left.toString().split(".")[1].length}catch(e){r1=0}
  44.      try{r2=right.toString().split(".")[1].length}catch(e){r2=0}
  45.      m=Math.pow(10,Math.max(r1,r2));
  46.      n=(r1>=r2)?r1:r2;
  47.      return ((left*m-right*m)/m).toFixed(n);
  48. }
  49. }
复制代码

//注册类
Utility.Math.registerClass(“Utility.Math”);
然后,在需要的地方,就可以运用下面的方法调用
var math=new Utility.Math(2.0,4.2);
var result=math.Add();

使用上面提出的两种方法,可以方便封装常用的JavaScript,减少重复。
上面的命名有个问题,因为Math是JavaScript内置的一种类型,用于处理各种数学运算,为了让上面的JavaScrip
t风格的脚本运行起来,还得把类名换成其它的名字,如MathHelper。ASP.NET AJAX还对JavaScript的六种类型
进行了扩展,分别是Array,Boolean,Date,Error,Object和string.

方法有了,估计还有朋友会说,你应该把自己做的JavaScript库公布出来才行,这样才能满足大众的口味。仅
有这个方法,要实践起来还是很困难的:有项目时间紧的理由,每天都忙着做项目,哪里有时间去整理这个,
也有不熟悉JavaScript的理由。
为了让我的类库不至于很菜,我到网上找了些关于写好JavaScript库的建议。
有一篇文章的名字叫《Building a JavaScript Library》,本来写这篇文章之前很想看看他是怎么写的,可是网
页中一直提示正在加载文件,无法查看。很想知道老外对于同样的主题,他是怎么写的。
还有一篇文章也很精彩,名字是《Rules For JavaScript Library Authors》,地址在
http://dean.edwards.name/weblog/2007/03/rules/
我把它翻译出来,供大家参考
1 使用方法不要过于繁琐。
2 避免使用Object.prototype
3 不要做过度的扩展
4  遵守标准。
5  向优秀的JavaScript创作者看齐
6  保持灵活可变 7  管理好内存,避免内存泄露。
8  避免与浏览器相关的hack
9  保持类库简洁
10 让类库保持可预知。比如,虽然没有查看文档,也应该能猜测到Math是处理和数学运算相关的内容
11 加分的规则:文档;尽可能多的使用命名空间组织代码,使之容易被记住;

我的水平很一般的,很普通的一个程序员。所以,不要向我要代码。我给你了,你还要花时间去看;而且我的代
码没有文档,你读不懂怎么办呢。与其这样,为何不把你自己手头有的JavaScript 整理一下,况且你手里头有的
JavaScript ,被你实际用过,你对他肯定熟悉。也不要推荐JQuery,它不是我的目的。
我的目的是教你组织整理现有的JavaScript 脚本库,把手头已有资源用好就很不错了。



测试代码下载: /Files/JamesLi2015/Math-Test.zip


补充一个常见的问题:如果把JavaScript 放到外部文件中,运行时可能会提示“找不到对象”
这个问题是由文件编码导致的。要让JavaScript 脚本文件的编码和HTML页面的文件编码保持一致
点击文件-->另存为选项,把两者存储为同样的编码格式
[attach]112599[/attach]

推荐用VS IDE编写脚本,这样可以使用IDE提供的智能提示支持
[attach]112600[/attach]

如果是用Dreamweaver编写脚本,它也提供了智能提示
[attach]112601[/attach]


作者: 梦想家    时间: 2018-4-4 09:08
赞一个

作者: qqq911    时间: 2018-4-4 11:26
感谢分享
作者: Miss_love    时间: 2020-12-29 17:46
感谢分享




欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2