IT博客网-A JavaScript Fancier-随笔分类-Web开发相关知识

软件接口的规范艺术[整理]

Yemoo'S JS Blog — Mon, 31 Mar 2008 03:40:00 GMT

在软件开发中，总要制定这样那样的接口，一般来说分为两种：
1、面向用户的操作接口
2、面向开发者的程序接口

对于这两种接口的定义规范，我们应该遵循下面两点：

1、对于用户的接口（操作接口）：越简单越好。

现在的设计讲究易用性，越简单越易用的功能接口越能被用户接受，反之用户就可能远远避开。
如在某blog上看到这样的一个示例：
一个软件，用户在输入一条记录后必须点击一下输入按钮这条数据才能真正输入，如果仅仅只需要输入一条记录那么这样也没什么，但很多时候用户一次性需要输入成百上千条数据，这样每输一条数据就点击一下输入按钮，估计没有几个人能不疯掉。这个可能是软件设计者因为技术或其他原因设计的这样一个用户使用接口。而这样来要求用户，就有些过分了，用户如果欣然接受你的软件那就怪了。类似这种设计应该学习excel，用户输入一条数据后按下enter自动进行下一个输入区。
当然为用户提供越灵活自由简单的接口，后台的处理逻辑可能会越复杂，但是如果能够给用户带来更好的体验很多时候这都是值得的。

2、对于开发者的接口（大多是程序接口）：越复杂越详细越好

为什么不是越简单越好呢？因为刚才说了，这样后台逻辑处理就比较麻烦，开发难度高。
因此从开发成本和面向对象技术中的对象负责自己的原则来看，应该为每个部分制定详细的接口规范。
这样可以减少每个部分之间的耦合性，从而降低开发的难度，节约成本，。
举个例子：一个设备控制模块，他的一个使用规范是这样定义的：在调用控制命令之前，必须初始化通讯模块。有的人可能会问，难道我不能在控制软件模块加一个判断，发现通讯模块不能工作，就自己调用一下通讯模块初始化命令的功能不行吗？我们从成本角度考虑就会发现这个建议确实不行。原因是，这个不但多写了一段代码，而且还增加了模块之间的不必要的耦合度。况且，照这个思路其他模块也许也要加上这个通讯模块初始化命令，更是错上加错了。从职责角度考虑，我们给设备控制模块附加上初始化通讯模块的功能，显然也是有问题的。
越复杂的项目越要有复杂的规范，否则就可能会变得很难维护。

原文：http://blog.csdn.net/acloudhuang/archive/2007/12/14/1936057.aspx

Yemoo'S JS Blog 2008-03-31 11:40 发表评论

Web开发设计的五大准则【转】

Yemoo'S JS Blog — Mon, 31 Mar 2008 03:39:00 GMT

如果仓促而为，设计一个专题或者网站一定会成为恶梦。Web设计需要遵循一些准则并有计划地去做。

Rule #1 : 先出设计图

这是必须的。不要假设设计图在你的头脑中就开始设计web，必须要放到纸上。可以这样做：

1，  拿尺子、笔和纸，按照具体的尺寸一行一行地画下来；

2，  记得考虑分界线的长度等，这样才能符合CSS的像素；

3，  记下设计的每一个细节免得忘记，如果把所有细节都累积到最后将是巨大的麻烦。

Rule #2 :配色

这是设计的核心部分，只有颜色搭配合适才能使你的网页看起来不错。首先要决定的是主色，也即你在网页中多数使用的颜色；然后选择跟主色调搭配的第二颜色；不要选择超过三种颜色不然你的设计看起来会很乱。如果你想要更多的颜色，可以使用浅色或者深色的阴影来搭配主色调。

1，  浏览十个跟你网页有同样主色调的网页；

2，  给几个人看你的配色方案并取得反馈；

3，  从浏览的网页和反馈你将更好地完善你的颜色搭配。

Rule #3 : 从基本的版块开始着手

定下配色和设计图之后，从最基本的框架开始构建——我的意思是说不添加任何文本。因为在版面中加入文本会使得架构混乱。方法如下：

1，  每一个版块设定边界线，这样能够看到具体的尺寸和位置；

2，  对不同的版块使用不同的颜色，在完成版块后再改成你想要的颜色。

Rule #4 : 理清CSS

不要在你的HTML文件中将styling元素搞得太复杂，不然等到你修改的时候你就不得不到处搜索。所以将所有styling元素归置在一个单独的CSS文档中。

在styling之前理清你的CSS免得太过杂乱导致你多次重复同一件事。CSS支持继承，也即parent block的style可以用于child block.，充分利用这条特性。命名CSS分类名也要易懂易记。比如使用“main_content”而不是“div_1”。

Rule #5 : 制订多重 CSS 文档

我们都知道，使用浏览器可以轻易地看到网页的输出，但使用另一浏览器的时候则可能发现输出不正常。这不是什么稀奇事儿，因为每个浏览器对HTML和CSS的处理方式都不一样。

为避免这种情况，每个浏览器准备一个CSS文档，这样所有浏览器都可以正常浏览。虽然这有一定的难度，但是记着指望一个CSS文档来满足所有浏览器是不可能的。

原文链接：http://techtracer.com/2007/12/10/5-rules-for-a-good-web-design/

Yemoo'S JS Blog 2008-03-31 11:39 发表评论

Mastering JavaScript — concept and resource guide

Yemoo'S JS Blog — Sat, 03 Nov 2007 17:09:00 GMT

There is not a single interpreted language used today that causes more excitement, confusion, disdain, and conflict than JavaScript. The language is so incredibly flexible that it is difficult to separate a developer’s choice of coding style from JavaScript best practices. If you are an absolute beginner (as we all once were), this can be an incredibly frustrating experience.
The immensity of information available today is also adversely focused on AJAX, frameworks and APIs. I wonder how designers and developers manage to wade through the cruft to even begin learning the basics. If you are like me, and have evolved along with JavaScript, then the state of the language makes a little more sense. However, if you are in the first steps of your journey, it might seem like a long and winding road ahead.
This concept and resource guide is a way to deal with these issues. Instead of listing a compendium of resources too vast to matter to anyone, I have listed only those that I feel truly contribute to the process of mastering JavaScript. Preceding the list is an outline of advanced JavaScript concepts that will help “light the master’s path”.

JavaScript Concepts

Access Control
A JavaScript design pattern that prohibits another script from accessing portions of functionality in your JavaScript is enforcing “access control”. In a language like C# or Java, access control is explicitly declared with access control keywords such as private, public or protected. With JavaScript, achieving access control is a bit more work.

Accessible JavaScript
The term “accessible JavaScript” refers to movements that support RIAs in conjunction with accessibility. The most notable methodology is Hijax, a term coined by Jeremy Keith, the author of DOM Scripting. Roger Johansson is a successful Web developer who also promotes accessible JavaScript techniques on his popular blog 456 Berea Street.

Closures
Arguably the most difficult concept in JavaScript to understand, closures are complicated, and can have harmful consequences if not implemented correctly. Closures in JavaScript are essentially a design pattern that allows an inner (nested) function to access the variables associated with an outer function, even after that function has been executed (returned).

Classical OOP
In several technical circles, JavaScript is often referred to as a prototype-based or object-based language, as it lacks some features available in full-blown object oriented programming. Regardless, in order to be a successful Web developer, you must understand the details surrounding classical object oriented programming with JavaScript.

Concepts in AJAX
AJAX is conceptually quite simple. Hundreds of examples are available, and the number of tutorials is too numerous to count these days. However, within an intricate RIA, several complicated problems can arise for the budding architect. Performance issues play center stage, and it is important to explore alternative methods of implementing AJAX solutions.

Memory Leaks
One of the most difficult issues plaguing JavaScript programmers today is memory leaks brought on by a combination of browser bugs and poor coding practices. Even though memory leaks are often identified with Internet Explorer, Web applications in several browsers have been known to freeze up the client interface and cause excessive memory leakage.

Namespaces and Self-invoking Functions
At the forefront of every JavaScript library is a namespace. Although the style of execution can vary slightly, the concept is incredibly important if you are considering the release of an API or framework. Creating a non-conflicting namespace (which typically involves self-invoking functions), is both friendly and unobtrusive, and it should be a part of your repertoire.

