原文来自kirupa

In ActionScript 2, you had the watch function that, among many things, allowed you to detect which direction your mouse cursor was moving. There is a tutorial on how to do that on kirupa.com itself. In ActionScript 3, I couldn’t find the watch function nor an equivalent replacement, but creating your own function that shows you how to detect the direction of mouse movement is not very complicated.

The following is an example of what I will be describing in this article:

Move your mouse around in the above movie, and the direction of the mouse's X and Y movement will be displayed. Behind the scenes, what is actually happening is very simple.

Take a look at the following diagram:

The easiest way to know which direction you are moving in is to figure out where you are now and compare it to where you were just a few seconds ago. That is the magic inside our movie as well. In the above diagram, I show a simple example of a mouse moving across a path with two separate timestamps when the mouse's position was stored - time1 and time2.

At time 2, you can get an idea of what direction your mouse cursor is moving in by comparing its position at that point with the mouse's position at the earlier time - time 1. Using that as our yardstick, you can see that your mouse cursor is moving to the top and to the right. The more frequently you check your position and compare it to an earlier position, the more accurate your measure will be.

Download Source File
To see how this was done, download the Flash CS3 source file from the following location:

Download Final Source

Download and extract the above file and open it in Flash CS3. Much of what you see should be pretty straightforward, but let's look at the contents in greater detail.

Examining the File
Pretty much everything in the above example is done using code. The only things that aren't in code are the two textfields that display the direction of your mouse movement, so let's go ahead and look at the code:

var prevX:int = 0;

var prevY:int = 0;

var curX:int = 0;

var curY:int = 0;

 

var dirX:String = "";

var dirY:String = "";

 

function Start()

{

stage.addEventListener(MouseEvent.MOUSE_MOVE, CheckDirection);

}

Start();

 

function CheckDirection(e:MouseEvent)

{

var xDirection:String = GetHorizontalDirection();

var yDirection:String = GetVerticalDirection();

 

xText.text = xDirection;

yText.text = yDirection;

 

e.updateAfterEvent();

}

 

function GetHorizontalDirection():String

{

prevX = curX;

curX = stage.mouseX;

 

if (prevX > curX) {

dirX = "left";

} else if (prevX < curX) {

dirX = "right";

} else {

dirX = "none";

}

 

return dirX;

}

 

function GetVerticalDirection():String

{

prevY = curY;

curY = stage.mouseY;

 

if (prevY > curY) {

dirY = "up";

} else if (prevY < curY) {

dirY = "down";

} else {

dirY = "none";

}

 

return dirY;

}

Don't let the number of lines of code scare you! It is very simple because much of the code is duplicated to handle movement vertically as well as horizontally. Let's just look at the horizontal case in more detail.

Let's start with the GetHorizontalDirection() function:

function GetHorizontalDirection():String

{

prevX = curX;

curX = stage.mouseX;

 

if (prevX > curX) {

dirX = "left";

} else if (prevX < curX) {

dirX = "right";

} else {

dirX = "none";

}

 

return dirX;

}

The first thing I do is set the value of our prevX variable to our curX variable. This is the equivalent of our Time 0 case. Next, I set our curX variable to the horizontal position of our mouse currently.

To reuse that image from earlier, here is what this would look like:

The previous position is stored by prevX, and the current position is stored by curX. Comparing them both gives you the information you would need to decide which direction your mouse is moving. That is all handled by the following code inside GetHorizontalDirection:

function GetHorizontalDirection():String

{

prevX = curX;

curX = stage.mouseX;

 

if (prevX > curX) {

dirX = "left";

} else if (prevX < curX) {

dirX = "right";

} else {

dirX = "none";

}

 

return dirX;

}

Notice that I check for the left, right, and none cases, and return that value back to whatever called this function. And what called this function you ask? It is our CheckDirection function which is actually the event handler for our MouseMove event:

function CheckDirection(e:MouseEvent)

{

var xDirection:String = GetHorizontalDirection();

var yDirection:String = GetVerticalDirection();

 

xText.text = xDirection;

yText.text = yDirection;

 

e.updateAfterEvent();

}

There is nothing complicated here at all. Each time your mouse moves, this function gets called, and it calls the GetHorizontalDirection function you saw earlier for horizontal data, and it calls the GetVerticalDirection function for the vertical data.

Both of those function return a direction as their result, and you send those results to their respective text fields xText and yText.

Conclusion
That's all there is to detecting the direction of mouse movement. This is a great example of implementing something in code that resembles how we as humans would solve this problem as well. We use frames of reference to gauge many things - including what direction we are moving in. The code I presented is nothing more than using variables to store frames of data and comparing them.

原文来自flashandmath

We show how to easily create a magnifying glass effect in Flash and AS3. The applet below is easy to customize and the instructions are provided in the corresponding 'fla' file that you can download from the link under the image. We also show how to load images at runtime and easily display load progress.

Click on the image to open the live appplet in a separete window.

Download

• A the 'zip' file with the 'fla' and 'jpg' files corresponding to the applet mag_glass.zip

How to customize?

• To use your own picture, simply change the name of the picture on line 76 of mag_glass.fla in the package. Make sure your picture is in the same directory as your html page (or give an address to your file.) For good magnifying effect, the picture should be of rather high resolution while the displayed picture should be its scaled-down version. All variables will automatically adjust to the dimensions of your image.
• To change the scale-down factor, change the value of 'shrinkFactor' variable on line 62.
• To change the size of the rectangular magnifying glass, change the values of the variables 'glassWidth' and 'glassHeight' on lines 42 and 43.
• To create a circular magnifying glass, set 'glassHeight' and 'glassWidth' to the same value and change line 179 to:
     glass.graphics.drawCircle(glassWidth/2,glassWidth/2,glassWidth/2);

