独木舟 - Website

javascript代码性能优化

master@kanoe.cn(独木舟) — Wed,08 Jun 2011 11:42:56 +0800

网上一些文章觉得挺有用，把主要思想摘录下来。

javascript代码性能优化 by西红柿爱番茄

Javascript代码优化无非主要围绕：DOM操作、循环、闭包、对象重复出现、对象的声明方式、作用域链、字符串操作、类的声明方式等等。循环、闭包、对象重复出现是从作用域链的角度去优化的；DOM操作主要围绕HTMLCollection、NodeList等来优化；对象的声明方式主要是对象（Object）、数组（Array）、字符串（String）、函数（Function）、正则（RegExp）等内置的对象使用字面量的方式来声明，这个比使用new来实例化相应的对象在性能上要强很多；字符串操作的优化方式主要是通过数组的push和join方法；类的声明方式优化方式主要是分清属性和方法的声明的方式，方法使用prototype的方式来声明；Javascript语言本身的流程操作语句的优化（if、switch、with、eval等等）。

因此，我将Javascript代码优化主要分为六类：DOM“真空”空间、缩短作用域链、字面量声明方式、字符串操作、类声明方式、流程操作语句。

浮光掠影（第1季）：高性能JavaScript实践 by一刀倾城
1. 避免Javascript加载时Block引起的阻塞
2. 尽可能的使用局部变量
3. 多使用ID选择器，少使用CSS选择器
4. 不要轻易获取布局信息
5. 使用冒泡机制减少事件绑定次数
6. 慎用定时器
7. 优化效果不明显的那些技巧
8. 推荐的性能测试工具FireJSPT
9. 推荐的网站性能优化方面的书

高效 JavaScript by我爱互联网
ECMAScript
  1. 避免使用 eval 或 Function 构造函数
    1. 重写 eval
    2. 如果你需要函数，那就用函数
  2. 避免使用 with
  3. 不要在影响性能的关键函数中使用 try-catch-finally
  4. 分隔 eval 和 with
  5. 避免使用全局变量
  6. 注意隐式对象转换
  7. 在关键函数中避免 for-in
  8. 优化 string 合并
  9. 基本运算符比函数调用更快
10. 向 setTimeout() 和 setInterval()传送函数名，而不要传送字符串

DOM
  1. 重绘和 reflow
  2. 减少 reflow 次数
  3. 最小化 reflow 影响
  4. 修改 DOM 树
  5. 修改不可见元素
  6. 测量大小
  7. 一次修改多个样式值
  8. 用流畅性换取速度
  9. 避免搜索大量节点
10. 使用 XPath 提高速度
11. 避免在遍历 DOM 时修改 DOM
12. 使用变量保存 DOM 值

页面载入
  1. 避免保存来自其他文档的引用
  2. 快速历史浏览
  3. 使用 XMLHttpRequest
  4. 动态创建 SCRIPT 元素
  5. location.replace() 控制历史项

吐槽一下工信部的新备案系统

master@kanoe.cn(独木舟) — Mon,06 Jun 2011 16:35:48 +0800

自从工信部换了新的备案系统后，一直不知道怎么登录备案系统，今天看了以下文字才知道该怎么登录。

引用内容

很多用户找通信管理局找回备案密码后，总反映说无法登陆系统。这里需要澄清的是，根据原来旧备案系统，通过用户名密码是可以直接登录的。但备案系统升级之后，改成了部、省、企业三级架构，用户要登录查看备案信息及备案状态，只能通过企业侧系统登录。因此，新的备案系统架构中，密码包含两层：一是登录企业侧系统的密码，用户登录不同的企业侧系统可以自行设定，登录企业侧系统的密码找回、修改和重置由接入商系统和接入商负责；二是备案密码，即只有在接入商修改备案信息、注销备案等才使用该密码。该密码并不用来登陆企业侧备案系统。管局重置的是备案密码，并非用来登录的。

引自：http://www.beianwo.com/zhaohuimimadenglubul.html

我看完后只能骂一句，工信部吃饱没事撑着！原本一站式的登录居然现在分了这么多层，让我们折腾那么久！这样转来转去不烦么？能不能设计个更人性化的系统呢？纳税人的钱怎么花的？

还有工信部的备案系统不是一般的慢，经常访问不了！

而且我现在还得去接入商那里找回企业系统的登录用户名密码，囧。

我想以上文字不会被封吧，阿门！

Javascript私有方法中this的引用

master@kanoe.cn(独木舟) — Sun,05 Jun 2011 02:19:48 +0800

《Javascript Dom高级程序设计》提到“私有方法是存在于构造函数作用域的自包含的（self-contained）对象，它们实际上并不是prototype的方法，因此在私有方法内部this引用的只是私有方法的实例，而非myConstructor（一个构造器函数）的实例。”

this真的是引用私有方法的实例吗？先看一段示例：

示例里面都返回true，说明this引用的的window对象，不是私有方法的实例。示例里面嵌套了3层私有函数，是否所有情况都引用window对象有待继续探究。

prototype 原型链

master@kanoe.cn(独木舟) — Thu,02 Jun 2011 15:10:21 +0800

prototype源自法语，软件界的标准翻译为“原型”，代表事物的初始形态，也含有模型和样板的意义。JavaScript中的prototype概念恰如其分地反映了这个词的内含，我们不能将其理解为C++的prototype那种预先声明的概念。

    JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对象，因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”，那么由该函数构造出来的对象应该都会具有这个“原型”的特性。事实上，在构造函数的prototype上定义的所有属性和方法，都是可以通过其构造的对象直接访问和调用的。也可以这么说，prototype提供了一群同类对象共享属性和方法的机制。

    我们先来看看下面的代码：
    function Person(name)
    {
        this.name = name;   //设置对象属性，每个对象各自一份属性数据
    };

    Person.prototype.SayHello = function() //给Person函数的prototype添加SayHello方法。
    {
        alert("Hello, I'm " + this.name);
    }

    var BillGates = new Person("Bill Gates");   //创建BillGates对象
    var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象

    BillGates.SayHello();   //通过BillGates对象直接调用到SayHello方法
    SteveJobs.SayHello();   //通过SteveJobs对象直接调用到SayHello方法

    alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello，所以显示：true
    程序运行的结果表明，构造函数的prototype上定义的方法确实可以通过对象直接调用到，而且代码是共享的。显然，把方法设置到prototype的写法显得优雅多了，尽管调用形式没有变，但逻辑上却体现了方法与类的关系，相对前面的写法，更容易理解和组织代码。

    那么，对于多层次类型的构造函数情况又如何呢？

    我们再来看下面的代码：
