1. CSS3 Pie

2. CSS3 Builder

3. CSS3 Drop shadow generator

4. Cascader

5. Border Radius.com

6. Button Maker

7. CSS3 Generator

8. Modernizr

9. HTML5 & CSS3 Support

10. CSS3 Gradient Generator

11. CSS3 Please

12. CSS3 Cheat Sheet

13. Ultimate CSS Gradient Generator

来源：VIA

下面提到的这些工具包括各种实用工具，优化器，测试和调试工具，它们可以提高开发者创建Web站点的效率。

1，JavaScript compressor and comparison tool

有许多工具可以帮助你压缩JavaScript代码，但是这个过程比较耗时，并且，对于某个特定的场景来说，很难分析出具体哪个工具表现的最好。这 个应用程序可以对那些工具的常规压缩做一个汇总统计，它可以让开发者在不安装这些工具的情况下，对在自己的JavaScript代码上应用那些工具的情况 进行比较。

具体可以参考：http://compressorrater.thruhere.net/

2，Regular expression validator tool

这个基于Web的JavaScript正则表达式验证器可以让你轻松地为JavaScript测试和编写正则表达式。这个工具可以帮助你检查语法方面的错误，此外，它还为你提供一个正则表达式库。

具体可以参考：http://tools.netshiftmedia.com/regexlibrary/

3，Regular expression generator

在IE中，这个脚本运行在 JDC 1.0.3 之上，这就是它在 Firefox，Opera 和 Safari 上运行的稍微快一些的原因。

具体可以参考：http://www.jslab.dk/tools.regex.php

4，Jsbeautifier

这个微型的美化器可以重新调整 bookmarklet 和丑陋的JavaScript的格式和缩进，也可以对使用流行的 Dean Edward 的 Packer 打包的脚本进行拆包，对通过javascriptobfuscator.com 混淆的脚本进行反混淆。

具体可以参考：http://jsbeautifier.org/

5，Jsbin

JS Bin是一个开源的，协同的JavaScript调试工具。

具体可以参考：http://jsbin.com/

6，Jslint

JSlint会对JavaScript的源代码进行扫描。如果它发现了一个问题，会返回一个描述这个问题的消息和源代码中的大概位置。这个问题不一 定是一个语法错误（虽然通常情况下，这个问题都是一个语法错误）。JSLint 会发现一些样式约定和结构问题。它无法证明你的程序是正确的。它只能帮助你发现一些问题。

具体可以参考：http://www.jslint.com/

7，Rockstarapps

Rockstarapps 的使命比较简单：给开发者提供一套工具，让他们可以在云中创建经过高度优化的Web应用程序。

具体可以参考：http://rockstarapps.com/joomla-1.5.8/home.html

8，Prettyprinter

这是一个源代码美化器（源代码格式化器），和缩进的效果是类似的。

具体可以参考：http://www.prettyprinter.de/

9，Pixastic

Pixastic是一个实验性的库，使用这个库，你只需要一点点的 JavaScript 代码，就可以执行各种图像操作。它支持的效果包括淡化/灰度调整，倒置，翻转，亮度/对比度的调整，色调/饱和度，浮现，模糊，等等。

具体可以参考：http://www.pixastic.com/

10，Extjs

构建丰富的，可持续发展的Web应用程序比以往更加快捷了。许多著名的公司（Adobe, Amazon, CNN 等）都在使用extjs。

具体可以参考：http://www.sencha.com/  

11，Slickspeed

各种测试在一个中立的环境中运行，在主要的JavaScript测试中，既不包括库也不包括框架，这样可以避免偏颇。

具体可以参考：http://mootools.net/slickspeed/

12，Scriptalizer

对于那些在互联网上部署和传输的解释性语言（例如：JavaScript）来说，对源代码进行最小化是很有帮助的，因为这可以减少需要传输的数据量。

具体可以参考：http://www.scriptalizer.com/

13，Yui compressor

YUI Compressor 是100%安全的 JavaScript 最小化器，它比大多数其他工具的压缩比都要高。在YUI库上的测试表明，和 JSMin 比起来，它可以节省超过20%的体积（在HTTP压缩以后，这个数字是10%）。

具体可以参考：http://developer.yahoo.com/yui/compressor/

14，Js minifier

具体可以参考：http://fmarcia.info/jsmin/test.html

15，Jslitmus

JSLitmus 是一个轻量级的工具，主要用于创建 ad-hoc JavaScript benchmark tests。

具体可以参考：http://broofa.com/Tools/JSLitmus/

16，Js regular expression tester

这个方便的实用程序可以在一个浏览器中，使用 JavaScript 来测试 JavaScript 正则表达式。它的界面和其他正则表达式测试工具类似，但是，和其他工具不同的是，它用JavaScript 测试正则表达式的 JavaScript 实现。

具体可以参考：http://www.codeproject.com/KB/scripting/regex2.aspx

17，Qooxdoo

qooxdoo是一个集综合性和创新性于一身的框架，它主要用于创建富互联网应用程序（RIA）。面向对象的 JavaScript 可以让开发者构建跨浏览器的应用程序。无须掌握HTML, CSS的知识，也无须掌握 DOM 知识。

具体可以参考：http://qooxdoo.org/

18，JavascriptMVC

JavascriptMVC是一个开源的框架，它融合了企业级的 JavaScript 开发方面的最佳理念。它可以通过执行最佳实践，增加可维护性，和推广约定优于配置的理念等方式来帮助你成功地完成项目。

具体可以参考：http://javascriptmvc.com/

