前端技術(shù)規(guī)范總結(jié)

第一部分：目錄、文件、CSS命名方式

文件夾與文件名稱(chēng)、CSS樣式命名、程序中的一些控件等等：

名稱(chēng)全部用小寫(xiě)英文字母、數(shù)字、下劃線(xiàn)的組合，其中不得包含漢字、空格和特殊字符；目錄名應(yīng)以英文、拼音為主（不到萬(wàn)不得已不要以拼音作為目錄名稱(chēng)，經(jīng)驗(yàn)證明，用拼音命名的目錄往往連一個(gè)月后的自己都看不懂）。盡量用一些大家都能看懂的詞匯。使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義。而且當(dāng)我們?cè)谖募�夾中使用“按名稱(chēng)排例”的命令時(shí)，同一種大類(lèi)的文件能夠排列在一起，以便我們查找、修改、替換、計(jì)算負(fù)載量等等操作。

例如：images(圖形文件)，flash（Flash文件）等。

命名方式：（性質(zhì)_描素_位置_分類(lèi)_數(shù)量）項(xiàng)相結(jié)合，采用簡(jiǎn)寫(xiě)、組合的方式形成通用規(guī)則。

例如：

news(性質(zhì))

news_title(性質(zhì)_描素)

news_title_top(性質(zhì)_描素_位置)

news_title_top_01(性質(zhì)_描素_位置_數(shù)量)

news_title_top_a_01(性質(zhì)_描素_位置_分類(lèi)_數(shù)量)news_title_top_b_01(性質(zhì)_描素_位置_分類(lèi)_數(shù)量)

常用目錄名：

data(數(shù)據(jù)庫(kù))images(圖片)install(安裝)templets(模版)include(包含)admin(后臺(tái))rss(定閱)media(媒體)config(配置)Script(腳本)Language(語(yǔ)言)style(樣式)等

常用CSS名：

頁(yè)面外圍控制整體布局寬度：wrapper頭：header內(nèi)容：content/container頁(yè)面主體：main側(cè)欄：sidebar尾：footer等

第二部分：結(jié)構(gòu)（XHTML）

網(wǎng)站的前端結(jié)構(gòu)與表現(xiàn)分離，達(dá)到95%以上。正式上線(xiàn)后的網(wǎng)頁(yè)代碼結(jié)構(gòu)要清晰、明朗，容易閱讀，布局與結(jié)構(gòu)的鑲套盡量控制在4-5層以?xún)?nèi)，嚴(yán)格遵循w3c的xhtml1.0Transtitonal。并遵循以下原則：

1.DDT類(lèi)型：XHTML1.0Transitional2.編碼：utf-83.元標(biāo)記必須項(xiàng)：

該頁(yè)面的關(guān)鍵詞概況該頁(yè)面的簡(jiǎn)要描述具體內(nèi)容根據(jù)SEO要求設(shè)置

4.Html代碼中的所有標(biāo)簽遵循XHTML1.0的書(shū)寫(xiě)規(guī)范，包括：5.

6.7.8.9.10.11.12.13.

a)標(biāo)簽全部使用小寫(xiě)；b)標(biāo)簽全部閉合；

c)所有屬性必須有值而且用雙引號(hào)；d)把所有clear:

---------------------------------------------------------容器布局}

每一個(gè)屬性結(jié)尾都必須寫(xiě)分號(hào)，其中有的值如果不需要，可以不寫(xiě)，大體上是這樣的順序，也符合思考的順序。

4.有幾點(diǎn)注意事項(xiàng)：

a)font-family:必須以sans-serif字體做結(jié)尾；b)減少樣式數(shù)量，盡量重復(fù)使用；c)必須清除float；d)單位：使用像素（px）；

e)顏色值：使用#RRGGBB格式

第四部分：UE指導(dǎo)原則

1.網(wǎng)站LOGO的視覺(jué)統(tǒng)一，網(wǎng)站主體的視覺(jué)風(fēng)格、文本顏色、鏈接顏色、修飾圖片風(fēng)格以及按鈕和表單控件的視

覺(jué)進(jìn)行統(tǒng)一；

2.為每一個(gè)頁(yè)面設(shè)定一個(gè)最合適的標(biāo)題，使用戶(hù)和搜索引擎一目了然知道頁(yè)面的主題；

3.為大部分頁(yè)面加入元標(biāo)記，即相關(guān)內(nèi)容，描述頁(yè)面屬性；在最終頁(yè)加入具有親和力的版權(quán)說(shuō)明、

免責(zé)聲明、交互設(shè)計(jì)說(shuō)明文檔的鏈接地址；

4.頁(yè)面中必須有回到“首頁(yè)”的鏈接一般做法是將站點(diǎn)LOGO加上首頁(yè)的鏈接，最好還是有回到首頁(yè)的文字

鏈接；

5.如果網(wǎng)站欄目很多，要讓用戶(hù)知道所處的頁(yè)面屬于哪個(gè)欄目之下，以及很輕松的可以回到上一級(jí)欄目標(biāo)簽

是一種不錯(cuò)的方法；

6.現(xiàn)在位置。如果上一條原則處理的很好，“現(xiàn)在位置”可以去掉；

7.搜索。合理的放置搜索表單，最好在首屏，并且確保搜索結(jié)果的準(zhǔn)確性；

表單設(shè)計(jì)原則:

1.面向菜鳥(niǎo)和專(zhuān)業(yè)用戶(hù)，填寫(xiě)項(xiàng)盡量精簡(jiǎn)，做簡(jiǎn)單的填寫(xiě)說(shuō)明，僅放置與填寫(xiě)表單相關(guān)的鏈接，避免用戶(hù)通過(guò)其

他鏈接轉(zhuǎn)移視線(xiàn)到別的地方，從而放棄填寫(xiě)表單

2.清晰的驗(yàn)證告訴用戶(hù)為什么出現(xiàn)錯(cuò)誤，并引導(dǎo)正確的填寫(xiě)；

3.如果完成表單任務(wù)需要多個(gè)步驟，需要用圖形或文字表明所需的步驟，以及當(dāng)前正在進(jìn)行的步驟使用戶(hù)知

道離成功還有多遠(yuǎn)；

4.如果可能，盡量先放置input、textaera等需要鍵盤(pán)輸入的項(xiàng)，再放置下拉、單選、復(fù)選等鍵盤(pán)操作的項(xiàng)，緊