1     function Person(name)   //基类构造函数
2     {
3         this.name = name;
4     };
5
6     Person.prototype.SayHello = function() //给基类构造函数的prototype添加方法
7     {
8         alert("Hello, I'm " + this.name);
9     };
10
11     function Employee(name, salary) //子类构造函数
12     {
13         Person.call(this, name);    //调用基类构造函数
14         this.salary = salary;
15     };
16
17     Employee.prototype = new Person(); //建一个基类的对象作为子类原型的原型，这里很有意思
18
19     Employee.prototype.ShowMeTheMoney = function() //给子类添构造函数的prototype添加方法
20     {
21         alert(this.name + " $" + this.salary);
22     };
23
24     var BillGates = new Person("Bill Gates");   //创建基类Person的BillGates对象
25     var SteveJobs = new Employee("Steve Jobs", 1234);   //创建子类Employee的SteveJobs对象
26
27     BillGates.SayHello();       //通过对象直接调用到prototype的方法
28     SteveJobs.SayHello();       //通过子类对象直接调用基类prototype的方法，关注！
29     SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类prototype的方法
30
31     alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true，表明prototype的方法是共享的
    这段代码的第17行，构造了一个基类的对象，并将其设为子类构造函数的prototype，这是很有意思的。这样做的目的就是为了第28行，通过子类对象也可以直接调用基类prototype的方法。为什么可以这样呢？

    原来，在JavaScript中，prototype不但能让对象共享自己财富，而且prototype还有寻根问祖的天性，从而使得先辈们的遗产可以代代相传。当从一个对象那里读取属性或调用方法时，如果该对象自身不存在这样的属性或方法，就会去自己关联的prototype对象那里寻找；如果prototype没有，又会去prototype自己关联的前辈prototype那里寻找，直到找到或追溯过程结束为止。

    在JavaScript内部，对象的属性和方法追溯机制是通过所谓的prototype链来实现的。当用new操作符构造对象时，也会同时将构造函数的prototype对象指派给新创建的对象，成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的，尽管有些浏览器(如Firefox)可以让我们访问这个内置原型对象，但并不建议这样做。内置的原型对象本身也是对象，也有自己关联的原型对象，这样就形成了所谓的原型链。

    在原型链的最末端，就是Object构造函数prototype属性指向的那一个原型对象。这个原型对象是所有对象的最老祖先，这个老祖宗实现了诸如toString等所有对象天生就该具有的方法。其他内置构造函数，如Function, Boolean, String, Date和RegExp等的prototype都是从这个老祖宗传承下来的，但他们各自又定义了自身的属性和方法，从而他们的子孙就表现出各自宗族的那些特征。

    这不就是“继承”吗？是的，这就是“继承”，是JavaScript特有的“原型继承”。

    “原型继承”是慈祥而又严厉的。原形对象将自己的属性和方法无私地贡献给孩子们使用，也并不强迫孩子们必须遵从，允许一些顽皮孩子按自己的兴趣和爱好独立行事。从这点上看，原型对象是一位慈祥的母亲。然而，任何一个孩子虽然可以我行我素，但却不能动原型对象既有的财产，因为那可能会影响到其他孩子的利益。从这一点上看，原型对象又象一位严厉的父亲。我们来看看下面的代码就可以理解这个意思了：
    function Person(name)
    {
        this.name = name;
    };

    Person.prototype.company = "Microsoft"; //原型的属性

    Person.prototype.SayHello = function() //原型的方法
    {
        alert("Hello, I'm " + this.name + " of " + this.company);
    };

    var BillGates = new Person("Bill Gates");
    BillGates.SayHello();   //由于继承了原型的东西，规规矩矩输出：Hello, I'm Bill Gates

    var SteveJobs = new Person("Steve Jobs");
    SteveJobs.company = "Apple";    //设置自己的company属性，掩盖了原型的company属性
    SteveJobs.SayHello = function() //实现了自己的SayHello方法，掩盖了原型的SayHello方法
    {
        alert("Hi, " + this.name + " like " + this.company + ", ha ha ha ");
    };

    SteveJobs.SayHello();   //都是自己覆盖的属性和方法，输出：Hi, Steve Jobs like Apple, ha ha ha

    BillGates.SayHello();   //SteveJobs的覆盖没有影响原型对象，BillGates还是按老样子输出
    对象可以掩盖原型对象的那些属性和方法，一个构造函数原型对象也可以掩盖上层构造函数原型对象既有的属性和方法。这种掩盖其实只是在对象自己身上创建了新的属性和方法，只不过这些属性和方法与原型对象的那些同名而已。JavaScript就是用这简单的掩盖机制实现了对象的“多态”性，与静态对象语言的虚函数和重载(override)概念不谋而合。

    然而，比静态对象语言更神奇的是，我们可以随时给原型对象动态添加新的属性和方法，从而动态地扩展基类的功能特性。这在静态对象语言中是很难想象的。我们来看下面的代码：
    function Person(name)
    {
        this.name = name;
    };

    Person.prototype.SayHello = function() //建立对象前定义的方法
    {
        alert("Hello, I'm " + this.name);
    };

    var BillGates = new Person("Bill Gates");   //建立对象

    BillGates.SayHello();

    Person.prototype.Retire = function()    //建立对象后再动态扩展原型的方法
    {
        alert("Poor " + this.name + ", bye bye!");
    };

    BillGates.Retire(); //动态扩展的方法即可被先前建立的对象立即调用
    阿弥佗佛，原型继承竟然可以玩出有这样的法术！

