prowyh's space: JavaScript Note

再谈StringBuilder对象

Mon, 03 Sep 2007 18:15:49 GMT

在《JavaScript代码优化一例（文）》中，曾经引入了高效构造字符串的StringBuilder对象。不过，那里的StringBuilder比较简单，只有append()一个方法，下面给出经过修改的版本，新版本除增强了append()方法之外，还给出了类似C#中StringBuilder对象的appendFormat方法。

//////////////////////////////////////////////////////////////
// StringBuilder
function StringBuilder()
{
this._strings = new Array();
}

// enhanced append method

// append(arg1, arg2, ..., argN)
StringBuilder.prototype.append = function (str)
{
var aLen = arguments.length;
for (var i = 0; i < aLen; i++)
{
this._strings.push(arguments[i]);
}
};

// like AppendFormat() method of C# StringBuilder object

// appendFormat(fmt, arg1, arg2, ..., argN)
StringBuilder.prototype.appendFormat = function (fmt)
{
var re = /{[0-9]+}/g;
var aryMatch = fmt.match(re);
var aLen = aryMatch.length;

for (var i = 0; i < aLen; i++)
{
fmt = fmt.replace(aryMatch[i], arguments[parseInt(aryMatch[i].replace(/[{}]/g, "")) + 1]);
}

this._strings.push(fmt);
};

StringBuilder.prototype.toString = function ()
{
return this._strings.join("");
};

示例1：

var sXML = new StringBuilder();

sXML.append("<myData>\r\n");

sXML.append("<name>", name, "</name>\r\n");

sXML.append("<color>", color, "</color>\r\n");

sXML.append("</myData>\r\n");

alert(sXML.toString());

示例2：

var sHTML = new StringBuilder();

sHTML.appendFormat("<div style='width:{0}px;height:{1}px;background-color:{2};'>", width, height, bkcolor);

sHTML.appendFormat("<a class='{0}' href='{1}' target='_blank'>{2}</a>", className, url, name);

sHTML.append("</div>");

divObj.innerHTML = sHTML.toString();

由例子可以看出，append()适合于构造简单字符串，appendFormat()适合于构造复杂字符串。

测试结果显示，append()比appendFormat()快40% ~ 60%。

JavaScript Compiler

Wed, 29 Aug 2007 18:02:18 GMT

上文《JavaScript代码优化一例（文）》曾引述过一个关于JavaScript性能的比较结果：

JavaScript与其它语言相比较：

比编译型的C程序慢5000倍；
比解释型的Java程序慢100倍；
比解释型的Perl慢10倍。

而且还言及：

随着Web 2.0以及Ajax概念的提出及相关技术的流行，Web页面应用程序化的趋势越来越明显，人们要求Web页面能够更多地体现传统桌面应用程序的风格与使用体验，而不再是传统Web页面的导航与刷新。在这种应用需求的推动下，原本只是在客户端起到补充与点缀作用的JavaScript代码，越来越成为Web程序设计的主角。而这就使得JavaScript的代码越来越庞大与复杂。

既然如此，一个合理的推测就是：JavaScript Compiler将会成为未来编译器之战中的主角，或者说，JavaScript代码的编译会成为未来的技术趋势。

为何JavaScript一直没有以compiled code形式出现，估计可能有如下几个原因：

角色：早期的Web Page以展示型为主，JavaScript代码非常简单，性能并不是突出问题。
安全：文本形式的JavaScript Code能够有效避免病毒和恶意攻击代码（虽然目前的带毒JavaScript代码并不少见）。
形式：大部分的JavaScript代码都是嵌入在页面里的，没有做到代码与页面的分离。

当然，可能还有其它原因。

归结起来，角色可能是最主要的原因，因为安全可以通过Sandbox式的运行环境与系统隔离，即使是compiled code，也仍然只能访问DOM和BOM。形式是最不重要的，这只是一个编程习惯问题。

角色正在起变化！随着Web 2.0以及Ajax的大量应用，Web Page正在演变为Web Application，JavaScript已经从原来不起眼的小角色，逐步成为编程的主导力量。这个时候，期待JavaScript Compiler就具有了合理性。

