讓我們在進入正式的開發過程之前，先理一下思路，有一些必要的開發規範需要事先確定，以免事後返工，浪費開發人員的寶貴時間。 ——開發前的各種規範 一、目錄結構
開啟Web伺服器的根目錄，現在我們已經有了三個檔案夾和一個首頁檔案，其中images檔案夾中放了一張loading.gif動畫圖片，js檔案夾中放了兩個Javascript指令檔，而isomorphic檔案夾下面則是SmartClient的運行庫檔案，如下圖所示：
如果你的Web服務是由Apache建立的，那麼首頁通常是 index.html，這一點和IIS有明顯的不同。由於Windows系統不區分檔案名稱的大小寫，而Linux系統又嚴格區分檔案名稱的大小寫，為了避免不必要的問題，我們可以制定一個約定，所有的檔案名稱都採用小寫字母。
另外，我們還可以事先建立一些檔案夾，用來區分各種不同的檔案，比如css檔案夾裡面放css檔案，又或者對於.Net平台，可以將一些編譯過的類庫dll檔案放在bin檔案夾。還可以建立一個static檔案夾，可以放一些靜態資料檔案，這個以後在講到資料繫結的時候會用到。
你也可以根據自己的需求制定一個目錄結構的儲存規則，總的原則是盡量的清晰明了，一目瞭然，以免在項目大了以後混亂不堪。 二、Javascript檔案
在上一章中，我們在首頁中載入了兩個js檔案，一個名為 loading.js 另一個名為 default.js，前者是一個載入畫面，後者是我們整個項目的入口。隨著開發工作的展開，編寫的代碼越來越多，放在一個js檔案中是不現實的，所以我們可以將不同的程式模組放到不同的js檔案中。
比如，在desktop.js中放入用戶端UI的案頭控制碼，在user.js中則放入操作者的身份認證及控制碼，在remote.js中放入一些ajax操作的代碼等等，具體的命名規則可以按自己的習慣和團隊開發的標準來決定。
當然在一個大型的項目中，代碼量極其龐大，可能需要更加細化的區分，這樣做的好處是有利於團隊分工和代碼的整潔，以及後期調試、測試及維護的方便性。所以到最後，我們的首頁檔案可能會變成下面的樣子：
<!doctype html><html><head><meta charset="utf-8" /><meta http-equiv="content-type" content="text/html;charset=utf-8" /><title></title></head><body><script type="text/javascript" src="/isomorphic/system/modules/ISC_Core.js"></script><script type="text/javascript" src="/isomorphic/system/modules/ISC_Foundation.js"></script><script type="text/javascript" src="/js/loading.js"></script><script type="text/javascript" src="/isomorphic/system/modules/ISC_Containers.js"></script><script type="text/javascript" src="/isomorphic/system/modules/ISC_Grids.js"></script><script type="text/javascript" src="/isomorphic/system/modules/ISC_Forms.js"></script><script type="text/javascript" src="/isomorphic/system/modules/ISC_DataBinding.js"></script><script type="text/javascript" src="/isomorphic/locales/frameworkMessages_zh_CN.properties.js"></script><script type="text/javascript" src="/isomorphic/skins/Graphite/load_skin.js"></script><script type="text/javascript" src="/js/desktop.js"></script><script type="text/javascript" src="/js/user.js"></script><script type="text/javascript" src="/js/remote.js"></script><script type="text/javascript" src="/js/message.js"></script><script type="text/javascript" src="/js/i18n.js"></script><script type="text/javascript" src="/js/default.js"></script></body></html>注意，我們將程式的入口檔案放在了最後，因為在項目啟動之前，所有的程式碼都必須定義完成，否則將會產生異常。所以，不論有多少個模組檔案，最終的入口檔案一定要放到最後載入。至此，我們的首頁檔案應該算是比較完整的了，以後整個項目的所有內容都與這個首頁檔案關係不大，而整個項目也只需要這麼一個html檔案，這與傳統的網頁開發有著很大的差別。 三、Javascript閉包
讓我們回到程式啟動並執行開始部分，開啟loading.js檔案，回顧一下這個檔案的代碼：
window.isomorphicDir = "/isomorphic/";isc.Label.create({ ID: "labelLoading", padding: 10, width: "100%", height: "100%", align: "center", valign: "center", wrap: false, icon: "/images/loading.gif", contents: "Loading..."});
儘管我們還沒有正式開始講SmartClient的文法，但即使是從字面上來看，還是可以基本上看明白，這幾行代碼建立了一個標籤，並且還能顯示Loading動畫圖片。作為一個標準的Javascript指令檔，在檔案在任意地方敲上代碼，瀏覽器就可以執行這些代碼。
可是這樣就有了一個問題，Javascript指令碼不像其它的程式設計語言，有命名空間，或者類這樣的概念，而且它也不是強型別的語言，很容易出現命名衝突的情況。比如我們如果在代碼中加入一行，如下面的代碼所示：
window.isomorphicDir = "/isomorphic/";var isc = "";isc.Label.create({ ID: "labelLoading", padding: 10, width: "100%", height: "100%", align: "center", valign: "center", wrap: false, icon: "/images/loading.gif", contents: "Loading..."});
這個時候再執行代碼，就會發生致命的錯誤。原因是在我們調用標籤建立代碼之前，定義了一個字串變數，名字叫isc，這與SmartClient的內建對象名衝突了，從而後面的代碼將不能正確的執行。Javascript的這個特性，使得開發Javascript代碼變成了一項充滿陷井的工作。
為了防止因為變數的名字衝突而造成的各種問題，我們需要使用到Javascript的閉包特性。閉包作為Javascript特有的概念，對於習慣於其它語言的開發人員來說，是很難理解的概念。在這裡我們先簡單得把閉包理解成一個封閉的空間，代碼可以正常執行，並且不受閉包外代碼的影響。
最終，我們把 loading.js 改成下面的樣子：
(function(){window.isomorphicDir = "/isomorphic/";isc.Label.create({ ID: "labelLoading", padding: 10, width: "100%", height: "100%", align: "center", valign: "center", wrap: false, icon: "/images/loading.gif", contents: "Loading..."});})();
以後，我們所有的代碼都將在這樣的閉包中運行，雖然閉包不能解決所有的問題，但至少可以防止不同代碼塊之間的各種名稱衝突。如果你對Javascript閉包非常陌生，可以先參考一下相關的資料。當然，閉包技術不是必須的，你依舊可以採用自己習慣的方式來編寫Javascript代碼。
四、中文字型的問題
SmartClient提供了不少皮膚主題，也有提供簡體中文的語言套件，不過實際啟動並執行時候，你會發現中文字型的顯示效果非常不理想，字型大小太小，根本看不清楚。這個問題是由於其主題包中的CSS檔案定義都是以英文字型、字型大小為標準造成的，一般的字型大小都是11個像素。而對於中文來說，至少需要12個像素才能清晰的顯示。
解決這個問題的辦法也很簡單，找到相應的主題包所在的檔案夾，會發現一個名為 skin_styles.css 的檔案，將這個 skin_styles.css 複製一份，並命名為 skin_styles.css.bak，然後我們用文字編輯器打個 skin_styles.css 檔案，可以看到大量的字型定義，都是英文字型，11個像素大小，比如下面的部分代碼：
.pageBackground {
font-family:Arial,Verdana,sans-serif; font-size:11px;
color:black;
background:#FAFAFA;
}
/* default text */
.normal {
font-family:Arial,Verdana,sans-serif; font-size:11px;
color:black;
}
.defaultBorder {
border:1px solid #A7ABB4;
}把所有出現“font-size:11px;”的地方替換成“font-size:12px;”就可以了。對於Windows7及以上版本的作業系統，因為有微軟雅黑字型可以提供更好的顯示效果，我們可以將“font-family:”替換成“font-family:微軟雅黑,宋體,”，然後以UTF-8編碼格式儲存，這樣CSS檔案就變成了下面的樣子：
.pageBackground {
font-family:微軟雅黑,宋體,Arial,Verdana,sans-serif; font-size:12px;
color:black;
background:#FAFAFA;
}
/* default text */
.normal {
font-family:微軟雅黑,宋體,Arial,Verdana,sans-serif; font-size:12px;
color:black;
}
.defaultBorder {
border:1px solid #A7ABB4;
}更為保險的作法是將字型名稱用英文來表示，這樣可以避免因為忘記儲存為UTF-8格式而造成的問題，對於微軟雅黑字型，它的英文名“Microsoft
YaHei”，而宋體的英文名稱是“SimSun”，最終的CSS檔案就應該像下面的代碼一樣，不再有中文字的出現：
.pageBackground {
font-family:Microsoft YaHei,SimSun,Arial,Verdana,sans-serif; font-size:12px;
color:black;
background:#FAFAFA;
}
/* default text */
.normal {
font-family:Microsoft YaHei,SimSun,Arial,Verdana,sans-serif; font-size:12px;
color:black;
}
.defaultBorder {
border:1px solid #A7ABB4;
}
到這裡為止，我們利用SmartClient開發一個項目的前期準備工作已經全部完成，終於可以正式開始進入開發階段了。
轉載出處：http://m.blog.csdn.net/article/details?id=39933287
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