原型扩展

    想必君的悟性极高，可能你会这样想：如果在JavaScript内置的那些如Object和Function等函数的prototype上添加些新的方法和属性，是不是就能扩展JavaScript的功能呢？

    那么，恭喜你，你得到了！

    在AJAX技术迅猛发展的今天，许多成功的AJAX项目的JavaScript运行库都大量扩展了内置函数的prototype功能。比如微软的ASP.NET AJAX，就给这些内置函数及其prototype添加了大量的新特性，从而增强了JavaScript的功能。

    我们来看一段摘自MicrosoftAjax.debug.js中的代码：

String.prototype.trim = function String$trim() {
    if (arguments.length !== 0) throw Error.parameterCount();
    return this.replace(/^\s+|\s+$/g, '');
}
    这段代码就是给内置String函数的prototype扩展了一个trim方法，于是所有的String类对象都有了trim方法了。有了这个扩展，今后要去除字符串两段的空白，就不用再分别处理了，因为任何字符串都有了这个扩展功能，只要调用即可，真的很方便。

    当然，几乎很少有人去给Object的prototype添加方法，因为那会影响到所有的对象，除非在你的架构中这种方法的确是所有对象都需要的。

    前两年，微软在设计AJAX类库的初期，用了一种被称为“闭包”(closure)的技术来模拟“类”。其大致模型如下：
    function Person(firstName, lastName, age)
    {
        //私有变量：
        var _firstName = firstName;
        var _lastName = lastName;

        //公共变量:
        this.age = age;

        //方法：
        this.getName = function()
        {
            return(firstName + " " + lastName);
        };
        this.SayHello = function()
        {
            alert("Hello, I'm " + firstName + " " + lastName);
        };
    };

    var BillGates = new Person("Bill", "Gates", 53);
    var SteveJobs = new Person("Steve", "Jobs", 53);

    BillGates.SayHello();
    SteveJobs.SayHello();
    alert(BillGates.getName() + " " + BillGates.age);
    alert(BillGates.firstName);     //这里不能访问到私有变量
    很显然，这种模型的类描述特别象C#语言的描述形式，在一个构造函数里依次定义了私有成员、公共属性和可用的方法，显得非常优雅嘛。特别是“闭包”机制可以模拟对私有成员的保护机制，做得非常漂亮。

    所谓的“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，但只会生成新对象和方法，新的临时变量只是对应新的值，和上次那次调用的是各自独立的。的确很巧妙！

    但是前面我们说过，给每一个对象设置一份方法是一种很大的浪费。还有，“闭包”这种间接保持变量值的机制，往往会给JavaSript的垃圾回收器制造难题。特别是遇到对象间复杂的循环引用时，垃圾回收的判断逻辑非常复杂。无独有偶，IE浏览器早期版本确实存在JavaSript垃圾回收方面的内存泄漏问题。再加上“闭包”模型在性能测试方面的表现不佳，微软最终放弃了“闭包”模型，而改用“原型”模型。正所谓“有得必有失”嘛。

    原型模型需要一个构造函数来定义对象的成员，而方法却依附在该构造函数的原型上。大致写法如下：
    //定义构造函数
    function Person(name)
    {
        this.name = name;   //在构造函数中定义成员
    };

    //方法定义到构造函数的prototype上
    Person.prototype.SayHello = function()
    {
        alert("Hello, I'm " + this.name);
    };

    //子类构造函数
    function Employee(name, salary)
    {
        Person.call(this, name);    //调用上层构造函数
        this.salary = salary;       //扩展的成员
    };

    //子类构造函数首先需要用上层构造函数来建立prototype对象，实现继承的概念
    Employee.prototype = new Person()   //只需要其prototype的方法，此对象的成员没有任何意义！

    //子类方法也定义到构造函数之上
    Employee.prototype.ShowMeTheMoney = function()
    {
        alert(this.name + " $" + this.salary);
    };

    var BillGates = new Person("Bill Gates");
    BillGates.SayHello();

    var SteveJobs = new Employee("Steve Jobs", 1234);
    SteveJobs.SayHello();
    SteveJobs.ShowMeTheMoney();
    原型类模型虽然不能模拟真正的私有变量，而且也要分两部分来定义类，显得不怎么“优雅”。不过，对象间的方法是共享的，不会遇到垃圾回收问题，而且性能优于“闭包”模型。正所谓“有失必有得”嘛。

    在原型模型中，为了实现类继承，必须首先将子类构造函数的prototype设置为一个父类的对象实例。创建这个父类对象实例的目的就是为了构成原型链，以起到共享上层原型方法作用。但创建这个实例对象时，上层构造函数也会给它设置对象成员，这些对象成员对于继承来说是没有意义的。虽然，我们也没有给构造函数传递参数，但确实创建了若干没有用的成员，尽管其值是undefined，这也是一种浪费啊。

    唉！世界上没有完美的事情啊！