非常巧合，刚好读到Richard MacManus的blog《Why Google and Microsoft need Javascript compilers》，文中称Google和Microsoft正在开发JavaScript Compilers，不过，作者所言并非我这里的意思，而是将其它高级语言（如Java、C#等）代码编译为JavaScript代码（所以，合适的名称应该是JavaScript Translator），以充分利用熟悉其它语言的开发者开发Ajax Application。

Richard MacManus在文中提到Microsoft正在进行的一个项目Script#，是将C#语言代码编译为JavaScript代码。

Nikhil Kothari（an architect on the Web Platform and Tools team at Microsoft）在其blog中介绍了Script#项目的情况。

不管是Google的Java -> JavaScript编译器，还是Microsoft的C# -> JavaScript编译器（Script#），最终只能导致Client端的代码越来越重，Microsoft的spaces.live.com已经让我们体会到过重的Scripting的结果了。

so, doing JavaScript code optimization, expecting JavaScript compiler!

JavaScript代码优化一例（文）

Wed, 29 Aug 2007 16:19:30 GMT

JavaScript（JScript，ECMAScript）主要作为Web的客户端编程语言，以浏览器为宿主运行环境，通过DOM（Document Object Model，文档对象模型）和BOM（Browser Object Model，浏览器对象模型）接口所呈现（expose）的对象和方法，来操纵页面的HTML元素。

早期的JavaScript代码主要完成两方面的工作，一是在客户端进行输入验证（以避免由服务器进行验证而产生的网络传输）；二是使页面产生一定的动态效果（如下拉菜单的动态显示，颜色与字体的变化等）。

所谓代码优化，主要是指代码所占空间（代码运行时所占的内存空间）和运行时间两个方面，早期由于机器内存资源的限制，算法研究者对空间和时间的优化给予同样的重视，空间上节省一个字节和时间上减少一次循环同样重要。现在，由于机器内存资源相对充裕（当然，只是相对而言），算法（代码）的优化，更多地集中于运行时间上，特别对JavaScript代码而言，更是如此。关于JavaScript的运行效率，Syracuse大学的Geoffrery Fox给出了一个比较结果^[1]：

JavaScript与其它语言相比较：

比编译型的C程序慢5000倍；
比解释型的Java程序慢100倍；
比解释型的Perl慢10倍。

所以，要提高JavaScript的运行性能，除了寄希望于将来能有更高性能的JavaScript解释器之外，提高我们代码的效率也非常重要。关于JavaScript代码的优化，文献^[1]给出了一些很好的建议，有兴趣者可以参考，此处不赘。

优化实例

下面通过一个工作实例，来具体看看JavaScript代码的优化。

这是一个内部信息系统中的权限分配模块，界面如图1（见此文的代码部分，如果看不到，则有可能ask.com上的图片资源也被封掉了，唉.......）所示。

其中，功能权限是指对系统功能模块（体现为菜单项）的使用权限，对象权限是指用户对信息对象的访问（读、写、改、删）权限。管理员通过此界面对项目组成员及其权限进行配置。代码的功能是找出选中的功能权限项目以及对象权限项目。最简单的办法是通过遍历HTML的<INPUT>元素。

功能权限部分的遍历是相对简单的，通过INPUT元素的id的模式匹配，即可一次遍历所有元素，难点是对象权限部分。

未优化的JavaScript代码是通过三重循环完成所有元素的遍历的，整个代码耗时1281毫秒，这显然是不能接受的，所以需要优化。

下面是优化后的版本：

// 功能权限及对象列表
var functorListEx = new StringBuilder();
var objectListEx = new StringBuilder();

// 所有INPUT元素的集合
var coll = document.getElementsByTagName("INPUT");