JSON and Object Literal Notation
JavaScript Object Literal Notation and JSON both rely completely on JavaScript’s implementation of the hash object. Although a subset of object oriented programming with JavaScript, object literal notation is becoming a widely accepted alternative to functions as constructors for objects. I suggest first reading the classical OOP articles, and then move on to these articles.

Security
While security continues to be a major concern among Web developers, much of the hype surrounding XSS (cross-site scripting) has diminished. However, techniques for overcoming security flaws in JavaScript should be well known by all JavaScript programmers, new and old. Exploits are discovered often, and keeping up with hacker trends is important.

JavaScript Topics, Articles & Tutorials (Publications)

JavaScript Topics, Articles & Tutorials (Personal)

JavaScript Development Tools

JavaScript Frameworks

Yemoo'S JS Blog 2007-11-04 01:09 发表评论

什么是框架？[转自5510.cn]

Yemoo'S JS Blog — Fri, 12 Oct 2007 09:52:00 GMT

     框架是一个应用程序的半成品。框架提供了可在应用程序之间共享的可覆用的公共结构。开发者把框架融入他们自己的应用程序，并加以扩展，以满足他们特定的需要。框架和工具包的不同之处在于，框架提供了一致的结构，而不仅仅是一组工具类。
    框架其实就是一组组件，供你选用完成你自己的系统。简单说就是使用别人搭好的舞台，你来做表演。而且，框架一般是成熟的，不断升级的软件。
    可以说，一个框架是一个可复用的设计构件，它规定了应用的体系结构，阐明了整个设计、协作构件之间的依赖关系、责任分配和控制流程，表现为一组抽象类以及其实例之间协作的方法，它为构件复用提供了上下文(Context)关系。因此构件库的大规模重用也需要框架。
    构件领域框架方法在很大程度上借鉴了硬件技术发展的成就，它是构件技术、软件体系结构研究和应用软件开发三者发展结合的产物。在很多情况下，框架通常以构件库的形式出现，但构件库只是框架的一个重要部分。框架的关键还在于框架内对象间的交互模式和控制流模式。
    框架比构件可定制性强。在某种程度上，将构件和框架看成两个不同但彼此协作的技术或许更好。框架为构件提供重用的环境，为构件处理错误、交换数据及激活操作提供了标准的方法。
    应用框架的概念也很简单。它并不是包含构件应用程序的小片程序，而是实现了某应用领域通用完备功能（除去特殊应用的部分）的底层服务。使用这种框架的编程人员可以在一个通用功能已经实现的基础上开始具体的系统开发。框架提供了所有应用期望的默认行为的类集合。具体的应用通过重写子类(该子类属于框架的默认行为)或组装对象来支持应用专用的行为。
    应用框架强调的是软件的设计重用性和系统的可扩充性,以缩短大型应用软件系统的开发周期，提高开发质量。与传统的基于类库的面向对象重用技术比较，应用框架更注重于面向专业领域的软件重用。应用框架具有领域相关性，构件根据框架进行复合而生成可运行的系统。框架的力度越大，其中包含的领域知识就更加完整。
    框架和设计模式的关系
    框架、设计模式这两个概念总容易被混淆，其实它们之间还是有区别的。构件通常是代码重用，而设计模式是设计重用，框架则介于两者之间，部分代码重用，部分设计重用，有时分析也可重用。在软件生产中有三种级别的重用：内部重用，即在同一应用中能公共使用的抽象块;代码重用，即将通用模块组合成库或工具集，以便在多个应用和领域都能使用；应用框架的重用，即为专用领域提供通用的或现成的基础结构，以获得最高级别的重用性。
    框架与设计模式虽然相似，但却有着根本的不同。设计模式是对在某种环境中反复出现的问题以及解决该问题的方案的描述，它比框架更抽象；框架可以用代码表示，也能直接执行或复用，而对模式而言只有实例才能用代码表示;设计模式是比框架更小的元素，一个框架中往往含有一个或多个设计模式，框架总是针对某一特定应用领域，但同一模式却可适用于各种应用。可以说，框架是软件，而设计模式是软件的知识。
    为什么要用框架？
因为软件系统发展到今天已经很复杂了，特别是服务器端软件，设计到的知识，内容，问题太多。在某些方面使用别人成熟的框架，就相当于让别人帮你完成一些基础工作，你只需要集中精力完成系统的业务逻辑设计。而且框架一般是成熟，稳健的，他可以处理系统很多细节问题，比如，事物处理，安全性，数据流控制等问题。还有框架一般都经过很多人使用，所以结构很好，所以扩展性也很好，而且它是不断升级的，你可以直接享受别人升级代码带来的好处。
框架一般处在低层应用平台（如J2EE）和高层业务逻辑之间的中间层。 
        衡量应用系统设计开发水平高低的标准就是：解耦性；你的应用系统各个功能是否能够彻底脱离？是否不相互依赖，也只有这样，才能体现可维护性、可拓展性的软件设计目标。
　　为了达到这个目的，诞生各种框架概念，J2EE框架标准将一个系统划分为WEB和EJB主要部分，当然我们有时不是以这个具体技术区分，而是从设计上抽象为表现层、服务层和持久层，这三个层次从一个高度将J2EE分离开来，实现解耦目的。
　　因此，我们实际编程中，也要将自己的功能向这三个层次上靠，做到大方向清楚，泾渭分明，但是没有技术上约束限制要做到这点是很不容易的，因此我们还是必须借助J2EE具体技术来实现，这时，你可以使用EJB规范实现服务层和持久层，Web技术实现表现层；
　　EJB为什么能将服务层从Jsp/Servlet手中分离出来，因为它对JavaBeans编码有强制的约束，现在有一种对JavaBeans弱约束，使用Ioc模式实现的（当然EJB 3.0也采取这种方式），在Ioc模式诞生前，一般都是通过工厂模式来对JavaBeans约束，形成一个服务层，这也正是Jive这样开源论坛设计原理之一。
　　由此，将服务层从表现层中分离出来目前有两种可选架构选择：管理普通JavaBeans（POJO）框架(如Spring、JdonFramework)以及管理EJB的EJB框架，因为EJB不只是框架，还是标准，而标准可以扩展发展，所以，这两种区别将来是可能模糊，被纳入同一个标准了。　但是，个人认为：标准制定是为某个目的服务的，总要牺牲一些换取另外一些，所以，这两种架构会长时间并存。
　　这两种架构分歧也曾经诞生一个新名词：完全POJO的系统也称为轻量级系统(lightweight)，其实这个名词本身就没有一个严格定义，更多是一个吸引人的招牌，轻量是指容易学习容易使用吗？按照这个定义，其实轻量Spring等系统并不容易学习；而且EJB 3.0（依然叫EJB）以后的系统是否可称为轻量级了呢？
　　前面谈了服务层框架，使用服务层框架可以将JavaBeans从Jsp/Servlet中分离出来，而使用表现层框架则可以将Jsp中剩余的JavaBeans完全分离，这部分JavaBeans主要负责显示相关，一般是通过标签库（taglib）实现，不同框架有不同自己的标签库，Struts是应用比较广泛的一种表现层框架。
　　这样，表现层和服务层的分离是通过两种框架达到目的，剩余的就是持久层框架了，通过持久层的框架将数据库存储从服务层中分离出来是其目的，持久层框架有两种方向：直接自己编写JDBC等SQL语句（如iBatis）；使用O/R Mapping技术实现的Hibernate和JDO技术；当然还有EJB中的实体Bean技术。
　　持久层框架目前呈现百花齐放，各有优缺点的现状，所以正如表现层框架一样，目前没有一个框架被指定为标准框架，当然，表现层框架现在又出来了一个JSF，它代表的页面组件概念是一个新的发展方向，但是复杂的实现让人有些忘而却步。
　　在所有这些J2EE技术中，虽然SUN公司发挥了很大的作用，不过总体来说：网络上有这样一个评价：SUN的理论天下无敌；SUN的产品用起来撞墙；对于初学者，特别是那些试图通过或已经通过SUN认证的初学者，赶快摆脱SUN的阴影，立即开溜，使用开源领域的产品来实现自己的应用系统。
　　最后，你的J2EE应用系统如果采取上面提到的表现层、服务层和持久层的框架实现，基本你也可以在无需深刻掌握设计模式的情况下开发出一个高质量的应用系统了。
　　还要注意的是: 开发出一个高质量的J2EE系统还需要正确的业务需求理解，那么域建模提供了一种比较切实可行的正确理解业务需求的方法，相关详细知识可从UML角度结合理解。
　　当然，如果你想设计自己的行业框架，那么第一步从设计模式开始吧，因为设计模式提供你一个实现JavaBeans或类之间解耦参考实现方法，当你学会了系统基本单元JavaBean或类之间解耦时，那么系统模块之间的解耦你就可能掌握，进而你就可以实现行业框架的提炼了，这又是另外一个发展方向了。
       框架的最大好处就是重用。面向对象系统获得的最大的复用方式就是框架，一个大的应用系统往往可能由多层互相协作的框架组成。
        由于框架能重用代码，因此从一已有构件库中建立应用变得非常容易，因为构件都采用框架统一定义的接口，从而使构件间的通信简单。
       框架能重用设计。它提供可重用的抽象算法及高层设计，并能将大系统分解成更小的构件，而且能描述构件间的内部接口。这些标准接口使在已有的构件基础上通过组装建立各种各样的系统成为可能。只要符合接口定义，新的构件就能插入框架中，构件设计者就能重用构架的设计。
        框架还能重用分析。所有的人员若按照框架的思想来分析事务，那么就能将它划分为同样的构件，采用相似的解决方法，从而使采用同一框架的分析人员之间能进行沟通。
        采用框架技术进行软件开发的主要特点包括：
        领域内的软件结构一致性好；
        建立更加开放的系统；
        重用代码大大增加，软件生产效率和质量也得到了提高；
        软件设计人员要专注于对领域的了解，使需求分析更充分；
        存储了经验，可以让那些经验丰富的人员去设计框架和领域构件，而不必限于低层编程；
        允许采用快速原型技术；
        有利于在一个项目内多人协同工作；
        大量的重用使得平均开发费用降低，开发速度加快，开发人员减少，维护费用降低，而参数化框架使得适应性、灵活性增强。