接著是“提交”按鈕就是說(shuō)，減少鍵盤(pán)操作被鼠標(biāo)操作打斷的次數(shù)；

5.文本域允許更改內(nèi)容的文本格式，比如加粗、字體大小、超鏈接、圖片等等，而且，盡量讓此內(nèi)容與用戶(hù)完成

發(fā)布以后的內(nèi)容格式相同；6.提供將表單保存為草稿的功能；7.設(shè)計(jì)符合習(xí)慣的表單。

個(gè)人總結(jié)

Web開(kāi)發(fā)的分散性和交互性，決定了Web開(kāi)發(fā)必須遵從一定的開(kāi)發(fā)規(guī)范和技術(shù)約定，只有每個(gè)開(kāi)發(fā)人員都按照一個(gè)共同的規(guī)范去設(shè)計(jì)、溝通、開(kāi)發(fā)、測(cè)試、部署，才能保證整個(gè)開(kāi)發(fā)團(tuán)隊(duì)協(xié)調(diào)一致的工作，從而提高開(kāi)發(fā)工作效率，提升工程項(xiàng)目質(zhì)量。本規(guī)范并不是一個(gè)一成不變的必須嚴(yán)格遵守的條文，特殊情況下要靈活運(yùn)用，做一定的變通，僅供個(gè)人參考。

擴(kuò)展閱讀：rsp技術(shù)開(kāi)發(fā)規(guī)范總結(jié)

終端RSP

開(kāi)

發(fā)規(guī)201*-3-4

范

目錄

一、StoryBoard規(guī)范....................................................................................................3

1、場(chǎng)景描述規(guī)范................................................................................................32、ServiceTree規(guī)范...........................................................................................3二、命名規(guī)范..............................................................................................................3

1、RSP命名規(guī)范................................................................................................32、元素節(jié)點(diǎn)命名規(guī)范........................................................................................33、RSP中Java代碼命名規(guī)范...........................................................................44、切圖圖片命名規(guī)范........................................................................................4三、注釋規(guī)范..............................................................................................................4

1、RSP文件注釋................................................................................................42、RSP節(jié)點(diǎn)注釋................................................................................................53、業(yè)務(wù)條件注釋................................................................................................5四、開(kāi)發(fā)框架規(guī)范......................................................................................................5

1、目錄規(guī)范........................................................................................................52、RSP框架規(guī)范................................................................................................63、屏幕適配框架使用規(guī)范..............................................................................104、Cache使用規(guī)范...........................................................................................135、CacheObject使用規(guī)范.................................................................................14

一、StoryBoard規(guī)范

1、場(chǎng)景描述規(guī)范

1）描述場(chǎng)景功能，對(duì)每個(gè)場(chǎng)景編號(hào)，該編號(hào)和ServiceTree中場(chǎng)景編號(hào)對(duì)應(yīng)；2）描述場(chǎng)景中各個(gè)元素的來(lái)源，動(dòng)畫(huà)效果和交互效果；

2、ServiceTree規(guī)范

ServiceTree要對(duì)沒(méi)一個(gè)業(yè)務(wù)場(chǎng)景編號(hào)，該編號(hào)和StoryBoard的場(chǎng)景編號(hào)對(duì)應(yīng)。ServiceTree要反映各個(gè)場(chǎng)景的跳轉(zhuǎn)和層次關(guān)系，根據(jù)此層次關(guān)系確定開(kāi)發(fā)框架中的場(chǎng)景級(jí)數(shù)。

二、命名規(guī)范

1、RSP命名規(guī)范

RSP命名形式：文件所在位置_所屬業(yè)務(wù)_場(chǎng)景名_類(lèi)型

文件所在位置是指文件是在客戶(hù)端還是服務(wù)器端。在客戶(hù)端的文件用"c"表

示，在服務(wù)器端的文件用"s"表示；

所屬業(yè)務(wù)是指該文件屬于哪個(gè)業(yè)務(wù)模塊，比如該頁(yè)面在客戶(hù)端，且屬于新聞模塊則寫(xiě)成：c_news.rsp。業(yè)務(wù)名全部用英文表示;

場(chǎng)景名是指該rsp所描述對(duì)應(yīng)場(chǎng)景名，場(chǎng)景名用英文表示。如該頁(yè)面在客戶(hù)端是新聞模塊，描述的是新聞?lì)愋蛣t該rsp名是c_news_type.rsp;類(lèi)型是指該rsp是View還是Content。比如該頁(yè)面在客戶(hù)端，且屬于新聞模塊且為View則寫(xiě)成：c_news_type_view.rsp;如果該rsp文件既不是View也不是Content則該類(lèi)型可以不寫(xiě)。

文件名一律小寫(xiě)。

文件編碼必須是UTF-8

2、元素節(jié)點(diǎn)命名規(guī)范

節(jié)點(diǎn)命名形式：節(jié)點(diǎn)域_所屬業(yè)務(wù)_場(chǎng)景名_內(nèi)容描述

節(jié)點(diǎn)域，本地用“Local”，全局用“Global”禁止使用簡(jiǎn)寫(xiě)；

內(nèi)容描述，由開(kāi)發(fā)人員定義。只要符合能表述清楚該節(jié)點(diǎn)的功能或內(nèi)容的原則就行。內(nèi)容描述用英文；

節(jié)點(diǎn)名稱(chēng)遵循駝峰是命名規(guī)則，Global：newsDetail表示新聞明細(xì)或者Global：news_detail

其他描述同RSP命名規(guī)范。

3、RSP中Java代碼命名規(guī)范

RSP中Java代碼變量全小寫(xiě)，只要符合能表述清楚該變量的意義的原則皆可。代碼編寫(xiě)必須遵循java1.5的規(guī)范.遵循匈牙利命名規(guī)則.

4、切圖圖片命名規(guī)范

圖片命名形式：圖片所在位置_所屬業(yè)務(wù)_內(nèi)容

圖片所在位置是指圖片是在客戶(hù)端還是服務(wù)器端。在客戶(hù)端的圖片用"c"表示，在服務(wù)器端的文件用"s"表示；

所屬業(yè)務(wù)是指該圖片屬于哪個(gè)業(yè)務(wù)模塊，比如該圖片在客戶(hù)端，且屬于新聞模塊則寫(xiě)成：c_news.png。圖片名全部用英文表示;