19，GNUcitizen

为了把JavaScript攻击向量和其他的客户端和服务端技术组合在一起，AttackAPI提供了简单而直观的编程界面。

具体可以参考：http://www.gnucitizen.org/blog/attackapi/

20，Jsfuzzer

这个 fuzzing 工具支持事件，标签，样式和 HTML 属性的 fuzzing。你可以使用各种深度的不完整标签，也可以对所有参数进行随机排列。它还包含一个带有所有新的攻击向量的数据库。

具体可以参考：http://code.google.com/p/jsfuzzer/

21，J3unit

J3Unit是一个面向对象的 JavaScript 单元测试框架。J3Unit可以直接在Web浏览器中运行JavaScript测试，也可以自动地运行 JUnit 和Jetty。J3Unit是建立在JSUnit 和 Script.aculo.us 基础之上的，它提供了一种更好的方式来自动化JavaScript单元测试。

具体可以参考：http://j3unit.sourceforge.net/

22，Jsunit

JsUnit是一个客户端（浏览器内）JavaScript单元测试框架。它实际上是JUnit到JavaScript的一个通道。此外，它还包括一个平台，这个平台可以自动地执行多个浏览器和运行不同的操作系统的多台机器上的测试。

具体可以参考：http://www.jsunit.net/

23,Firebug

Firebug是和 Firefox 集成在一起的，当你浏览页面的时候，你随时可以使用它提供的丰富的Web开发工具。在任何一个Web页面中，你都可以实时地编辑，调试和监控 CSS，HTML，和JavaScript。

具体可以参考：http://getfirebug.com/

24，Venkman

Venkman 是 Mozilla 的 JavaScript 调试器的代号。Venkman 旨在为基于 Gecko 的浏览器（即：Firefox 3.x,Netscape 7.x 系列的浏览器）提供一个强大的 JavaScript 调试环境。

具体可以参考：http://www.mozilla.org/projects/venkman/

25，Drosera

为了调试你的应用程序中的 JavaScript 代码，你需要为你的应用程序指定一个默认的“bundle identifier”。此外，你还需要使用 TOT WebKit 框架来发布你的应用程序。通过 WebKitTools/Scripts 内的 run-webkit-app 脚本，你可以轻松地完成这些工作，然后，你会发现你的应用程序已经显示在 Drosera 的窗口中了。

具体可以参考：http://webkit.org/blog/61/introducing-drosera/

26，Dragonfly

欢迎 Opera Dragonfly 的 alpha版的到来，这是一个为基于 Presto 的 Opera 浏览器而提供的功能完备的调试环境。Opera Dragonfly 提供的那些工具可以让你更快速，更轻松地进行开发，它们可以调试你的 JavaScript 代码，也可以检查DOM，CSS，网络流量和数据存储。Opera Dragonfly 内置的远程调试功能让移动开发变得前所未有的轻松。

具体可以参考：http://www.opera.com/dragonfly/

27，Nitobibug

对于专家和新手来说，NitobiBug 都是一个实用的工具。它让 JavaScript 和 DOM 问题的调试变得更加快捷，更加简单。

具体可以参考：http://www.nitobibug.com/

28，Wavemaker

具体可以参考：http://www.wavemaker.com/

29，Jaxer

Jaxer是一个 Aptana Ajax Server，它内置在 Aptana Studio 中。Jaxer可以让你在提供那个页面以前或者是在回调期间，在服务器上执行 JavaScript 代码。

具体可以参考：http://jaxer.org/

30，Jxlib

一个 JavaScript 库，主要用于创建基于传说中的 MooTools 库的图形化的用户界面。

具体可以参考：http://jxlib.org/

31，Dojotoolkit

Dojo 可以节省你的时间，提供强大的性能，缩短你的开发过程。为了提供良好的Web体验，有经验的开发人员都会使用这个工具包。

原文地址：http://developer.51cto.com/art/201012/236740.htm

先看一下我们遇到了什么问题？

在我们的白社会里，需要嵌入第三方应用，而嵌入的方式是使用 iframe，为了页面美观，这里就有一个最简单的需求：iframe 的高度需要跟随其本身内容的变化而实时变化，这就要求主页面根据 iframe 的内容实时的去设置其样式 height 值，但是因为第三方应用和白社会不属于同一个域，所以给实现带来了一点小小的麻烦，所以才有以下的一些讨论…

仔细分析一下问题的实质是什么呢？

其实这里需要解决的是，在一个页面 A 中嵌入一个iframe B，A 和 B 不属于同一个域，但是 A 和 B 需要进行一些必要的通信，传递少量的数据信息，所以问题的实质就是主页面与跨域 iframe 之间怎么通信，也就是怎么传递数据信息

下面就针对两种不同的需求，总结一些比较简单，常用和稳定的解决方案。

• 主页面A 怎么向 iframe B 传递数据
• iframe B 怎么向 主页面A 传递数据

需求一：主页面A 怎么向 iframe B 传递数据呢？

这种方式，是主页面需要给 iframe B 传递数据，然后 iframe B 获得到数据后进行特定的处理

实现方式

实现的技巧就是利用 location 对象的 hash 值，通过它传递通信数据，我们只需要在主页面A中设置 iframe B 的 src 后面多加个 #data 字符串（data就是你要传递的数据），如下图所示：

然后在 iframe B 中通过某种方式能即时的获取到这儿 data 就可以了，其实常用的一种方式就是：