Yemoo'S JS Blog 2007-10-12 17:52 发表评论

软件系统开发中的组件框架技术研究、设计和应用【转自lrn资源网】

Yemoo'S JS Blog — Fri, 12 Oct 2007 09:48:00 GMT

计算机的应用已经从过去单纯的科学计算渗透到政务管理、商品交易、金融证券、军事指挥、航天航空、通讯导航、生物工程、医疗服务等多个领域。随着计算机技术的发展和应用范围的不断延伸，作为计算机灵魂的软件系统，其规模也在不断扩大，结构越来越复杂，代码越来越长、维护越来越困难，从过去几百行代码扩大到几万甚至几十万、几百万行代码的软件系统俯首皆是。因此，设计一个功能完善、结构优良，开发效率高，稳定性和安全性强，扩展方便，维护简单，易于复用，生命周期长，投资成本低的软件系统，一直是系统管理、设计和开发者所追求的目标之一。遗憾的是，现实生活中，被抛弃的软件系统随处可见，造成极大的投资浪费。原因之一是系统开发仓促编码，结构劣拙，功能扩展困难，稍有修改，便错误百出，无法维护，唯有弃之不用。

软件发展的实践证明，模块化的分层设计模型是提高系统可用性和可维护性的主要途径。分层模型设计，既将整个软件系统划分为若干个相互独立的层次进行描述，层与层之间通过事先约定的接口相互通讯。某个层只负责一个或多个功能，各负其则，不越俎代庖。分层设计把一个复杂的问题分而治之，降低了复杂性，功能清晰、易于实现、修改和维护。

分层设计可以分为面向过程、面向对象、面向组件等设计模式。面向过程的设计使用结构化的面向过程的计算机语言来编码；面向对象的设计则使用面向对象的计算机语言来实现，而面向组件的设计则既可用面向过程，也可用面向对象的语言来实现。由于面向组件的设计，系统的耦合度低、复用性强、维护容易，已经成为软件系统设计和开发的主流技术。

组件软件技术的基本思想是：将大而复杂的软件应用分成一系列可先行实现、易于开发、理解和调整的软件单元??组件。每个组件功能确定，单独设计，分开编码，最后用组件组装应用，完成系统开发和部署。因此，以组件为基础的软件系统解决方案，开发效率高，投资少，维护成本低，复用能力强，软件升级简单。

1、组件技术的发展现状

目前常用的组件框架模型，一类是与某一计算机操作系统密切相关，而另一类是跨计算机操作系统平台的。前者的典型代表是COM组件对象模型，以及在此基础上发展起来的ActiveX、DCOM、COM+、MTS和.NET等技术。COM组件具有二进制一级的兼容性，基本上与计算机编程语言无关，其缺点是目前只能运行在Windows 操作系统平台上，而不能在Linux 和Unix 系统中运行。COM并不只是面向对象的组件对象模型，它既可用面向过程，也可用面向对象的语言编码。但多采用的编码语言是VC ＋＋、VB和Delphi，性能要求高的场合也可用C语言来编码。COM已经广泛使用在Windows 操作系统中，浏览器、邮件收发系统，Web服务器、字处理软件中都广泛使用COM组件。跨计算机操作系统平台的组件模型其典型代表是CORBA，CORBA主要使用在Unix 类型的操作系统中，但它也可在Windows平台上运行。

从计算机语言来讲，组件模型有以Java语言为代表的框架和以C语言为基础的框架。前者在理论上可以跨平台运行，底层平台支持是JVM 技术，而后者则与虚拟机无关，直接在操作系统中运行，因此，速度快，运行效率高。从应用系统的角度来讲，目前市场上，主要是J2EE和.NET的竞争，两者理论上没有本质的区别，都是采用虚拟机技术。但J2EE可以跨平台运行，而.NET 则基本不行。在企业级的应用系统中，以Java 技术为基础的J2EE似乎更占优势。Java和. NET技术各有特长，因此，在信息系统建设中，应该允许两种技术存在，取长补短，协同发展，最大限度地提高系统开发的性价比和稳定性。

2 、组件框架的体系结构

2.1描述组件的要素

组件是事先定义了编程接口和功能、相互独立的软件单元。一个组件一般有组件标识符、接口、创建方法和功能等要素组成。组件标识符也就是组件的名字，在整个体系结构中必须是唯一的，它是客户程序使用组件的唯一标识。如在COM规范中，组件用一个128位的clsid，通过注册表将clsid与组件真实的物理文件名关联，实现组件的位置无关性。而J2EE框架中的组件则多使用名称服务和事先约定的特殊字符串表示。组件接口是组件与客户程序、容器交互和通讯的API。具体包括函数名称、参数和参数类型等内容。如在Java 语言中可用接口表示，在C语言中用相互有关系的一组函数表示，在C＋＋中则可用虚函数描述。组件多有组件工厂创建，组件工厂也是组件，其创建一般由组件框架提供的系统函数来生成。组件的功能定义了组件需要完成的事情。通常情况下，组件标识符、组件接口、创建方法是组件对用户程序的契约和承诺，设计好后不能轻易改变，但组件的功能可以修改，体现多态性。

2.2组件体系结构图

总结目前常用的组件框架体系结构，组件框架的通用体系结构如图1所示。组件框架通常由容器、组件和粘合剂三部分组成。容器就是一个根据框架体系结构的API管理应用程序组件以及提供API访问的系统运行环境，容器是一个递归概念，它也是组件。组件则是遵循容器规范、实现API接口的功能部件。粘合剂主要供容器用来组装组件之间的相互关系，其多表现为一个或多个部署描述符和配置文件，流行的描述语法格式包括XML、属性文件和Windows系统中常用的段节式结构等。通过粘合剂，整个框架就能够实现组件的动态加载、相互去耦和多态性。组件框架体系结构也具有递归结构，即框架之中存在框架。

