這段時(shí)間做項(xiàng)目，美工設(shè)計(jì)的界面輸入框都是圓角的，確實(shí)很好看，研究了一下，實(shí)現(xiàn)起來(lái)真還有些麻煩

firefox，safri，chrome這些瀏覽器基本都一定程度支持新的CSS3標(biāo)準(zhǔn)，可以用CSS來(lái)搞定圓角：

  1: border-radius: 5px; /* css 3標(biāo)準(zhǔn) */
  2: -moz-border-radius: 5px; /* mozilla */
  3: -webkit-border-radius: 5px; /* webkit */

可是M$的IE就麻煩了， 直道IE9 還沒完整支持CSS3，就只能用背景圖片法，前后補(bǔ)圖法等等，來(lái)模擬圓角效果了

上網(wǎng)查了一些資料，摸索著用Flex寫了一個(gè) 文件上傳的工具。沒做太多修飾，主要代碼貼出來(lái)，免得以后忘了

   1:  <!-- filename :flashuploader.mxml -->

   2:  <?xml version="1.0" encoding="utf-8"?>

   3:  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

   4:                  xmlns:c="component.*"

   5:                  width="450" height="450" minWidth="460" minHeight="400" initialize="application1_initializeHandler(event)" layout="absolute">

   6:      <mx:Style source="css/main.css"/>

   7:      <mx:states>

   8:          <mx:State name="TEST">

   9:              <mx:AddChild position="lastChild" relativeTo="{filelist}">

  10:                  <c:uploadFile currentState="UploadError">

  11:                  </c:uploadFile>

  12:              </mx:AddChild>

  13:          </mx:State>

  14:      </mx:states>

  15:      <mx:LinkButton id="selectbutton" x="5" y="5" label="{selectlabel}" click="button1_clickHandler(event)"/>

  16:      <c:CountingVBox id="filelist" x="5" y="36" height="100%" maxCount="{max}"/>

  17:      <mx:Script>

  18:          <![CDATA[

  19:              import component.uploadFile;

  20:              import mx.events.FlexEvent;

  21:              private var filter:Array;

  22:              private var single:Boolean;

  23:              

  24:              private var fileRefs:FileReferenceList;

  25:              

  26:              private var fileRef:FileReference;

  27:              [Bindable]

  28:              private var max:int=10;

  29:              [Bindable]

  30:              private var selectlabel:String="文件上傳";

  31:              

  32:              

  33:              

  34:              private function button1_clickHandler(event:MouseEvent):void

  35:              {

  36:                  if (single){

  37:                      fileRef = new FileReference();

  38:                      fileRef.addEventListener(Event.SELECT,singleSelectHandle);

  39:                      fileRef.browse(filter);

  40:                  }else{

  41:                      fileRefs = new FileReferenceList();

  42:                      fileRefs.addEventListener(Event.SELECT,multiSelectHandle);

  43:                      fileRefs.browse(filter);

  44:                  }

  45:              }

  46:              

  47:              private function singleSelectHandle(event:Event):void

  48:              {

  49:                  var file:uploadFile = new uploadFile();

  50:                  file.parentContainer=filelist;

  51:                  //                file.fileRef = FileReference(event.currentTarget);

  52:                  file.fileRef = fileRef;

  53:                  filelist.addChild(file);

  54:                  

  55:              }

  56:              

  57:              private function application1_initializeHandler(event:FlexEvent):void

  58:              {

  59:                  if( parameters.labelselect !=null) selectlabel = parameters.labelselect;

  60:                  if( parameters.ext != null)

  61:                      if ( parameters.type!=null)

  62:                          filter=[new FileFilter(parameters.type,parameters.ext)];

  63:                      else

  64:                          filter = [new FileFilter("Select Files"+parameters.ext, parameters.ext)];

  65:                  

  66:                  

  67:                  if (parameters.single!=null && "true" == parameters.single.toLowerCase()){

  68:                      single = true;

  69:                      max = 1;

  70:                  }else{

  71:                      if (parameters.max !=null )

  72:                          max = parameters.max ;

  73:                      if (isNaN(max)||max<=0 ) max=int.MAX_VALUE;

  74:                  }

  75:                  filelist.addEventListener("EMPTY",restoreSelectButton);

  76:                  filelist.addEventListener("FULL",disableSelectButton); 

  77:                  var prefix:String="http://localhost/fileupload";

  78:                  filelist.urlRequest = new URLRequest(prefix+"/upload.php");

  79:              }

  80:              

  81:              private function multiSelectHandle(event:Event):void

  82:              {    

  83:                  var fileList:Array=fileRefs.fileList;

  84:                  for(var i:int =0;i<fileList.length;i++){

  85:                      

  86:                      var file:uploadFile = new uploadFile();

  87:                      file.parentContainer=filelist;

  88:                      file.fileRef = fileList[i];

  89:                      filelist.addChild(file);

  90:                  }

  91:              }

  92:              

  93:              private function restoreSelectButton(event:Event):void

  94:              {

  95:                  selectbutton.visible=true;                

  96:              }

  97:              

  98:              private function disableSelectButton(event:Event):void

  99:              {

 100:                  selectbutton.visible=false;                

 101:                  

 102:              }

 103:              

 104:          ]]>

 105:      </mx:Script>    

 106:  </mx:Application>

   1:  <!-- filename: component/uploadFile.mxml -->

   2:  <?xml version="1.0" encoding="utf-8"?>

   3:  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"

   4:             xmlns:c="component.*"

   5:             height="20" width="440" initialize="canvas1_initializeHandler(event)" >

   6:      <mx:states>

   7:          <mx:State name="UploadError" >

   8:              <mx:SetProperty name="label" target="{progressbar1}" value="{errorInfo}"/>

   9:              <mx:SetProperty name="styleName" value="error"/>

  10:          </mx:State>

  11:          <mx:State basedOn="UploadError" name="FileError">

  12:              <mx:SetProperty name="x" target="{image1}" value="317"/>

  13:              <mx:RemoveChild target="{progressbar1}"/>

  14:              <mx:SetStyle name="styleName" target="{label1}" value="error1"/>

  15:              <mx:SetProperty name="toolTip" target="{label1}" value="{errorInfo}"/>

  16:          </mx:State>

  17:      </mx:states>

  18:      <mx:Image x="5" width="16" height="16" source="{fileicon}" verticalCenter="-1" />

  19:      <c:FilenameLabel x="23"  width="160" text="{filename}" truncSize="10" verticalCenter="-1"/>

  20:      <mx:Label x="185" width="64" text="{extname}" verticalCenter="-1"/>

  21:      <mx:Label id="label1" x="251" width="64" text="{filesize}" textAlign="right" verticalCenter="-1"/>

  22:      <mx:ProgressBar id="progressbar1" x="317" width="100" height="16" label="%3%%" labelPlacement="center" maximum="100" source="{_fileRef}"

  23:                      verticalCenter="-1"/>

  24:      <mx:Image id="image1" x="419" width="16" height="16" click="cancle_clickHandler(event)" source="@Embed('icons/cancel.png')" verticalCenter="-1"/>

  25:      <mx:Script>

  26:          <![CDATA[

  27:              import flash.events.MouseEvent;

  28:              import flash.events.ProgressEvent;

  29:              

  30:              import mx.controls.Alert;

  31:              import mx.events.FlexEvent;

  32:              import mx.states.Transition;

  33:              

  34:              private static var MAX_FILE_SIZE:uint =int.MAX_VALUE;

  35:              

  36:              private var _parent:CountingVBox;

  37:              [Bindable]

  38:              private var _fileRef:FileReference ;

  39:              [Bindable]

  40:              private var errorInfo:String="";

  41:              [Bindable]

  42:              private var fileicon:Class;

  43:              [Bindable]

  44:              private var extname:String;

  45:              [Bindable]

  46:              private var filesize:String;

  47:              [Bindable]

  48:              private var filename:String;

  49:              

  50:              

  51:              

  52:              

  53:              public function set fileRef(value:FileReference):void

  54:              {

  55:                  _fileRef = value;

  56:                  filename=_fileRef.name.substring(0,_fileRef.name.indexOf(_fileRef.type));

  57:                  extname=_fileRef.type;

  58:                  var size:uint=_fileRef.size;

  59:                  var unit:String="B";

  60:                  if(size>10240){

  61:                      size/=1024;

  62:                      unit="KB";

  63:                  }

  64:                  if(size>10240){

  65:                      size/=1024;

  66:                      unit="MB";

  67:                  }

  68:                  if(size>10240){

  69:                      size/=1024;

  70:                      unit="GB";

  71:                  }

  72:                  

  73:                  filesize=size.toFixed(0)+unit;

  74:                  fileicon=getFileIconClass();

  75:                  if (checkFilesize()){

  76:                      _fileRef.upload(_parent.urlRequest);

  77:                      _fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,upload_complete); 

  78:                }

  79:              }

  80:              

  81:              public function set parentContainer(p:CountingVBox):void

  82:              {

  83:                  _parent = p;

  84:              }

  85:              

  86:              

  87:              private function getFileIconClass():Class

  88:              {

  89:                  [Embed("icons/Unknown.png")] 

  90:                  var unknown:Class;

  91:                  

  92:                  [Embed("icons/doc.png")]

  93:                  var doc:Class;

  94:                                  

  95:                 //其他文件類型

  96:                  

  97:                  if (_fileRef.type == null){

  98:                      return unknown;

  99:                  }

 100:                  

 101:                  var type:String=_fileRef.type.toLowerCase();

 102:                  if (type == ".doc") return doc;

 103:                  if (type == ".docx") return doc;

 104:                  //其他文件類型

 105:                  

 106:                  return unknown;                

 107:              }

 108:              

 109:              private function cancle_clickHandler(event:MouseEvent):void

 110:              {

 111:                  _fileRef.cancel();

 112:                  _parent.removeUploadedFile(_fileRef);

 113:                  _parent.removeChild(this);

 114:                  if (_parent.count<1){

 115:                      _parent.dispatchEvent(new Event("EMPTY"));

 116:                  }

 117:              }  

 118:              

 119:              protected function upload_complete(event:DataEvent):void

 120:              {

 121:                  _parent.addUploadedFile(_fileRef); 

 122:              }

 123:              

 124:              protected function upload_IO_error(event:IOErrorEvent):void

 125:              {

 126:                  errorInfo="UploadError";

 127:                currentState = "UploadError";

 128:                   

 129:              }

 130:              

 131:              private function checkFilesize():Boolean

 132:              {

 133:                  if (_fileRef.size>MAX_FILE_SIZE){

 134:                      errorInfo = "File too Big";

 135:                      currentState = "FileError";

 136:                      return false;

 137:                  }

 138:                  return true;

 139:              }

 140:              

 141:          ]]>

 142:      </mx:Script>

 143:  </mx:Canvas>

 144:   