• 1. 在 iframe B 中通过 setInterval 方法设置定时器， 监听 location.href 的变化即可获得上面的 data 信息
• 2. 然后 iframe B 就能根据这个 data 信息进行相应的逻辑处理

需求二：iframe B 怎么向 主页面A 传递数据呢？

这种方式，是 iframe B 需要给主页面传递数据，然后主页面根据获得到数据后进行特定的处理

实现方式

实现的技巧就是利用一个代理 IframeC，它嵌入到 iframe B 中，并且和主页面A必须保持是同域，然后我们通过它充分利用上面第一种通信方式的实现原理就能把 iframe B 的数据传递给 iframeC，接下来的问题就是怎么让iframeC把数据传递给主页面A ，如下图所示：

因为，iframeC 和主页面是同域的，所以它们之间传递数据就变得简单多了，我们这里的方式就是使用一个经常使用的属性 window.top (也可以使用window.parent.parent)，它返回对载入浏览器得最顶层 window 对象的引用，这样我们就能直接条用主页面A中方法啦，哈哈哈，简单吧。

到此，我们做个简单分析总结

当然还有其他一些方式，也都测试过，不是浏览器兼容性不好，就是实现起来复杂，通过以上方式就能很方便的在跨域的 iframe 和主页面之间传递数据了，当然也就能解决上面提到的设置 iframe 高度的问题了，但是这种实现方式的前提也是最大的缺点就是 iframe 中的内容必须是我们可控的，但是至少我们这种实现方式是建立在浏览器的安全规则之上的，没有破坏应用本身的安全性。

进一步叨叨，实现时需要考虑的一些细节

上面的分析，其实只是一个简单的原理，在白社会里，虽然我们目前的需求还仅仅是实现第三方 iframe 形式的 App 的高度自适应，但是我们在实现的时候尽量考虑到了易用，可扩展性和可维护性，比如：

• 让第三方 App 只需加载一个我们提供的JS种子文件就能很方便的使用我们为其提供的各种工具
• 上面的各种工具，我们采用包的形式进行组织，最大化的实现按需加载
• 第一条中的JS种子文件只提供基础的方法实现，并且把最常用的工具包放在里面，比如高度自适应
• 通过种子文件，我们还提供给第三方 App 一些常用的JS工具包，而且直接使用的类似YUI3模块的动态加载机制就可使用指定的工具包
• 对第三方 App 和 主页面传递的数据进行分类（自我调用，登录验证，传递数据等等）
• 传递的数据使用满足特定规范的JSON格式，并通过统一的服务出口发出去，主页面提供一个统一服务接口解析数据，并根据规范调用相应的方法
• 还有，就是版本控制的问题，为了尽量减少给第三方App带来影响，以上所有这些JS文件的版本都是采用向后兼容的策略，小版本使用服务器设置SQUID缓存特定频率的失效时间实现，大版本更新根据用户自己的需求手动更改
• 当然，以上可能不是最优的解决方案，只是希望能给你一些帮助和引导，我们也在逐步的改进我们的一些实现方式，比如版本控制这块儿，我们也有一些问题需要解决

回过头来，我们再看点儿具体的代码

主页面A的源码

iframeB（iframePage.html）的源码

iframeC（iframePageC.html）的源码

完结了

希望以上简单的分析能给你当前的项目有一些些帮助，大家多多拍砖啊~~~~~~~最后一天上班，下周休假，哇哈哈，祝大家新春愉快~~

　　它没有"子类"和"父类"的概念，也没有"类"(class)和"实例"(instance)的区分，全靠一种很奇特的"原型链"(prototype chain)模式，来实现继承。

　　我花了很多时间，学习这个部分，还做了很多笔记。但是都属于强行记忆，无法从根本上理解。

　　直到昨天，我读到法国程序员Vjeux的解释，才恍然大悟，完全明白了Javascript为什么这样设计。

　　下面，我尝试用自己的语言，来解释它的设计思想。彻底说明白prototype对象到底是怎么回事。其实根本就没那么复杂，真相非常简单。

　　一、从古代说起

　　要理解Javascript的设计思想，必须从它的诞生说起。

　　1994年，网景公司(Netscape)发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是， 这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。比如，如果网页上有一栏"用户名"要求填写，浏览器就无法判断访问者是否真的填写了，只有让服 务器端判断。如果没有填写，服务器端就返回错误，要求用户重新填写，这太浪费时间和服务器资源了。

　　因此，网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。工程师Brendan Eich负责开发这种新语言。他觉得，没必要设计得很复杂，这种语言只要能够完成一些简单操作就够了，比如判断用户有没有填写表单。

　　1994年正是面向对象编程(object-oriented programming)最兴盛的时期，C++是当时最流行的语言，而Java语言的1.0版即将于第二年推出，Sun公司正在大肆造势。

　　Brendan Eich无疑受到了影响，Javascript里面所有的数据类型都是对象(object)，这一点与Java非常相似。但是，他随即就遇到了一个难题，到底要不要设计"继承"机制呢?

　　二、Brendan Eich的选择

　　如果真的是一种简易的脚本语言，其实不需要有"继承"机制。但是，Javascript里面都是对象，必须有一种机制，将所有对象联系起来。所以，Brendan Eich最后还是设计了"继承"。

　　但是，他不打算引入"类"(class)的概念，因为一旦有了"类"，Javascript就是一种完整的面向对象编程语言了，这好像有点太正式了，而且增加了初学者的入门难度。

　　他考虑到，C++和Java语言都使用new命令，生成实例。

　　C++的写法是：

　　ClassName *object = new ClassName(param);