內(nèi)容是指對(duì)該圖片意思的表述，如該圖片是按鈕按下的圖片，在客戶(hù)端屬于新聞模塊則寫(xiě)成：c_news_button_down.png

三、注釋規(guī)范

1、RSP文件注釋

在每個(gè)RSP文件開(kāi)頭要有如下形式的注釋?zhuān)?、RSP節(jié)點(diǎn)注釋

對(duì)RSP文件中的每個(gè)節(jié)點(diǎn)或節(jié)點(diǎn)塊頭標(biāo)明該節(jié)點(diǎn)對(duì)應(yīng)StoryBoard中的場(chǎng)景或動(dòng)作效果。如：

........

3、業(yè)務(wù)條件注釋

如果由于業(yè)務(wù)條件的不同，同一個(gè)表示區(qū)域會(huì)有不同的效果或動(dòng)作則要在條件判斷處要標(biāo)明在什么情況下會(huì)進(jìn)入哪段代碼。

四、開(kāi)發(fā)框架規(guī)范

1、目錄規(guī)范

目錄規(guī)范用于說(shuō)明項(xiàng)目工作區(qū)的文檔結(jié)構(gòu)，規(guī)范文件放置。具體結(jié)構(gòu)如下：src

公用目錄業(yè)務(wù)組1

子業(yè)務(wù)1子業(yè)務(wù)2…業(yè)務(wù)組2

子業(yè)務(wù)1子業(yè)務(wù)2…...Res

Devices設(shè)備配置目錄

Layouts界面布局配置目錄Skins皮膚配置目錄

不同分辨率圖片文件夾公用圖片夾業(yè)務(wù)1業(yè)務(wù)2…如圖:

表示:240x320分辨率下的”無(wú)線(xiàn)生活”文件下的”便民查詢(xún)”查詢(xún)文件夾

整個(gè)工作去分src，res，libs文件夾，分別放置源代碼，資源文件，外部包和配置文件。

src下每個(gè)業(yè)務(wù)分別建立自己的源代碼文件夾，文件夾名用能代表該業(yè)務(wù)的英文說(shuō)明表示；

res下分為devices，layouts，skins三個(gè)文件夾，主要放置配置文件.分別放置公共資源，客戶(hù)端資源，服務(wù)器端資源。其中客戶(hù)端資源和服務(wù)器端資源中的各個(gè)業(yè)務(wù)的資源放置到自己所屬的業(yè)務(wù)資源文件夾中；

libs下放置擴(kuò)展包和交互API；

2、RSP框架規(guī)范

RSP框架規(guī)范用于說(shuō)明終端開(kāi)發(fā)中要遵循的各項(xiàng)框架性的準(zhǔn)則和要求，定義一個(gè)基本的開(kāi)發(fā)結(jié)構(gòu)框架。

基本原則：

1、View/Content分離，View包含顯示框架、顯示邏輯和控制邏輯，放置在客戶(hù)端；Content負(fù)責(zé)與后臺(tái)交互并向View填充數(shù)據(jù)；

2、合理運(yùn)用緩存；

服務(wù)器端的場(chǎng)景要盡可能多的緩存；

對(duì)于沒(méi)有特定關(guān)聯(lián)關(guān)系的業(yè)務(wù)場(chǎng)景（新聞，天氣等）要使用一級(jí)緩

存以減少服務(wù)器編譯時(shí)間；

常用的外部資源（美圖業(yè)務(wù)的圖片）要使用二級(jí)緩存以減少RMS與外部的服務(wù)交互；

可預(yù)知用戶(hù)操作的業(yè)務(wù)（讀書(shū)）要使用CacheObect提前緩存，減少用戶(hù)等待時(shí)間；

使用緩存隊(duì)列維護(hù)緩存；建立合理的緩存控制機(jī)制。

3、定義符合該項(xiàng)目的主體場(chǎng)景樹(shù)；主體場(chǎng)景樹(shù)要求包含該項(xiàng)目的所有框架節(jié)點(diǎn)，供開(kāi)發(fā)業(yè)務(wù)時(shí)使用；

4、開(kāi)發(fā)過(guò)程中不要使用無(wú)target的Insert節(jié)點(diǎn)，主體場(chǎng)景樹(shù)定義RSP除外；5、除主體場(chǎng)景樹(shù)所在的RSP外不要有或減少I(mǎi)nsert節(jié)點(diǎn)，特別是無(wú)target的Insert節(jié)點(diǎn)；

6、一個(gè)場(chǎng)景的Action盡量寫(xiě)在一個(gè)單獨(dú)的Action節(jié)點(diǎn)中；7、場(chǎng)景加載時(shí)按照ServiceTree添加到對(duì)應(yīng)的級(jí)別Transform；

8、在同一個(gè)業(yè)務(wù)中有本級(jí)向下一級(jí)跳轉(zhuǎn)時(shí)不要?jiǎng)h除本級(jí)頁(yè)面代碼而是將本級(jí)隱藏，當(dāng)由下級(jí)向上級(jí)返回時(shí)刪除本級(jí)代碼，顯示上級(jí)節(jié)點(diǎn)；

9、如果業(yè)務(wù)存在過(guò)多的跨業(yè)務(wù)的跳轉(zhuǎn)需討論決定是否使用6，7兩點(diǎn)。因?yàn)榇朔N情況下維護(hù)級(jí)別節(jié)點(diǎn)是個(gè)不小的開(kāi)銷(xiāo)；

10、服務(wù)器端的RSP要被try/cache包住，并處理異常；

11、將一個(gè)RSP分成多個(gè)單元，將優(yōu)先顯示的內(nèi)容放在前面，次要的需要大量時(shí)間傳輸?shù)膬?nèi)容放在后面。根據(jù)實(shí)際場(chǎng)景做具體調(diào)整

12、關(guān)閉超時(shí),最后才渲染的場(chǎng)景放在finally里面.主體框架示例：目錄結(jié)構(gòu)示例src

base

c_main.rsp

c_cache_clean_view.rsps_cache_clean_content.rsps_update_client.rsp

c_version_check_view.rsps_version_check_content.rspc_dummy.rsp

common

home

c_home_view.rsp

c_home_content.rspnews