你是否有過(guò)復(fù)查程序時(shí)發(fā)現(xiàn)有些注釋毫無(wú)用處？程序注釋是為了提高代碼的可讀性，為了讓原作者以外的其他開發(fā)人員更容易理解這段程序。

我把這些讓人郁悶的注釋方式歸為了五類，同時(shí)把寫出這些注釋的程序員也歸為了五類。我希望讀了這篇文章后你感覺自己不屬于其中的任何一種類型。如果你有興趣的話可以讀一下另外一篇文章 五種程序員(英文)，和這篇講到的五種程序員對(duì)比一下。

1. 高傲的程序員

public class Program

{

static void Main(string[] args)

{

string message = “Hello World!”; // 07/24/2010 Bob

 Console.WriteLine(message); // 07/24/2010 Bob

 message = “I am so proud of this code!”; // 07/24/2010 Bob

 Console.WriteLine(message); // 07/24/2010 Bob

 }

}

這種程序員是如此的欣賞自己的程序，以至于不得不在每行代碼上都署上自己的大名。應(yīng)該讓版本控制系統(tǒng)來(lái)提供程序變更的信息，他這樣做一眼看去并不能說(shuō)明誰(shuí)對(duì)這行代碼負(fù)責(zé)。

2. 過(guò)時(shí)的程序員