Displaying Load progress

It is very easy. You simply attach an event listener to your instance of the Loader class that listens to the PROGRESS event and displays the result in a dynamic TextField. In our case, we have 'loader' and 'infoBox'. The code looks as follows.

startApp();

function startApp():void {

loader=new Loader();

...........................

...........................

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,updateInfo);

}

function updateInfo(e:ProgressEvent):void {

infoBox.text="Loading: "+String(Math.floor(e.bytesLoaded/1024))+

" KB of "+String(Math.floor(e.bytesTotal/1024))+" KB.";

}

After loading is complete, we remove 'updateInfo' listener as well as other listeners attached to 'loader'.

原文来自joeberkovitz.com

Lately I’ve been working on a set of projects (both my own and others) that are built on top of Moccasin, a new open source AS3 framework that I’ve developed for building graphical editors. Moccasin was distilled and refactored out of the first project that used these ideas so that I could use it elsewhere without IP issues, and it lives on Google Code. Moccasin still has a long way to go in terms of overview documentation and I have to ask a certain amount of forgiveness on that subject. I’m perhaps releasing it a bit prematurely, but I regard it as pretty useful in a practical sense since I’m now working on the third substantial application built on top of it. This post is an attempt to bite off a little bit of that overview problem and endow Moccasin with a little more value to other people.

If the current lack of great overview docs is the bad news, well, the good news about Moccasin is that it’s got a complete sample editor application called Simpleworld as part of the distribution, with both AIR and Flex versions. Both the Moccasin framework and the sample application source code are pretty well commented, also. Here’s the Simpleworld application itself, to give a concrete sense of what Moccasin’s all about — it’s an editor for documents that consist of a bunch of squares of different sizes (I don’t call this world “simple” for nothin’):

Here are some of the things you can do, which show off what Moccasin’s about…

• load and save XML documents on the server. View the one that’s loaded by the above example here.
• Click any square to select it singly, Ctrl/Command-click squares to make discontinuous selections
• Click on the background to add a new square to the world
• Drag any selected square to move all selected squares together
• Drag the mouse across the background to select all squares intersecting that rectangle
• Delete, Cut, Copy or Paste any selected objects
• Resize any individual square by dragging its resize handle (generalizes easily to multiple object handles)
• Undo/redo the last N editing actions
• View the graphical document at any desired magnification using the zoom slider

That’s the externally visible stuff; what about the internals, though? Moccasin is a framework for building applications, not a single application. Some of the above features are built right into Moccasin (like undo/redo or magnification), while others are implemented on top of it (like square objects, or the ability to resize them with a draggable handle).

Moccasin is not a “thin” framework that encapsulates a set of recommended practices like Cairngorm. It’s more of a “thick” framework. Moccasin is aimed at building a particular type of app: one with interactive graphical views that support a lot of mouse gestures, have some notion of compound or nested views, have some notion of a current selection, a clipboard for cut/copy/paste, need robust undo/redo, and must load and save documents to persist the editor state. The views in question are generally not Flex UIComponents in Canvases or Boxes, but lower-level Flash DisplayObjects that can have very arbitrary shapes and layout geometries. Within this domain, Moccasin very much adheres to an MVCS way of thinking: there is a model representing the edited document’s state, a set of views that adjust to the model’s state via events, a controller which changes the model in response to user actions, and a set of services responsible for talking to the world around and outside the application.

Let me devote the rest of this post to a few observations on Moccasin’s treatment of the Model/View relationship. I’ll try to keep up a series of posts over the coming weeks and, with some luck, accumulate some overview materials in fits and starts. Probably the only way it’s going to happen given my schedule these days.

The way Moccasin treats Models and Views is somewhat unique (where by “unique” I mean, “I never tried it before” — I’m sure someone else has!). As usual, one goal here is to absolutely separate view objects from models: views can reference models, but never the other way around. This not only keeps the architecture clean, but it is absolutely essential to permit multiple views of the same model. A second primary goal is that any change to the model should cause the view to adjust itself accordingly without additional effort by the programmer. This involves more than just data bindings: creating a model should cause the view to be added to the display list, and removing a model from the document must cause the view to vanish.

A common approach to model objects in a graphical editor is to make them inherit from some big old AbstractModel superclass with a boatload of common code in it. This code consists of all the gears and wires to dispatch the right events when the model changes, or when its set of children changes, or when some descendant model changes, or to generate a stable ID for use in document persistence… a lot of junk.

By contrast, here is a SimpleWorld-style class (with comments removed for brevity):

    [RemoteClass]
    [Bindable]
    public class Square
    {
        public var x:Number;
        public var y:Number;
        public var size:Number;
    }

Hey, what’s up? This model class has no methods and extends… Object! (Actually, EventDispatcher, due to the Bindable tag, but we’re splitting hairs).

In Moccasin, there are actually two sets of model objects: the domain-specific model (that application programmers work with) and the framework model (that Moccasin deals with). The developer of a Moccasin app only writes code against the domain-specific model, and Moccasin automatically wraps that model object inside another object of type MoccasinModel. MoccasinModel is where the “framework junk” lives, but the application programmer doesn’t see it.