c_news_base.rsp

c_news_type_view.rsps_news_type_content.rsp

res

clientcommon

background.png

foot.pngheader.pngnewsserver

commonnewslibs

client.jar

conf

文件說(shuō)明

c_main.rsp

項(xiàng)目的主體場(chǎng)景樹(shù)。其包含了整個(gè)項(xiàng)目中要使用的節(jié)點(diǎn)。文件內(nèi)容見(jiàn)附件c_main.rsp

c_version_check_view.rsp，s_version_check_content.rsp

這兩個(gè)文件負(fù)責(zé)登錄時(shí)的版本校驗(yàn)。在c_main.rsp最后會(huì)調(diào)用c_version_check_view.rsp這個(gè)文件，該文件中包含了所有需要校驗(yàn)版本的業(yè)務(wù)Text節(jié)點(diǎn)和Save節(jié)點(diǎn)以保存版本號(hào)。s_version_check_content.rsp負(fù)責(zé)從后臺(tái)取最新的版本號(hào)并和已有的版本好比對(duì)，并更新版本號(hào)。如客戶(hù)端需更新則調(diào)用s_update_client.rsp。

"stzserver://c_cache_clean_view.rsp"/>

s_update_client.rsp

負(fù)責(zé)更新客戶(hù)端。關(guān)鍵代碼如下：

url="cmd://cleanRMSData?cached=TRUE&saved=TRUE"startTime="NOW">

c_cache_clean_view.rsp和c_cache_clean_content.rsp這兩個(gè)文件負(fù)責(zé)清理需要更新的緩存。用法如下

這樣把所有以news.rsp開(kāi)頭的緩存就都清除了。

場(chǎng)景間的跳轉(zhuǎn)

每個(gè)場(chǎng)景在業(yè)務(wù)中都有其場(chǎng)景級(jí)別。當(dāng)要跳轉(zhuǎn)到該場(chǎng)景時(shí)要隱藏上一級(jí)的場(chǎng)景,需調(diào)用c_main.rsp中的對(duì)應(yīng)級(jí)別的動(dòng)作。如第0級(jí)到第一級(jí)要調(diào)用

Global:replace_back_from_loading_for_content.L1這個(gè)方法隱藏第0級(jí)。返回時(shí)則調(diào)用Global:replace_back_from_loading_for_content.L0顯示第0級(jí)的內(nèi)容。

返回示例代碼：

場(chǎng)景的更新

每個(gè)場(chǎng)景頁(yè)面要在開(kāi)頭替換掉之前該場(chǎng)景的內(nèi)容，一個(gè)空?qǐng)鼍暗哪０宕�碼如下：

以第零級(jí)為例:

該場(chǎng)景的內(nèi)容

五、實(shí)用代碼規(guī)范

1、屏幕適配框架使用規(guī)范

屏幕適配通過(guò)scale或layout組件實(shí)現(xiàn)。屏幕適配的好處是開(kāi)發(fā)一套UI能適配其他分辨率的版本，降低了開(kāi)發(fā)工作量。

使用scale的好處是適配簡(jiǎn)單，能快速應(yīng)用到一個(gè)新的分辨率。缺點(diǎn)是無(wú)法對(duì)場(chǎng)景進(jìn)行微調(diào)，如果發(fā)現(xiàn)界面上有部分顯示效果不佳只能以硬編碼的方式解決，無(wú)法通用。

Scale的使用已經(jīng)在開(kāi)發(fā)框架中搭建好。只要配上后臺(tái)API就能使用。

使用layout的好處是它能精細(xì)的調(diào)節(jié)場(chǎng)景上的每一個(gè)元素，通過(guò)配置文件進(jìn)行管理，可以在不改變代碼的情況下適配各種分辨率。缺點(diǎn)是配置文件過(guò)多過(guò)復(fù)雜，如果layout被放置在服務(wù)器端使用則會(huì)影響效率，放在客戶(hù)端則不會(huì)。

要使用Layout需要adaptaion.jar包。新版本的Developer新建service時(shí)會(huì)自動(dòng)提供該包，并會(huì)產(chǎn)生一個(gè)adaptation.xml。

以下是個(gè)標(biāo)準(zhǔn)的adaptation.xml

可以看出layout由Theme，Skin，Layout三部分組成。

Theme包含多個(gè)Skin，每個(gè)Skin負(fù)責(zé)定義該分辨率下各個(gè)元素的顯示樣式，如高度，顏色等。比如QVGA.xml：

其指定了footer_bg這個(gè)Image節(jié)點(diǎn)讀取圖片的url是“QVGA/footer_bg.png”，高度是20，名字為footer_txt的Text節(jié)點(diǎn)顏色是“#FFFFFF”。

LayoutSet是一個(gè)Layout集合，其可以包含多個(gè)Layout。Layout負(fù)責(zé)定義每個(gè)Transform的大小。如main.xml:

每個(gè)Container都定義了顯示的百分比高度等屬性，在RSP中只要調(diào)用這些ID就能將該Container的顯示定義加載到調(diào)用的Transform上。

在RSP中使用Layout的方法：首先要得到Container：

設(shè)置加載資源和Transform

這里最關(guān)鍵的是

root.getChildByIdRecurs("Search").applyTo(currentTransform);

它將配置文件中的屬性加載到了當(dāng)前的Transform，這樣就實(shí)現(xiàn)了通過(guò)配置文件設(shè)置頁(yè)面上元素的位子，大小，樣式。

2、Cache使用規(guī)范

Cache能將資源或頁(yè)面緩存到客戶(hù)端或服務(wù)器，提高了用戶(hù)使用速度。Cache分為客戶(hù)端Cache和服務(wù)器端Cache。

客戶(hù)端Cache

客戶(hù)端Cache是將訪(fǎng)問(wèn)的場(chǎng)景緩存到客戶(hù)端。這樣用戶(hù)再次訪(fǎng)問(wèn)該頁(yè)面時(shí)就不用訪(fǎng)問(wèn)服務(wù)器，既減少了數(shù)據(jù)流量又提高的顯示速度。具體用法如下：

在RSP的header中加入緩存的屬性：