public class Program

{

static void Main(string[] args)

{

/* 這段程序已經(jīng)不再有用

* 因?yàn)槲覀儼l(fā)現(xiàn)千年蟲問題只是一場(chǎng)虛驚

* 我們的系統(tǒng)不會(huì)恢復(fù)到1/1/1900 */

//DateTime today = DateTime.Today;

//if (today == new DateTime(1900, 1, 1))

//{

// today = today.AddYears(100);

// string message = “The date has been fixed for Y2K.”;

// Console.WriteLine(message);

//}

 }

}

如果一段程序不再有用（比如廢棄了），那就刪了它吧——不要被幾行沒用的注釋搞的程序混亂不堪。即使你可能以后重用這段代碼，你也可以使用版本控制系統(tǒng)，用它把你的程序恢復(fù)到以前的樣子。

3. 天真的程序員

public class Program

{

static void Main(string[] args)

{

/* 這個(gè)程序是用來(lái)在屏幕上

* 循環(huán)打印1百萬(wàn)次”I Rule!”

* 每次輸出一行。循環(huán)計(jì)數(shù)

* 從0開始，每次加1。

* 當(dāng)計(jì)數(shù)器等于1百萬(wàn)時(shí)，

* 循環(huán)就會(huì)停止運(yùn)行*/

for (int i = 0; i < 1000000; i++)

{

Console.WriteLine(“I Rule!”);

}

}

}

基本的編程語(yǔ)法規(guī)則我們大家都知道——我們不需要“編程入門”。你不需要浪費(fèi)時(shí)間來(lái)解釋一個(gè)顯而易見的東西，我們更希望知道的是你的程序功能——那是浪費(fèi)空間了。

4. 傳奇的程序員

public class Program

{

static void Main(string[] args)

{

/* 有一天我在大街上的一家星巴克里

* 和銷售部的Jim討論問題，他告訴我

* 銷售代表是依據(jù)以下的比例提取傭金的。

* 周五: 25%

* 周三: 15%

* 其它日期: 5%

* 我是否告訴你過(guò)我點(diǎn)了一個(gè)卡拉梅

* 鐵咖啡和兩份的Espresso?

*/

double price = 5.00;

double commissionRate;

double commission;

if (DateTime.Today.DayOfWeek == DayOfWeek.Friday)

{

commissionRate = .25;

}

else if (DateTime.Today.DayOfWeek == DayOfWeek.Wednesday)

{

commissionRate = .15;

}

else

{

commissionRate = .05;

}

commission = price * commissionRate;

}

}

如果你不得不在注釋里寫明需求，那也不要提到人名。銷售員Jim很可能在公司里不再是銷售。而且大多數(shù)讀到這段注釋的程序員未必都知道Jim是誰(shuí)。你描述的是實(shí)際情況但跟我們的內(nèi)容不相干，所以就省掉吧。

5. 未來(lái)程序員

public class Program

{

static void Main(string[] args)

{

//TODO: 將來(lái)我會(huì)修復(fù)這個(gè)問題 – 07/24/1995 Bob

 /* 我知道這個(gè)問題很難解決而且

* 我現(xiàn)在依賴于這個(gè)Contains函數(shù)，但

* 我以后會(huì)用一種更有意義，更

* 優(yōu)雅的方式打印這段代碼。

* 我只是現(xiàn)在沒時(shí)間。

*/

string message = “An error has occurred”;

if(message.Contains(“error”))

{

throw new Exception(message);

}

}

}

這種注釋是一種集大成者，它包含了上面所說(shuō)的注釋的所有問題。TODO注釋在一個(gè)項(xiàng)目最初的開發(fā)階段是非常有用的，但這個(gè)注釋看起來(lái)是在好幾年前的產(chǎn)品程序里的——它證明了程序有問題。如果程序有問題需要解決，馬上解決，不要拖到日后再解決。

如果你寫過(guò)這樣的注釋，或者是你正在尋找一種最好的注釋方案，我推薦你讀一讀Steve McConnell寫的《Code Complete》這本書。這是我推薦給所有程序員必讀的六本書中的一種。或者你可以學(xué)學(xué)如何停止注釋你的程序(英文)。

你是否在你的程序里還見到過(guò)其它種沒有意義的或討厭的注釋？歡迎共享。

英文原文：5 Types of Comments to Avoid Making in Your Code

　　開發(fā)框架的選擇，始終是個(gè)仁者見仁、智者見智的事情。尤其是Web層的開發(fā)框架，數(shù)量非常多，而且各有特色，如：Struts、WebWork、Spring MVC、Tapestry、JSF、WebPage3.0……等等。

　　下面先來(lái)看看為什么要使用Web開發(fā)框架

　　一：使用框架的必然性

　　框架，即framework。其實(shí)就是某種應(yīng)用的半成品，把不同應(yīng)用程序中有共性的一些東西抽取出來(lái)，做成一個(gè)半成品程序，這樣的半成品就是所謂的程序框架。

　　軟件系統(tǒng)發(fā)展到今天已經(jīng)很復(fù)雜了，特別是服務(wù)器端軟件，涉及到的知識(shí)，內(nèi)容，問題太多。在某些方面使用別人成熟的框架，就相當(dāng)于讓別人幫你完成一些基礎(chǔ)工作，你只需要集中精力完成系統(tǒng)的業(yè)務(wù)邏輯設(shè)計(jì)。這樣每次開發(fā)就不用白手起家，而是可以在這個(gè)基礎(chǔ)上開始搭建。

　　使用框架的最大好處：減少重復(fù)開發(fā)工作量、縮短開發(fā)時(shí)間、降低開發(fā)成本。同時(shí)還有其它的好處，如：使程序設(shè)計(jì)更合理、程序運(yùn)行更穩(wěn)定等。基于這些原因，基本上現(xiàn)在在開發(fā)中，都會(huì)選用某些合適的開發(fā)框架，來(lái)幫助快速高效的開發(fā)應(yīng)用系統(tǒng)。

