JavaScript脚本库编写的方法

JavaScript脚本库编写概述

JavaScript是一种运行在Web浏览器内部的客户端脚本语言，通常被称为Web客户端，因为它负责从Web服务器下载页面并在本地执行。其运行机制独特：当浏览器加载网页时，内置的解释器会读取并执行页面中嵌入的JavaScript代码。

从事Web开发四年以来，我积累了一些常用的JavaScript片段，例如限制输入框仅接受数字、按回车键自动聚焦下一个控件（类似Tab键功能），以及解决JavaScript数值运算精度问题的浮点数处理函数。以往遇到需求时，我通常在网上搜索现成脚本，直接复制到aspx文件或新建JS文件并通过<script src="JScript.js" type="text/javascript"></script>引用。由于需求频率不高，并未深入系统学习JavaScript。

近期项目工作负荷较轻，我利用这段空闲时间系统性地复习脚本编程知识。互联网上广泛流行着JQuery脚本库，技术社区内存在大量探讨其应用方法的文章。基于个人实践经验，JavaScript与正则表达式具有相似的学习特征：知识若长期不使用便会遗忘。尤其是涉及具体应用场景的知识点，例如PageMethods的使用方式、客户端回调的实现机制、以及通过JavaScript调用Web服务的流程，尽管在项目中多次实操，但在被同事询问细节时仍难以清晰阐述原理。为解决此问题，我采用两种策略：其一是构建演示案例（demo），将各类效果封装为独立示例并分类归档，便于后续检索以节省时间；其二是撰写本文所述方法，将已完成的JavaScript代码整理为通用脚本库以实现复用。所谓“整理”，包含两层含义：首先对函数进行适配性调整，使其既满足当前项目需求，又具备未来项目的扩展能力；其次规范命名约定与代码组织结构，并提供完善的样例代码，以提升使用便捷性。此外，针对从网络下载的实用JavaScript脚本，若缺失配套的测试脚本导致无法验证用法，其便利性往往不及重新搜索获取。

JavaScript代码封装示例

JavaScript被定义为基于对象的脚本语言，它依托DOM对象模型及其方法，但缺乏传统面向对象语言的继承和多态特性。ASP.NET AJAX对JavaScript进行了扩展，支持以面向对象方式组织脚本。我的主要工作是对现有代码进行封装以便复用。以下以JavaScript中备受争议的浮点数加法和减法运算为例，展示封装过程。

JavaScript风格与命名规范

JavaScript风格

function Math() { } 
//加法 
Math.prototype.Add=function(arg1,arg2){ 
var r1,r2,m; 
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 
m=Math.pow(10,Math.max(r1,r2)) 
return (arg1*m+arg2*m)/m 
} 
//减法 
Math.prototype.Subtraction=function(arg1,arg2){ 
  var r1,r2,m,n; 
  try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 
  try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 
  m=Math.pow(10,Math.max(r1,r2)); 
  n=(r1>=r2)?r1:r2; 
  return ((arg1*m-arg2*m)/m).toFixed(n); 
} 
调用方式 
var math=new Math(); 
var result=math.Add(2.0,4.0); 
AJAX风格 
Type.registerNamespace(“Utility”); 
Utility.Math=function(larg,rarg) 
{ 
 this._left=larg; 
 this._right=rarg; 
} 
Utility.Math.prototype= 
{ 
//加法函数 
Add:function () 
{ 
var r1,r2,m; 
try{r1=left.toString().split(".")[1].length}catch(e){r1=0} 
try{r2=right.toString().split(".")[1].length}catch(e){r2=0} 
m=Math.pow(10,Math.max(r1,r2)) 
return (left*m+right*m)/m 
} 
//减法函数 
Subtraction: function(){ 
  var r1,r2,m,n; 
  try{r1=left.toString().split(".")[1].length}catch(e){r1=0} 
  try{r2=right.toString().split(".")[1].length}catch(e){r2=0} 
  m=Math.pow(10,Math.max(r1,r2)); 
  n=(r1>=r2)?r1:r2; 
  return ((left*m-right*m)/m).toFixed(n); 
} 
} 
//注册类 
Utility.Math.registerClass(“Utility.Math”); 
然后，在需要的地方，就可以运用下面的方法调用 
var math=new Utility.Math(2.0,4.2); 
var result=math.Add(); 

采用上述两种方法，可以方便地封装常用JavaScript代码，从而减少重复劳动。

上述命名存在一个问题：Math是JavaScript内置类型，用于处理数学运算。若直接使用Math作为类名，可能导致冲突，因此需将类名替换为其他名称，如MathHelper。此外，ASP.NET AJAX还扩展了六种JavaScript内置类型，分别为Array、Boolean、Date、Error、Object和string。

虽然有了封装方法，但许多开发者可能会问：为何不公布自己的JavaScript库以满足大众需求？实际上，实践起来仍有困难，原因包括项目时间紧迫、日常忙于开发而无暇整理，以及对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脚本更为可行，因为你对这些代码已经熟悉。此外，我的目的并非推荐JQuery，而是教授如何组织和整理现有的JavaScript脚本库，充分利用已有资源。

常见问题与开发工具建议

测试代码下载: http://xiazai.jb51.net/201509/yuanma/Math-Test(jb51.net).rar

补充一个常见问题：将JavaScript放入外部文件时，运行时可能提示“找不到对象”。这通常由文件编码不一致导致。解决方法是确保JavaScript脚本文件的编码与HTML页面的编码保持一致，可通过“另存为”选项将两者保存为相同的编码格式。

推荐使用VS IDE编写脚本，以便利用IDE提供的智能提示功能。

如果使用Dreamweaver编写脚本，它也提供了智能提示支持。

以上内容介绍了JavaScript脚本库的编写方法，希望对大家有所帮助。