There is also going to be a corresponding View class to draw a Square on the screen — SquareView. Here’s a sense of what a view class looks like:

    public class SquareView extends ShapeView
    {
        public function SquareView(context:ViewContext, model:MoccasinModel=null)
        {
            super(context, model);
            initialize();
        }

        override protected function updateView():void
        {
            super.updateView();

            graphics.beginFill(0);
            var square:Square = model.value as Square;
            graphics.drawRect(0, 0, square.size, square.size);
            graphics.endFill();
        }

        override protected function createFeedbackView():DisplayObject
        {
            return new SquareFeedback(context, model);
        }
    }

Because of the strong decoupling between the view, the framework model and the domain-specific model, application programmers can wind up writing very pure code to manipulate the model that doesn’t have to have any dependencies on Moccasin. You can say something like mySquare.x += 100, and this will cause the framework to adjust the corresponding SquareView object to be redrawn in a different position. Changing an ‘x’ property doesn’t seem very exciting, but consider that it’s not SquareView’s ‘x’ property being changed: it’s the Square’s property. In fact, the relationship between model properties and view properties can be quite arbitrary. We could have some other view of our Squares besides a 2D rendering, perhaps a numerical SquareCoordinatesTable with an X column, and a Y column, and Moccasin would manage that model/view relationship in much the same way.

It’s getting near my lame-old-guy bedtime and I’m flagging. I feel better for having squeezed this post out at the end of a long day though; now to keep it going! Next probable topic: Mediators, Contexts and Controllers in Moccasin.

I can hear it now... everyone saying "finally". It was announced at Flash on the Beach this week that Adobe is working on Flash for the iPhone.

There is no set date when this will be available, as it is up to Apple to determine, but the Flash/Flex development community is eagerly awaiting the news.

You can get more information regarding the announcement at:

Flash Magazine:
http://www.flashmagazine.com/news/detail/flash_for_the_iphone_confirmed_at_fotb/

PC World
http://blogs.pcworld.com/staffblog/archives/007842.html

Adobe Feeds:
http://feeds.adobe.com/index.cfm?searchterms=iphone&query=bySimpleSearch&searchsortby=date

Google:
http://www.google.com/search?hl=en&client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficial&hs=ZqP&q=iphone+flash+on+the+beach&btnG=Search