组件框架的通用体系结构除了上述三个功能部件外，还包括要求应用程序必须实现的组件协议API、容器服务API，容器声明服务API等。后两者一般由容器提供商开发，供应用程序组件通过容器上下文环境引用。

常见的组件体系结构J2EE、Struts、Spring、PicoContainer等均基于上述结构设计，具有非常高的开放性和可扩展性。

3 、组件框架设计和开发

3.1组件框架设计的方法

实践中，组件框架设计应该采用分层设计模型，组件采用递归结构。每个框架不能依赖其他框架而存在，应该能够独立开发和部署。组件和组件之间，组件和框架之间只能通过API 通讯。

将组件框架应该再细分成表现层框架、业务层框架、数据层框架、公共服务框架、基础框架、系统框架和与业务系统密切相关的业务框架等构成，除了具体的业务框架外，其他框架必须优先选择比较成熟的产品和免费框架。

组件设计过程中要精心定义组件的创建方法、组件标识符、接口规范和组件的功能等要素。组件多采用定义了良好接口的工厂组件创建，而工厂组件则由系统函数或系统对象创建。组件标识符主要采用GUID、接口名称、其他特定的字符串等表示，它是客户程序使用组件的逻辑名，应用系统在运行过程中，由容器将其与组件的具体实现映射。接口规范多用函数和抽象类的形式表现。组件的内部结构如图2所示。有组件工厂、组件服务提供者、抽象服务等。抽象服务是实现组件接口的一个抽象类，其目的是为了简化应用程序对组件的编码。应用程序只要继承该抽象类即可满足接口规范需要，而把精力集中到核心功能的实现上。

组件采用组件工厂、组件服务提供者、抽象服务等内部设计模式，可以极大地降低组件与使用该组件的客户程序的耦合度，客户程序只要使用组件的逻辑名，通过容器提供的名称服务得到组件接口即可利用组件提供的功能，而不必关心组件的内部具体实现，组件具有非常好的封装性。

系统函数或系统对象、组件标识符、接口规范一旦定义则不能轻易改变，否则，就会造成整个框架体系和使用此框架的所有应用程序的修改。这里唯一需要改变的是组件的功能，它由具体的应用程序实现。

框架设计需要解决的问题还包括容器规范、组件规范、容器提供服务和部署描述符设计、类装入方案等。部署描述符定义容器和组件之间的协议，并封装组件之间的相互关系。部署描述符要优先选择XML语言表达。

3.2设计组件框架的原则和评价标准

当一个组件框架设计完成后，应该按照开闭原则、依赖倒转原则、接口隔离原则等对其进行评价，检查和评价整个系统的可维护性和可复用性。

按照开闭原则，要检查设计的组件框架是否满足对扩展开发，而对修改关闭，即整个框架在扩展其功能时，应当是在不修改代码的前提下便可，换言之，源代码不修改，框架行为就可改变。要实现开闭原则，组件的抽象化是关键，实践中，检查在框架中是否容易加入“即插即用”的组件便是经验之一。

依赖倒转原则，就是要检查系统要依赖于抽象，而不是依赖于具体的实现。即客户端编程要依赖于抽象耦合，而不是具体耦合，要针对接口编程，而不是针对实现编程。具体的讲，就是看一个组件在其逻辑名称、接口不改变的情况下，修改其对象名称、类名称以及具体实现的情况下，客户程序是否需要修改。如果不是，则该框架不符合依赖倒转原则，可扩展性和可维护性存在问题。

通过接口隔离原则，可以检查一个组件是使用了多个专门的接口，还是使用单一的总接口进行编程。如果使用过于臃肿的接口，便存在接口污染。一个接口应当简单地只代表一个角色，而不是多个角色。如果组件涉及多个角色，那么每一个角色应当由一个特定的接口代表。也就是说，一个接口其中的函数数量应该越少越好。

符合上述原则的框架，基本上是在高层次实现了系统的复用，也是一个易于维护的系统，才值得投入人力和物力去编码，否则，该框架的生命周期不会太长，系统开始修改之时，可能也是其终结之日。

4、组件框架的选择和应用

选择组件框架设计模式开发信息系统已经成为当今缩短系统开发周期、提高稳定性、降低维护成本、延长生命周期的主流技术。目前，从运行环境、基础框架到专业的业务实现方面均有可资利用的成熟框架。我们在开发专业的应用系统时，无论从时间，还是资金方面考虑，都有必要充分利用现成的框架体系结构。选择框架应该综合考虑，跨平台、成熟度、稳定性和规范程度等多种因素。

（1）在容器选择方面，对于需要跨平台的企业级应用，应该优先考虑Websphere、Weblogic等支持J2EE构架的商用服务器端系统。而对于访问量低、并发用户不多的应用则可以选择Tomcat、Jboss、Jfox等开源项目作为系统运行环境，其性价比非常高。对于图形界面要求高的系统也可以选择.NET作为系统运行容器。而开发客户端应用程序首选Eclipse、Netbeans等作为系统的运行容器。Eclipse和Netbeans都是用Java语言开发的基于插件的体系结构，源码开发，成熟度较高。前者目前主要用于集成C++、Java编译器和其他开发工具，以及整合工作流、系统部署等方面，得到了IBM等大公司的支持。后者主要的应用集中在Java应用程序方面的开发。它们的可扩展性和可维护性都比较高，作为客户端应用程序的容器非常理想，应用的部署和运行比较简单，比如Eclipse只要将开发好的插件压缩封装成jar包，拷贝到系统规定的Plugins目录中便可，几乎不需要什么配置，在因特网中有许多开源的插件可供使用，应用涉及的范围很广。

（2）对于基础框架，可供选择的框架有PicoContainer、Spring和Avalon等。PicoContainer框架基于注册模式封装组件关系。而Spring框架其组件均利用Java beans实现，支持国际化、事件监听、事务管理，支持内省反射和AOP技术，易于和Mail、JNDI及数据库集成。对于Avalon框架，定义的组件接口非常简单，比如，组件创建、销毁、服务等接口，函数单一，结构清晰，充分体现了接口隔离原则，实现起来均比较容易。这些框架属开源项目，帮助文档较多，有许多人在研究和开发，它们均可脱离J2EE应用服务器运行，是开发专用业务系统比较理想的基础框架。

（3）在系统的表现层，如果系统需要单点登录、能够集成其他应用和服务、提供个性化支持，则应该选择支持Ｐortal规范的框架作为表现层的容器。此类框架如 Weblogic Portal、IBM Websphere Portal等，其特点是系统比较成熟，但结构复杂，投资成本较高，页面的美工设计不够灵活，系统集成需要比较多的编程经验和编程知识，不适合系统维护力量较低，页面设计频繁改动的应用。免费的Ｐortal框架典型的是Jetspeed，其Portal组装使用PSML语言，结构良好，运行在Turbine框架之中，Turbine将页面视图划分为页面、布局、屏幕、导航和动作等组件，并利用属性文件封装，使用Velocity模板语言，表现和业务代码分离。Jetspeed和前述商用Portal相比，缺乏好的开发工具支持，比较适合技术力量雄厚的部门使用。

表现层还可以选择的一个框架就是Struts，其在许多系统开发中得到了广泛的支持。该框架有控制器组件、视图组件和插件等组成。完全基于MVC模式设计，组件关系利用符合XML规范的配置文件封装，并提供了控制器、插件等许多扩展点，支持国际化、无编程数据验证、配置性异常处理以及多应用部署，能够和EJB、SOAP集成，其中内置了几乎所有的HTML标签，和Tiles模板框架配合使用，能够开发出高质量的应用系统。

（4）在模型层和数据层，主要是将数据的概念模型映射成设计模型，大多数框架都是将和数据库通讯的JDBC驱动程序通过二次封装，屏蔽掉不同数据库之间在SQL语言方面的差异，减少开发人员用数据库系统实现数据持久化方面的知识，并为上层模块提供比较统一的系统调用。可资选择的框架除了著名的实体EJB外，还有如Hibernate、Toplink和Torque等轻量级的持久化框架，其实现大同小异，基本都是通过XML配置文件将数据概念模型中的字段映射成Java语言中的对象属性，编程人员一般只要按照DAO设计模式，用Java语言定义业务对象BO，并完成数据映射配置文件便可，减少了通过JDBC直接使用SQL语言的复杂度。此类框架的选择，一般应考虑支持目前的主流数据库系统，如Oracle、SQL Server等。对于小型的应用还要考虑支持MYSQL、PostgreSQL等免费的数据库管理系统。这样更换数据库时，只要修改数据映射配置文件、数据库驱动程序和数据源配置便可，整个系统框架不用修改，提高了系统的稳定性和可维护性。