　　了解了使用框架的必然性，下面來(lái)看看如何選擇，當(dāng)然我們的話題集中在Web層的開發(fā)框架。在談這個(gè)問題之前，先來(lái)看看我們?cè)赪eb開發(fā)中究竟需要做些什么工作：

　　二：Web層開發(fā)的工作

　　在J2EE開發(fā)中，分層是基本的思想，3層架構(gòu)或者多層架構(gòu)早已深入人心，在這里我們就把目光集中到Web層，看看到底Web層開發(fā)做了那些工作：

　　1：數(shù)據(jù)展示

　　Web層需要從邏輯層獲取需要展示的數(shù)據(jù)，然后以合理的方式在頁(yè)面進(jìn)行展示

　　2：人機(jī)交互

　　用戶需要從界面上輸入數(shù)據(jù)，在界面上進(jìn)行按鈕點(diǎn)擊，進(jìn)而觸發(fā)事件，標(biāo)準(zhǔn)的事件驅(qū)動(dòng)模型，然后跟后臺(tái)進(jìn)行數(shù)據(jù)交換，出現(xiàn)新的界面。

　　3：收集數(shù)據(jù)，調(diào)用邏輯層接口

　　Web層收到用戶的事件請(qǐng)求，需要調(diào)用相應(yīng)的邏輯層接口來(lái)進(jìn)行處理，Web層是不會(huì)有任何邏輯處理的。調(diào)用邏輯層接口，需要傳遞參數(shù)，這時(shí)需要收集用戶在界面上輸入的數(shù)據(jù)，然后進(jìn)行組織，組織成為邏輯層接口需要的數(shù)據(jù)封裝形式(通常都是ValueObject)。

　　4：根據(jù)邏輯層的數(shù)據(jù)來(lái)重新展示頁(yè)面

　　邏輯層處理完了，需要返回?cái)?shù)據(jù)或信息到界面上。這個(gè)時(shí)候Web層需要根據(jù)返回的值選擇合適的頁(yè)面，然后展示這些數(shù)據(jù)或者信息。

　　從上面可以看出，Web層開發(fā)的主要工作集中在展示上，也就是圖形用戶界面。這一部分是用戶直觀感受應(yīng)用程序的窗口，也是用戶要求最多的地方，其表現(xiàn)形式也是最豐富的。

　　三：Web層開發(fā)的步驟

　　下面再來(lái)總結(jié)一下Web層開發(fā)的大致步驟(也就是需要開發(fā)人員做的工作)：

　　注意：這里討論的Web層開發(fā)，是不使用任何開發(fā)框架時(shí)候的開發(fā)。

　　1：寫頁(yè)面Html，到底有哪些數(shù)據(jù)需要在界面上表現(xiàn)

　　2：每個(gè)數(shù)據(jù)的具體表現(xiàn)形式，如：有的需要表現(xiàn)成為下拉列表，有的需要表現(xiàn)成為單選按鈕等。

　　3：界面表現(xiàn)形式的邏輯布局，所謂邏輯布局是指某些數(shù)據(jù)的表現(xiàn)形式應(yīng)該放在前面，某些應(yīng)該放在后面;某些放在上面，某些放在下面。如：某個(gè)請(qǐng)假
申請(qǐng)的業(yè)務(wù)，有請(qǐng)假開始時(shí)間和結(jié)束時(shí)間，很明顯開始時(shí)間的表現(xiàn)就應(yīng)該排在結(jié)束時(shí)間的前面。而美工是負(fù)責(zé)最后頁(yè)面的美觀，一般美工不能動(dòng)界面的邏輯布局。

　　好了，確定了值的來(lái)源，開發(fā)人員就要寫代碼來(lái)獲取這些值，然后把這些值賦值到對(duì)應(yīng)的表現(xiàn)形式里面。

　　5：還有一些比較特殊，也就是真實(shí)操作的是一類值，但是在界面上顯示的是另一類值，比如：數(shù)據(jù)庫(kù)中有用戶編號(hào)，到了界面上就得顯示用戶姓名，但
是所有的操作都是要操作用戶編號(hào)的。我們把這種情況分做：真實(shí)值和表現(xiàn)值，他們有一定的內(nèi)在聯(lián)系。這些都是要開發(fā)人員去轉(zhuǎn)化和維護(hù)的。

　　6：接下來(lái)就應(yīng)該開發(fā)功能性的事件響應(yīng)了。用戶點(diǎn)擊了某個(gè)按鈕或者觸發(fā)了某個(gè)事件，首先是客戶端：數(shù)據(jù)檢測(cè)、客戶端事件處理;然后提交到服務(wù)端，服務(wù)端要獲取到客戶端提交的數(shù)據(jù)，然后調(diào)用相應(yīng)的邏輯層接口來(lái)響應(yīng)。當(dāng)然如何寫邏輯層的實(shí)現(xiàn)這里就不去談?wù)摿恕?/p>

　　7：邏輯層執(zhí)行完過(guò)后，返回?cái)?shù)據(jù)和信息到Web層，開發(fā)人員還需要寫代碼去處理，選擇哪個(gè)頁(yè)面來(lái)顯示，如何顯示這些數(shù)據(jù)和信息等。

　　8：在整個(gè)交互的過(guò)程中，還必須考慮到如何控制權(quán)限，如：某些數(shù)據(jù)不能顯示，某些數(shù)據(jù)不能編輯等等;同樣還需要考慮到消息的配置和國(guó)際化等等。這些功能起源于邏輯層，但是實(shí)際的控制要到Web層，這些都需要開發(fā)人員來(lái)控制。