用svn(http://as3corelib.googlecode.com/svn/trunk/)获取到最新的开发版本至as3corelib目录，包括examples,docs,src,tests目 录。examples只包括一个json的例子。docs是用asdoc生成的，如果看源码，就不用看它了。tests是用flexunit写的测试。

学习使用as3corelib，最好是自己编码，而不是使用开发者已经编译好的swc文件。如果用flex builder 3创建library，把src文件添加进来之后，出现找不到flash.filesystem.File之类的错误，可按如下方法解决：

右键打开项目属性>Flex Library Compile>选择Include Adobe air libraries。flash.filesystem.File,与FileStream,FileMode均属于系统文件操作类，位于AIR Library中。

编译通过，一般会在bin目录生成一个swc文件。新建一个project，引用这个library。

原文来自InfoQ

“天下事头绪纠缠，兴一利必也生一弊。”

一句话，道破了改进难点所在。最近在项目中围绕持续集成做改进的时候，对这一点感受颇深。跌跌撞撞的一路走来。我们的持续集成的过程已经变得有些“个性化”，反过头来看我们一路的变化，非常有意思。

从项目的技术架构说起，我们的项目是采用的J2EE+Flex的方式进行开发的。在我进入项目组的时候，一个比较健壮的持续集成环境已经搭好了。工 程分为两个，一个是Java后端的工程，一个是Flex前端的。我们的持续集成服务器是CC。整个开发工作是围绕着持续集成展开的。一周为一个迭代。

那个时候，我们采用的是比较标准的方式：

• 后台采取TDD的方式开发。
• 每次提交代码之前更新所有代码，然后运行所有测试用例，全部为绿色的时候才提交。
• 前台Flex比较麻烦，所以采取了用功能测试覆盖单元测试的方式。用基于Ruby的FunFx写单元测试。工作方式与后台差不多，每次前台功能测试全部通过了才提交。
• 持续集成的流程是每隔5分钟检测一边代码库，有更新就build。
• build的流程是先编译后台，跑单元测试，单元测试通过了，再编译Flex，将swf和html以及后台的文件打成war包，部署到tomcat上去，跑功能测试。
• build成功之后发布到特定的目录，形成发布列表。有war包供人下载。

那个时候，build一次大概是15分钟，因为Check In Gate环节是按照标准流程走的，所以build出错的几率也小。CC大多数时候是绿的。哪怕偶尔出问题红了，也很快被修正了。

随着项目的开发，代码规模越来越庞大。功能测试越来越慢，比起自动执行脚本那种速度，开发人员更乐意手动点两下，加之上面对工作进度的压力。更改了一些工作方式：

• 后台的工作方式不变。
• 前台，将功能测试脚本的工作交给几个测试人员编写。几个测试人员也坐在附近，基本可以看作团队成员（到后来编制也是我们团队的成员了）。 开发人员人肉测试一下保证没有问题了再提交。
• 测试人员写脚本的流程是拿到上一次build成功的war包，在本地写脚本，本地测通过了再提交。
• 持续集成服务器上功能测试不通过的时候，由测试人员提交BUG，开发人员修改。
• 持续集成的流程依旧。

这样，从后来收集的数据看，工作效率是提升了，因为参照以前的统计，开发人员的工作一下减轻了1/3。以进度来衡量的速度自然很轻易就可以让上级满意了。

新的解决方案总会产生新的问题，测试人员在测试方面的专业性，使得他们写出来的脚本测的更细。功能测试的时间占耗，增长的更快了，短短半个月，就增 长到了1个小时。每当出现问题，作出反应之后，要在1个多小时以后才能知道结果。而且，持续集成方面并没有做到，一旦出错，谁也不能提交代码这么严格。模 块化的设计所带来的假想的安全感和进度的压力，使得开发人员修正问题的激励不高。于是修正问题的速度不如产生问题的速度快。持续集成服务器在那两个个礼拜 里只有两头是绿的，周一早晨和周五下午。

最早，我们发觉，由开发人员重构造成的脚本失败占大多数，而测试人员每次拿到的上一个版本是没有错误的。所以会出现自动化脚本本地跑得过，服务器上 跑不过的情况发生。于是我们修改了发布的逻辑，在后台单元测试通过、flash编译完成的情况下打的那个war包，复制一份，放到某特定目录指定为 current build。供测试人员写测脚本使用。

过程改进之后，测试人员可以快速的修正脚本了，虽然对于开发人员重构造成测试人员工作的返工无疑是一种浪费，但是毕竟自动化的测试省了回归测试的不少时间，还是可以接受。

脚本的修正速度解决之后，工作似乎有了些起色，但很快，问题的本质就暴露了出来--build的时间太长了，修得速度还是跟不上问题产生的速度。尤 其是中间缺少当build失败时强制阻止代码提交的环节。这之后依然是周一和周五两头绿，中间都是红的。于是，我们觉得问题还是出在build速度上。我 们人工的将功能测试脚本分到四个suite里去，然后以多线程的方式运行。速度被提高了4倍。于是又消停了两天。

好景不长，多线程的测试似乎不太稳定。很多本地可以跑通的测试用例，到了服务器上就失败。险些一个礼拜都没有build出一个版本。最后不得不改回单线程。这时，build一次已经占到了100分钟。第一期的产品Backlog还没有完成1/3。

持续集成走到这里已经进入一个困境，有必要做一些更深一步的改进。经过多次讨论，归纳出了几套方案：

• 分冒烟测试和all test两套测试用例集是我们当中呼声最高的一种方案，当我的代码提交之后在跑完所有单元测试和基本的冒烟测试之后就发布beta版，由测试人员接到 beta版，进行更细致的自动化测试并带一些人肉测试。但是反对的声音认为，不跑完全部的测试用例就失去了持续集成的意义。而且会更降低开发人员修正 Bug的积极性。于是作为修正，支持的声音则提出，在Check-In Gate处把关，恢复每个人提交代码之前跑测试用例的实践。可这明显会给开发人员带来更大的工作负担，估计以此时的进度压力，开发人员的安全感肯定会大幅 下降。很可能会推行不下去。
• 另一个方案是从细节处调优，把WEB应用部署到另外一台机器上去，或许就会稳定一些了。但是反 对的声音认为，以测试用例的这个增长速度，他早晚会不稳定的，而且可能撑不过两周。作为修正，想考虑分布式，但是我们所有人的知识储备中，并没有一个人清 楚CC有没有分布式能力。所以想的是购买Cruise，但是价格的障碍就摆在眼前了，在项目前景还不是很明朗的情况下，估计很难申请到资金，但也不是不可 能，只要我们敢于冒这个风险。
• 第三，便是更为高级的分支式开发，将版本库划分一下分支，以分支来搭配持续集成，以分支合并 来触发自动构建。这样做，开发的过程就更加有板有眼，粒度可以划分的更细。可是分支的划分，一时想不清楚。但是假设想清楚了，似乎这也使得我们的工作流程 更加复杂了，做如此之大的改变，风险有多大？效果有多大？成本有多大？到底是值不值得？一时也想不清楚。

方案有了，听起来都很有道理，也都有问题。该如何做出决策，是个问题。现在大家众说纷纭，都有理，就变得难以抉择。而且到现在了是不能随便尝试的，这种尝试也是一种风险，一旦出问题造成的成本上升都会加大我们身上的压力。

迷茫之下到AgileChina上跟大家讨论了一下。非常高兴的收集到了几方面的建议：

Jeff Xiong觉得可以将测试分级，并将build分为两个环节，一个跑基本的用例，一个跑全部的用例。这跟我们的第一套方案的思路吻合。但是这种行为是不是失去了持续集成的意义呢？他也不是很确定，他说：

我也不确定……不过，不全面的持续集成至少比不能用的持续集成要好。哪怕一个quick build（只？）能抓到80%（70%？60%？50%？）的defect，如果它只要很少的时间就能跑一遍，似乎值得这样做。

不过同时就需要（可能是专门的）人来关注slow build的健康状况，不然broken functional tests可能被忽视并累积。

因为是在论坛上，互相之间的交流容易造成理解上的偏差，我便阐述了一下我的理解：

嗯。。。也就是说分一个fast build和一个slow build然后有专人关注slow build。

那我的理解，这个fast build应该是反映了后台的健康和前台与后台的基本集成的健康。主要用来完成保障集成的角色。

而slow build则是反映了从用户接口来看的软件的健康状况，定期回归，防止发生过的错误再次发生。

这样逻辑上看着很清晰，但是两者之间的同步。。。会不会有什么问题呢？

Jeff Xiong认可了我的理解，并提出了更进一步的解释和建议：

slow build实际上是运行完整的回归测试套件。当然理想的情况是slow build基本上不出错，因为*逻辑*用单元测试都覆盖到了，功能测试只是在描述*表现形式*。那么因为slow build基本上不出错，就没有价值每次都去运行它，让它在后台慢慢的跑着，过一段时间（半天或者两小时）去关注它一下，没问题就好，偶尔出了问题就马上 解决并且加上对应的单元测试。这样你既节约了时间又不会严重降低对质量的保障力度。

实际上的情况可能比较难这样理想，但是和所有好的环境一样，这个环境不是说一下子规划好就万事大吉的。你可能大概的分一分，然后不断的维护，在两组 build之间交换测试案例，一些覆盖到大量功能的、经常出错的案例也许要换到fast build的冒烟套件里面，一些看起来永远不会出错的案例也许可以换到slow build去。一直琢磨这个事，它才会变得越来越好。

（题外话：最近我觉得稍微大一点的项目应该有比较专注的build master，developers往往并不是特别认真的考虑build和CI的持续改进。）

而胡凯则提出了一些基于CC采用分布式的解决思路：

CruiseControl是支持一个叫做Distribute的Contrib，它的Idea是：因为 CruisControl支持叫做Composite的build方式，那么你可以起多个build server一起来build同一个项目，当且仅当所有的子build通过，整个build才算成功。

对于每个build server，你是在单线程测试，对于整个项目，你却是并发测试，因为有多个server同时在跑测试。

但是他也说到CC毕竟是开源的东西，配置起来十分麻烦，于是最后也提出了采用Cruise的方案^_^:

或者你也可以尝试一下ThoughtWorks新发布的Cruise, 基本的理念很相似， 都是把测试分布到不同的机器上执行。

在试用期内可以同时跑6个Agent.你可以在每个Agent上执行不同的Target比如

Agent1 : ant ft.suite.1
Agent2 : ant ft.suite.2
Agent3 : ant ft.suite.3

你可以拿来玩儿下，根Open Source的那个比起来，应该容易设置很多。

缺点是：

• 你必须使用 hg或者svn 作为 SCM
• 试用期过后，你只有2个免费的Agent

另外，糖醋鼻子还提到了分支式开发，大家围绕这个还展开了激烈的讨论，不过我考虑到分支式开发对我们的利可能要远小于弊，最终还是放弃了这个方案。

在吸取了两方面的建议之后，经过一番思考，决定开始两方面的准备，一方面，对测试用例的分级方面做了一些工作，重构了一部分用例的结构。另一方面我 去调研分布式构建的实现手法。CC的配置果然非常麻烦，调研期间发现了有RemoteAnt这个东西，试了一下基本满足我们的需求，考虑到一个Agent 不用做的太过重型，于是就采用了这个方法。在分布式的技术调研已经完成的情况下，测试分级要不要做成了一个问题，但考虑到目前需求只作了1/3，如果这个 都抗不住要分级的话，后面的工作就没法做了，所以分级的事情，虽然做了，但是也暂缓实行。

现在实践已经采用，会不会产生新的问题呢？前文说过“兴一利必也生一弊”，这个事情是肯定的。那么问题就来了，既然弊端肯定会滋生，我们怎么知道作出的决策是正确的呢？

其实，倒回去看这一路走来的过程，除了一个可以运行的过程以外，还有一个很重要的收获，那就是：如何进行决策。而所谓决策，并不是在黑白分明的事情 之间做出选择，而是在都有理的事情中做出选择。就像我们都知道做软件设计的时候，设计是没有好坏之分的，只有适不适应你的具体情况之别。所以当我们面临几 套解决方案的时候，就好象面对几套设计方案一样，真的是很难选择。如何做？各自就有各自的思路了。像我们就吸收了敏捷开发的思想中所强调得不做过度设计。 选择立杆见影的改进去做。同时，像前文所说，抱着拥抱变化的态度，相信兴一利必生一弊并不是坏事。相反，他可以从一定程度上，带领我们找到真正的问题。

作者简介：仝键，网名咖啡屋的鼠标，06年大学毕业，普通程序员，专注于Java、Flex方面的开发、Agile等软件开发方法论的学习。爱好参加社区活动。

Within the vast catalog of Design Patterns available to software developers today, one of the most important to consider when designing an enterprise class RIA is the Dependency Injection Pattern.

Dependency Injection, a term originally coined by Martin Fowler in his well known article Inversion of Control Containers and the Dependency Injection Pattern, is a more specific term for what is otherwise known as Inversion of Control or IoC.

Fowler’s assessment of Inversion of Control containers concluded that the name itself - Inversion of Control - was too generic, thus as a result from his discussions with various IoC advocates they settled on the more specific term Dependency Injection, also known as DI for short. The terms Inversion of Control (IoC) and Dependency Injection (DI) are commonly used interchangeably to describe the same underlying design principle of separating configuration from implementation.

There are three basic forms of Dependency Injection, which are generally referred to as type 1 IoC (Interface Injection), type 2 IoC (Setter Injection) and type 3 IoC (Constructor Injection). Before diving into the specifics of how to implement the various forms of DI, I will first discuss what Dependency Injection is on a conceptual level as well as what each specific form means. The examples outlined here are in ActionScript 3, however it is important to keep in mind that like most Design Patterns Dependency Injection applies to any language which supports an Object Oriented Model.

At the most basic level Dependency Injection can be explained as a way of decoupling classes from their dependencies by injecting the dependencies into them rather than having the classes directly reference specific implementations. A class which directly references other classes is coupled to those classes - these are the dependencies. However a class which does not reference any other classes would probably not be very useful. At some point the dependencies need to be made. Dependency Injection is a solution to how those dependencies are made, and the manner by which they are provided.

For example, consider the following class which illustrates a typical example of a class’s dependency on another class:

From looking at the code above the dependencies are pretty obvious; the ConfigurationManager class is dependent on the XMLConfiguration class. Now this type of dependency is quite typical so at this point you may be asking what is wrong with doing this?

The first problem is that the config property is defined as a concrete implementation:

This violates a fundamental OO principle:

Program to interfaces, not implementations.

More importantly and perhaps pertinent to the topic at hand is that it also isn’t very hard to imagine that at some point we may want to load a configuration from some other means, such as a properties file, a remote service and so on. In order to do so we would need to modify the class, and from this we can deduce that the class does not scale very well.

So we could begin improving our current implementation by simply refactoring the ConfigurationManager class to define the config property as an abstraction, say IConfiguration:

As you can see this is certainly a step in the right direction, however the underlying problem still remains; we are still instantiating an instance of XMLConfiguration directly in the ConfigurationManager - and that is exactly what Dependency Injection is all about: providing a solution to the recurring problem of managing dependencies between classes, and how those dependencies are provided.

When implementing the Dependency Injection Pattern in an application you do so by creating a context (configuration) which defines all dependencies in an application as well as an Assembler which is responsible for assembling the mappings and associations between objects and their dependencies. This is done by utilizing any combination of the three forms of DI; Interface Injection, Setter Injection and Constructor Injection. Below is a brief description of each form:

Interface Injection
Interface Injection is the process by which all dependencies are injected into an object via an interface. For example, the ConfigurationManager example above could implement an interface which defines the operations needed to inject the appropriate Configuration implementation.

Setter Injection
Setter injection as you may have guessed is the process of injecting dependencies via public setters; both explicit or implicit. Using Setter Injection the ConfigurationManager could provide public setters from which an Assembler could inject the appropriate Configuration implementation.

Constructor Injection
Again as you may have guessed Constructor Injection is the process of injecting dependencies via arguments in the class constructor. Using Constructor Injection the concrete Configuration could just as easily be injected.

Both Constructor and Setter Injection are by far the preferred forms of Dependency Injection. Interface Injection has some major drawbacks as it somewhat leads to convoluted code since multiple additional interfaces need to be defined and implemented. The fact that “special” types need to be created and implemented in order to facilitate DI using Interface Injection greatly limits the potential for its use.

There are numerous frameworks for various platforms which provide out of the box Dependency Injection implementations for all three forms of DI. All of these frameworks handle the wiring necessary for easily implementing Dependency Injection in an application, the most notable being the Spring Framework for Java/J2EE. There are also quite a few DI solutions for Flex and ActionScript applications as well. Optionally you could choose to roll your own however I would first suggest investigating some of the frameworks which are currently available as they more than likely provide what you need. The Prana Framework by Christophe Herreman is a good choice as it is one of the most prevalent DI solution available at the moment for Flex.

Using the ConfgurationManager example from above I have provided a basic example application which demonstrates how to implement Dependency Injection utilizing the Prana framework. The example application uses constructor injection to provide a concrete Configuration to the ConfigurationManager, however I encourage you to experiment with the other mechanisms of injection as well. The example is intentionally kept very simple in that it is only intended to convey the basic concepts of DI and how to use it in Flex with Prana, from this you should have a good understanding of how to implement DI in a larger context.

之前也有一些介绍大型网站架构演变的文章，例如LiveJournal的、ebay的，都是非常值得参考的，不过感觉他们讲的更多的是每次演变的结果，而没有很详细的讲为什么需要做这样的演变，再加上近来感觉有不少同学都很难明白为什么一个网站需要那么复杂的技术，于是有了写这篇文章的想法，在这篇文章中 将阐述一个普通的网站发展成大型网站过程中的一种较为典型的架构演变历程和所需掌握的知识体系，希望能给想从事互联网行业的同学一点初步的概念， ，文中的不对之处也请各位多给点建议，让本文真正起到抛砖引玉的效果。

架构演变第一步：物理分离webserver和数据库

最开始，由于某些想法，于是在互联网上搭建了一个网站，这个时候甚至有可能主机都是租借的，但由于这篇文章我们只关注架构的演变历程，因此就假设这个时候 已 经是托管了一台主机，并且有一定的带宽了，这个时候由于网站具备了一定的特色，吸引了 部分人访问，逐渐你发现系统的压力越来越高，响应速度越来越慢，而这个时候比较明显的是数据库和应用互相影响，应用出问题了，数据库也很容易出现问题，而 数据库出问题的时候，应用也容易出问题，于是进入了第一步演变阶段：将应用和数据库从物理上分离，变成了两台机器，这个时候技术上没有什么新的要求，但你 发现确实起到效果了，系统又恢复到以前的响应速度了，并且支撑住了更高的流量，并且不会因为数据库和应用形成互相的影响。

看看这一步完成后系统的图示：

这一步涉及到了这些知识体系：

这一步架构演变对技术上的知识体系基本没有要求。

架构演变第二步：增加页面缓存

好景不长，随着访问的人越来越多，你发现响应速度又开始变慢了，查找原因，发现是访问数据库的操作太多，导致数据连接竞争激烈，所以响应变慢，但数据库连 接又不能开太多，否则数据库机器压力会很高，因此考虑采用缓存机制来减少数据库连接资源的竞争和对数据库读的压力，这个时候首先也许会选择采用squid 等类似的机制来将系统中相对静态的页面（例如一两天才会有更新的页面）进行缓存（当然，也可以采用将页面静态化的方案），这样程序上可以不做修改，就能够 很好的减少对webserver的压力以及减少数据库连接资源的竞争，OK，于是开始采用squid来做相对静态的页面的缓存。

看看这一步完成后系统的图示：

这一步涉及到了这些知识体系：

前端页面缓存技术，例如squid，如想用好的话还得深入掌握下squid的实现方式以及缓存的失效算法等。

架构演变第三步：增加页面片段缓存

增加了squid做缓存后，整体系统的速度确实是提升了，webserver的压力也开始下降了，但随着访问量的增加，发现系统又开始变的有些慢了，在尝 到了squid之类的动态缓存带来的好处后，开始想能不能让现在那些动态页面里相对静态的部分也缓存起来呢，因此考虑采用类似ESI之类的页面片段缓存策略，OK，于是开始采用ESI来做动态页面中相对静态的片段部分的缓存。

看看这一步完成后系统的图示：

这一步涉及到了这些知识体系：

页面片段缓存技术，例如ESI等，想用好的话同样需要掌握ESI的实现方式等；

架构演变第四步：数据缓存

在采用ESI之类的技术再次提高了系统的缓存效果后，系统的压力确实进一步降低了，但同样，随着访问量的增加，系统还是开始变慢，经过查找，可能会发现系 统中存在一些重复获取数据信息的地方，像获取用户信息等，这个时候开始考虑是不是可以将这些数据信息也缓存起来呢，于是将这些数据缓存到本地内存，改变完毕后，完全符合预期，系统的响应速度又恢复了，数据库的压力也再度降低了不少。

看看这一步完成后系统的图示：

这一步涉及到了这些知识体系：

缓存技术，包括像Map数据结构、缓存算法、所选用的框架本身的实现机制等。

架构演变第五步： 增加webserver

好景不长，发现随着系统访问量的再度增加，webserver机器的压力在高峰期会上升到比较高，这个时候开始考虑增加一台webserver，这也是为了同时解决可用性的问题，避免单台的webserver down机的话就没法使用了，在做了这些考虑后，决定增加一台webserver，增加一台webserver时，会碰到一些问题，典型的有：
1、如何让访问分配到这两台机器上，这个时候通常会考虑的方案是Apache自带的负载均衡方案，或LVS这类的软件负载均衡方案；
2、如何保持状态信息的同步，例如用户session等，这个时候会考虑的方案有写入数据库、写入存储、cookie或同步session信息等机制等；
3、如何保持数据缓存信息的同步，例如之前缓存的用户数据等，这个时候通常会考虑的机制有缓存同步或分布式缓存；
4、如何让上传文件这些类似的功能继续正常，这个时候通常会考虑的机制是使用共享文件系统或存储等；
在解决了这些问题后，终于是把webserver增加为了两台，系统终于是又恢复到了以往的速度。

看看这一步完成后系统的图示：

这一步涉及到了这些知识体系：

负载均衡技术（包括但不限于硬件负载均衡、软件负载均衡、负载算法、linux转发协议、所选用的技术的实现细节等）、主备技术（包括但不限于ARP欺骗、linux heart-beat等）、状态信息或缓存同步技术（包括但不限于Cookie技术、UDP协议、状态信息广播、所选用的缓存同步技术的实现细节等）、共享文件技术（包括但不限于NFS等）、存储技术（包括但不限于存储设备等）。

架构演变第六步：分库

享受了一段时间的系统访问量高速增长的幸福后，发现系统又开始变慢了，这次又是什么状况呢，经过查找，发现数据库写入、更新的这些操作的部分数据库连接的 资 源竞争非常激烈，导致了系统变慢，这下怎么办呢，此时可选的方案有数据库集群和分库策 略，集群方面像有些数据库支持的并不是很好，因此分库会成为比较普遍的策略，分库也就意味着要对原有程序进行修改，一通修改实现分库后，不错，目标达到 了，系统恢复甚至速度比以前还快了。

看看这一步完成后系统的图示：

这一步涉及到了这些知识体系：

这一步更多的是需要从业务上做合理的划分，以实现分库，具体技术细节上没有其他的要求；

但同时随着数据量的增大和分库的进行，在数据库的设计、调优以及维护上需要做的更好，因此对这些方面的技术还是提出了很高的要求的。

架构演变第七步：分表、DAL和分布式缓存
随着系统的不断运行，数据量开始大幅度增长，这个时候发现分库后查询仍然会有些慢，于是按照分库的思想开始做分表的工作，当然，这不可避免的会需要对程序 进行一些修改，也许在这个时候就会发现应用自己要关心分库分表的规则等，还是有些复杂的，于是萌生能否增加一个通用的框架来实现分库分表的数据访问，这个在ebay的架构中对应的就是DAL，这个演变的过程相对而言需要花费较长的时间，当然，也有可能这个通用的框架会等到分表做完后才开始做，同时，在这个阶段可 能会发现之前的缓存同步方案出现问题，因为数据量太大，导致现在不太可能将缓存存在本地，然后同步的方式，需要采用分布式缓存方案了，于是，又是一通考察和折磨，终于是将大量的数据缓存转移到分布式缓存上了。

看看这一步完成后系统的图示：

这一步涉及到了这些知识体系：

分表更多的同样是业务上的划分，技术上涉及到的会有动态hash算法、consistent hash算法等；

DAL涉及到比较多的复杂技术，例如数据库连接的管理（超时、异常）、数据库操作的控制（超时、异常）、分库分表规则的封装等；

架构演变第八步：增加更多的webserver

在做完分库分表这些工作后，数据库上的压力已经降到比较低了，又开始过着每天看着访问量暴增的幸福生活了，突然有一天，发现系统的访问又开始有变慢的趋势 了，这个时候首先查看数据库，压力一切正常，之后查看webserver，发现apache阻塞了很多的请求，而应用服务器对每个请求也是比较快的，看来 是请求数太高导致需要排队等待，响应速度变慢，这还好办，一般来说，这个时候也会有些钱了，于是添加一些webserver服务器，在这个添加 webserver服务器的过程，有可能会出现几种挑战：
1、Apache的软负载或LVS软负载等无法承担巨大的web访问量（请求连接数、网络流量等）的调度了，这个时候如果经费允许的话，会采取的方案是购 买硬件负载，例如F5、Netsclar、Athelon之类的，如经费不允许的话，会采取的方案是将应用从逻辑上做一定的分类，然后分散到不同的软负载集群中；
2、原有的一些状态信息同步、文件共享等方案可能会出现瓶颈，需要进行改进，也许这个时候会根据情况编写符合网站业务需求的分布式文件系统等；
在做完这些工作后，开始进入一个看似完美的无限伸缩的时代，当网站流量增加时，应对的解决方案就是不断的添加webserver。

看看这一步完成后系统的图示：

这一步涉及到了这些知识体系：

到了这一步，随着机器数的不断增长、数据量的不断增长和对系统可用性的要求越来越高，这个时候要求对所采用的技术都要有更为深入的理解，并需要根据网站的需求来做更加定制性质的产品。

架构演变第九步：数据读写分离和廉价存储方案

突然有一天，发现这个完美的时代也要结束了，数据库的噩梦又一次出现在眼前了，由于添加的webserver太多了，导致数据库连接的资源还是不够用，而这个时候又已经分库分表了，开始分析数据库的压力状况，可能会发现数据库的读写比很高，这个时候通常会想到数据读写分离的方案，当然，这个方案要实现并不 容易，另外，可能会发现一些数据存储在数据库上有些浪费，或者说过于占用数据库资源，因此在这个阶段可能会形成的架构演变是实现数据读写分离，同时编写一些更为廉价的存储方案，例如BigTable这种。

看看这一步完成后系统的图示：

这一步涉及到了这些知识体系：

数据读写分离要求对数据库的复制、standby等策略有深入的掌握和理解，同时会要求具备自行实现的技术；

廉价存储方案要求对OS的文件存储有深入的掌握和理解，同时要求对采用的语言在文件这块的实现有深入的掌握。

架构演变第十步：进入大型分布式应用时代和廉价服务器群梦想时代

经过上面这个漫长而痛苦的过程，终于是再度迎来了完美的时代，不断的增加webserver就可以支撑越来越高的访问量了，对于大型网站而言，人气的重要毋 庸置疑，随着人气的越来越高，各种各样的功能需求也开始爆发性的增长，这个时候突然发现，原来部署在webserver上的那个web应用已经非常庞大 了，当多个团队都开始对其进行改动时，可真是相当的不方便，复用性也相当糟糕，基本是每个团队都做了或多或少重复的事情，而且部署和维护也是相当的麻烦， 因为庞大的应用包在N台机器上复制、启动都需要耗费不少的时间，出问题的时候也不是很好查，另外一个更糟糕的状况是很有可能会出现某个应用上的bug就导 致了全站都不可用，还有其他的像调优不好操作（因为机器上部署的应用什么都要做，根本就无法进行针对性的调优）等因素，根据这样的分析，开始痛下决心，将 系统根据职责进行拆分，于是一个大型的分布式应用就诞生了，通常，这个步骤需要耗费相当长的时间，因为会碰到很多的挑战：
1、拆成分布式后需要提供一个高性能、稳定的通信框架，并且需要支持多种不同的通信和远程调用方式；
2、将一个庞大的应用拆分需要耗费很长的时间，需要进行业务的整理和系统依赖关系的控制等；
3、如何运维（依赖管理、运行状况管理、错误追踪、调优、监控和报警等）好这个庞大的分布式应用。
经过这一步，差不多系统的架构进入相对稳定的阶段，同时也能开始采用大量的廉价机器来支撑着巨大的访问量和数据量，结合这套架构以及这么多次演变过程吸取的经验来采用其他各种各样的方法来支撑着越来越高的访问量。

看看这一步完成后系统的图示：

这一步涉及到了这些知识体系：

这一步涉及的知识体系非常的多，要求对通信、远程调用、消息机制等有深入的理解和掌握，要求的都是从理论、硬件级、操作系统级以及所采用的语言的实现都有清楚的理解。

运维这块涉及的知识体系也非常的多，多数情况下需要掌握分布式并行计算、报表、监控技术以及规则策略等等。

说起来确实不怎么费力，整个网站架构的经典演变过程都和上面比较的类似，当然，每步采取的方案，演变的步骤有可能有不同，另外，由于网站的业务不同，会有不同的专业技术的需求，这篇blog更多的是从架构的角度来讲解演变的过程，当然，其中还有很多的技术也未在此提及，像数据库集群、数据挖掘、搜索等，但在真实的演变过程中还会借助像提升硬件配置、网络环境、改造操作系统、CDN镜像等来支撑更大的流量，因此在真实的发展过程中还会有很多的不同，另外一个大型网站要做到的远远不仅仅上面这些，还有像安全、运维、运营、服务、存储等，要做好一个大型的网站真的很不容易，写这篇文章更多的是希望能够引出更多大型网站架构演变的介绍， 。

ps:最后附上几篇LiveJournal架构演变的文章：
从LiveJournal后台发展看大规模网站性能优化方法
http://blog.zhangjianfeng.com/article/743
另外从这里：http://www.danga.com/words/大家可以找到更多关于现在LiveJournal网站架构的介绍。