（5）在系统日志管理方面选择Log4j、XML解析框架选择Degester，工作流引擎选择OFBIZ、SHARK、OBE或JBPM等，内容管理选择基于管道技术的COCOON这些开源框架，均会缩短编码时间，提高系统的开发效率。

总之，在信息系统的开发中，重点应该放在规划业务系统，开发业务型框架，定义和实现信息系统本身的业务逻辑上，而对于所有业务系统通用的功能和逻辑应优先选择现有框架的有效组合实现，以期达到事半功倍的效果。

参考文献

[1] 阎宏编著，Java与模式，电子工业出版社，2004

[2] 潘爱民著，COM原理和应用，清华大学出版社， 1999年

[3] 孙卫琴编著，精通struts－基于MVC的Java Web设计和开发，电子工业出版社，2004

[4] [美]，Subrahmanyam Allamaraju等著，马树奇译，J2EE编程指南（1.3版），电子工业出版社，2002

[5] http://www.apache.org网站

[6] http://www.sun.com网站

[7] http://www.ibm.com网站

[8] http://www.microsoft.com网站

Yemoo'S JS Blog 2007-10-12 17:48 发表评论

设计一个好的开发框架【转自中国信息产业网】

Yemoo'S JS Blog — Fri, 12 Oct 2007 08:49:00 GMT

在一个大型项目中，尤其是基于J2EE的项目，一个好的框架设计极其重要，它是项目成败的关键。而要设计好框架，首先必须做的工作是深入理解需求，从中进行业务逻辑的抽象。

框架是一种特殊的软件，它在软件开发中有很高的重用性，同时它也需要高超的设计技巧。软件组织，使用框架来积累知识，对推动软件开发是一种有效的方式，那么，什么是框架呢？在设计模式中，Gamma等人为框架给出了一个定义: “框架就是一组协同工作的类，它们为特定类型的软件构筑了一个可重用的设计。”因此，框架是针对特定的问题领域的。

框架包括了一组抽象概念，这些抽象概念来源于问题领域。例如，struts是基于MVC模式进行设计的，所以它必须为model、view、control建立抽象概念。框架使得这些抽象概念相互协作，并提供了一种扩展的形式，以实现重用。这是框架的具体工作。框架在抽象概念上进行工作，定义抽象概念之间的协作方式。框架和普通软件或是类库的区别就在于，用户通过扩展框架来重用该框架。这些扩展点的设计称为框架设计的核心。例如，在struts1.0中，采用的是类继承的扩展方式(对Action进行扩展)。

框架对软件开发作用重大

知识积累。框架的核心价值是对知识的积累。软件开发是一项知识性的活动。但是知识存在于人的大脑中，是最难进行积累的。而在软件开发中，代码是最确定的知识，人和机器通过浏览代码都能够了解代码所表达的意思，而且不会出现不同的理解。所以，从代码出发进行知识的积累是最佳的办法。框架就是这种思路的产出物。框架包含了大量的代码，这些代码是对某个特定问题领域中抽象概念及这些抽象概念之间关系的描述。所以，框架能够胜任知识积累的工作。虽然代码是框架的核心，但是光有代码的框架是很难为人所理解的。代码的层次太低，开发人员从代码的角度来完全地理解框架是很困难的。所以，必须要有层次高于代码的工件来协助理解。这些工件可以是设计文档、领域模型、UML图、JavaDoc等。它们的目的都是为了帮助框架的开发人员和使用人员顺利地理解框架。

保护资产。知识积累本身就是一项对资产的保护工作。而另一项很重要的保护工作就是软件组织(尤其是企业)需要保证对知识的学习和改进是经过合法授权的。例如，知识的非法外流是任何组织都不希望看到的。将知识积累为框架的形式有助于缓解这种情况。框架可以是以源码形式发布的，也可以是以库形式发布的，为不同的框架用户选择不同的发布形式，可以起到权限控制的作用。

鼓励重用。框架之所以称为框架，是因为它可以重用。在软件组织中形成以框架为核心的开发方式，在开发中使用框架，并在开发完成后改进框架。在这个反覆的过程中，重用的工作就已经开展起来了。重用其实并没有那么困难，其实就是将通用的行为抽取出来。

优化架构。所谓软件架构，亦即体系结构，包括组件元素、元素互助合作模式、基础要求与限制。这说明架构的设计就是将各组件元素以某些理想的合作模式组织起来，以达成系统的基本功能和限制。框架其实就是在特定领域基于体系结构的可重用的设计，即框架是体系结构在特定领域下的应用。框架代表了一种优秀的软件架构。框架定义了扩展方式，从而规范了框架的使用行为。这使得软件能够保持整体架构的稳定性和一致性。

框架好坏关系J2EE项目成败

框架技术通过重用提高了软件的生产效率，一个软件系统由两大部分组成: 针对本应用的新设计和可重用的软件组件或框架。后者所占比例越大，那需要实现的新设计或实现工作量就会越小，生产效率越高、成本越低。J2EE项目成败主要取决于架构设计好坏以及合适框架的选择，而不是体现在对技术的具体应用上，常常有人将一个J2EE项目的失败归咎于后者，这可能是最大的误导。

J2EE项目是通过框架、模式的设计运用达到控制软件质量的目的的。虽然这是很多喜欢自由编程的程序员所不喜欢的，但是它带来了稳定的软件质量和可重用的组件，为规模生产创造了条件。不仅如此，它还降低了对开发框架以外其他开发人员的技术要求，使大多数开发人员无需很高的技术，就能在已有的框架下进行开发，而且能大大缩短开发周期。根据自己项目领域特点，在J2EE框架下设计自己领域的应用框架，不仅可以提高在该领域软件开发的效率，而且可以节约开发成本和维护成本。

框架的特征

● 框架包括大量类或组件，每一种类或组件都提供了某种概念的抽象;

● 框架定义了这些抽象如何协作解决问题;

● 框架组件可以重用;

● 框架在更高层次上组织模型。

如何进行有效的框架设计

一个好的框架设计是有一定的准则可供遵循的。

设计抽象层次。在框架的定义中，抽象体是至关重要的。抽象体是框架的目标，没有目标的框架决不是一个好框架，要么是一个类库，要么是一种编程语言。光有抽象体还是没有办法工作，还需要定义出抽象体的行为，有了行为之后，还需要规范、穷尽这些行为。

分析抽象行为的通用部分和非通用部分。在抽象体的行为中，有些动作是通用的，有些是特殊的。前者就是框架要实现的部分。而后者则作为扩展留给用户。将抽象层次提取为框架，并设计扩展点。有了抽象体、抽象体的通用行为之后，就可以设计扩展点了。最简单的扩展点是采用方法调用的方式，复杂的可能通过设计模式或是配置文件等方式。扩展点设计优劣的评价标准是使用起来是否方便，这里的使用包括应用、调试、测试等。

适当的使用设计模式。设计模式代表了先进的软件设计思路。在框架中适当地使用设计模式有助于改进框架的结构。在框架设计中不宜采用过多的设计模式，这会使得框架理解起来困难。

有效利用、隔离第三方技术。当前的软件开发向着协作的方向发展。在这种情况下，大量的第三方软件出现了。软件业的分工将会给软件业带来繁荣，但是对于软件组织来说，就需要考虑第三方软件的成本、生命力、本组织系统对其的依赖程度等问题。这部分工作应该交给框架。让框架来负责把核心应用和第三方技术隔离开来。因此，设计一个抽象的层次，把这些技术和核心应用隔离起来。