　　Java的写法是：

　　Foo foo = new Foo();

　　因此，他就把new命令引入了Javascript，用来从原型对象生成一个实例对象。但是，Javascript没有"类"，怎么来表示原型对象呢?

　　这时，他想到C++和Java使用new命令时，都会调用"类"的构造函数(constructor)。他就做了一个简化的设计，在Javascript语言中，new命令后面跟的不是类，而是构造函数。

　　举例来说，现在有一个叫做DOG的构造函数，表示狗对象的原型。

　　function DOG(name){

　　this.name = name;

　　}

　　对这个构造函数使用new，就会生成一个狗对象的实例。

　　var dogA = new DOG('大毛');

　　alert(dogA.name); // 大毛

　　注意构造函数中的this关键字，它就代表了新创建的实例对象。

　　三、new运算符的缺点

　　用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。

　　比如，在DOG对象的构造函数中，设置一个实例对象的共有属性species。

　　function DOG(name){

　　this.name = name;

　　this.species = '犬科';

　　}

　　然后，生成两个实例对象：

　　var dogA = new DOG('大毛');

　　var dogB = new DOG('二毛');

　　这两个对象的species属性是独立的，修改其中一个，不会影响到另一个。

　　dogA.species = '猫科';

　　alert(dogB.species); // 显示"犬科"，不受dogA的影响

　　每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。

　　四、prototype属性的引入

　　考虑到这一点，Brendan Eich决定为构造函数设置一个prototype属性。

　　这个属性包含一个对象(以下简称"prototype对象")，所有实例对象需要共享的属性和方法，都放在这个对象里面;那些不需要共享的属性和方法，就放在构造函数里面。

　　实例对象一旦创建，将自动引用prototype对象的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。

　　还是以DOG构造函数为例，现在用prototype属性进行改写：

　　function DOG(name){

　　this.name = name;

　　}

　　DOG.prototype = { species : '犬科' };

　　var dogA = new DOG('大毛');

　　var dogB = new DOG('二毛');

　　alert(dogA.species); // 犬科

　　alert(dogB.species); // 犬科

　　现在，species属性放在prototype对象里，是两个实例对象共享的。只要修改了prototype对象，就会同时影响到两个实例对象。

　　DOG.prototype.species = '猫科';

　　alert(dogA.species); // 猫科

　　alert(dogB.species); // 猫科

　　五、总结

　　由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像"继承"了prototype对象一样。

诞生记，诞生记，诞生记

 　　"1994年，网景公司(Netscape)发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但 是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。......网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。 "

　　网页脚本语言到底是什么语言?网景公司当时有两个选择：一个是采用现有的语言，比如Perl、Python、Tcl、Scheme等等，允许它们直接嵌入网页;另一个是发明一种全新的语言。

　　这两个选择各有利弊。第一个选择，有利于充分利用现有代码和程序员资源，推广起来比较容易;第二个选择，有利于开发出完全适用的语言，实现起来比较容易。

　　到底采用哪一个选择，网景公司内部争执不下，管理层一时难以下定决心。

　　3.

　　就在这时，发生了另外一件大事：1995年Sun公司将Oak语言改名为Java，正式向市场推出。

　　Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运行"(Write Once, Run Anywhere)，它看上去很可能成为未来的主宰。

　　网景公司动了心，决定与Sun公司结成联盟。它不仅允许Java程序以applet(小程序)的形式，直接在浏览器中运行;甚至还考虑直接将Java作为脚本语言嵌入网页，只是因为这样会使HTML网页过于复杂，后来才不得不放弃。

　　总之，当时的形势就是，网景公司的整个管理层，都是Java语言的信徒，Sun公司完全介入网页脚本语言的决策。 因此，Javascript后来就是网景和Sun两家公司一起携手推向市场的，这种语言被命名为"Java+script"并不是偶然的。

　　4.

　　此时，34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他。

　　Brendan Eich的主要方向和兴趣是函数式编程，网景公司招聘他的目的，是研究将Scheme语言作为网页脚本语言的可能性。Brendan Eich本人也是这样想的，以为进入新公司后，会主要与Scheme语言打交道。

　　仅仅一个月之后，1995年5月，网景公司做出决策，未来的网页脚本语言必须"看上去与Java足够相似"，但是比Java简单，使得非专业的 网页作者也能很快上手。 这个决策实际上将Perl、Python、Tcl、Scheme等非面向对象编程的语言都排除在外了。

　　Brendan Eich被指定为这种"简化版Java语言"的设计师。

　　5.

　　但是，他对Java一点兴趣也没有。为了应付公司安排的任务，他只用10天时间就把Javascript设计出来了。

　　由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。如果Brendan Eich预见到，未来这种语言会成为互联网第一大语言，全世界有几百万学习者，他会不会多花一点时间呢?

　　总的来说，他的设计思路是这样的：

　　(1)借鉴C语言的基本语法;

　　(2)借鉴Java语言的数据类型和内存管理;