cacheable設(shè)置為true則該頁(yè)面會(huì)緩存clientCacheTtl設(shè)置緩存有效時(shí)間，以毫秒為單位。過(guò)了時(shí)間則緩存失效。Permanent是設(shè)置是否永久緩存，如果為true則會(huì)該緩存會(huì)保存到內(nèi)存上永不失效，除非通過(guò)命令清除緩存。

注意：由于RME默認(rèn)緩存大小只有1024KB所以如果要獲得更多的緩存空間需要修改默認(rèn)緩存值后重新編譯RME。

服務(wù)器端cache

服務(wù)器端cache分為cacheL1和cacheL2

L1的作用是在服務(wù)器端將stz文件緩存到內(nèi)存中。這樣減少了服務(wù)器與后臺(tái)交互以及生成stz的時(shí)間。

用法如下:

在中加入serverCacheTtl屬性，如

L2的作用是將外部資源緩存到服務(wù)器的內(nèi)存中，這樣可以減少RMS和外部服務(wù)器交互的時(shí)間。用法如下：

關(guān)鍵就是stzRequest.getExternalResource這個(gè)方法。此例子就是把指定url的圖片緩存到了服務(wù)器端。

3、CacheObject使用規(guī)范

當(dāng)用戶(hù)在瀏覽某一個(gè)頁(yè)面的時(shí)候，總是希望后臺(tái)此時(shí)不是空閑狀態(tài)，而是繼續(xù)下載即將可能會(huì)被加載的下一頁(yè)面，這樣，當(dāng)用戶(hù)點(diǎn)擊進(jìn)入下一頁(yè)面時(shí)，可以直接從本地緩存區(qū)讀取，節(jié)省了用戶(hù)的時(shí)間，達(dá)到更好的用戶(hù)體驗(yàn)。使用方法如下：

cacheObject標(biāo)簽在streamezzo標(biāo)簽下使用，置于A(yíng)Units之間。url是需要提前加載的頁(yè)面，endTime是緩存頁(yè)面的生存時(shí)間，permanent是緩存頁(yè)面的存儲(chǔ)方式，priority確定頁(yè)面的下載順序。

此標(biāo)簽主要用于在瀏覽某一頁(yè)面時(shí)提前在后臺(tái)加載其他頁(yè)面，并緩存在本地，當(dāng)該緩存頁(yè)面的生存時(shí)間結(jié)束時(shí)，將其從本地清除，或者提前加載該緩存頁(yè)面的某一頁(yè)面從服務(wù)器重新被加載，則該緩存頁(yè)面被更新。注意：

（假設(shè)a頁(yè)面是主頁(yè)面，利用cacheObject提前加載其他頁(yè)面）1)a頁(yè)面可以同時(shí)提前加載緩存多個(gè)頁(yè)面，每個(gè)緩存頁(yè)面也可以設(shè)置相應(yīng)的

生存時(shí)間，在生存時(shí)間內(nèi)，緩存頁(yè)面存在于內(nèi)存中；

2)重新加載a頁(yè)面時(shí)，會(huì)重新下載cacheObject中設(shè)置的緩存頁(yè)面，即使該

緩存頁(yè)面生存時(shí)間尚未失效；

3)當(dāng)priority設(shè)置為HIGH時(shí)，根據(jù)cacheObject在A(yíng)Units中所處的位置決

定加載緩存頁(yè)面的時(shí)間；當(dāng)priority設(shè)置為L(zhǎng)OW，則是在a頁(yè)面所有的AUnits都加載完后再加載緩存頁(yè)面；

4)a頁(yè)面加載的緩存頁(yè)面不能利用cacheObject來(lái)cachea頁(yè)面。我們假設(shè)a

頁(yè)面提前加載b頁(yè)面，b頁(yè)面提前加載a頁(yè)面，當(dāng)a頁(yè)面加載b頁(yè)面時(shí)會(huì)執(zhí)行b頁(yè)面中提前加載a頁(yè)面的操作，然后會(huì)再次重新從服務(wù)器加載a頁(yè)面，并再次執(zhí)行a頁(yè)面中提前加載b頁(yè)面的操作，如此一來(lái)就會(huì)形成一個(gè)死循環(huán)；

5)當(dāng)a頁(yè)面還在加載緩存頁(yè)面時(shí)，這時(shí)觸發(fā)動(dòng)作跳轉(zhuǎn)到其他頁(yè)面，則加載

操作中斷，即最新的url請(qǐng)求會(huì)中斷前一個(gè)url請(qǐng)求；

6)假設(shè)a頁(yè)面提前加載b頁(yè)面，b頁(yè)面提前加載c頁(yè)面，那么就會(huì)形成一個(gè)

加載鏈，即在加載a頁(yè)面后會(huì)將b頁(yè)面和c頁(yè)面都提前加載下來(lái)，如此一來(lái)就會(huì)造成一定的混亂，尤其是當(dāng)這樣的加載鏈太長(zhǎng)的時(shí)候。所以在使用時(shí)要事先規(guī)劃好頁(yè)面間加載與被加載的關(guān)系。

4、異常處理

異常處理在框架頁(yè)面（c_main.rsp）中集中注冊(cè)，并定義好出現(xiàn)異常后處理代碼。

首先注冊(cè)異常：

異常的名字在Java代碼中用String數(shù)組定義，在這用循環(huán)統(tǒng)一捕獲。每個(gè)異常捕獲命令的target屬性都是指向一個(gè)Action,該Action用于處理出現(xiàn)異常后的動(dòng)作，比如顯示出錯(cuò)信息并退出系統(tǒng)等。

5、上傳下載文件

上傳文件關(guān)鍵命令：cmd://uploadFile

參數(shù)：fileName上傳文件名fileType文件類(lèi)型destURL目的url

onBegin當(dāng)上傳開(kāi)始時(shí)調(diào)用的動(dòng)作onSuccess當(dāng)上傳成功時(shí)調(diào)用的動(dòng)作onError當(dāng)上傳錯(cuò)誤時(shí)調(diào)用的動(dòng)作progressTarget指定反應(yīng)上傳進(jìn)度的動(dòng)畫(huà)segmentSize上傳文件每個(gè)包的大小Resume指定傳輸中斷后能否恢復(fù)onResume傳輸回復(fù)后調(diào)用的動(dòng)作

Stop停止傳輸，這個(gè)參數(shù)只能單獨(dú)使用

示例：

下載文件：

關(guān)鍵命令：cmd://download