原型真谛

    正当我们感概万分时，天空中一道红光闪过，祥云中出现了观音菩萨。只见她手持玉净瓶，轻拂翠柳枝，洒下几滴甘露，顿时让JavaScript又添新的灵气。

    观音洒下的甘露在JavaScript的世界里凝结成块，成为了一种称为“语法甘露”的东西。这种语法甘露可以让我们编写的代码看起来更象对象语言。

    要想知道这“语法甘露”为何物，就请君侧耳细听。

    在理解这些语法甘露之前，我们需要重新再回顾一下JavaScript构造对象的过程。

    我们已经知道，用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步：第一步是建立一个新对象；第二步将该对象内置的原型对象设置为构造函数prototype引用的那个原型对象；第三步就是将该对象作为this参数调用构造函数，完成成员设置等初始化工作。对象建立之后，对象上的任何访问和操作都只与对象自身及其原型链上的那串对象有关，与构造函数再扯不上关系了。换句话说，构造函数只是在创建对象时起到介绍原型对象和初始化对象两个作用。

    那么，我们能否自己定义一个对象来当作原型，并在这个原型上描述类，然后将这个原型设置给新创建的对象，将其当作对象的类呢？我们又能否将这个原型中的一个方法当作构造函数，去初始化新建的对象呢？例如，我们定义这样一个原型对象：

    var Person = //定义一个对象来作为原型类
    {
        Create: function(name, age) //这个当构造函数
        {
            this.name = name;
            this.age = age;
        },
        SayHello: function() //定义方法
        {
            alert("Hello, I'm " + this.name);
        },
        HowOld: function() //定义方法
        {
            alert(this.name + " is " + this.age + " years old.");
        }
    };
    这个JSON形式的写法多么象一个C#的类啊！既有构造函数，又有各种方法。如果可以用某种形式来创建对象，并将对象的内置的原型设置为上面这个“类”对象，不就相当于创建该类的对象了吗？

    但遗憾的是，我们几乎不能访问到对象内置的原型属性！尽管有些浏览器可以访问到对象的内置原型，但这样做的话就只能限定了用户必须使用那种浏览器。这也几乎不可行。

    那么，我们可不可以通过一个函数对象来做媒介，利用该函数对象的prototype属性来中转这个原型，并用new操作符传递给新建的对象呢？

    其实，象这样的代码就可以实现这一目标：

    function anyfunc(){};           //定义一个函数躯壳
    anyfunc.prototype = Person;     //将原型对象放到中转站prototype
    var BillGates = new anyfunc(); //新建对象的内置原型将是我们期望的原型对象
    不过，这个anyfunc函数只是一个躯壳，在使用过这个躯壳之后它就成了多余的东西了，而且这和直接使用构造函数来创建对象也没啥不同，有点不爽。

    可是，如果我们将这些代码写成一个通用函数，而那个函数躯壳也就成了函数内的函数，这个内部函数不就可以在外层函数退出作用域后自动消亡吗？而且，我们可以将原型对象作为通用函数的参数，让通用函数返回创建的对象。我们需要的就是下面这个形式：

    function New(aClass, aParams)    //通用创建函数
    {
        function new_()     //定义临时的中转函数壳
        {
            aClass.Create.apply(this, aParams);   //调用原型中定义的的构造函数，中转构造逻辑及构造参数
        };
        new_.prototype = aClass;    //准备中转原型对象
        return new new_();          //返回建立最终建立的对象
    };

    var Person =        //定义的类
    {
        Create: function(name, age)
        {
            this.name = name;
            this.age = age;
        },
        SayHello: function()
        {
            alert("Hello, I'm " + this.name);
        },
        HowOld: function()
        {
            alert(this.name + " is " + this.age + " years old.");
        }
    };

    var BillGates = New(Person, ["Bill Gates", 53]); //调用通用函数创建对象，并以数组形式传递构造参数
    BillGates.SayHello();
    BillGates.HowOld();

    alert(BillGates.constructor == Object);     //输出：true
    这里的通用函数New()就是一个“语法甘露”！这个语法甘露不但中转了原型对象，还中转了构造函数逻辑及构造参数。

    有趣的是，每次创建完对象退出New函数作用域时，临时的new_函数对象会被自动释放。由于new_的prototype属性被设置为新的原型对象，其原来的原型对象和new_之间就已解开了引用链，临时函数及其原来的原型对象都会被正确回收了。上面代码的最后一句证明，新创建的对象的constructor属性返回的是Object函数。其实新建的对象自己及其原型里没有constructor属性，那返回的只是最顶层原型对象的构造函数，即Object。

    有了New这个语法甘露，类的定义就很像C#那些静态对象语言的形式了，这样的代码显得多么文静而优雅啊！

    当然，这个代码仅仅展示了“语法甘露”的概念。我们还需要多一些的语法甘露，才能实现用简洁而优雅的代码书写类层次及其继承关系。好了，我们再来看一个更丰富的示例吧：

    //语法甘露：
    var object =    //定义小写的object基本类，用于实现最基础的方法等
    {
        isA: function(aType)   //一个判断类与类之间以及对象与类之间关系的基础方法
        {
            var self = this;
            while(self)
            {
                if (self == aType)
                  return true;
                self = self.Type;
            };
            return false;
        }
    };

    function Class(aBaseClass, aClassDefine)    //创建类的函数，用于声明类及继承关系
    {
        function class_()   //创建类的临时函数壳
        {
            this.Type = aBaseClass;    //我们给每一个类约定一个Type属性，引用其继承的类
            for(var member in aClassDefine)
                this[member] = aClassDefine[member];    //复制类的全部定义到当前创建的类
        };
        class_.prototype = aBaseClass;
        return new class_();
    };

    function New(aClass, aParams)   //创建对象的函数，用于任意类的对象创建
    {
        function new_()     //创建对象的临时函数壳
        {
            this.Type = aClass;    //我们也给每一个对象约定一个Type属性，据此可以访问到对象所属的类
            if (aClass.Create)
              aClass.Create.apply(this, aParams);   //我们约定所有类的构造函数都叫Create，这和DELPHI比较相似
        };
        new_.prototype = aClass;
        return new new_();
    };

    //语法甘露的应用效果：
    var Person = Class(object,      //派生至object基本类
    {
        Create: function(name, age)
        {
            this.name = name;
            this.age = age;
        },
        SayHello: function()
        {
            alert("Hello, I'm " + this.name + ", " + this.age + " years old.");
        }
    });

    var Employee = Class(Person,    //派生至Person类，是不是和一般对象语言很相似？
    {
        Create: function(name, age, salary)
        {
            Person.Create.call(this, name, age); //调用基类的构造函数
            this.salary = salary;
        },
        ShowMeTheMoney: function()
        {
            alert(this.name + " $" + this.salary);
        }
    });

    var BillGates = New(Person, ["Bill Gates", 53]);
    var SteveJobs = New(Employee, ["Steve Jobs", 53, 1234]);
    BillGates.SayHello();
    SteveJobs.SayHello();
    SteveJobs.ShowMeTheMoney();

    var LittleBill = New(BillGates.Type, ["Little Bill", 6]);   //根据BillGate的类型创建LittleBill
    LittleBill.SayHello();

    alert(BillGates.isA(Person));       //true
    alert(BillGates.isA(Employee));     //false
    alert(SteveJobs.isA(Person));       //true
    alert(Person.isA(Employee));        //false
    alert(Employee.isA(Person));        //true
    “语法甘露”不用太多，只要那么一点点，就能改观整个代码的易读性和流畅性，从而让代码显得更优雅。有了这些语法甘露，JavaScript就很像一般对象语言了，写起代码了感觉也就爽多了！

    令人高兴的是，受这些甘露滋养的JavaScript程序效率会更高。因为其原型对象里既没有了毫无用处的那些对象级的成员，而且还不存在constructor属性体，少了与构造函数间的牵连，但依旧保持了方法的共享性。这让JavaScript在追溯原型链和搜索属性及方法时，少费许多工夫啊。

    我们就把这种形式称为“甘露模型”吧！其实，这种“甘露模型”的原型用法才是符合prototype概念的本意，才是的JavaScript原型的真谛！

    想必微软那些设计AJAX架构的工程师看到这个甘露模型时，肯定后悔没有早点把AJAX部门从美国搬到咱中国的观音庙来，错过了观音菩萨的点化。当然，我们也只能是在代码的示例中，把Bill Gates当作对象玩玩，真要让他放弃上帝转而皈依我佛肯定是不容易的，机缘未到啊！如果哪天你在微软新出的AJAX类库中看到这种甘露模型，那才是真正的缘分！