　　9：完成了上面的開發(fā)步驟，頁(yè)面基本的功能開發(fā)就告一段落，接下來(lái)開發(fā)人員需要考慮頁(yè)面美觀的問題了。大家可能會(huì)說(shuō)：“不是有美工嗎，還需要開
發(fā)人員干什么?”。事實(shí)上美工多半只能出一個(gè)靜態(tài)頁(yè)面的美化模版，美工對(duì)于一推Java代碼和Html的混雜物，多半是沒有辦法的，更不要說(shuō)還有一些內(nèi)容
是動(dòng)態(tài)生成的，美工就更不可能搞定了。還是得開發(fā)人員上陣，按照美工給的模版，開始添加Css：class、id、style……

　　10：完成上面的開發(fā)，基本頁(yè)面的開發(fā)工作就完成了，最后的一個(gè)步驟就是把各個(gè)頁(yè)面有機(jī)的組織起來(lái)，開發(fā)應(yīng)用程序的整體應(yīng)用導(dǎo)航框架，通常就是菜單，然后把各個(gè)功能頁(yè)面跟菜單結(jié)合起來(lái)，形成一個(gè)完整的應(yīng)用。

　　在這里我們省略了開發(fā)期反復(fù)的調(diào)試過(guò)程，僅總結(jié)開發(fā)的步驟。

　　四：選擇Web開發(fā)框架的目的

　　了解了如果沒有框架，我們需要做的工作，這對(duì)選擇框架有非常大的幫助。

　　框架，直白點(diǎn)說(shuō)，就是一個(gè)半成品，能夠幫我們做一些事情的半成品。

　　框架的選擇，就是看哪個(gè)框架最合適，從而減少開發(fā)的工作量，提高開發(fā)的效率和質(zhì)量，并有效減少維護(hù)的工作量，最終達(dá)到節(jié)約綜合開發(fā)成本，獲取更多的收益。

　　五：選擇Web開發(fā)框架的標(biāo)準(zhǔn)

　　聲明：這里所談的選擇Web開發(fā)框架的標(biāo)準(zhǔn)，只是我們的總結(jié)和一家之言，并不是放之四海而皆準(zhǔn)的真理，請(qǐng)根據(jù)您的體會(huì)客觀的看待我們的總結(jié)。

　　另外：我們這里更多的討論業(yè)務(wù)功能性應(yīng)用程序的Web開發(fā)框架。

　　1：選擇能夠?qū)ξ覀兊拈_發(fā)過(guò)程提供更多、更好幫助的Web開發(fā)框架

　　2：Web開發(fā)框架的學(xué)習(xí)一定要簡(jiǎn)單，上手一定要快，沒有什么比使用能得到更深的體會(huì)。那些動(dòng)不動(dòng)就需要半個(gè)月或者一個(gè)月學(xué)習(xí)周期的框架，實(shí)在是有些恐怖。

　　3：一定要能得到很好的技術(shù)支持，在應(yīng)用的過(guò)程中，或多或少都會(huì)出現(xiàn)這樣或者那樣的問題，如果不能很快很好的解決，會(huì)對(duì)整個(gè)項(xiàng)目開發(fā)帶來(lái)影響。一定要考慮綜合成本，其實(shí)這是目前應(yīng)用開源軟件最大的問題，碰到問題除了死肯文檔就是查閱源代碼，或者是網(wǎng)上搜尋解決的辦法，通常一個(gè)問題就會(huì)導(dǎo)致1-2天的開發(fā)停頓，嚴(yán)重的甚至需要一個(gè)星期或者更長(zhǎng)，一個(gè)項(xiàng)目有上這么幾次，項(xiàng)目整體的開發(fā)成本嗖嗖的就上去了。

　　4：Web開發(fā)框架結(jié)合其他技術(shù)的能力一定要強(qiáng)，比如：在邏輯層要使用Spring或者Ejb3，那么Web開發(fā)框架一定要能很容易，很方便的與它們進(jìn)行結(jié)合。

　　5：Web開發(fā)框架的擴(kuò)展能力一定要強(qiáng)。在好的框架都有力所不及的地方，這就要求能很容易的擴(kuò)展Web開發(fā)框架的功能，以滿足新的業(yè)務(wù)需要。同時(shí)要注意擴(kuò)展的簡(jiǎn)單性，如果擴(kuò)展框架的功能代價(jià)非常大，還不如不用呢。

　　6：Web開發(fā)框架最好能提供可視化的開發(fā)和配置，可視化開發(fā)對(duì)開發(fā)效率的提高，已經(jīng)得到業(yè)界公認(rèn)。

　　7：Web開發(fā)框架的設(shè)計(jì)結(jié)構(gòu)一定要合理，應(yīng)用程序會(huì)基于這個(gè)框架，框架設(shè)計(jì)的不合理會(huì)大大影響到整個(gè)應(yīng)用的可擴(kuò)展性。

　　8：Web開發(fā)框架一定要是運(yùn)行穩(wěn)定的，運(yùn)行效率高的。框架的穩(wěn)定性和運(yùn)行效率直接影響到整個(gè)系統(tǒng)的穩(wěn)定性和效率。

　　9：Web開發(fā)框架一定要能很好的結(jié)合目前公司的積累。在多年的開發(fā)中已有了很多積累，不能因?yàn)槭褂肳eb開發(fā)框架就不能再使用了，那未免有些得不償失。

　　10：選擇開發(fā)框架另外要注意的一點(diǎn)就是：任何開發(fā)框架都不可能是十全十美的，也不可能是適應(yīng)所有的應(yīng)用場(chǎng)景的，也就是說(shuō)任何開發(fā)框架都有它適用的范圍。所以選擇的時(shí)候要注意判斷應(yīng)用的場(chǎng)景和開發(fā)框架的適用性。

　　XSS攻擊，跨站腳本攻擊是一種經(jīng)常出現(xiàn)在web應(yīng)用中的計(jì)算機(jī)安全漏洞，它允許惡意web用戶將代碼植入到提供給其它用戶使用的頁(yè)面中。XSS攻擊將對(duì)用戶的web安全構(gòu)成巨大的威脅。