目前，许多应用系统都采用了基于Web的B/S结构应用，同时在应用层中包含了数据库、安全、人性化、交易化、分布式等等大量的软件技术，这些技术纷繁而复杂，不是一个人或者几个人可以单独完成的，而且其规模产生了数以万计的代码量和成千上万的各种资源。这些不仅要聚合在一起，同时，它们之间还要相互通信和访问，共同完成业务逻辑所要求的各种处理过程。因此，拥有能用来规范所有程序调用、访问、错误等常规处理的框架非常重要，同时框架还要保证程序的易读性、可交互性、可维护性等等这些保证质量的前提要求。所以框架不仅起到规范的作用，它还是出发点，是所有程序的起点和终点。

为此，框架必须综合现在先进的技术、设计模式、开发理念，用被广泛接受和认可的方法论产生的一套框架性核心代码，包括从前端Web交换到业务层数据交互、数据持久化和存储到事务，安全机制和错误处理等这些在开发中涉及的逻辑和方法。

Yemoo'S JS Blog 2007-10-12 16:49 发表评论

web开发过程中要注意的问题（二）【转自eye_of_back的专栏】

Yemoo'S JS Blog — Wed, 10 Oct 2007 04:20:00 GMT

1，不要认为Struts已经过时了，也不要盲目的去追随JSF以及更新的MVC框架，在目前Struts仍旧是最为优秀的MVC框架，尤其是后来与Spring、Hibernate（或者Ibatis）的结合，使得Struts的应用得到了进一步的发展，也许你认为Webwork2、SpringMVC或者JSF更为优秀和实用，那么也没有关系，其实只要对你或你的公司适用，那么就可以了。

2，你知道Javascript中的typeof和instanceof操作吗，如果不知道，劝你还是看看这方面的知识吧，typeof返回的是对象的类型，例如string、number、object等等，而instanceof判断的是一个对象是否是某个类的实例，例如：
var arr=new Array();
var type=typeof(arr);//返回object
var flag=arr instanceof Array;//返回true
var flag2=arr instanceof Object;//返回true;
在实际使用过程中，你会发现instanceof是更为强大的，当然了许多时候typeof用起来很方便，但是对于复杂的场合typeof就不太适用了，尤其是对于自定义对象以及对象之间有着复杂的继承关系时，使用instanceof可以方便的对这些进行判断。

3，虽然你可能知道javascript中typeof的用法，但是如果你不能做对下面的题，说明你对typeof的理解还是不够的，例如：
var a;
var rs=typeof(a);//请问rs的值是什么？
（A）object （B）variable （C）undefined (D) string （E）null （F）以上答案全不正确
如果你选择A还算对JS有一些了解，如果选择B则基本上是乱猜的，如果选择D什么也说明不了，如果选择E则说明你对于Java和Javascript有些东西还没有分清楚，选择F也是不正确的。答案是C，记住在Javascript之中，如果一个变量没有初始化，那么该变量的类型为undefined。

4，也许你一直在抱怨Javascript之中没有列表、哈西表以及堆栈、队列等数据结构，如果真的在抱怨，那么也不是你的错，毕竟包括我自己在内，我们对JS的了解太少了，其实在JS之中，数组对象自身完全支持上面的那些数据结构，例如：
var list=new Array();//列表
list[0]="a";
list[100]="b";
var map=new Array();//哈西表
map["001"]="a";
map["username"]="zhangsan";
var stack=new Array();//堆栈，即后进先出
stack.push("a");
stack.pop();
var queue=new Array();//队列，即先进先出
queue.unshift("a");
queue.shift();
可见JS是非常强大的，关键是我们知道的太少了，关于Javascript对于数组的操作，你也可以参考《Javascript对数组的操作》。

5，作为一个web开发人员，我们不能指望美工在完成漂亮的效果图之后，还要为我们将图切分，最后生成html文件后再给我们，然后我们对这些html文件，再修改转换为jsp、asp或者php文件。我一直认为效果图的切分应该或者最好由我们程序员自己来做，因为美工做的效果图实际上是要应用到我们的产品或者项目中的，而具体的产品和项目，对效果图中哪些部分是需要输入文字的，哪些地方是需要背景的，哪些地方是需要可以自动伸缩的，而哪些地方又是必须保证大小的，是有很严格的要求的，尤其是我们的产品或项目中如果使用了类似sitemesh等的模板技术，那么切图的工作就更要由我们自己来做了。这样并不是说美工不需要懂得html、css等技术，也不是说美工切出的图，会不符合我们的要求，我们知道，一张效果图，可以有n种切法，但是要能够满足实际的需求，往往只有一种最合适的切法，而这个切法一般来说美工是不太清楚的，开发人员也是不清楚的，只有既是开发人员，又懂得美工切图的人，才能够找到最为合适的切分方法，而这样的人才是非常奇缺的！

6，不要过于痴迷Ajax技术，也不要过于追捧web2.0这个时髦的词汇，并不是说什么东西粘上ajax或者web2.0，就能够火起来或者对我们的实际发展有利的，如果你是做公网网站的，那么要注意，不合适的ajax使用，会使得网站被搜索引擎收录的信息大幅度减少，但是ajax或者Flex2等技术对于用户体验而言，还是相当不错的，因此是否使用ajax等技术，一要看对你们的解决方案宣传是否有作用，另外一点就是要看，它是否真正的改进了我们的应用。

7，对于ajax的post提交方式，可能你有些问题要问，例如post的方式是不是只要在open时指定method就可以了，为什么我将大数据放到url后面，而没有被完全传递过去，为什么我后台使用类似jsp中的request.getParamter方法接收不到数据，我们通过一个例子看一下ajax发送/接受大数据的方式：

1）send.jsp:（我举的例子使用的是Javascript开源框架JsJava的ajax类库，该类库对IE和Firefox等的XMLHttpRequest等对象进行了易用性的封装，不像prototype.js默认对传递的数据进行urlencode编码）

var ajaxRequest=new AjaxRequest();
ajaxRequest.setRequestMethod("post");
ajaxRequest.setRequestURL("ajaxresponse.jsp");
ajaxRequest.setAsync(true);
ajaxRequest.setMethodOnSuccess(onSuccess,[ajaxRequest]);
ajaxRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
ajaxRequest.send("content=这是一篇几千字的文档...在此省略");

要注意设置发送方式为post，设置头信息的内容类型为application/x-www-form-urlencoded，charset是否设置要看内容的编码情况，另外大数据就放到send之中，记住大数据不是放在url的参数之中的。

2）receive.jsp

    InputStream stream=request.getInputStream();
    InputStreamReader isr=new InputStreamReader(stream);
    BufferedReader br=new BufferedReader(isr);
    String str=br.readLine();
    System.out.println(str);
    br.close();

要知道，对于ajax post方式提交的数据，在服务器端如果是jsp不是简单使用getParameter就能取得到的，需要从输入流中去取，这和附件上传有些类似的地方。当然要注意编码和解码的问题。

8，我们在界面中经常会通过setTimeout方法来实现定时或者异步操作，例如：
setTimeout(myfunc,2000);//两秒后执行myfunc函数
但是要注意setTimeout方法并不能阻止后面js代码逻辑的执行，例如：

上面的代码中，document.write("wait...");逻辑并不会等到3秒后才执行，而是立即执行的，其实这一点可能大部分开发人员都知道，但是如果不注意，就很容易犯下面的错误，如下面代码所示：
var ajax2HasExecuted=false;
var ajaxRequest1;
function ajax1Func(){
    if(!ajax2HasExecuted){
      setTimeout(ajax1Func,200);
   }
   var text=ajaxRequest1.getResponseText();
   ...
}
var ajaxRequest2;
function ajax2Func(){
   var text=ajaxRequest2.getResponseText();
   ...
   ajax2HasExecuted=true;
}
上面的代码是一个页面中同时发送了两个ajax异步请求，分别有两个对应的接收操作，而业务逻辑要求，这两个操作是要有先后顺序的，其中第一个接收操作，需要等待第二个接收操作完成之后，才能进行处理，于是第一个操作中就采用setTimeout的方式，本意是在执行第一个操作的开始的地方，先判断第二个操作是否已经执行完毕，如果没有执行完毕，则等待200毫秒后，重新执行第二个操作，然后由于setTimeout并不能组织后续的逻辑继续执行，所以实际上不管第二个操作是否完成，第一个操作都会一直往下执行下去，从而导致业务上的错误。解决方法要么是在if后面加上else，或者在setTimeout之后直接return，例如：
if(!ajax2HasExecuted){
      setTimeout(ajax1Func,200);
      return;
   }