编程的快乐

    在软件工业迅猛发展的今天，各式各样的编程语言层出不穷，新语言的诞生，旧语言的演化，似乎已经让我们眼花缭乱。为了适应面向对象编程的潮流，JavaScript语言也在向完全面向对象的方向发展，新的JavaScript标准已经从语义上扩展了许多面向对象的新元素。与此相反的是，许多静态的对象语言也在向JavaScript的那种简洁而幽雅的方向发展。例如，新版本的C#语言就吸收了JSON那样的简洁表示法，以及一些其他形式的JavaScript特性。

    我们应该看到，随着RIA(强互联应用)的发展和普及，AJAX技术也将逐渐淡出江湖，JavaScript也将最终消失或演化成其他形式的语言。但不管编程语言如何发展和演化，编程世界永远都会在“数据”与“代码”这千丝万缕的纠缠中保持着无限的生机。只要我们能看透这一点，我们就能很容易地学习和理解软件世界的各种新事物。不管是已熟悉的过程式编程，还是正在发展的函数式编程，以及未来量子纠缠态的大规模并行式编程，我们都有足够的法力来化解一切复杂的难题。

来源：http://www.zhuoda.org/lunzi/101543.html

后记：《Ajax实战》中提到，原型机制可以看成是一种求取默认值的机制，这是另一方面的理解。

DIV多层嵌套的问题不自动撑大

master@kanoe.cn(独木舟) — Tue,30 Nov 2010 03:32:17 +0800

我们做DIV+CSS布局时常常如下的做多层DIV的嵌套，可是我们却发现不管是在IE8 还是FF下都层在毛病

1、当我们这样直接使用时

……

ul,p,table,span等文本级别元素

这个时候我们发现div的样式可以正确应用，我们可以通过给div加边框就可以看出，这个时候DIV的边框是包含了整个文本区域

2、当我们这样用时候

这个时候我们发现问题出现了，在IE8和FF下，DIV 1的边框变成了一条直线，在最上面，并没有随着内部两个DIV的内容而撑大，原来是因为如果父级DIV没有定义高度，并且内容为空时所定义样式将无效，或我们直观看到的就好似不自动伸长的错误，上网和网友讨论很久，经过我可爱的百度，不停的转换关键字搜索，终于找到了解决办法，屡试不爽

定义这样一个样式表

/*解决FF，IE8，DIV嵌套时，外部DIV没有定义高度，并且内部无内容只有有内嵌套的DIV时，外DIV不能被撑大的问题*/
.box:after{ content:".";height:0px;display:block; clear:both; visibility: hidden;}

我们对div 1 使用即可

在刷新我们的网页试试，怎么样，终于解决了……

PS:

 程序代码
.clearfix:after {
clear: both;
content: '.';
display: block;
height: 0px;
overflow: hidden;
visibility: hidden;
}

[视频]Windows 8用户界面应该这样设计

master@kanoe.cn(独木舟) — Wed,22 Apr 2009 12:02:47 +0800

Windows 8的用户界面应该是什么样子的呢？虽然UI设计师Cullen Dudas不在微软工作，但是他的“Copenhagen用户体验”的设计概念，或许会给Windows 8带来灵感，或许微软还会聘请他作为Windows 8的设计师呢。让我们来看看这位设计师的作品吧。

15个最受Web开发者欢迎的文本编辑器

master@kanoe.cn(独木舟) — Mon,30 Mar 2009 02:14:31 +0800

对许多开发者来说，在开发复杂的Web应用程序、编辑CSS文件或者配置服务器上的参数等工作时，一个好用的文本编辑器显得相当重要。最近，我们通过600多人参与的投票得出了时下一批最受开发者欢迎的文本编辑器。本文将介绍10个最受欢迎的编辑器。
对许多开发者来说，在开发复杂的Web应用程序、编辑CSS文件或者配置服务器上的参数等工作时，一个好用的文本编辑器显得相当重要。最近，我们通过600多人参与的投票得出了时下一批最受开发者欢迎的文本编辑器。本文将介绍15个最受欢迎的编辑器。
15. SciTE

