Question

如何编写JavaScript脚本库

Answer 1

做Web开发已经四年，或多或少积累了一些JavaScript脚本。比如，限制input只允许输入数字的脚本；敲回车自动转到下一个控件，相当于Tab键的作用一样；因为JavaScript数值运算的结果常常不是我们想要的，还得有浮点数运算（加减乘除）函数。每次有JavaScript需求时，常常是在网上找需要的脚本，直接拷贝到aspx文件中，或者新建JavaScript文件，然后添加引用
<script src="JScript.js" type="text/javascript"></script> ，以这种方式来完成客户端脚本的制作。毕竟对JavaScript的需求不多，也就没有花很大的力气去学。

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

JavaScript被定义为一种基于对象的脚本语言，一方面它以DOM对象模型和DOM对象中的方法为基础，另一方面，它又不具备面向对象语言的继承，多态的特性。ASP.NET AJAX对JavaScript进行了扩展，使我们可以以面向对象的方式来组织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内置的一种类型，用于处理各种数学运算，为了让上面的JavaScript风格的脚本运行起来，还得把类名换成其它的名字，如MathHelper。ASP.NET AJAX还对JavaScript的六种类型进行了扩展，分别是Array,Boolean,Date,Error,Object和string.

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

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

更多相关内容可参考资料www.viiboo.cn

Answer 2

1.不要使用版本检测，而要使用能力检测
由于浏览器的类型和版本太多，以及不断的新的浏览器出现，我们不可能投入大量的时间和成本去实践检测各种版本的浏览器。"浏览器检测"也叫"版本检测"通常被认为是一种错误的做法，浏览器检测的最佳实践是能力检测，通常也被称为对象检测，指的是在代码执行之前检测某个脚本对象or方法是否存在，而不是依赖于你对哪个浏览器具有哪些特定的了解。如果必须的对象和方法存在，那么说明浏览器能够使用它，而且代码也可以按照预期执行。能力检测使用<if(xxx.xxxx)>的方式

[javascript] view plain copy print?
// JavaScript Document
if(document.body && document.body.getElementsByTagName){
//使用document.body.getElementsByTagName的代码
}

2.使用命名空间

当使用多个js库文件时，为了避免在调用时不同js库文件的同名函数的冲突，一般会使用命名空间来解决。JavaScript支持同名函数，但只使用最后一个加载的函数（不支持重载，不会考虑参数，只看函数名字）， 哪一个最后被加载，哪一个就会被调用到。所以不使用命名空间的话，就很容易遇到同名函数冲突的问题。
使用命名空间的两点原则：唯一性，不共享。
唯一性：挑选一个独一无二的命名空间的名字（如Google Maps在所有的标识符中都添加了G前缀），注意js是大小写敏感的。
不共享：不共享意味着什么都不共享；当你创建自己的$函数时你可能会与著名的库(如Prototype)中的$函数发生冲突而导致Prototype中的$无法使用，为了不与著名的一些库（jQuery、prototype）或者其他已有的一些函数冲突，使用匿名函数来实现代码的不共享。如：要保证只有你自己使用这个$()函数，你可以使用一个JS小技巧。

//匿名函数
(function(){
//code,运行的代码
})();

注意：()在JavaScript中有两种含义：一是运算符；二是分隔符。
上面匿名函数需要说明两点：
①红色括号里是一个匿名函数，红色括号代表分割，表示里面的函数是一个部分；
②绿色括号表示一个运算符，表示红色括号里面的函数要运行；相当于定义完一个匿名函数后就让它直接运行。