9，window.open和window.showModalDialog方法相信你已经用到过许多次了，但是总是出现这样或那样的问题，问题主要是以下几个方面：
1）showModalDialog这个函数名经常被写错，例如经常被写成showModelDialog，使得不能执行打开窗口的操作。
2）控制打开窗口的属性，例如尺寸、滚动条、菜单、状态栏等，是我们经常会碰到的情况，但是我们经常会将这两种打开方式的属性名称以及属性之间的分隔符混用，使得属性执行不正确，例如我举下面的例子，要求弹出一个宽200高300的窗口，你看哪些方式是对的？
（A） window.open("about:blank","","width=200,height=300");
（B） window.open("about:blank","","width:200,height:300");
（C） window.open("about:blank","","width=200;height=300");
（D） window.open("about:blank","","width:200;height:300");
（E） window.showModalDialog("about:blank","","dialogWidth:200px;dialogHeight:300px");
（F） window.showModalDialog("about:blank","","dialogWidth=200px;dialogHeight=300px");
（G） window.showModalDialog("about:blank","","dialogWidth:200;dialogHeight:300");
再多的选项就不写了，正确答案是A和E，通过上面的问题我们需要记住一下几点：

window.open控制属性之间的分隔符是逗号“,”，属性和值之间用等于号"="连接
window.showModalDialog控制属性之间的分隔符是分号“;”，属性之间的用冒号“:”连接
window.open控制属性中长度和宽度尺寸可以直接写数字，也可以加上度量，例如px，但是对于window.showModalDialog的长度和宽度则必须带上px，否则尺寸无效，这一点是很重要的。

10，对于数据库中的varchar型字段，是有长度限制的，例如oracle10g中varchar2字段的最大长度为4000字符,在mysql中varchar最长为255字符，要注意这里面的限制值是单字节字符值，而汉字属于双字节字符，因此对于汉字存储而言，varchar2字段最多可以存储2000个汉字，由此引申出来的一个问题，就是web开发过程中的表单提交验证问题，因为对于中国用户而言，输入的内容有可能是汉字和英文字符的组合，因此判断输入字符串的长度需要注意，Javascript中判断一个字符串的长度的方法为：
var str="abcdef";
var length=str.length;
但是字符串的这个属性，计算的是独立字符的长度，例如一个中文字符按长度1计算，因此如下：
var str="你好";
var length=str.length;
其长度的值为2，而不是4，那么如何计算含有汉字或者说是双字节字符的真实长度呢？通过搜索可以很快找到方法，就是先将双子节字符替换为两个单字节字符，然后计算替换后的字符的长度，当然了JsJava中提供了对于双字节字符串真实长度的计算支持，你可以查看其中的StringUtils类。

11，如果你不能默写出常用颜色的英文表示值和16进制表示值，那么说明你的HTML基本功还是需要练的，例如白色是white，十六进制是FFFFFF，红色是red，十六进制是FF0000，蓝色是blue，十六进制是0000FF，紫色是purple，橙色是orange，网页中常用的灰色一般都是EEEEE，或者再浅一些EFEFEF，当然说这些并不是让你去背大量的颜色和十六进制值，但掌握一些常用的，还是很有必要的。

12，Javascript支持多维数组，但是没有构造函数可以直接生成多维数组，例如一维数组可以通过Array生成，例如：
var arr=new Array(12);
生成多维数组，虽然没有构造函数支持，但是可以通过另外一种方式实现，例如实现一个12x5的二维数组：
var arr=new Array(12);
for(var i=0;i arr[i]=new Array(5);
}
另外，你可以直接使用JsJava的标准类MultiDimensionArrayUtils，支持生成二维和三维数组。

13，对于img标签，我们知道它有一个align属性，这个align是控制该图片与临近文本的位置关系，按照MSDN的说法，该属性的默认值是left，但是从实际的显示效果来看，好像并非如此，我们可以一起来比较一下不写align属性和将align赋值为left的情况，如果默认就是left，那么不写align和将align赋值left，其效果应该是一样的，那我们来一下：
JsJava是最优秀的Javascript类库解决方案和界面应用开发支撑框架！
效果如下：

再看加入align=left的情况：
JsJava是最优秀的Javascript类库解决方案和界面应用开发支撑框架！
效果图如下：

从实际效果来看，img的默认align并非是left，好像应该是bottom，而且上面的情况在IE6.0和Firefox2.0上都试验过，看来MSDN的说法是不太可信的，或者是自己理解错了？你可以看一下MSDN中的描述：http://msdn2.microsoft.com/en-us/library/ms533066.aspx

14，在界面中添加事件的方式主要有如下几种，例如当页面加载之后，执行函数myfunc，几种定义方式如下：
1）在标签中加入onload事件，即：

2）在任何一个可以执行Javascript的地方定义window.onload，即：
window.onload=myfunc;
3）在
4）将事件加入到事件队列中，即：
IE中 window.attachEvent("onload",myfunc)
Firefox中 window.addEventListener("load",myfunc,false)
建议大家使用第四种方式，因为只有第四种方式，可以避免将其它的同类事件覆盖，第四种方式是将该事件加入到同类的事件的队列之中，不会覆盖其它的同类事件，这在web开发过程种，是需要特别注意的，尤其我们自己定义一些界面框架或者组建的时候，经常需要定义onload事件，这个时候最好是使用第四种方式，因为引用界面框架和组建的用户，可能在页面上也想使用onload逻辑，当然用户自己使用第四种方式也不会有问题，但是做为一个负责任的界面高手，是不应该这样想得，我们应该严于律己，而宽以待人。

15，并不只是body（或者说window）有onload事件，中也可以定义onload事件，还有也可以定义onload事件，例如当图片加载完毕后，在window的状态栏种显示加载成功的字样：

当然了对于img，你最好深入研究一下其各个事件和属性的用法，你会发现原来不知道的东西还有那么多，当然肯定有不少开发人员，已经对这一点有所研究了，但是大多数开发人员还是缺乏对这方面知识的了解。

16，如何在HTML种加入一段保留格式化的文本，相信你会想到

标签，例如：


  这是一段格式化文本，
里面的文字直接将格式输出

显示结果为：
这是一段格式化文本，
里面的文字直接将格式输出

对于一般情况而言，pre标签就够用了，但是pre标签的不足之处，在于它不能将其中的html标签也原样输出，而是进行了解析，例如：


  这是一段格式化文本，里面的文字直接将
格式输出

显示结果为：
这是一段格式化文本，里面的文字直接将
格式输出

那么如何才能将含有HTML的内容也原样输出呢？实际上在HTML规范种有

标签，可以实现这种效果，例如： <xmp>   这是一段格式化文本，里面的文字直接将 格式输出 
显示结果为：
这是一段格式化文本，里面的文字直接将
格式输出

17，如何获取某个对象区域的尺寸以及坐标，是我们界面开发过程种经常会遇到的一个问题，一般我们都采用getBoundingClientRect方法来获取对象的区域，进而得到该区域的尺寸和坐标，但是该方法只能在IE中使用，当然Firefox也有类似的方法，相信大多数开发人员不知道，该方法就是getBoxObjectFor，为了不想为跨浏览器而操心，你可以直接下载JsJava，使用其中的DocumentUtils类的getElementRectangle静态方法，例如：

JsJava的类和方法都是经过IE和Firefox测试的，使用起来很方便。