　　XSS攻擊：跨站腳本攻擊(Cross Site Scripting)，為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆。故將跨站腳本攻擊縮寫為XSS。XSS是一種經(jīng)常出現(xiàn)在web應(yīng)用中的計(jì)算機(jī)安全漏洞，它允許惡意web用戶將代碼植入到提供給其它用戶使用的頁(yè)面中。比如這些代碼包括HTML代碼和客戶端腳本。攻擊者利用XSS漏洞旁路掉訪問控制——例如同源策略(same origin policy)。這種類型的漏洞由于被駭客用來(lái)編寫危害性更大的phishing攻擊而變得廣為人知。對(duì)于跨站腳本攻擊，黑客界共識(shí)是：跨站腳本攻擊是新型的“緩沖區(qū)溢出攻擊“，而JavaScript是新型的“ShellCode”。

　　數(shù)據(jù)來(lái)源：2007 OWASP Top 10的MITRE數(shù)據(jù)

　　注：OWASP是世界上最知名的Web安全與數(shù)據(jù)庫(kù)安全研究組織

　　從這張圖中我們看到，在2007年OWASP所統(tǒng)計(jì)的所有安全威脅中，跨站腳本攻擊占到了22%，高居所有Web威脅之首。

　　XSS攻擊的危害包括

　　1、盜取各類用戶帳號(hào)，如機(jī)器登錄帳號(hào)、用戶網(wǎng)銀帳號(hào)、各類管理員帳號(hào)

　　2、控制企業(yè)數(shù)據(jù)，包括讀取、篡改、添加、刪除企業(yè)敏感數(shù)據(jù)的能力

　　3、盜竊企業(yè)重要的具有商業(yè)價(jià)值的資料

　　4、非法轉(zhuǎn)賬

　　5、強(qiáng)制發(fā)送電子郵件

　　6、網(wǎng)站掛馬

　　7、控制受害者機(jī)器向其它網(wǎng)站發(fā)起攻擊

　　XSS漏洞的分類

　　XSS漏洞按照攻擊利用手法的不同，有以下三種類型：

　　類型A，本地利用漏洞，這種漏洞存在于頁(yè)面中客戶端腳本自身。其攻擊過(guò)程如下所示：

　　Alice給Bob發(fā)送一個(gè)惡意構(gòu)造了Web的URL。

　　Bob點(diǎn)擊并查看了這個(gè)URL。

　　惡意頁(yè)面中的JavaScript打開一個(gè)具有漏洞的HTML頁(yè)面并將其安裝在Bob電腦上。

　　具有漏洞的HTML頁(yè)面包含了在Bob電腦本地域執(zhí)行的JavaScript。

　　Alice的惡意腳本可以在Bob的電腦上執(zhí)行Bob所持有的權(quán)限下的命令。

　　類型B，反射式漏洞，這種漏洞和類型A有些類似，不同的是Web客戶端使用Server端腳本生成頁(yè)面為用戶提供數(shù)據(jù)時(shí)，如果未經(jīng)驗(yàn)證的用戶數(shù)據(jù)被包含在頁(yè)面中而未經(jīng)HTML實(shí)體編碼，客戶端代碼便能夠注入到動(dòng)態(tài)頁(yè)面中。其攻擊過(guò)程如下：

　　Alice經(jīng)常瀏覽某個(gè)網(wǎng)站，此網(wǎng)站為Bob所擁有。Bob的站點(diǎn)運(yùn)行Alice使用用戶名/密碼進(jìn)行登錄，并存儲(chǔ)敏感信息(比如銀行帳戶信息)。

　　Charly發(fā)現(xiàn)Bob的站點(diǎn)包含反射性的XSS漏洞。

　　Charly編寫一個(gè)利用漏洞的URL，并將其冒充為來(lái)自Bob的郵件發(fā)送給Alice。

　　Alice在登錄到Bob的站點(diǎn)后，瀏覽Charly提供的URL。

　　嵌入到URL中的惡意腳本在Alice的瀏覽器中執(zhí)行，就像它直接來(lái)自Bob的服務(wù)器一樣。此腳本盜竊敏感信息(授權(quán)、信用卡、帳號(hào)信息等)然后在Alice完全不知情的情況下將這些信息發(fā)送到Charly的Web站點(diǎn)。

　　類型C，存儲(chǔ)式漏洞，該類型是應(yīng)用最為廣泛而且有可能影響到Web服務(wù)器自身安全的漏洞，駭客將攻擊腳本上傳到Web服務(wù)器上，使得所有訪問該頁(yè)面的用戶都面臨信息泄漏的可能，其中也包括了Web服務(wù)器的管理員。其攻擊過(guò)程如下：

　　Bob擁有一個(gè)Web站點(diǎn)，該站點(diǎn)允許用戶發(fā)布信息/瀏覽已發(fā)布的信息。

　　Charly注意到Bob的站點(diǎn)具有類型C的XXS漏洞。

　　Charly發(fā)布一個(gè)熱點(diǎn)信息，吸引其它用戶紛紛閱讀。

　　Bob或者是任何的其他人如Alice瀏覽該信息，其會(huì)話cookies或者其它信息將被Charly盜走。

　　類型A直接威脅用戶個(gè)體，而類型B和類型C所威脅的對(duì)象都是企業(yè)級(jí)Web應(yīng)用，目前天清入侵防御產(chǎn)品所能防范的XSS攻擊包括類型B和類型C。

　2、XSS攻擊防御

　　基于特征的防御

　　XSS漏洞和著名的SQL注入漏洞一樣，都是利用了Web頁(yè)面的編寫不完善，所以每一個(gè)漏洞所利用和針對(duì)的弱點(diǎn)都不盡相同。這就給XSS漏洞防御帶來(lái)了困難：不可能以單一特征來(lái)概括所有XSS攻擊。