　　(3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位;

　　(4)借鉴Self语言，使用基于原型(prototype)的继承机制。

　　所以，Javascript语言实际上是两种语言风格的混合产物----(简化的)函数式编程+(简化的)面向对象编程。 这是由Brendan Eich(函数式编程)与网景公司(面向对象编程)共同决定的。

　　6.

　　多年以后，Brendan Eich还是看不起Java。

　　他说：

　　"Java(对Javascript)的影响，主要是把数据分成基本类型(primitive)和对象类型(object)两种，比如字符串和字符串对象，以及引入了Y2K问题。这真是不幸啊。"

　　把基本数据类型包装成对象，这样做是否可取，这里暂且不论。Y2K问题则是直接与Java有关。根据设想，Date.getYear()返回的应该是年份的最后两位：

　　var date1 = new Date(1999,0,1);

　　var year1 = date1.getYear();

　　alert(year1); // 99

　　但是实际上，对于2000年，它返回的是100!

　　var date2 = new Date(2000,0,1);

　　var year2 = date2.getYear();

　　alert(year2); // 100

　　如果用这个函数生成年份，某些网页可能出现"19100"这样的结果。这个问题完全来源于Java，因为Javascript的日期类直接采用 了java.util.Date函数库。Brendan Eich显然很不满意这个结果，这导致后来不得不添加了一个返回四位数年份的Date.getFullYear()函数。

　　如果不是公司的决策，Brendan Eich绝不可能把Java作为Javascript设计的原型。作为设计者，他一点也不喜欢自己的这个作品：

　　"与其说我爱Javascript，不如说我恨它。它是C语言和Self语言一夜情的产物。十八世纪英国文学家约翰逊博士说得好：'它的优秀之 处并非原创，它的原创之处并不优秀。' (the part that is good is not original, and the part that is original is not good.)"

　　Web应用程序与网站之间的区别

　　首先，我要说明，开发一个web应用程序跟开发一个网站是不一样的。虽然在总体上有很大相似之处，但开发它们所需要的时间有巨大的差别。那究竟web应用程序和网站有什么不同呢?通常，维基百科能帮助我们解释这个问题，让我们来看看维基百科是如何定义应用软件的：

　　应用软件，通常也被称作应用，指的是专门为帮助用户去执行一个或多个相关特定任务而设计的计算机软件。企业软件，会计软件，办公套件，绘图软件，媒体播放器等都属于这种软件。

　　跟应用软件相对照的是系统软件和中间件，它们管理计算机效能，管理如何跟计算机集成，但通常这些工作并不会直接反映到使用户受益的任务执行上。 举个例子，一个不是很恰当的实体类比，应用软件跟系统软件之间的关系就好比一个电灯泡和一个发电厂之间的关系，发电厂(系统软件)只是产生电能，它自己没 有任何真正的用途，除非利用一个电灯泡这样的应用工具才能为用户提供服务。

　　Web应用程序的开发过程

　　现在特征已经弄清楚了，我们就可以开始定义开发一个web应用程序的整个过程了。当然，这依赖于工程的大小，过程中的某些步骤可能很小，在你的 脑海里就能完成这种工作，但把事情整个的了解一下总是有好处的。同时还有一点很重要的你要明白，这篇文章并不会对每个步骤进行深层次的描述。

　　步骤一：分析

　　开发一个web应用的第一步是分析你的需求。你此时应该定义出一个尽量周全的你的应用应该提供的功能清单。如果是你为一个客户做这些工作，你需 要明白他们想要什么(要确保你们对方都知道对方在说些什么)。从你们的讨论中，你能总结出需求和软件规格。你即使是为自己开发，我也建议你把希望这个 web应用能够做的功能写下来。

　　步骤二：设计

　　一旦你弄清楚了这个web应用需要做哪些事情，你就可以开始设计了。这个步骤通常会反反复复进行很多次，每一次都把设计细化一些。你第一要做的 是画出页面流程图(画在纸上，或使用软件工具，凭各自所好吧。我喜欢用纸，这样我可以做更快速的改变)。页面流程图通常是很抽象的黑白绘画，画出你将要实 现的web应用的样子(你可以加一些色彩，但尽量保持简单)。

　　这个步骤能够让你知道你的应用最终会是个什么样子。跟37signals倡导的相反，我建议使用一些词语描述，适度细化。当我想到一个很好的想 法时，或想到事情该如何做时，我会把它标注到纸上(例如，当点击这个按钮时应该使另外一个元素改变或隐藏，我会把这写在流程图上)。

　　当你对做出的草图满意后，你可以开始制作实体模型了。

　　实体模型仍然是些图案，但有色彩和细节。最终的实体模型看起来应该像你将要实现的web应用的一个截屏图。如果你为一个客户开发，他会看看这些东西，并给你他的认可。然而，很多人都喜欢跳过这一步(大多数都是非设计人员)，他们喜欢直接奔向网页原型。

　　原型是用HTML开发出来，使用CSS渲染(有时也是有Javascript)。页面布局要做出来，链接能够点，颜色，字体，字体大小要设定好 (如果你做了实体模型，这个会很容易)。这一步非常的重要，因为这里所有的东西都能用于你最终的应用中。如果允许的话，在你的原型上做一些可用性测试，从 长期的效果来看，这能使你避免大量的失误。

　　在这个步骤的最后，你基本上就知道了你的web应用是如何组织到一起的了。登录页面有些什么，用户如何从主页转向到各个页面。

　　步骤三：实现 选择一个框架

　　现在我们已经知道了要去开发什么东西，那就要把它做出来。这一部分的工作很多，你大部分的时间都要花在这个上面。你第一个要做的决定是如何着手，采用什么样的技术，什么框架。你有很多选择的余地，你需要选出一个适合你的。下面是一个最常用的框架的列表:

　　ASP.NET

　　PHP 上的任何一个流程的框架

　　Python with Django

　　Ruby on Rails

　　没有一个明确的标准说哪个框架最好。它们都各有不同，每个都有自己的长处。最重要的是你要知道它们任何一个都能让你开发出好用的web应用。

　　开发

　　一旦你知道了如何去开发，那就要甩开臂膀开干了。这个开发工作可以看作有很多块，但说到底，这都是标准的编程活动了。在后台，你要创建类，对 象，服务，过程，以及持久层来把这些对象保存到数据库中。后台是整个应用的核心，对任何应用来说，它跟普通的编程没有什么区别。接着是前台的开发，你现在 编写的代码才是真正给用户使用的操作界面。你把后台的程序和原型界面集成到一起，把系统各部分集成到一起。你还可以把你在开发过程中想到的一些很炫的小功 能用JavaScript实现。

　　再说一次，有很多种途径可以实现后台程序。建议你去读一读跟你选择的框架相关的资料，弄清楚如何实现这一部分的工作。通常，这些知识会跟面向对象编程有关，但有些框架正在慢慢的向领域驱动设计发展。

　　步骤四：打磨抛光

　　现在应用程序已经开发出来，各个独立的模块也集成到了一起。你需要通过测试来确保你在步骤一中定义的需求和软件规格是否被实现(这个问题在你开 发的整个过程中都要记在脑中)。你要确保那些愚蠢的用户不能通过试图做一些你还没有实现的操作而把你的应用弄坏(参考白盒和黑盒测试)。你同时还要确保你 的程序能够在各种浏览器里(希望不是IE6)都能正确的运行。

　　现在也是你做一些小的调整，改进你的应用程序给人的感觉的时候，让它趋于完美。

　　步骤五：发布和后续工作

　　这最后一步(但不是就此完结)是发布你的应用，让用户能够真正使用它(如果这个应用是个公众开发的应用，别忘了做新闻宣传)。如果你愿意，先发 布一个Beta版，这样只有一小部分用户能够发现你的应用里的大问题(因为你的程序里肯定会有bug)，他们会帮助你改进程序的质量。不要忙着增加功能， 要专注于把你目前的程序变的稳固。

　　当经过了beta阶段，你的程序已经变得十分的稳固，听取用户反馈的意见，自己试用一下自己的应用，你可以开始思考如何使应用变的更好。找出不 和谐的地方，消除掉。以后每次的迭代都要经过上面所说的五个步骤，但就像我最初说的，你现在已经有了一个可以运行的应用程序，你很容易直接在心里完成这些 步骤，直接奔向在代码里测试你的功能。

　　恭喜，你已经自豪的成为一个web应用程序的作者了。

　　英文原文：How to develop web applications

类似这样的东西，我以前也做个一下。不过是很简单的一种，也是用php写的，就是对文件进行读写删操作。我的这里下载，打开file.php就可以用了。

今天偶然发现eXtplorer真是相见恨晚，泪流满面，功能如此强大！

eXtplorer 的详细功能

• 可以通过鼠标拖拉复制和移动文件和文件夹
• 动态的目录树，并且能够根据需要显示子目录
• 可以在线修改文件，并且代码高亮显示
• 可以重命名，删除和创建文件和文件夹
• 可以通过 FTP 方式或者直接访问文件
• 并且可以修改文件的权限和属性
• 可以上传和下载文件
• 可以压缩文件，或者解开压缩包，支持 ZIP, Tar, Tar/GZ, Tar/BZ 四种格式
• 可以创建多个用户，并且可以给用户赋予不同的权限，如只能“浏览”，“编辑”，和“管理”
• 现在还可以作为 Joomla! 和 Mambo 这两个 CMS 程序的部件，不过遗憾还没有 WordPress 方面的插件。

安装 eXtplorer

安装 eXtplorer 需要以下几步：

1. 首先你要确保你服务器的 PHP 版本>4.3
2. 解压缩下载下来的压缩包
3. 使用你的 FTP 客户端上传源代码到服务器上的某个目录下 如 /extplorer
4. 设置 extplorer 的目录可写，并且设置 /ftp_tmp 目录的权限为 777
5. 在浏览器访问 http:///extplorer （默认帐号和密码都是 admin），他会弹出一个框让你里修改密码。一定要修改，不然让人获取权限，就可以删除你服务器上所有文件。

如果你不能修改你的 admin 密码，可能是因为你的用户文件不可写，在 FTP 中，把 /config 目录下的 “.htusers.php” 文件设置为可写。

下载：eXtplorer
中文介绍：eXtplorer：基于 PHP 和 Javascript 的文件管理程序

.pro-new-img { top:-20px; right:-20px; position:absolute; background:transparent url(http://st4.yxp.126.net/img/store/p_new.png?v=1) no-repeat 0 0; width:58px; height:59px; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://st4.yxp.126.net/img/store/p_new.png?v=1', sizingMethod='crop');
}

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在 JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档 在同一域下的内容。

JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略， 在baidu.com下的页面中包含的JavaScript代码，不能访问在google.com域名下的页面内容；甚至不同的子域名之间的页面也不能通 过JavaScript代码互相访问。对于Ajax的影响在于，通过XMLHttpRequest实现的Ajax请求，不能向不同的域提交请求，例如，在 abc.example.com下的页面，不能向def.example.com提交Ajax请求，等等。

然而，当进行一些比较深入的前端编程的时候，不可避免地需要进行跨域操作，这时候“同源策略”就显得过于苛刻。本文就这个问题，概括了跨域所需要的一些技术。

下面我们分两种情况讨论跨域技术：首先讨论不同子域的跨域技术，然后讨论完全不同域的跨域技术。

（一）不同子域的跨域技术。

我们分两个问题来分别讨论：第一个问题是如何跨不同子域进行JavaScript调用；第二个问题是如何向不同子域提交Ajax请求。

先来解决第一个问题，假设example.com域下有两个不同子域：abc.example.com和def.example.com。现在假设在def.example.com下面有一个页面，里面定义了一个JavaScript函数：

function funcInDef() {

.....

}

我们想在abc.example.com下的某个页面里调用上面的函数。再假设我们要讨论的abc.example.com下面的这个页面是以iframe形式嵌入在def.example.com下面那个页面里的，这样我们可能试图在iframe里做如下调用：

window.top.funcInDef();

好，我们注意到，这个调用是被前面讲到的“同源策略”所禁止的，JavaScript引擎会直接抛出一个异常。

为了实现上述调用，我们可以通过修改两个页面的domain属性的方法做到。例如，我们可以将上面在abc.example.com和def.example.com下的两个页面的顶端都加上如下的JavaScript代码片段：

<script type="text/javascript">

document.domain = "example.com";

</script>

这样，两个页面就变为同域了，前面的调用也可以正常执行了。

这 里需要注意的一点是，一个页面的document.domain属性只能设置成一个更顶级的域名（除了一级域名），但不能设置成比当前域名更深层的子域 名。例如，abc.example.com的页面只能将它的domain设置成example.com，不能设置成 sub.abc.example.com，当然也不能设置成一级域名com。

上面的例子讨论的是两个页面属于iframe嵌套关系的情况，当两个页面是打开与被打开的关系时，原理也完全一样。

下面我们来解决第二个问题：如何向不同子域提交Ajax请求。

通常情况下，我们会用与下面类似的代码来创建一个XMLHttpRequest对象：

factories = [

function() { return new XMLHttpRequest(); },

function() { return new ActiveXObject("Msxml2.XMLHTTP"); },

function() { return new ActiveXObject("Microsoft.XMLHTTP"); }

];

function newRequest() {

for(var i = 0; i < factories.length; i++) {

try{

var factory = factories[i];

return factory();

} catch(e) {}

}

return null;

}

上 面的代码中引用ActiveXObject，是为了兼容IE6系列浏览器。每次我们调用newRequest函数，就获得了一个刚刚创建的Ajax对象， 然后用这个Ajax对象来发送HTTP请求。例如，下面的代码向abc.example.com发送了一个GET请求：

var request = newRequest();

request.open("GET", "http://abc.example.com" );

request.send(null);

假设上面的代码包含在一个abc.example.com域名下的页面里，则这个GET请求可以正常发送成功，没有任何问题。然而，如果现在要向def.example.com发送请求，则出现跨域问题，JavaScript引擎抛出异常。

解 决的办法是，在def.example.com域下放置一个跨域文件，假设叫crossdomain.html；然后将前面的newRequest函数的 定义移到这个跨域文件中；最后像之前修改document.domain值的做法一样，在crossdomain.html文件和 abc.example.com域下调用Ajax的页面顶端，都加上：

<script type="text/javascript">

document.domain = "example.com";

</script>

为了使用跨域文件，我们在abc.example.com域下调用Ajax的页面中嵌入一个隐藏的指向跨域文件的iframe，例如：

<iframe name="xd_iframe" style="display:none" src="http://def.example.com/crossdomain.html"></iframe>

这时abc.example.com域下的页面和跨域文件crossdomain.html都在同一个域（example.com）下，我们可以在abc.example.com域下的页面中去调用crossdomain.html中的newRequest函数：

var request = window.frames["xd_iframe"].newRequest();

这样获得的request对象，就可以向http://def.example.com发送HTTP请求了。

（二）完全不同域的跨域技术。

如果顶级域名都不相同，例如example1.com和example2.com之间想通过JavaScript在前端通信，则所需要的技术更复杂些。

在讲解不同域的跨域技术之前，我们首先明确一点，下面要讲的技术也同样适用于前面跨不同子域的情况，因为跨不同子域只是跨域问题的一个特例。当然，在恰当的情况下使用恰当的技术，能够保证更优的效率和更高的稳定性。

简言之，根据不同的跨域需求，跨域技术可以归为下面几类：

1. JSONP跨域GET请求
2. 通过iframe实现跨域
3. flash跨域HTTP请求
4. window.postMessage

下面详细介绍各种技术。

1. JSONP。

利用在页面中创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP，这项技术可以解决跨域提交Ajax请求的问题。JSONP的工作原理如下所述：

假 设在http://example1.com/index.php这个页面中向http://example2.com/getinfo.php提交 GET请求，我们可以将下面的JavaScript代码放在http://example1.com/index.php这个页面中来实现：

var eleScript= document.createElement("script");

eleScript.type = "text/javascript";

eleScript.src = "http://example2.com/getinfo.php";

document.getElementsByTagName("HEAD")[0].appendChild(eleScript);

当GET请求从http://example2.com/getinfo.php返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用http://example1.com/index.php页面中的一个callback函数。

JSONP 的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要 XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

2. 通过iframe实现跨域。

iframe跨域的方式，功能强于JSONP，它不仅能用来跨域完成HTTP请求，还能在前端跨域实现JavaScript调用。因此，完全不同域的跨域问题，通常采用iframe的方式来解决。

与 JSONP技术通过创建<script>节点向不同的域提交GET请求的工作方式类似，我们也可以通过在 http://example1.com/index.php页面中创建指向http://example2.com/getinfo.php的 iframe节点跨域提交GET请求。然而，请求返回的结果无法回调http://example1.com/index.php页面中的 callback函数，因为受到“同源策略”的影响。

为了解决这个问题，我们需要在example1.com下放置一个跨域文件，比如路径是http://example1.com/crossdomain.html。

当http://example2.com/getinfo.php这个请求返回结果的时候，它大体上有两个选择。

第 一个选择是，它可以在iframe中做一个302跳转，跳转到跨域文件http://example1.com/crossdomain.html，同时 将返回结果经过URL编码之后作为参数缀在跨域文件URL后面，例如http://example1.com /crossdomain.html?result=<URL-Encoding-Content>。

另一个选择是，它可以在返回的页面中再嵌入一个iframe，指向跨域文件，同时也是将返回结果经过URL编码之后作为参数缀在跨域文件URL后面。

在 跨域文件中，包含一段JavaScript代码，这段代码完成的功能，是从URL中提取结果参数，经过一定处理后调用原来的 http://example1.com/index.php页面中的一个预先约定好的callback函数，同时将结果参数传给这个函数。http: //example1.com/index.php页面和跨域文件是在同一个域下的，因此这个函数调用可以通过。跨域文件所在iframe和原来的 http://example1.com/index.php页面的关系，在前述第一种选择下，后者是前者的父窗口，在第二种选择下，后者是前者的父窗口 的父窗口。

根据前面的叙述，有了跨域文件之后，我们就可以实现通过iframe方式在不同域之间进行JavaScript调用。这个调用过 程可以完全跟HTTP请求无关，例如有些站点可以支持动态地调整在页面中嵌入的第三方iframe的高度，这其实是通过在第三方iframe里面检测自己 页面的高度变化，然后通过跨域方式的函数调用将这个变化告知父窗口来完成的。

既然利用iframe可以实现跨域JavaScript调用， 那么跨域提交POST请求等其它类型的HTTP请求就不是难事。例如我们可以跨域调用目标域的JavaScript代码在目标域下提交Ajax请求 （GET/POST/etc.），然后将返回的结果再跨域传原来的域。

使用iframe跨域，优点是功能强大，支持各种浏览器，几乎可以完成任何跨域想做的事情；缺点是实现复杂，要处理很多浏览器兼容问题，并且传输的数据不宜过大，过大了可能会超过浏览器对URL长度的限制，要考虑对数据进行分段传输等。

3. 利用flash实现跨域HTTP请求

据称，flash在浏览器中的普及率高达90%以上。

flash代码和JavaScript代码之间可以互相调用，并且flash的“安全沙箱”机制与JavaScript的安全机制并不尽相同，因此，我们可以利用flash来实现跨域提交HTTP请求（支持GET/POST等）。

例 如，我们用浏览器访问http://example1.com/index.php这个页面，在这个页面中引用了http://example2.com /flash.swf这个flash文件，然后在flash代码中向http://example3.com/webservice.php发送HTTP 请求。

这个请求能否被成功发送，取决于在example3.com的根路径下是否放置了一个crossdomain.xml以及这个 crossdomain.xml的配置如何。flash的“安全沙箱”会保证：仅当example3.com服务器在根路径下确实放置了 crossdomain.xml文件并且在这个文件中配置了允许接受来自example2.com的flash的请求时，这个请求才能真正成功。下面是一 个crossdomain.xml文件内容的例子：

<?xml version="1.0"?>

<cross-domain-policy>

<allow-access-from domain="example2.com" />

</cross-domain-policy>

4. window.postMessage

window.postMessage是HTML标准的下一个版本HTML5支持的一个新特性。受当前互联网技术突飞猛进的影响，浏览器跨域通信的需求越来越强烈，HTML标准终于把跨域通信考虑进去了。但目前HTML5仍然只是一个draft。

window.postMessage是一个安全的实现直接跨域通信的方法。但是目前并不是所有浏览器都能支持，只有Firefox 3、Safari 4和IE8可以支持这个调用。

使用它向其它窗口发送消息的调用方式大概如下:

otherWindow.postMessage(message, targetOrigin);

在接收的窗口，需要设置一个事件处理函数来接收发过来的消息：

window.addEventListener("message", receiveMessage, false);function receiveMessage(event){ if (event.origin!== "http://example.org:8080") return;}消息包含三个属性：data、origin（携带发送窗口所在域的真实信息）和source（代表发送窗口的handle）。

安全性考虑：使用window.postMessage，必需要使用消息的origin和source属性来验证发送者的身份，否则会造成XSS漏洞。

window.postMessage在功能上同iframe实现的跨域功能同样强大，并且使用简单，效率更高，但缺点是它目前在浏览器兼容方面有待提高。

总结完所有的跨域方式之后，我们要时刻铭记，虽然跨域技术能给你带来更多的功能，催生出更灵活和更加平台化的产品，但是功能的放开也总是意味着安全的风险。在实现跨域技术的每个步骤和细节，都要时刻在头脑中考虑到对安全带来的影响，避免成为XSS攻击的漏洞。

我自己写了个JSONP的测试页：

http://www.iebe.cn/kuayu/

在ie下模拟css3中的box-shadow（阴影）可以使用ie的Shadow（阴影）滤镜

基本语法：filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）);

注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。

IE下模拟css3中的box-shadow（阴影）代码：

演示地址：http://www.css88.com/demo/box-shadow/

John Resig演讲稿：

英文版：http://www.slideshare.net/mijia/john-resig-beijing-2010-english-version
中文版：http://www.slideshare.net/mijia/john-resig-beijing-2010

活动详见:http://news.csdn.net/a/20101118/282152.html