18，在界面中对象的位置的计算与理解是比较麻烦的一件事情，例如clientHeight、clientTop、scrollHeight、scrollTop、offsetHeight、offsetTop，这些该怎么区分，又分别代表什么意思，对位置属性的深入理解，非常有助于对HTML界面布局本质的理解，是成为高手的必由之路，下面就简单介绍一下：
1）clientHeight，代表对象区域的屏幕高度，不包含区域的border尺寸，但包含padding的尺寸
2）clientTop，对象区域offsetHeight与clientHeight的差的一半
3）scrollHeight，代表对象区域内容的底部距区域最上边的距离
4）scrollTop，代表对象区域滚动部分的高度，即区域的最上边距离该区域可见部分的最上边的距离
5）offsetHeight，代表对象区域的屏幕高度，包含border和padding尺寸
6）offsetTop，代表对象区域距离上一个对象高度
上面的解释如果没有实际的经验，多少会有些迷糊，没有关系，我给你一个示意图：

因此，scrollHeight并非总是大于或等于clientHeight，实际上确实有一些开发人员认为一个区域没有滚动时scrollHeight和clientHeight相等，有滚动时scrollHeight＝clientHeight+scrollTop，这种认识是不对的或者说是不准确的。
上面的图的html源码为：

区域1，高100

区域2，高50

区域4，高100

显示结果为：
70
15
28
0
100
15
--------------
50
0
18
0
50
115
--------------

19，网上许多人都问，如何将一个RGB颜色转换为HTML中的十六进制颜色，我看到了一些网友的实现，例如定义一个长度为256的数组，并按照十六进制的规律将其全部初始化，还有的利用了HTML标签的一些特点，不过有一定的局限性，其实我们只要理解了RGB颜色的基本知识，转换起来是很方便的，RGB分别代表红（Red）、绿（Green）、蓝（Blue）三种基色，其中每一种基色从浅到深又可以定义256色，这样RGB总共可以表示256x256x256种颜色，而对于十六进制颜色来说，其实就是用十六进制数字来表示RGB，例如FFFFFF代表rgb(256,256,256)，换算起来也很简单，就是十进制与十六进制之间的表示方法的转换，例如对于RGB颜色rgb(132,216,12)，用十六进制颜色表示的计算方式为：
132转换为十六进制数字为84
216转换为十六进制数字为D8
12转换为十六进制数字为0C
因此rgb(132,216,12)的十六进制颜色就是84D80C，我们可以看一下两者的效果：

显示为：

那么Javascript之中是否提供了十进制数与十六进制数的转换呢，Javascript没有提供内置的函数来进行这种转换，不过你可以下载JsJava，使用其中Integer类的静态方法：toHexString方法，例如

或者你直接使用JsJava种的Color对象：
var color=new Color(132,216,12);
var hex=color.toHexValue();//hex的值为84d80c

20，web开发过程中，经常会遇到原页面与弹出页面之间进行交互的问题，如果只是简单的变量传递，还是不难的，而我们经常遇到的一个实际场景是：例如有一个用户列表页面，点击“新建”按钮，弹出一个创建用户的页面，填写完信息后要提交表单并关闭窗口，同时列表页面中要列出新建的用户，这个时候我们一些开发人员喜欢使用的方式为：
userForm.submit();
opener.location.reload();//或者有些开发人员喜欢用opener.location=列表页面的请求url
window.close();
上面的代码有一个很明显的问题，就是如果表单提交给后台，后台还在处理，而此时原页面已经执行了重载，那么等新用户在后台存储后了，也不会反映到列表页面中了，当然刷新一个就有了，但是就达不到我们所要的效果了。下面给你介绍一种比较稳妥的方式（ajax方式就不介绍了）：
先让表单提交，提交后还是回到弹出的那个页面，或者一个其它的页面，然后在该页面中做判断，如果后台信息处理成功，那么就执行原页面的重载，然后关闭窗口。
当然有些开发人员说，前面的那种方式，一直在项目中使用没有发现什么问题，那我告诉你，那是因为你比较幸运，后台处理速度很快，列表重载的时候，后台已经处理完了，但是一旦后台处理慢了，客户就该找麻烦了。

21，界面问题是当前web开发领域（不要认为只是asp、jsp和或者php等的开发，大的说可以包括ASP.NET以及J2EE等）最为棘手的问题之一，而且大部分开发人员，不懂得该如何去解决界面问题，而且经常会遇到一些不可思议的问题。其实我告诉你，界面问题的确有一些是非常奇怪的，但是不要因为这样，就不去深究问题的原因所在，我在这些年的开发中，遇到了不少的离奇的界面问题，包括自己碰到的和别人让我去解决的，不过我发现，在这些离奇的问题背后，体现的却是我们大部分开发人员，在界面能力和素养方面的一些问题，例如有些人就是太粗心，而有些人则是缺乏界面基础知识等等。成为界面高手不是目的，培养解决界面问题的能力和素养才是最关键的。

22，在连接标签中加入onclick操作是很常用的一种方式，例如：
人员管理
一般情况，这种方式是没有问题，但是如果页面内容比较长，出现了上下滚动条的时候，这种方式就会出一些问题，主要是由于href的#造成的，我们知道锚的作用就是让页面定位并移动到锚处，上面的代码开发人员的意图主要是想点击的时候不要执行链接href，所以写一个#，但是#对于滚动的页面，会在执行onclick的同时，页面出现移动定位行为，这样的用户体验是很不好，解决方式有如下几种：
人员管理
 人员管理
建议使用void 0方式，因为return方式，有时会影响click事件的传播，尤其是return false的时候。

23，在Window XP系统中，我们经常奇怪为什么我们使用的Javascript控制窗口尺寸和位置的一些操作，而IE竟然没有全部支持呢，例如下面的代码：

按道理应该弹出一个10000x15000的大窗口，然后实际上IE给我们弹出的不过是一个和浏览器尺寸大小一致的窗口，为什么会这样呢？其实我们理解微软，如果不这样限制，系统可能会因为大量的这种代码而最终崩溃，当然微软的IE也提供了配置入口，配置是否进行限制，具体入口为：

对一般站点类说，默认都是禁用的，只要打开就可以了。

24，我们页面中经常会以post方式提交表单数据，提交之后，如果我们刷新页面，IE中一般都会提示如下图所示的信息：

如果避免这种提示出现，一种是编程上去解决，即表单提交后，不要从其它窗口对该窗口继续执行location的reload方法等等，最好是使用location的href属性或者assign、replace等方法），在IE的高级选项中，也有一个条目可以设置重定向表单提交时是否给出提示信息，但是设置了之后，没有什么效果，因此也就不过多介绍了。

25，现在很流行div+css方式的布局，的确这样做界面框架的灵活性大为增加，可以说什么布局都能出的来，而且目前的ajax方式的轻量级portal框架基本上都采用的是div+css的布局方式，但是也不要过度的使用，或者什么场合下都使用，例如对于一个中大型的项目而言，要考虑的不仅仅是布局这样的事情，还要考虑界面框架的许多东西，在这种情况下，还是使用模板的方式比较好，事实上div+css是一种布局，而模板是一种“框架”，两者可以结合使用，至于能结合到什么程度，就看你的实际本领了。

26，做为一个项目经理、产品经理或者是技术总监，你应该要重视界面方面的问题了，想想吧我们现在的开发人员，大都能很快的完成后台逻辑的开发，但是到了界面展现却是捉襟见肘，界面效果和易用性做的都不到位，界面方面都调整好了，需要的时间往往并不比后台逻辑开发用的时间少多少，相信你见到过吧，为了调试一个界面中的奇怪的问题，往往会用掉一个人一两天的时间，如果再不重视界面技术的学习和素养的培养，我们的路还能走多远。

又七七八八的为大家总结了一下我在web开发尤其是界面开发上的一些经验，这些都是摸爬滚打出来的，可以算作是经验，但不一定就特别的正确，许多东西还需要你自己去实践、检验和再总结，如果我写的这些东西，对你而言哪怕只是有一点的用处，我都是很欣慰的，另外一点我需要说的，就是我们应该逐步走出大师崇拜的阴影，不要再津津乐道于敏捷开发、极限编程等等，面对那些国外的大师，我们更为重要的是学习他们身上的精神和品质，而不是做一个忠实的传道士，对于这些精神和品质，我们中华民族实际上很早就有了，只是到现在已经少的可怜的，但并不是说我们就没有希望了，看看当今科学界和各个行业的民族精英们，看看他们骨子里面的那种精神，是很值得我们崇敬和学习的。

Yemoo'S JS Blog 2007-10-10 12:20 发表评论