// 用于模式匹配的正则表达式
var fnRE = /functor_[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{12}/i;
var objRE = /object_[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{12}$/i;
var objRE_r = /radio_[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{12}_r/i;
var objRE_a = /object_[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{12}_a/i;
var objRE_m = /radio_[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{12}_m/i;
var objRE_d = /radio_[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{12}_d/i;

// 中间数据结构
var aryObjList = new Array();
var aryRList = new Array();
var aryAList = new Array();
var aryMList = new Array();
var aryDList = new Array();

for (var i = 0; i < coll.length; i++)
{
// 通过一次遍历所有元素，填充几个中间数据结构
}

// 对中间数据结构的后续处理
for (var i = 0; i < aryObjList.length; i++)
{
var _id = aryObjList[i];
var _r = aryRList[_id] == null ? "" : aryRList[_id];
var _a = aryAList[_id] == null ? "" : aryAList[_id];
var _m = aryMList[_id] == null ? "" : aryMList[_id];
var _d = aryDList[_id] == null ? "" : aryDList[_id];
objectListEx.append(_id + ":" + _r + ":" + _a + ":" + _m + ":" + _d + ";");
}

从结果显示的运行时间上来看，未优化的代码耗时1281毫秒（例中的coll.length == 318），而优化后的代码耗时47毫秒。可见，优化的效果是明显的。

本例的优化主要是消除了代码的内循环，通过一次遍历就完成了functorListEx以及objectListEx所需要的几个中间数据结构（数组）的构建，后续的处理是由中间数据结构构建objectListEx，而aryObjList.length远远小于coll.length。所以，优化后的代码效率远远高于原来的代码。

效率分析

下面来简单分析一下优化前后的代码效率。

令代码的数据规模（即coll.length）为n。优化前，构建functorList的运行时间为O(n)，而构建objectList的运行时间为O(n³)，所以，整个代码的运行时间

T_nopt = O(n) + O(n³) = O(n³)

优化后，构建functorListEx及中间数据结构的运行时间为O(n)，构建objectListEx的运行时间为O(m)，此处m < n。所以，整个代码的运行时间

T_opt = O(n) + O(m) = O(n)

优化前，代码的运行时间为指数幂时间（这是最糟糕的！），优化后的运行时间为线性时间（这是相当好的结果！），由此可以看出，代码优化与否，差别是相当大的。

当然，代码优化是以一个能够正确工作的代码基（code base）为前提的。所以，先让程序正确地工作，然后再努力使其快速地正确工作 ^[3] 。

注：
1、上述代码中的StringBuilder对象录自文献^[1]，就像C#一样，这个StringBuilder对象也是构造字符串的高效对象。

2、由于篇幅的限制，文中省略了具体的代码实现，有兴趣者可以在笔者的blog（prowyh.spaces.live.com）中找到完整的代码实现。

参考文献
1. JavaScript高级程序设计，Nicholas C. Zaks著，曹力张欣等译，人民邮电出版社
2. JavaScript: The Definitive Guide, 5th Edition，David Flanagan，O’Reilly
3. C++ Coding Standards, Herb Sutter, Andrei Alexandrescu, 人民邮电出版社

【补注】

此文发于《程序员》杂志2007年第8期，并改正了杂志上几处小的排印错误。

今天看到aimingoo的blog 再议《JavaScript代码优化一例》，对拙文的JavaScript代码优化进行了再探讨，从多个方面进行了更细致的优化，非常感谢！

以前曾写过一文《JavaScript学习笔记（之一）》，是从阅读spaces.live.com以及gmail.com的JavaScript代码有感而发，谓之：现在的JavaScript代码让人看不懂。JavaScript是一个很小巧的语言，但由于兼有函数式和过程式语言的特点而使得Coding非常灵活，这也就使得代码优化大有可为的空间。

正好今天读完Scott Meyers的Effective系列的最后一本《Effective STL》，Item 47: Avoid producing write-only code，读来深有感触。代码如何写得既correct，又effective，同时又不失readable，确实not easy，这样的代码才可以称得上beautiful code!

JavaScript代码优化

Tue, 10 Jul 2007 01:54:50 GMT

如图为某信息系统的权限设置模块之用户界面：

如何获取用户的功能权限和对象权限的设置信息，还是大有讲究的。下面的代码列表1为未优化的JavaScript代码：

JavaScript Code List 1:

// non-optimized version

var functorList = new StringBuilder();
var objectList = new StringBuilder();
var coll = document.getElementsByTagName("INPUT");

// one pass scan to traverse the nodes collection coll to build functorList
for (var i = 0; i < coll.length; i++)
{
var _obj = coll[i];
if (_obj.type != "checkbox") continue;

if (_obj.id.indexOf("functor_") >= 0 && _obj.checked == true)
{
  var id = _obj.id;
  id = id.substring("functor_".length, id.length);
  functorList.append(id + ";");
}
}

// multi-pass scan to build objectList
for (var i = 0; i < coll.length; i++)
{
var _obj = coll[i];
if (_obj.type == "checkbox" && _obj.id.indexOf("object_") >= 0)
{
if (_obj.id.indexOf("_parent") > 0 || _obj.id.indexOf("_child") > 0) continue;
if (_obj.id.indexOf("_r") > 0 || _obj.id.indexOf("_a") > 0 || _obj.id.indexOf("_m") > 0 || _obj.id.indexOf("_d") > 0) continue;

JavaScript Code List 2是优化后的代码：

// optimized version

var functorListEx = new StringBuilder();
var objectListEx = new StringBuilder();
var coll = document.getElementsByTagName("INPUT");

// regular expression for matching
var fnRE = /functor_[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{12}/i;
var objRE = /object_[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{12}$/i;
var objRE_r = /radio_[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{12}_r/i;
var objRE_a = /object_[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{12}_a/i;
var objRE_m = /radio_[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{12}_m/i;
var objRE_d = /radio_[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{4}-[0-9A-Za-z]{12}_d/i;

// helper data structures used by optimized algorithm
var aryObjList = new Array();
var aryRList = new Array();
var aryAList = new Array();
var aryMList = new Array();
var aryDList = new Array();

// one pass scan to traverse the nodes collection (coll) to build functorListEx
// and intermediate arrays
for (var i = 0; i < coll.length; i++)
{
var _obj = coll[i];
if (_obj.type != "checkbox" && _obj.type != "radio") continue;
var _match;

if (_obj.checked && (_match = _obj.id.match(fnRE)) != null)
{
  functorListEx.append(_match[0].split("_")[1] + ";");
}
else if (_obj.checked && (_match = _obj.name.match(objRE_r)) != null)
{
  aryRList[_match[0].split("_")[1]] = "r_" + _obj.value;
}
else if (_obj.checked && (_match = _obj.id.match(objRE_a)) != null)
{
  aryAList[_match[0].split("_")[1]] = "a_";
}
else if (_obj.checked && (_match = _obj.name.match(objRE_m)) != null)
{
  aryMList[_match[0].split("_")[1]] = "m_" + _obj.value;
}
else if (_obj.checked && (_match = _obj.name.match(objRE_d)) != null)
{
  aryDList[_match[0].split("_")[1]] = "d_" + obj.value;
}
else if (_obj.checked && (_match = _obj.id.match(objRE)) != null)
{
  aryObjList.push(_match[0].split("_")[1]);
}
}

// further process to build objectListEx from the intermediate arrays
for (var i = 0; i < aryObjList.length; i++)
{
var _id = aryObjList[i];
var _r = aryRList[_id] == null ? "" : aryRList[_id];
var _a = aryAList[_id] == null ? "" : aryAList[_id];
var _m = aryMList[_id] == null ? "" : aryMList[_id];
var _d = aryDList[_id] == null ? "" : aryDList[_id];
objectListEx.append(_id + ":" + _r + ":" + _a + ":" + _m + ":" + _d + ";");
}

【注】文见JavaScript代码优化一例（文）。

什么是JSON？

Mon, 12 Mar 2007 17:40:00 GMT

前文说到mashups的技术基础时，提到JSON是其中之一，那么什么是JSON？

1、定义

JSON = JavaScript Object Notation，顾名思义，是一种用JavaScript表示（描述）对象的一种方法（记法），D. Crockford在RFC4627中的定义为：

JavaScript Object Notation (JSON) is a lightweight, text-based, language-independent data interchange format. It was derived from the ECMAScript Programming Language Standard. JSON defines a small set of formatting rules for the portable representation of structured data.

1）JSON是一种轻量级的，基于文本的，语言无关的数据交换格式。简单扼要的一句话，就说明了什么是JSON。

轻量级——与SGML、XML相比较而言，借用JSON作者的话说，是一种Fat-Free Alternative to XML（去掉了XML的脂肪，留下了XML的骨感风韵）。

基于文本——采用XML的成功作法，而且由于要做“语言无关的数据交换格式”，基于文本是必须的。

语言无关——虽然是从ECMAScript衍生而来，但由于只采用了ECMAScript中的数据表示法，可以很容易地在其它语言中实现，并非特别绑定于ECMAScript。

数据交换——由于JSON衍生自程序语言，天生用于描述结构化的数据。而XML由于出自“文档世家”SGML，所以天性适合于描述文档。当然，XML的描述能力比JSON要强，可以描述半结构化数据，而JSON只适合于描述结构化的数据。

2）是从ECMAScript程序设计语言衍生而来的。

JSON采用了ECMAScript语言的数据（对象、数组以及其它标量数据）表示法。

3）JSON定义了几条简单的格式化规则用于表示可移植的结构化数据。

格式化规则体现于下面的语法定义。

2、语法

D. Crockford在www.json.org中给出了JSON的语法定义：

object: {}
{ members }

members: pair
pair , members
pair: string : value
array: []
[ elements ]
elements: value
value , elements
value: string
number
object
array
true
false
null

由此可以看出，JSON的语法特简单！

3. 例子

下面是一个D. Crockford给出的例子：

{
    "glossary": {
        "title": "example glossary",
        "GlossDiv": {
            "title": "S",
            "GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
                    "SortAs": "SGML",
                    "GlossTerm": "Standard Generalized Markup Language",
                    "Acronym": "SGML",
                    "Abbrev": "ISO 8879:1986",
                    "GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
                        "GlossSeeAlso": ["GML", "XML"]
                    },
                    "GlossSee": "markup"
                }
            }
        }
    }
}

其等价的XML表示为：

    SGML
    SGML
    Standard Generalized Markup Language
    SGML
    ISO 8879:1986

     A meta-markup language, used to create markup languages such as DocBook.
     SGML
     XML

    markup

注：这个XML表示是我从JSON表示中推出的，与D. Crockford给出的XML表示有所不同。

JavaScript学习笔记（之三）

Mon, 15 Jan 2007 16:41:30 GMT

已经很久没有抬头看看天了，偶一抬头，发现天上彩云飘飘：Unobtrusive scripting，Prototype-based languages，Mixin，Closures……

Unobtrusive scripting已经在笔记之一里做了描述，此处不赘。Mixin和Closures以后再慢慢道来，下面来看看何谓Prototype-based languages？

我们被教导了多年的OO，脑子里塞满了class, object, inheritance, polymorphism, encapsulation, abstract, virtual，等等，等等。现在看来，这些都已经是classic OO language的特征了，此种语言可以被概括为Class-based language。除此之外，还有一种模式的OO language，称为Prototype-based language。

说也奇怪，老外总是有创造新语言的强烈冲动（相比之下，由于我们对语言本质没有深入的研究，所以难有创见！大家都忙着挣钱呢……^_^）。稍微搜索一下，发现N多的Prototype-based languages，典型者除JavaScript之外，有Self，NewtonScript，Io，等等。其中：

Self：

Self is an object-oriented language for exploratory programming based on a small number of simple and concrete ideas: prototypes, slots, and behavior. Prototypes combine inheritance and instantiation to provide a framework that is simpler and more flexible than most object-oriented languages. Slots unite variables and procedures into a single construct. This permits the inheritance hierarchy to take over the function of lexical scoping in conventional languages. Finally, because Self does not distinguish state from behavior, it narrows the gaps between ordinary objects, procedures, and closures. Self's simplicity and expressiveness offer new insights into object-oriented computation.

NewtonScript：

NewtonScript, developed for the Apple Newton PDA platform, is a prototype-based programming language. Rather than two levels of abstraction, class and object, there is just one, the object. Major design goals of the language were small memory consumption of the created programs and the ability to easily program graphical user interfaces. Both are well met by prototype-based languages. A third design goal, good learnability, was attained by an easy syntax.

Io：

Io is a small, prototype-based programming language. The ideas in Io are mostly inspired by Smalltalk (all values are objects), Self (prototype-based), NewtonScript (differential inheritance), Act1 (actors and futures for concurrency), LISP (code is a runtime inspectable/modifiable tree) and Lua (small, embeddable).

看来各有千秋，而且Io似乎有点集大成的味道——集各语言特点于一身。

这些语言此处暂且按下不表，继续我们的话题——prototype-based languages。

Prototype的字典解释：first or original example of sth that has been or will be copied or developed; model or preliminary version。中文可以解释为：原型，雏形，模型，蓝本。

Prototype-based languages are object oriented langauges where a new object instance is "cloned" from existing live object(a prototype) instead of being constructed by a class. This makes the language simpler by requiring one less data type and solving the infinite regress problem of classes (if you use a class to create an object, what do you use to create a class?). It is also ideal for systems such as GUIs where the pattern of creating one object by copying and modifying another is already handled by the language itself.

基于原型的语言是面向对象语言，其中新的对象实例是从已存在的活动对象（即原型）“克隆”而得，而不是从类构造得来的。这使得基于原型的语言更简单，因为少了一种数据类型，而且也解决了类的无穷回溯问题（如果用类来创建对象，那用什么来创建类呢？）。这种语言特别适合于像GUI这样的系统，因为通过拷贝及修改另一个对象而创建一个新对象的模式已经由语言本身处理了。

定义总是让人头大，下面我们Learn by Example：

考虑雇员与管理者这样的两级系统，一般来说，管理者属于雇员，但雇员却不一定属于管理者。借用经典OO的术语，如果将雇员定义为基类或超类（base class or superclass）的话，那管理者就是雇员的导出类或子类（derived class or subclass），那么如何在JavaScript中定义这种层次关系呢？

// 基类的构造函数

function Employee(name, dept)

{

this.name = name;

this.dept = dept;

}

// 子类的构造函数

function Manager(name, dept)

{

Employee.call(this, name, dept); // 基类的实例化

this.isManager = true;

}

Manager.prototype = new Employee(); // 此语句建立关系：Manager is a subclass of Employee

var empA = new Employee("David", "Development");

var mgrB = new Manager("Bill", "Development");

alert(empA.name); // 显示David

alert(empA.isManager); // 显示undefined，因为empA没有isManager属性

alert(mgrB.name); // 显示Bill，name为mgrB的继承属性

alert(mgrB.isManager); // 显示true，mgrB有isManager属性，且其值为true

Employee和Manager即实现了OOPL的典型特征：继承（inheritance）。这种继承关系是通过prototype对象实现的（Manager.prototype = new Employee();），故称为基于prototype的继承（prototype-based inheritance），而经典OOPL的继承是通过class实现的，称为class-based inheritance。

JavaScript学习笔记（之二）

Sat, 13 Jan 2007 16:26:29 GMT

JavaScript——世界上误解最深的程序设计语言

译注：本文译自Douglas Crockford的《JavaScript:The World's Most Misunderstood Programming Language》，是难得一见的好文！

JavaScript（也被成为Mocha，LiveScript，JScript，ECMAScript）是世界上最流行（most popular）的程序设计语言之一。基本上每台PC都至少有一个JavaScript解释器在运行，这要归功于JavaScript是Web的脚本语言。

除了其流行之外，很少有人知道JavaScript还是一种非常优美的、动态的、面向对象的、通用的程序设计语言。这怎么会成为一个秘密？这种语言为什么会被如此误解？

名字

Java-前缀使人认为JavaScript多少与Java有关系，是Java的子集或缩减功能后的版本。似乎这个名字是有意用来制造混淆，且从混淆产生误解。实际上，JavaScript并不是Java的解释版本，Java是Java，JavaScript是一种不同的语言。

JavaScript在语法上类似于Java，就像Java类似于C一样。JavaScript是Java的子集并不比Java是C的子集多什么东西。JavaScript比Java能更好地应用于Java（当时称为Oak）原初的设计目的。

JavaScript并不是在Sun Microsystems公司开发的，而是在Netscape。当初叫LiveScript，如果叫这个名字，就不会产生如此多的误解。

-Script后缀会使人认为不是一种实际的（real）程序设计语言，会认为脚本语言在功能上比程序设计语言差很多。但这实际上是特化问题（a matter of specialization，可能是指JavaScript只是专注于某些领域或在某些方面有特长——译注），与C相比，JavaScript在性能和表达能力及活力（dynamism）上取得了一种平衡。

穿着C的衣服的Lisp

JavaScript类似于C的语法，包括花括号（{}）以及重量级的（clunky）for语句，使其看起来与通常的过程语言没什么不同。实际上这是误导，因为与C或Java比起来，JavaScript与函数式语言如Lisp或Scheme具有更多的共同点。JavaScript用数组代替了列表（lists），用对象代替了属性列表（property lists），函数是第一级别的（first class），而且JavaScript具有closures（closures与lambda表达式有关，将在以后展开来谈——译注），用不着平衡所有那些括号就可以得到lambda表达式（You get lambdas without having to balance all those parens.——译注：虽然翻出来了，但意思还是不太明白，是指与Lisp相比吗？Lisp确实要balance all those parens）。

擅长角色（Typecasting）

JavaScript是被设计来运行于Netscape Navigator浏览器中的，它的成功使其成为所有浏览器的标准配置，这倒成了JavaScript所擅长的角色。实际上JavaScript是程序设计语言中的George Reeves（美国演员，饰演电视系列剧《超人历险记》中的超人——译注），它能很好地适用于一大类的非Web应用程序。

目标游移（Moving Target）

JavaScript初始的几个版本功能非常弱，缺少异常处理，内函数（inner functions），以及继承。目前它已经是一个完全的面向对象的程序设计语言。但对于该语言的很多意见都集中于其不成熟的形式。

ECMA委员会（JavaScript语言的管理者）正在开发各种扩展，但这些扩展会更加恶化其最大的问题：它已经有太多的版本了。版本太多不可避免会产生混淆。

设计错误

没有一种程序语言是完善的。JavaScript同样有设计错误，如重载+操作符，通过强制类型转换，使其用于加法和字符串连接，以及容易产生错误的with语句。保留字策略限制太严，分号插入（semicolon insertion），与直接量的正则表达式记法一样，是一个巨大的错误。这些错误已经导致了各种各样的程序设计错误。语言的设计作为一个整体已经使人产生怀疑。幸好，这些问题可以通过一个很好的lint程序得到缓解。

语言的设计在整体上还是很合理的，奇怪的是，ECMA委员会似乎对改正这些问题并没有兴趣，或许他们对制造新的问题兴趣更大。

极坏的实现

JavaScript的几个早期实现充满了缺陷（quite buggy），这对语言影响很坏，而且这些实现又嵌入在可怕的缺陷多多的Web浏览器里。

坏的书籍

几乎所有关于JavaScript的书都很糟糕，有错误，低劣的例子，并倡导一些不好的实践。语言的重要特性经常被低劣地解释，或整个忽略掉了。我看了很多JavaScript的书，只推荐一本：David Flanagan的《JavaScript: The Definitive Guide (5th Edition)》。

不够标准的标准

ECMA出版JavaScript语言的官方规范，可这个规范的质量却极为低劣。难读难懂（难怪我读不懂，现在看来是可以原谅的:)——译注）！这是产生上述坏书问题的一个原因，因为作者无法用标准文档改进他们对语言的理解。ECMA和TC39委员会应该很尴尬。

业余爱好者

许多写JavaScript程序的人都不是程序员，他们对如何写好的程序缺乏训练。JavaScript具有很强的表达能力，他们怎么写都可以做点有用的事情，这造成了JavaScript只适用于业余爱好者，而不适合专业程序员的形象。事实当然不是。

面向对象

JavaScript是面向对象的吗？它有包含数据的对象以及处理数据的方法，对象可以包含其它的对象。它没有类，但有构造函数，能起到类的作用，如作为类变量和类方法的容器。没有面向类的继承（class-oriented inheritance），但有面向原型的继承（prototype-oriented inheritance）。

构建对象系统的两种主要方式，一是通过继承（is-a），一是通过聚集（has-a），JavaScript两种方式都有，其动态特性使其在聚集方面更优秀。

一些人会争辩，说JavaScript并非真正面向对象，因为不能提供信息隐藏，也就是说，对象没有私有变量和私有方法，所有成员都是公共的。但JavaScript的对象可以有私有变量和私有方法，当然，很少人理解，因为JavaScript是世界上误解最深的语言。

一些人会争辩，说JavaScript并非真正面向对象，因为不提供继承。但JavaScript不仅提供经典的继承，也提供其它的代码重用模式。

JavaScript学习笔记（之一）

Thu, 11 Jan 2007 18:04:23 GMT

曾跟朋友们笑谈：写程序这么多年，现在最看不懂的程序是JavaScript！

JavaScript何方神圣？非也，just an interpreted scripting language！如此“卑微”，何言“看不懂”？

其实，看不懂的并不是JavaScript程序，而是lambda表达式！JavaScript虽然“卑微”，却有着“高贵”的理论背景——lambda演算，这是一个需要深入研究的领域，此处按下不表。

最近读了很多关于JavaScript的资料，有一个词频频出现：Unobtrusive Scripting。查字典，obtrude = force (oneself, one's opinions, ideas, etc) upon sb/sth, esp when unwanted. 所以，Unobtrusive可以解释为“不强加于人的，优雅的，温和的，君子的”。那么，为什么现在会强调Unobtrusive Scripting呢？

这与长期以来的“不良习惯”有关系：

1、由于DHTML的影响，Scripters已经习惯于“粗暴”地对待HTML Elements。

例：

function setBkColor(o, color)

{

o.style.backgroundColor = color;

}

从Unobtrusive的观点来看，这不是一个好的方式，因为假如对象o不存在，就会导致JavaScript出错。Unobtrusive的方式应该是：

function setBkColor(o, color)

{

if (o) o.style.backgroundColor = color;

}

而且DHTML已经是一种过时的（outdated）技术，应该使用DOM Scripting。

2、由于IE的强势影响，Scripters没有考虑浏览器的兼容性。

例：

function setBkColor(color)

{

document.all.o.style.backgroundColor = color;

}

document.all是一个IE所支持的属性，其它浏览器并不支持，所以在其它浏览器中就会出错。而且通过document.all和document.layer来判断浏览器类型也已经过时了，Unobtrusive的方式应该是：

function setBkColor(color)

{

var o = document.getElementById('elementId');

if (o) o.style.backgroundColor = color;

}

3、由于JavaScript的“卑微”，使得Scripters很“随意”地将大量JavaScript代码散落在HTML页面中（尤其是heavily-scripted页面）。Unobtrusive强调将HTML代码、CSS代码、JavaScript代码分离：

HTML代码——什么内容（content）

CSS代码——如何显示出来（display）

JavaScript代码——呈现什么样的行为（behavior）

呵呵，这三者好象有点MVC的味道！

4、内容的可访问性（Web Content Accessibility）

HTML Elements的行为表示为鼠标/键盘事件，但很少有Scripters会考虑用户没有鼠标的情况。W3C发布了一个Web Content Accessibility Guidelines，建议使用不依赖于设备的事件处理程序，如果必须使用依赖于设备的处理程序的话，尽量提供冗余的输入机制，如同时支持鼠标和键盘（"onmousedown"与"onkeydown"，"onmouseup“与"onkeyup"，"onclick"与"onkeypress"等）。

由以上的简单介绍可以看出，Unobtrusive Scripting确实是一种“不强加于人的，优雅的，温和的，君子的”程序开发方式。