下载SciTE
SciTE，一个支持Windows和Linux平台使用的开源的文本编辑器，开始时只是为了演示Scintilla强大功能而开发的。此后它成为一个功能全面的编辑器。你可以通过用户自定义的配置文件来扩展默认功能。
14. EditPlus

下载EditPlus
EditPlus 是一个Windows平台上针对HTML和编码的文本编辑。它具备对HTML、CSS、PHP和JavaScript代码高亮的功能，自动补具备一个内置的Web浏览器可用来预览正在开发的网页。
13. E - TextEditor

下载E - TextEditor
E - TextEditor, 常被简称为 E, 是TextMate 的 Windows版本.它具备许多有让开发者很贴心的功能，例如它具备个人版本控制系统可以让开发者管理不同版本的文档，并且支持定期自动保存，以提高开发的效率和安全性。这是是关于E的快捷键Keyboard Shortcuts Cheatsheet
。
12. GNU Emacs

下载GNU Emacs
GNU Emacs 是一个开源，跨平台(支持Linux, Mac OS X, 和 Windows) 的文本编辑器. Emacs 可以根据你的需要通过诸如debuggers 和note managers/organizers等模块进行高度的扩展和个性化定制，实现源码高亮、支持多种文件格式的编辑等功能。
11. gedit

下载gedit
gedit 是GNOME
(Linux和UNIX平台的桌面图形界面)的官方文本编辑器。它具备一系列让程序员喜欢丰富的参数和功能，如支持代码高席和多语言，支持UTF-8文本，远程编辑和文件备份等。此外它还可以通过插件系统来进行扩展。
10. TextPad

下载TextPad
TextPad 是一个Windows系统上的通用文本编辑器。它具备许多特色功能，例如可以对10门语言的编写检查，一个预热功能实现打开上次工作的文件，键盘记录器以实现实现批处理从而节省许多重复的工作。
9. UltraEdit

下载UltraEdit
UltraEdit 是一个Windows平台深受开发者欢迎的文本编辑器。它支持多种语言，如PHP, JavaScript, Perl, C/C++，具备内置的文件管理功能，著名的搜索和替换功能。通过它的属性列表可以清楚地了解到 UltraEdit 的功能。
8. Dreamweaver

下载Dreamweaver
Dreamweaver 是Adobe公司推出的一个面向网页设计师和开发者的功能全面的集成开发工具。它具备内置的文本编辑功能，如代码高亮，智能代码补齐，校验等。
7. Komodo Edit
/Komodo IDE

下载Komodo Edit
Komodo Edit 是一个开源的跨平台编辑器，它支持Windows、Linux和 Mac。它通常跟Komodo 集成开发环境一起发布，也可以单独使用。
6. Aptana

下载Aptana
Aptana 是免费的全功能Web开发工具，它可以独立运行，也可以作为Eclipse的插件。它内置了对诸如jQuery、MooTools和Prototype等流行函数库的支持。
5. PSPad

PSPad download page
PSPad 是一个Windows平台上的免费程序编辑器。它可以让你保持上一次编辑状态，这样在你下次打开编辑器的时候可以直接显示原来的文件。此外它还支持通过FTP进行远程编辑，支持多文件的比较等。
4. Vim

下载Vim
Vim 是一个支持Linux、 Windows和 Mac OS 的高级编辑器。它设计的目的是尽可能地提高文本编辑的效率，Vim 还是一个慈善软件，所有对该软件的捐献都将是对慈善的支持。

3. Coda

下载Coda
Coda 是Mac操作系统上的网页开发工具。它是功能强大且优雅的文本编辑器：代码高亮、显示行数、自动补齐等。
2. TextMate

TextMate download page
TextMate 是一个面向网页设计师和开发者的功能丰富的Mac平台编辑器。它可以让用户定制自己的风格界面，自动文本补齐，以及可以在文档中运行Shell命令等。
1. Notepad++

下载Notepad++
投票结果显示Notepad++ 是最受开发者欢迎的编辑器。它是一个基于GPL授权在 Windows 发布的编辑顺，具备许多特色的功能，其中最著名的是：录制键盘记录，强大的搜索替换功能支持正则表达式，支持多种编程语言等。
本文来源：
http://sixrevisions.com/web-development/the-15-most-popular-text-editors-for-developers/
翻译整理：酷秀网
http://www.kooxo.com/resourse/tools/200903/28-89.html

如何用 Visual studio 2003/2005 调试 ASP 应用程序、Javascrip

master@kanoe.cn(独木舟) — Sat,07 Mar 2009 17:36:36 +0800

ASP.NET 已经很流行了，但是完全取代 ASP 还需要一些时间，因为几乎任何类型的 web 应用系统，都能找到开源的 ASP 源码（尽管绝大多数代码质量不高，不过仍然受欢迎：新手可以通过看代码快速入门——不需要掌握复杂的 .NET 开发环境、OOP 、设计模式，老手可以将代码不做太大修改后即能为己所用）。

Visual Studio 的调试功能很好用，但如何它来调试 ASP 应用程序，相关介绍文章并不容易找到。Google 搜索“visual studio 调试 asp 程序”，前 10 页都是关于调试 ASP.NET 相关的内容，而不是 ASP 的。搜索词中加入过滤条件“-ASP.NET”（即不包含 asp.net 的内容），找到 MSDN 上的一片文章，然而 MSDN 提供的资料支离破碎，要找到需要的答案还真不容易。

费话一通：在 MSDN 上找资料很有趣，每篇文章好像都有用，但也好像没有用。资料对读者的适用程度，取决于读者查看文章中相关连接的数量：你不停地点击文章中提供的分支链接，当查看了足够多的分支链接文章之后，你这些链接的文章的内容进行甄别、筛选、组合，通常你能找到需要的答案。也就是说，如果你中途放弃了查找分支文章的努力，通常你就不能找到答案。