　　傳統(tǒng)XSS防御多采用特征匹配方式，在所有提交的信息中都進(jìn)行匹配檢查。如， 對(duì)于這種類型的XSS攻擊，采用的模式匹配方法一般會(huì)需要對(duì)“javascript”這個(gè)關(guān)鍵字進(jìn)行檢索，一旦發(fā)現(xiàn)提交信息中包含 “javascript”，就認(rèn)定為XSS攻擊。這種檢測(cè)方法的缺陷顯而易見：駭客可以通過(guò)插入字符或完全編碼的方式躲避檢測(cè)：

　　躲避方法1)在javascript中加入多個(gè)tab鍵，得到    

　　躲避方法2) 在javascript中加入&#x09編碼字符，得到 

　　躲避方法3) 在javascript中加入字符，得到    

　　躲避方法4)在javascript中的每個(gè)字符間加入回車換行符，得到

   躲避方法5)對(duì)"javascript:alert('XSS')"采用完全編碼，得到

<IMGSRC=&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29>

　　上述方法都可以很容易的躲避基于特征的檢測(cè)。而除了會(huì)有大量的漏報(bào)外，基于特征的還存在大量的誤報(bào)可能：在上面的例子中，對(duì)"http://www.xxx.com/javascript/kkk.asp?id=2345"這樣一個(gè)URL，由于包含了關(guān)鍵字“javascript”，也將會(huì)觸發(fā)報(bào)警。

　　基于代碼修改的防御

　　和SQL注入防御一樣，XSS攻擊也是利用了Web頁(yè)面的編寫疏忽，所以還有一種方法就是從Web應(yīng)用開發(fā)的角度來(lái)避免：

　　步驟1、對(duì)所有用戶提交內(nèi)容進(jìn)行可靠的輸入驗(yàn)證，包括對(duì)URL、查詢關(guān)鍵字、HTTP頭、POST數(shù)據(jù)等，僅接受指定長(zhǎng)度范圍內(nèi)、采用適當(dāng)格式、采用所預(yù)期的字符的內(nèi)容提交，對(duì)其他的一律過(guò)濾。

　　步驟2、實(shí)現(xiàn)Session標(biāo)記(session tokens)、CAPTCHA系統(tǒng)或者HTTP引用頭檢查，以防功能被第三方網(wǎng)站所執(zhí)行。

　　步驟3、確認(rèn)接收的的內(nèi)容被妥善的規(guī)范化，僅包含最小的、安全的Tag(沒有javascript)，去掉任何對(duì)遠(yuǎn)程內(nèi)容的引用(尤其是樣式表和javascript)，使用HTTP only的cookie。

　　當(dāng)然，如上操作將會(huì)降低Web業(yè)務(wù)系統(tǒng)的可用性，用戶僅能輸入少量的制定字符，人與系統(tǒng)間的交互被降到極致，僅適用于信息發(fā)布型站點(diǎn)。并且考慮到很少有Web編碼人員受過(guò)正規(guī)的安全培訓(xùn)，很難做到完全避免頁(yè)面中的XSS漏洞。

　　正是由于傳統(tǒng)檢測(cè)方法存在諸多缺陷，國(guó)內(nèi)廠商(如啟明星辰天清入侵防御系統(tǒng))并未采用這一方法，而是采用了基于攻擊手法的行為檢測(cè)方法。　　

　　首先對(duì)各種場(chǎng)景下的XSS攻擊樣本庫(kù)進(jìn)行整理和分類，并建立起XSS攻擊行為特征庫(kù)，在實(shí)時(shí)攻擊檢測(cè)階段，對(duì)所有可能實(shí)現(xiàn)XSS攻擊的數(shù)據(jù)來(lái) 源，如HTTP-Refere、URL、COOKIE、表單數(shù)據(jù)等，進(jìn)行數(shù)據(jù)收集和初步分析，存在注入腳本的用戶提交信息才進(jìn)入下一步的XSS攻擊判斷。

　　這種分析方法有以下幾點(diǎn)優(yōu)勢(shì)：

　　A：采用行為特征庫(kù)而非數(shù)據(jù)特征庫(kù)方式，可以避免由于檢測(cè)固定特征導(dǎo)致的誤報(bào)可能。

　　B：內(nèi)置數(shù)據(jù)預(yù)處理過(guò)程，可以對(duì)所有可能包含XSS攻擊的數(shù)據(jù)進(jìn)行預(yù)處理，放行大部分正常HTTP請(qǐng)求，僅對(duì)少量疑似事件進(jìn)行深入分析，提升分析速度，降低資源開銷。

　　C：XSS攻擊行為特征庫(kù)維護(hù)由啟明星辰公司AD-LAB(積極防御實(shí)驗(yàn)室)和博士后工作站負(fù)責(zé)，AD-LAB擁有大批漏洞發(fā)掘和分析人 員，2007年發(fā)現(xiàn)并獲得CVE編號(hào)的漏洞數(shù)量多達(dá)26個(gè)，是國(guó)內(nèi)獨(dú)立發(fā)掘CVE漏洞數(shù)量最多的團(tuán)隊(duì)。啟明星辰博士后工作站是業(yè)內(nèi)第一家駐企業(yè)的信息安全 博士后工作站，為產(chǎn)品算法實(shí)現(xiàn)、研究技術(shù)轉(zhuǎn)化提供有力保障。

　　3、綜論

　　XSS攻擊作為Web業(yè)務(wù)的最大威脅之一，不僅危害Web業(yè)務(wù)本身，對(duì)訪問Web業(yè)務(wù)的用戶也會(huì)帶來(lái)直接的影響，如何防范和阻止XSS攻擊，保障Web站點(diǎn)的業(yè)務(wù)安全，是定位于業(yè)務(wù)威脅防御的入侵防御產(chǎn)品的本職工作。只有結(jié)合對(duì)XSS攻擊的分析，才能能準(zhǔn)確的發(fā)現(xiàn)和防御各類XSS攻擊行為，保障Web業(yè)務(wù)的正常運(yùn)營(yíng)。

Tags: XSS, Web, Web安全, 攻擊, 網(wǎng)頁(yè)掛馬, 防御

Tags: 產(chǎn)品經(jīng)理, 項(xiàng)目經(jīng)理, BUG, 需求