主要參數(shù)：contentURL下載內(nèi)容URLcontentName下載文件名

Type下載文件類(lèi)型（Mime-Type）如“image/jpge”

beginDownloadTarget下載開(kāi)始時(shí)調(diào)用的動(dòng)作endOfDownloadTarget下載結(jié)束時(shí)調(diào)用的動(dòng)作

errorDownloadTarget下載錯(cuò)誤時(shí)調(diào)用的動(dòng)作（該錯(cuò)誤一共有6個(gè)）

totalSizeTarget指定顯示總共下載大小的text節(jié)點(diǎn)actualSizeTarget指定已經(jīng)下載的大小的text節(jié)點(diǎn)progressTarget指定反應(yīng)下載進(jìn)度的動(dòng)畫(huà)示例代碼：

6、發(fā)送短信

關(guān)鍵命令：cmd://sms參數(shù)：num電話(huà)號(hào)碼Msg短信內(nèi)容示例代碼：

7、旋轉(zhuǎn)圖片

示例代碼：

Replace的target指向一個(gè)Bitmap節(jié)點(diǎn)，roteateVal為一個(gè)旋轉(zhuǎn)弧度的浮點(diǎn)值。

8、圖片縮放

示例代碼：

Replace的target指向一個(gè)Bitmap節(jié)點(diǎn)，vec2fvalue是x，y軸的縮放比例

9、調(diào)用電話(huà)薄

命令：cmd://getContactInfo

參數(shù)：phoneNumber顯示選擇的手機(jī)號(hào)碼的text節(jié)點(diǎn)示例代碼：

10、手動(dòng)滾動(dòng)Text節(jié)點(diǎn)文字

示例代碼：

11、監(jiān)控設(shè)備聲音

示例代碼：

Source值為volume，target指定一個(gè)展示音量的動(dòng)畫(huà)節(jié)點(diǎn)

12、監(jiān)控電量

完整代碼：關(guān)聯(lián)電量：

電量顯示動(dòng)畫(huà)：

13、存儲(chǔ)本地變量

設(shè)定一個(gè)存儲(chǔ)在本地的變量，利用此命令對(duì)此變量進(jìn)行設(shè)定、獲取、增量、減量的操作。

命令：fs_varSet；fs_varGet；fs_Add；fs_varSub示例代碼：

14、強(qiáng)制打開(kāi)背景燈

命令：defaultBacklight

示例：

15、調(diào)用攝像頭照相

命令：cameraCapture，cameraVideo、cameraStopVideo、

launchCameraApplicationcmd：cameraCapture

使用：此命令用于調(diào)用手機(jī)攝像頭，并將照片存于本地。cmd：cameraVideo、cameraStopVideo

使用：此命令用于調(diào)用手機(jī)攝像頭，并將視頻存于本地，cameraVideo開(kāi)始攝像，cameraStopVideo結(jié)束攝像。cmd：launchCameraApplication

使用：此命令用于調(diào)用手機(jī)攝像頭，并可以選擇是采用picture或是video模式。示例代碼

16、同一個(gè)圖片的多次引用

如果同一個(gè)圖片需要多次改變大小在不同的地方引用,圖片不要多次加載.示例代碼

必須用同一個(gè)streamID加載.然后對(duì)

17、repace語(yǔ)句的應(yīng)用

如果repace語(yǔ)句不需要在某種條件下調(diào)用,直接寫(xiě)在auit節(jié)點(diǎn)中.不需要插入節(jié)點(diǎn),杜絕這種寫(xiě)法,如圖

正確寫(xiě)法:

如果是條件調(diào)用,應(yīng)該插入相應(yīng)的節(jié)點(diǎn)中.采用上述寫(xiě)法.

18、圖片的加載順序,場(chǎng)景的渲染順序.

圖片在rsp中的渲染順序必須,必須根據(jù)場(chǎng)景的順序加載,首先展示的圖片,放在靠前的aunit中.圖文混排的情況分多個(gè)aunit加載,必須對(duì)圖片進(jìn)行監(jiān)聽(tīng).用戶(hù)優(yōu)先看到文字,文字場(chǎng)景優(yōu)先渲染.讓用戶(hù)感到文字和圖片是異步加載的.

渲染文字加載圖片

渲染圖片,同時(shí)對(duì)圖片做監(jiān)聽(tīng)

19、java代碼動(dòng)態(tài)加載圖片.

intstate=0;booleanisSuccess=true;try{URLurl=newURL(cp[0].getFullScreenPicture());HttpURLConnectionurlConnection=(HttpURLConnection)url.openConnection();//建立http的鏈接urlConnection.setConnectTimeout(30000);//設(shè)置鏈接時(shí)間urlConnection.setReadTimeout(60000);//設(shè)置讀取時(shí)間state=urlConnection.getResponseCode();//獲取圖片的狀態(tài)System.out.println("state==="+state);if(state==200){isSuccess=true;InputStreamis=stzRequest.transcodeExternalImage(cp[0].getFullScreenPicture(),0,true/*servercache*/,24*3600*1000/*ttl*/);//采用流方式加載圖片,根據(jù)程序需要是否設(shè)置cache,cache多長(zhǎng)時(shí)間.authoring.addImage("sid_beaty_pic",is,0);//綁定圖片}else{System.out.println("HHHHHHHHHHHHHHHHH加載服務(wù)器圖片失敗!"+state);%>//圖不存在的處理source="Global:weather_image_big"target="Global:pic_conditional_fail"/>

20、客戶(hù)端代碼樣例.

StzConnectorsManager.getAdaptationConnector(stzRequest.getService(),0);

%>

//Theskin,layoutanddevicepropertiescanbeaccessedfrom

thetransaction

//Beginatransactionforthecurrentrequest.

Stringtheme="theme";//TODOsettheaccuratethemevalueStringlayoutset="layoutset";//TODOsettheaccuratelayoutsetAdaptationTransactiontx=null;try{

tx=(AdaptationTransaction)

value

adaptationConnector.beginTransaction(stzRequest,theme,layoutset);

}finally{}

%>

21、服務(wù)器端列表

場(chǎng)景描述：網(wǎng)站listupdate來(lái)源RSP：c_News_view.rsp來(lái)源參數(shù)：參數(shù)類(lèi)型:

進(jìn)入RSP：s_news_express進(jìn)入RSP參數(shù)：參數(shù)類(lèi)型:

%>

StringStringPageNumTo=

//StringStringQueryPageNumPerTime=StringStringItemDisplayNum=

stzRequest.getRequestParameter("PageNumTo");

stzRequest.getRequestParameter("QueryPageNumPerTime");stzRequest.getRequestParameter("ItemDisplayNum");

intPageNumTo=Integer.valueOf(StringPageNumTo);//intQueryPageNumPerTime=intItemDisplayNumView=

//intItemDisplayNum=ItemDisplayNumView*

Integer.valueOf(StringQueryPageNumPerTime);Integer.valueOf(StringItemDisplayNum);QueryPageNumPerTime;

StringDataQuerySuccessed="false";

System.out.println(">>>>>>>>>>>>>>>>>>>>【FCity】:RequestSource:"+RequestSource);

System.out.println(">>>>>>>>>>>>>>>>>>>>【FCity】:ListID:"+ListID);

System.out.println(">>>>>>>>>>>>>>>>>>>>【FCity】:Cacheable:"+Cacheable);

System.out.println(">>>>>>>>>>>>>>>>>>>>【FCity】:ClientCacheTtl:"+ClientCacheTtl);

/****************************************************************

%>

/*******/*******【注意】ItemContents、ItemContentImageURLs、

************/

ItemFireURLs三個(gè)數(shù)組個(gè)數(shù)必須一致！！************//*******************/

%>

}else{

System.out.println(">>>>>>>>>>>>>>>>>>>>>>>【FCity】:ItemCount:"+ItemCount);

//列表item文字（沒(méi)有文字用""代替）

ItemContents[i]=item.getStructureName();//列表item圖片地址（沒(méi)有文字用""代替）ItemContentImageURLs[i]="";

StringimageUrl="";

for(inti=0;i

//列表item參數(shù)

item=(CMSResourceStructure)list.get(i);if(item!=null){

ItemParameters[i][0]=ItemParameters[i][1]=ItemParameters[i][2]=

String[]image=newString[ItemCount];String[]image2=newString[ItemCount];

//列表item參數(shù)

String[][]ItemParameters=newString[ItemCount][9];//列表item文字

String[]ItemContents=newString[ItemCount];//列表item圖片地址String[]ItemContentImageURLs=newString[ItemCount];//列表item默認(rèn)圖標(biāo)地址

String[]ItemIconDefaultURLs=newString[ItemCount];//列表item選中圖標(biāo)地址

String[]ItemIconSelectedtURLs=new

//列表item點(diǎn)擊地址

String[]ItemFireURLs=newString[ItemCount];//列表item點(diǎn)擊地址("Client"or"Server")StringItemFireURLType="Server";

String[ItemCount];

URLEncoder.encode("execute_show_news_main_action","UTF-8");URLEncoder.encode("WebsiteList","UTF-8");

URLEncoder.encode(item.getStructureid(),"UTF-8");i;

//列表item默認(rèn)圖標(biāo)地址（沒(méi)有文字用""代替）

ItemIconDefaultURLs[i]="Global:ItemBitmapTr"+

//列表item選中圖標(biāo)地址（沒(méi)有文字用""代替）ItemIconSelectedtURLs[i]="";

//列表item點(diǎn)擊地址（必須是服務(wù)器端的rsp,沒(méi)有文字用""代替,

注意，如果是Client頁(yè)面，前面需加"stzserver://"）

ItemFireURLs[i]="s_news_express.rsp";

DataQuerySuccessed="true";

//列表數(shù)據(jù)是否加載成功（無(wú)需更改）

stzRequest.addRequestAttribute("DataQuerySuccessed",

//列表item點(diǎn)擊地址（無(wú)需更改）

stzRequest.addRequestAttribute("ItemFireURLType",if(ItemParameters!=null)

//列表參數(shù)（無(wú)需更改）

stzRequest.addRequestAttribute("ItemParameters",

}}

ItemFireURLType);

ItemParameters);

//列表文字（無(wú)需更改）

stzRequest.addRequestAttribute("ItemContents",//列表圖片地址（無(wú)需更改）

ItemContents);

stzRequest.addRequestAttribute("ItemContentImageURLs",

//列表item默認(rèn)圖標(biāo)地址（無(wú)需更改）

ItemContentImageURLs);

stzRequest.addRequestAttribute("ItemIconDefaultURLs",

//列表item選中圖標(biāo)地址（無(wú)需更改）

ItemIconDefaultURLs);

stzRequest.addRequestAttribute("ItemIconSelectedtURLs",

//列表點(diǎn)擊地址（無(wú)需更改）

stzRequest.addRequestAttribute("ItemFireURLs",//列表總頁(yè)數(shù)（無(wú)需更改）

stzRequest.addRequestAttribute("PageCount",

ItemIconSelectedtURLs);

ItemFireURLs);

totalPage);DataQuerySuccessed);

}

target="Global:Transform.WheelAnchor.List.Item.Icon"/>

for(inti=0;i}

for(inti=0;i

authoring.addImage("ItemBitmap"+i,is,0);}catch(Exceptionre)

System.out.println("沒(méi)有取到圖片");

{//ResourceNotFoundException

field="Conditional.startTime"

%>

}catch(Throwablee){

e.printStackTrace();

startTime="NOW">

}

if(tx!=null){}

tx.endTransaction();

22、頁(yè)面節(jié)點(diǎn)清空策略

1.當(dāng)資源文件采用分模塊加載方式的時(shí)候,進(jìn)入當(dāng)前頁(yè)面清空其他頁(yè)面的資源節(jié)點(diǎn).2.清空當(dāng)前頁(yè)面主節(jié)點(diǎn).

3.如果僅僅是內(nèi)容替換,就不要用節(jié)點(diǎn),而是直接采用方式.4.”返回”的時(shí)候如果是逐級(jí)返回,返回時(shí)清空當(dāng)前頁(yè)面主節(jié)點(diǎn)23、日志打印策略

由于日志管理對(duì)服務(wù)器的維護(hù)至關(guān)重要,目前系統(tǒng)的日志輸出時(shí)采用System.out.pritln();輸出.。這種打印輸出是極其錯(cuò)誤的。Io操作對(duì)服務(wù)器性能影響很大。System.out.pritln();嚴(yán)禁使用。為了開(kāi)發(fā)時(shí)方便調(diào)試，和服務(wù)器后期維護(hù)。日志打印方式采用：以下兩種方式。1.公共信息打�。�

ServiceLoggerlogger=stzRequest.getLogger();2.個(gè)人開(kāi)發(fā)業(yè)務(wù)日志打印

ServiceLoggerlogger=new

ServiceLogger(stzSession.getId(),"service_id_YLTD_MT","service_name_YLTD_MT_WD");//標(biāo)示“娛樂(lè)天地_美圖”開(kāi)發(fā)者吳迪日志級(jí)別：

logger.debug("★★★★=========loggerdebug============"+ogger.debug);logger.info("★★★★===========loggerinfo========="+logger.info);logger.warn("★★★==========loggerwarn======="+logger.warn);logger.error("★★★★===========loggererror======="+logger.error);logger.fatal("★★★★==========loggerfatal=========="+logger.fatal);

1.workbench里的調(diào)試信息，一遍采用logger.debug打印2.從接口取到的數(shù)據(jù)信息，采用logger.info

3.Trycatch中處理需要打印的信息，做了異常處理的信息采用logger.warn打印。其他采用logger.error打印

4.比較關(guān)鍵性信息，或者必須打印的信息采用logger.fatal，比較致命的信息采用logger.fatal

24、ant編譯

由于業(yè)務(wù)集成，按照新的組織架構(gòu)，采用jar方式集成，每個(gè)業(yè)務(wù)組單獨(dú)編譯自己的業(yè)務(wù)jar文件。以下是注意事項(xiàng)和如何配置ant配置文件。

Build.xml配置文件說(shuō)明(該文件編碼必須為utf-8)

/>

Files/Java/jdk1.5.0_17/bin/java.exe"/>

25、layout框架規(guī)范

layout框架工作區(qū)目錄結(jié)構(gòu)(如圖)

Adapatation.xml主要關(guān)聯(lián)圖片配置文件,界面布局配置文件和設(shè)備配置文件.

Mappings.xml

該配置文件主要關(guān)聯(lián)特殊型號(hào)手機(jī)的型號(hào)配置..

default.properties

N96

nokia-N95-8GB.properties

設(shè)備屬性文件default.propertiespackage_version=1.0touchScreen=trueos=symbian

#os=java,WMSP(smartphone),WMPPC(pocketPC),S6050(SymbianS605th),S6030

mediaPlayer=downloadTarget=#supportOverlay#javaFullscreen

#supportNativeInstall=true目前只支持以上屬性配置,不支持自定義配置.

界面配置文件.

界面配置文件必須按照業(yè)務(wù)規(guī)則命名.yltd_mt.xml標(biāo)示娛樂(lè)天地的美圖業(yè)務(wù).詳細(xì)參數(shù)配置參見(jiàn)幫助文檔.和附件ppt.

API讀取相應(yīng)配置文件實(shí)例.

System.out.println("===========================top=="+top);

SkinImagebottom=skin.getImage("bottom");System.out.println("bottom=="+bottom);

SkinImagebg=skin.getImage("bg");System.out.println("bg=="+bg);

SkinImageloading=skin.getImage("loading");System.out.println("loading=="+loading);//讀取顏色值屬性

SkinColorstartColor=

//讀取圖形屬性

SkinShaperectangle=skin.getShape("RectangleShape");

skin.getColor("splashLoadingWheelStartColor");

//幫助里面錯(cuò)誤了，

//ContainerrootContainer=tx.getRootContainer(/*LayoutName*/"myScene");

//讀取界面布局

ContainerrootContainer=tx.getRootContainer("main");

ContainerheaderContainer=rootContainer.getChildByIdRecurs("header");ContainerbodyContainer=rootContainer.getChildByIdRecurs("body");ContainerfooterContainer=rootContainer.getChildByIdRecurs("footer");

//API加載圖片

authoring.addImage("sid_top",top.getSource(),0);authoring.addImage("sid_bottom",bottom.getSource(),0);authoring.addImage("sid_bg",bg.getSource(),0);

authoring.addImage("sid_loading",loading.getSource(),0);

//讀取設(shè)備配置文件

Deviced=tx.getDevice();Stringpackage_version=null;

System.out.println("=========package_version===================="

d.getProperty("package_version",package_version);

+d.getProperty("package_version","package_version"));

System.out.println("=========t===================="+d.getProperty

System.out.println("=========d.getModel()===================="+d.

System.out.println("=========os===================="+d.getPropert

System.out.println("=========mediaPlayer===================="+d.g

System.out.println("=========downloadTarget===================="+%>

("touchScreen","false"));

getModel());

y("os",""));

etProperty("mediaPlayer",""));

d.getProperty("downloadTarget",""));

26、layout框架集成規(guī)范

目前項(xiàng)目組處于多業(yè)務(wù)組合作并行開(kāi)發(fā)工作模式.隨著業(yè)務(wù)的增加,當(dāng)rsp頁(yè)面增多的時(shí)候編譯發(fā)布會(huì)越來(lái)越慢.鑒于此中原因,采用streamezzo的新的業(yè)務(wù)集成方式.首先由每一個(gè)業(yè)務(wù)組集成把rsp變成成class文件打成各自業(yè)務(wù)組的總的jar包,由業(yè)務(wù)組組長(zhǎng)提交終端總體組發(fā)布.由于資源文件是共享的,仍然采用svn方式提交到svn服務(wù)器.各小組人員仍然要提交自己開(kāi)發(fā)的rsp.以作源碼備份使用,集成發(fā)布不checkoutRSP源文件.這樣集成發(fā)布更快,程序版本備份更方便.

友情提示：本文中關(guān)于《前端技術(shù)規(guī)范總結(jié)》給出的范例僅供您參考拓展思維使用，前端技術(shù)規(guī)范總結(jié)：該篇文章建議您自主創(chuàng)作。

來(lái)源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們及時(shí)刪除。

《前端技術(shù)規(guī)范總結(jié)》由互聯(lián)網(wǎng)用戶(hù)整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://www.weilaioem.com/gongwen/673094.html

• 上一篇：BBS論壇開(kāi)發(fā)經(jīng)驗(yàn)總結(jié)
• 下一篇：軟件項(xiàng)目總結(jié)報(bào)告