还好，这个问题总算解决了。记录下来吧，也许你还用得着。

以下假定是在本地电脑中调试 ASP 应用程序。

一、调试 ASP 应用程序

1、设置 Visual Studio

启动 Visual Studio，点击菜单“工具->附加到进程”，在窗口底部，勾选复选框“显示所有用户的进程”，在“可用进程”列表中点击 “inetinfo.exe”（这就是 IIS 的进程）。点击按钮“选择...”，在“调试以下代码类型”中，勾选复选框“脚本”（注意不需要选择“托管”，Visual Studio 不能同时调试脚本和托管），点击“确定”，点击“附加”。

2、设置 IIS

点击“开始->程序->管理工具->Internet 信息服务”，在左侧“网站”列表中，找到要调试的 web 应用程序（例如“myweb”），点击右键，选择“属性”，在“属性窗口”中，点击按钮“配置”，在“应用程序配置”中，点击选项卡“调试”，在“调试标志”列表中勾选复选框“启用 ASP 服务器脚本调试”、“启用 ASP 客户端脚本调试”，并勾选“向客户端发送详细的 ASP 错误信息”。

3、测试

以上设置完了之后，在你的 ASP 引用程序中，随便整点错误，然后在 IE 中运行此 ASP 应用程序，就会看到弹出 visual studio 实时调试器的对话窗口，说明设置成功。

二、调试 javascript 代码

用 Visual Studio 调试 javascript 代码很简单，不需要上面那么复杂的设置。

启动 IE，点击菜单“工具->Internet 选项”，点击选项卡“高级”，在分类“浏览”下，去掉如下复选框的打勾状态：“禁用脚本调试（Internet Explorer）”、“禁用脚本调试（其他）”。

当 javascript 脚本出错时，就会启动 visual studio 实时调试器。

IE和火狐的css兼容性问题归总

master@kanoe.cn(独木舟) — Sat,07 Mar 2009 11:08:09 +0800

CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。

1、DOCTYPE 影响 CSS 处理
2、FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
3、FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
5、FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式，值得注意的是，一定要将xxxx !important 这句放置在另一句之上
6、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
7、cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
8、FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
9、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
10、IE5 和IE6的BOX解释不一致
IE5下div{width:300px;margin:0 10px 0 10px;}
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}

关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

11、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}
就能解决大部分问题

注意事项：
1、float的div一定要闭合。
例如：(其中floatA、floatB的属性已经设置为float:left;)<#div id=\”floatA\” >
<#div id=\”floatB\” >
<#div id=\”NOTfloatC\” >
这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
在<#div class=\”floatB\”>
<#div class=\”NOTfloatC\”>
之间加上<#div class=\”clear\”>
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为如下即可：.clear{clear:both;}

此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

2、margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
<#div id=\”imfloat\”>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}

3、关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

4、关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）

5、最狠的手段 - !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过；

IE7.0出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们，为解决IE7.0的兼容问题，找来了下面这篇文章：
现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，他们都互不干扰。

---------------------------------------------------------------------------------------------------------------------------------
先温习一下对于IE的box-model的破解
IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本，这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服