　　ERP實(shí)施顧問在推進(jìn)項(xiàng)目的過(guò)程中，應(yīng)該注意項(xiàng)目團(tuán)隊(duì)中各成員之間的相互激勵(lì)。如果激勵(lì)制度設(shè)置的不當(dāng)，可能項(xiàng)目小組成員不僅不會(huì)創(chuàng)造貢獻(xiàn)，還很有可能發(fā)生內(nèi)部戰(zhàn)爭(zhēng)，產(chǎn)生一些比必要的內(nèi)耗。

　　ERP實(shí)施顧問在推進(jìn)項(xiàng)目的過(guò)程中，應(yīng)該注意項(xiàng)目團(tuán)隊(duì)中各成員之間的相互激勵(lì)。如果激勵(lì)制度設(shè)置的不當(dāng)，可能項(xiàng)目小組成員不僅不會(huì)創(chuàng)造貢獻(xiàn)，還很有可能發(fā)生內(nèi)部戰(zhàn)爭(zhēng)，產(chǎn)生一些比必要的內(nèi)耗。為此，實(shí)施顧問必須建立有效的只針對(duì)個(gè)人而不是成員之間的激勵(lì)制度。換句話說(shuō)，即將現(xiàn)有的個(gè)體之間的競(jìng)爭(zhēng)，人與人之間的比較，轉(zhuǎn)化為自己和自己的競(jìng)爭(zhēng)。如果錯(cuò)誤的將所有的項(xiàng)目小組成員都趕到一條獨(dú)木橋上，讓他們?nèi)Z取隔岸的那一顆唯一的勝利果實(shí)，那么合作將不可能形成，相互激烈就會(huì)被相互泄氣所代替。

　　原則一：不要在團(tuán)隊(duì)內(nèi)部締造英雄。

　　在國(guó)際上，有一個(gè)著名的足球教練，他說(shuō)過(guò)一句非常有哲理的話，我是記憶猶深。他說(shuō)，我們足球隊(duì)沒有英雄，個(gè)個(gè)都是英雄。確實(shí)，在足球場(chǎng)上贏得勝利，不是前鋒一個(gè)人的功勞，而是后衛(wèi)、中鋒、門衛(wèi)一起的功勞。若在足球場(chǎng)上過(guò)度的強(qiáng)調(diào)進(jìn)球人的貢獻(xiàn)的話，則難免會(huì)在團(tuán)隊(duì)中形成隔閡。所有的光環(huán)都在射球人身上的話，那誰(shuí)以后還去當(dāng)這幕后的英雄呢?

　　所以，筆者認(rèn)為，在ERP項(xiàng)目的團(tuán)隊(duì)中，不要塑造個(gè)人英雄。ERP項(xiàng)目實(shí)施小組中，沒有英雄。只要項(xiàng)目取得成功，那么個(gè)個(gè)都是英雄，每個(gè)人都應(yīng)該得到嘉獎(jiǎng)。

　　若我們?cè)诩?lì)員工的時(shí)候，以個(gè)人為單位進(jìn)行嘉獎(jiǎng)，會(huì)產(chǎn)生什么情況呢?則難免就會(huì)形成員工個(gè)人與個(gè)人之間的競(jìng)爭(zhēng)。俗話說(shuō)，人比人，氣死人。這真是團(tuán)隊(duì)管理的禁忌。筆者認(rèn)為，ERP項(xiàng)目要取得成功，不是靠個(gè)人之力，而是團(tuán)隊(duì)相互協(xié)作的結(jié)果。所以，不要在團(tuán)隊(duì)內(nèi)部之間形成相互賽跑的局面，而應(yīng)該努力培養(yǎng)一個(gè)自我提升的氛圍。

　　2、要設(shè)置盡量多的勝利帽子，而不要造成眾人搶過(guò)獨(dú)木橋的現(xiàn)象。在足球賽場(chǎng)上，會(huì)按不同的位置設(shè)置不同的獎(jiǎng)項(xiàng)。如最佳守門員、最佳前鋒、最佳后衛(wèi)等等。如此的話，每個(gè)位置的人就會(huì)堅(jiān)守自己的崗位，努力做的更好。他們就不會(huì)三心二意，覺得自己所負(fù)責(zé)的位置沒有出風(fēng)頭的機(jī)會(huì)，一心就想著去射門、去做前鋒等等。如此的團(tuán)隊(duì)，其協(xié)作型又怎么會(huì)好呢?其實(shí)，在ERP項(xiàng)目中也有類似的問題。若我們?cè)谠O(shè)置項(xiàng)目激勵(lì)制度的時(shí)候，只設(shè)置了一個(gè)獎(jiǎng)項(xiàng)，如把項(xiàng)目獎(jiǎng)金的80%獎(jiǎng)勵(lì)給項(xiàng)目實(shí)施過(guò)程中有杰出貢獻(xiàn)之人，而這人也就只有一個(gè)。那會(huì)產(chǎn)生什么樣的情況呢?項(xiàng)目小組成員個(gè)個(gè)都是企業(yè)的皇子，他們就會(huì)為了爭(zhēng)奪這個(gè)太子的位置，相互扯后腿，相互攻擊。企業(yè)這是人為的造了一條獨(dú)木橋。如此的話，ERP項(xiàng)目小組的各個(gè)成員之間，就會(huì)拉小幫派，就不會(huì)有勁往一處使了。筆者是非常反對(duì)這種做法的。筆者現(xiàn)在的處理方式是，以部門為單位，進(jìn)行選拔。也就是說(shuō)，我們ERP項(xiàng)目有五個(gè)部門參與的話，則把80%的獎(jiǎng)金分為5份，每個(gè)部門一份。讓每個(gè)部門自己選擇一個(gè)杰出貢獻(xiàn)人員。如此的話，就可以有效的避免部門之間的競(jìng)爭(zhēng)，同時(shí)，又能夠起到激勵(lì)的作用。

Tags: 項(xiàng)目管理, ERP, 軟件工程