IE5.X/win对box-model的解析是一样的，他们认为width包括了边框(border)和补白(padding)，幸运的是这个情况在IE6中有了好转
但是IE6在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(DOCTYPE)声明，IE6才能够接受正确的box-model
所以，tantak的hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作
Quote
div.content {
width:400px; //这个是错误的width，所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}
现在回到主题，我们经常看到!important和(空格)/**/:组合在一起使用，这个写法有什么奥妙呢？

看刚才那个写法，我这里可以提供另一种写法也能达到这样的效果
Quote
div.content {
width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}
同样，这个方法仍必须依靠正确的文档类型声明才能够正常工作，原因在前面已经说过。

文档类型声明就像一个开关，打开向后兼容的未来，而错误使用的话，就是一个Pandora box

---------------------------------------------------------------------------------------------------------------
ie7.0的面世，尚且不论他是否较之ie6.0进步， ie7和ie6 之间不兼容，毫无疑问又引入了新的痛处，至少在调试的过程中，又多了一道程序以及随之而来的大量不兼容。

目前，使用ie7.0的用户尚且是少数，使用ie6.0的用户仍然占据很大的比重。然而，大量通过ie6 测试的网页，在ie7.0中都显示不正常。

据ie7.0官方解说：

　　ie7.0在IE6的基础上引入了strict模式，包含了许多有关于层叠样式表（CSS）解析与呈现的改进。这些改进意在提高Internet Explorer解释层叠样式表的一致性，以达到W3C的推荐的标准，同时为开发者提供一个可以依赖的功能集合。

　　不管官方的语言是多么动听，也不管ie7.0是不是真的W3C了，浏览器之间太多个性化的东西，太多差异，让我们无可奈何。在ie7.0下设计出的网页，ie6下面显示的几乎是不堪入目。那么，我们在设计网页的时候，在解决好ie6.0与火狐的兼容问题的同时，我们是更多的服从符合W3C一些的ie7.0，还是对96%的ie6.0妥协？这个问题其实有些多余，我们能做的，或许只有选择中庸，只有尽量调试到各个浏览器都显示正常吧。

　　ie7.0与ie6.0的之间不兼容，目前就我知道的有如下几个方面，如有遗漏或者说错了的地方，欢迎在后面补充或者纠正。

　　1. ie7,ie6 div+css出现宽度定义不同
　　在宽度定义上出现宽度的解释不同,IE7宽度在IE6上要宽一些,,正是这个原因网页可能会出现溢出问题, 还好这个问题可以通过更改数值或者修改一下百分比解决.

　　2. ie7.0修复了!important这个bug。
　　先前由于ie6.0对!important识别存在bug, 在firefox和IE中的BOX模型解释不一致导致相差2px，大部分网页标准设计师通过这个bug来兼容ie6.0和firefox，即采用：div {margin:30px!important;margin:28px;}。但是ie7.0把这个bug给修复了,所以问题又出现了,怎么兼容 ie.7.0的同时又能兼容ie6.0和firefox？

　　3. Box Model的改变
　　在IE7中，为了适应CSS2.1 box model修改了溢出的行为。

　　4. ie7.0中一些CSS filter将不再可用
　　IE7中修改了许多潜在解析错误，这些可能会阻止filter在以前的IE版本中正常工作。如：*HTML filter，下划线filter和/**/注释filter等等。

　　5. ie7.0对很多不规范的css不再支持，对js语法要求更严格规范。
　　很多在IE6下正常显示的js页面，在IE7下均不能正常显示，并且还没有提示错误。ie7.0对js语法要求更严格规范，只是这个规范似乎并没有说明，也没有明白的告诉大家，他们是怎么“规”怎么“范”的。

40 个轻量级 JavaScript 库（下）

master@kanoe.cn(独木舟) — Fri,06 Mar 2009 22:13:26 +0800

流行的 JavaScript 库不胜枚举，jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富，加上它们的插件，几乎能胜任任何工作，然而这是有代价的，这些库往往导致你的网页尺寸臃肿。在某些场合，如果你只想完成特定的工作，可以使用一些功能更专一的轻量库，本文介绍了40个非常出色的轻量级 JavaScript 库。这是本文的第二部分，第一部分参见40 个轻量级 JavaScript 库（上）。

5. 字符串与数学函数
Date.js
和日期打交道不是件容易事，有很多格式要处理。Datejs 可以很好地处理简单或复杂的日期函数。可以将日期解析出诸如“Next thursday”，“+2 years”一类的格式，也支持所有日期形式，如 2009.01.08, 12/6/2001。

Sylvester
一个处理矢量和点阵的数学 JavaScript 库，包含多维矢量和点阵建模类，以及在3D空间的一些模型。

Pretty Date
一个很出色的 JavaScript 库，用一种很漂亮，很友好的方式显示日期，如下图所示。

XRegExp
JavaScript 中的 RegExp 对象已经支持正则表达式，XRegExp 增加了更多未来浏览器可能包含的功能（ECMAScript 4 - ES4）。该库对 RegExp 对象进行缓存，重用并增加了众多新功能。

JavaScript URL Library
一个用来处理 URL 的 JavaScript 库，可以对 URL 中的任意部分进行处理。
6. Fonts
typeface.js
这个库可以让你在网页中使用任意字体，但和 sIFR 以及 FLIR 这些基于 Flash 的方案不一样，typeface.js 100% 基于 JavaScript，只需将你的字体文件上传到一个基于 Web 的生成器那里，再将生成的 JavaScript 文件下载回来包含到网页中即可。

Cufón
和 typeface.js 很相像，Cufón 也可以让你在网页中使用任意字体，同样，它也是使用一个生成器，将字体转换成 VML，将生成的 .js 文件包含到网页即可。
7. 调试与记录
Blackbird
人们经常使用 Alert() 调试 JavaScript 程序，Blackbird 提供了一个漂亮的控制台记录，查看，过滤程序的运行。

NitobiBug
基于浏览器的跨浏览器 javaScript 对象记录与检查工具。

Firebug Lite
目前最好的 JavaScript 调试工具非 Firebug 莫属，然而该工具只支持 FireFox，将 Firebug Lite .js 文件插入你的网页，就可以在所有浏览器都实现 FireBug 功能。

8. 其它
swfobject
这是一个最受欢迎的对 Flash 对象进行引用的方法。可以生成标准 swf 引用代码，并探测用户播放器版本。如果用户版本不支持，会显示备用内容。

sorttable 与 dragtable
不管你喜欢与否，table 仍然是最好的表现数据的方式，但可以更好地利用。sorttable 可以让表格数据排序，只需在 table 上加一个 class="sortable" 标志，还可以排除指定的栏。dragtable 让表格的栏可以拖动，在表格上加上 class="dragable" 标志即可，这两个类可以结合起来使用，只需加上 class="sortable dragtable" 即可。

DD_roundies 与 DD_belatedPNG
DD_roundies 可以不依赖图片实现圆角功能，只面向 IE，通过 VML 实现，其它浏览器会被略过，因为那些浏览器本身支持 CSS 圆角。

DD_belatedPNG 是为了解决 IE6 对 PNG 支持不好问题而开发的，不管 PNG 图片用于 src 还是 background-image，DD_belatedPNG 都能提供修补。

Custom JavaScript Dialog Boxes
一个只有 4.5K 的轻量 JavaScript 库，可以创建用户定制对话框，可显示4种类型的消息框，alerts, warnings, prompts, success。可以设定消息框标题，内容，以及过多长时间显示。

GameJS
GameJS 是微软的 XNA 游戏框架在 JavaScript 上的移植，使用 canvas 对象作为输出设备。JavaScript 不是最佳游戏平台，但对那些帧率较低的游戏也没有问题。

Shortcuts.js
从 Google Reader 和 Gmail 开始，Web 程序中的快捷键开始流行起来。Shorcuts.js 让快捷键的处理变得简单。

Mapstraction
有不少地图提供商都提供不同 API，如果你要更换提供商，比如从 Google Maps 到 MapQuest，需要更新代码，Mapstraction 提供了常用地图提供商的 API，只需该一行代码就能完成转换。

Amberjack
一个只有 4K 的微型 JavaScript 库，可以为你的网站添加漂亮的教程功能，一个模式窗口会以教程的形式显示任意内容，教程中的步骤可以通过手工编码实现或在线自动生成。可以使用主题或 CSS 控制内容的格式。

JsLoad
JsLoad 可以从 Google server 远程加载各种 JavaScript 库，可以自动加载各种版本的支撑库。

本文国际来源：http://www.smashingmagazine.com/2009/03/02/40-stand-alone-javascript-libraries-for-specific-purposes/
中文翻译来源：COMSHARP CMS 官方网站
转自:http://www.cnbeta.com/articles/78673.htm