web前端技術(shù)講稿_第1頁
web前端技術(shù)講稿_第2頁
web前端技術(shù)講稿_第3頁
web前端技術(shù)講稿_第4頁
web前端技術(shù)講稿_第5頁
已閱讀5頁，還剩30頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

Web應(yīng)用技術(shù)淺析

沈聯(lián)民講解目錄理想杯經(jīng)驗(yàn)談MVC架構(gòu)前端技術(shù)介紹標(biāo)準(zhǔn)概念實(shí)用技術(shù)實(shí)用工具推薦網(wǎng)站聯(lián)系我APeraGlobalCompany?2009PERAChina經(jīng)驗(yàn)談參加不不參加好用心做比不用心做好拿一等獎(jiǎng)比拿二等獎(jiǎng)好

顯示數(shù)據(jù)一個(gè)典型的Web應(yīng)用用戶在瀏覽器上操作瀏覽器提供請(qǐng)求方式Web程序存取數(shù)據(jù)庫處理客戶端請(qǐng)求發(fā)給瀏覽器響應(yīng)數(shù)據(jù)瀏覽器MVC三層模式1、模型〔Model〕

業(yè)務(wù)邏輯層。用于封裝業(yè)務(wù)邏輯和數(shù)據(jù)模型。2、視圖〔View〕

表示層。就是與用戶實(shí)現(xiàn)交互的界面，通常實(shí)現(xiàn)數(shù)據(jù)的輸入和輸出功能。3、控制器〔controller)

控制層。起到控制整個(gè)業(yè)務(wù)流程的作用，實(shí)現(xiàn)View層跟Model層的協(xié)同工作。

MVC三層模型Web前端技術(shù)—View層客戶端技術(shù)三要素HTMLWeb前端開發(fā)是從網(wǎng)頁制作演變而來的，前端開發(fā)的入門門檻比較低，與效勞器端語言先慢后快的學(xué)習(xí)曲線相比，前端開發(fā)的學(xué)習(xí)曲線是先快后慢。需要一定的美工根底。JavaScriptCSSWeb前端即視圖層主要做與業(yè)務(wù)邏輯無關(guān)的數(shù)據(jù)展現(xiàn)標(biāo)準(zhǔn)?。恐v解目錄1.文檔結(jié)構(gòu)—三層開發(fā)模式Base層common層page層三層模式的解釋Base層：位于最底層，提供CSSreset功能和最小粒度的通用類—原子類。Common層：位于中間，提供組件級(jí)的CSS類。抽取網(wǎng)站的公用局部，提取模塊，定義顏色，字體，布局，表單，表格等公用樣式。Page層：非高度重用的模塊放在page層，主要是針對(duì)單個(gè)頁面或者具有相似布局的模塊〔作用：三層結(jié)構(gòu)能保證css代碼結(jié)構(gòu)的高重用率，清晰邏輯〕文檔結(jié)構(gòu)舉例2.編程標(biāo)準(zhǔn) A.做到頁面整潔性良好的語義標(biāo)簽縮進(jìn)樹形結(jié)構(gòu)與文檔流多瀏覽器支持〔圖片還是文字？〕 B.保證良好的結(jié)構(gòu)注釋Html樹形結(jié)構(gòu)<html><head> <title>文檔標(biāo)題</title></head><body> <ahref=“#”>我的鏈接</a> <h1>我的標(biāo)題</h1></body></html>對(duì)應(yīng)的樹形結(jié)構(gòu)Css注釋標(biāo)準(zhǔn)結(jié)構(gòu)注釋/*BasicStyleSheet(forversion4browsers)version:1.1author:andybemail:*/風(fēng)格統(tǒng)一的大注釋塊：/*Typography*/自我提示:/*Use://info.ph/~etan/w3pantheon/style/starhtmlbug.htm*/其他：/*:TOGO:Remembertoremovethisrulebeforethesitegoeslive*//*KLUDGE:ImanagedtofixthisprobleminIEbysettingasmallnegpretty*//*:BUGRule還可以使用關(guān)鍵字TRICKY提醒其他開發(fā)人講解目錄幾個(gè)概念多請(qǐng)求還是多文件表格還是css先布局還是先寫樣式CSS解析權(quán)重淺析APeraGlobalCompany?2009PERAChina1.多請(qǐng)求還是多文件？平衡處理：每個(gè)CSS文件都意味著要對(duì)效勞器進(jìn)行一次額外的調(diào)用。這會(huì)影響性能，所以一些開發(fā)人員喜歡使用一個(gè)大型CSS文件而不是多個(gè)小文件。最終的選擇實(shí)際上取決于實(shí)際情況，而且在某種程度上這是一個(gè)個(gè)人喜好問題。我傾向于盡可能保持靈活性和維護(hù)的簡單性?！步ㄗh：做網(wǎng)站時(shí),提前考察網(wǎng)站使用群體的硬件，網(wǎng)絡(luò)情況。如:大局部顯示屏尺寸，網(wǎng)絡(luò)類型，使用群體的年齡層次，技術(shù)層次。以作出性能優(yōu)先，還是體驗(yàn)優(yōu)先的判斷〕2.表格還是DIV？ Div+Css根本可以滿足任意網(wǎng)頁的編程需要，在任意情況下，Div+Css都應(yīng)該是首選布局方式。 表格只用來展示大批量數(shù)據(jù)，不用于布局。3.先布局還是先樣式？ 布局優(yōu)先！〔大中型網(wǎng)站建議在common層別離出links、form、words、table、layout,分別建立css文件〕〔優(yōu)先布局可以保證網(wǎng)站的顯示結(jié)構(gòu)不被破壞，這是一個(gè)網(wǎng)站的最根本要求！〕4.CSS解析權(quán)重淺析講解目錄技術(shù)多列布局絕對(duì)定位Hack處理Javascript初步介紹〔jquery，Extjs〕APeraGlobalCompany?2009PERAChina1.多列布局之浮動(dòng)2.絕對(duì)定位absolute生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。fixed生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。relative生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。因此，"left:20"會(huì)向元素的LEFT位置添加20像素。static默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left,right或者z-index聲明）。inherit規(guī)定應(yīng)該從父元素繼承position屬性的值。3.Hack及兼容性處理小例子：有時(shí)候，可能希望在同一個(gè)規(guī)那么中對(duì)Windows上的IE6和更低版本應(yīng)用一個(gè)聲明，對(duì)其他所有瀏覽器應(yīng)用另一個(gè)聲明。為此，可以使用注釋屬性招數(shù)，也可以使用!important或下劃線招數(shù)。!important招數(shù)之所以能夠起作用是因?yàn)閃indows上的IE6和更低版本在處理單一規(guī)那么中的多個(gè)屬性方面有問題：#nay{Position:fixed!important;Position:static;}4.Javascript應(yīng)用Jquery：

jQuery是一款同prototype一樣優(yōu)秀js開發(fā)庫類，特別是對(duì)css和XPath的支持，使我們寫js變得更加方便！如果你不是個(gè)js高手又想寫出優(yōu)秀的js效果，jQuery可以幫你到達(dá)目的！并且簡介的語法和高的效率一直是jQuery追求的目標(biāo)，優(yōu)點(diǎn)：注重簡介和高效，js效果有yui-ext的選擇，因?yàn)閥ui-ext重用了很多jQuery的函數(shù)缺點(diǎn)：據(jù)說太嫩，歷史不悠久。Javascript應(yīng)用Yui-ext

基于YahooUI的擴(kuò)展包yui-ext是具有CS風(fēng)格的Web用戶界面組件，能實(shí)現(xiàn)復(fù)雜的Layout布局，界面效果可以和backbase媲美，而且使用純javascript代碼開發(fā)。真正的可編輯的表格EditGrid，支持XML和Json數(shù)據(jù)類型，直接可以遷入Grid。

-優(yōu)點(diǎn)：結(jié)構(gòu)化，類似于java的結(jié)構(gòu)，清晰明了，底層用到了Jquery的一些函數(shù)，使整合使用有了選擇，最重要的一點(diǎn)是界面非常震撼。

-缺點(diǎn)：太過復(fù)雜，整個(gè)界面的構(gòu)造過于復(fù)雜，文件包太大，加載時(shí)間長，不適于外圍Internet網(wǎng)使用。講解目錄實(shí)用工具viewpageFirebugIETestserAPeraGlobalCompany?2009PERAChina講解目錄網(wǎng)站推薦APeraGlobalCompany?2009PERAChina網(wǎng)站推薦禪意花園：站酷：CssRain：javaEye：講解目錄個(gè)人信息姓名：沈聯(lián)民性別：男QQ：406400939Blog：APeraGlobalCompany?2009PERAChina業(yè)精于勤兒荒于嬉，行成于思而毀于隨 --韓愈THANKS

--沈聯(lián)民

APeraGlobalCompany?2009PERAChina常見Web開發(fā)技術(shù)名詞B/S架構(gòu)：B/S結(jié)構(gòu)〔Browser/Server結(jié)構(gòu)〕結(jié)構(gòu)即瀏覽器和效勞器結(jié)構(gòu)。它是隨著Internet技術(shù)的興起，對(duì)C/S結(jié)構(gòu)的一種變化或者改進(jìn)的結(jié)構(gòu)。它有以下幾個(gè)特點(diǎn)： 1、具有分布性特點(diǎn)，可以隨時(shí)隨地進(jìn)行查詢、瀏覽等業(yè)務(wù)處理。 2、業(yè)務(wù)擴(kuò)展簡單方便，通過增加網(wǎng)頁即可增加效勞器功能。 3、維護(hù)簡單方便，只需要改變網(wǎng)頁，即可實(shí)現(xiàn)所有用戶的同步更新。 4、但個(gè)性化特點(diǎn)明顯降低，無法實(shí)現(xiàn)具有用戶個(gè)性化的功能要求。JavaEE：JavaEE是Sun公司的一套基于企業(yè)級(jí)應(yīng)用開發(fā)的技術(shù)架構(gòu)標(biāo)準(zhǔn)，包含許多組件，它同時(shí)簡化和標(biāo)準(zhǔn)了應(yīng)用系統(tǒng)的開發(fā)與部署，進(jìn)而提高系統(tǒng)可移植性、平安性與復(fù)用性。MVC：MVC是一個(gè)架構(gòu)模式，它強(qiáng)制性的使應(yīng)用程序的輸入、處理和輸出分開。使用MVC應(yīng)用程序被分成三個(gè)核心部件：模型、視圖、控制器。它們各自處理自己的任務(wù)。該模式是XeroxPARC在八十年代為編程語言Smalltalk－80創(chuàng)造的一種軟件設(shè)計(jì)模式，至今已被廣泛使用。最近幾年被推薦為Sun公司J2EE平臺(tái)的設(shè)計(jì)模式。AJAX：即AsynchronousJavaScriptandXML〔異步JavaScript和XML)，是指一種創(chuàng)立交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。WebServices：是由企業(yè)發(fā)布的完成其特定商務(wù)需求的在線應(yīng)用效勞,其他公司或應(yīng)用軟件能夠通過Internet來訪問并使用這項(xiàng)在線效勞。SOA(ServiceOrientedArchitecture)面向效勞的架構(gòu),其實(shí)質(zhì)就是要將系統(tǒng)模型與系統(tǒng)實(shí)現(xiàn)分割開來。UDDI(UniversalDescription,DiscoveryandIngergration)是一種目錄效勞，企業(yè)可以使用它對(duì)Webservices進(jìn)行注冊(cè)和搜索?？勺g為“通用描述、發(fā)現(xiàn)與集成效勞”。WSDl:網(wǎng)絡(luò)效勞描述語言的縮寫，是一個(gè)用來描述Web效勞和說明如何與Web效勞通信的XML語言。SOAP:簡單對(duì)象訪問協(xié)議，簡單對(duì)象訪問協(xié)議〔SOAP〕是一種輕量的、簡單的、基于XML的協(xié)議，它被設(shè)計(jì)成在WEB上交換結(jié)構(gòu)化的和固化的信息。SOAP可以和現(xiàn)存的許多因特網(wǎng)協(xié)議和格式結(jié)合使用，包括超文本傳輸協(xié)議〔HTTP〕，簡單郵件傳輸協(xié)議〔SMTP〕。Rup：RationalUnifiedProcess的縮寫，即統(tǒng)一軟件開發(fā)過程，是一個(gè)面向?qū)ο笄一诰W(wǎng)絡(luò)的程序開發(fā)方法論。UML：UnifiedModelingLanguage的縮寫,即統(tǒng)一建模語言,是用來對(duì)軟件密集系統(tǒng)進(jìn)行可視化建模的一種語言。UML為面向?qū)ο箝_發(fā)系統(tǒng)的產(chǎn)品進(jìn)行說明、可視化、和編制文檔的一種標(biāo)準(zhǔn)語言。常見Web開發(fā)技術(shù)名詞HTTP:超文本傳輸協(xié)議〔HypertextTransferProtocol〕

WWW:萬維網(wǎng)(WorldWideWeb)

TCP/IP:傳輸控制協(xié)議/互聯(lián)網(wǎng)絡(luò)協(xié)議,是Internet最根本的協(xié)議〔TransmissionControlProtocol/InternetProtocol)

URL:統(tǒng)一資源定位符〔UniformResourceLocator〕URI的一個(gè)子集

URI:資源標(biāo)志符〔UniversalResourceIdentifier〕

JMS:是Java平臺(tái)上有關(guān)面向消息中間件的技術(shù)標(biāo)準(zhǔn)，Java消息效勞〔JavaMessagingService〕

HTML:超文本標(biāo)記語言或超文本鏈接標(biāo)示語言〔HyperTextMark-upLanguage〕

CSS:層疊樣式表CascadingStyleSheets

XML:即可擴(kuò)展標(biāo)記語言〔eXtensibleMarkupLanguage〕

JSON:是一種輕量級(jí)的數(shù)據(jù)交換格式(JavaScriptObjectNotation)

DTD:文檔類型定義(DocumentTypeDefinition)

AJAX:異步JavaScript和XML(AsynchronousJavaScriptandXML)

SEO:搜索引擎最正確化〔SearchEngineOptimization〕

DTO:數(shù)據(jù)傳輸對(duì)象〔DataTransferObject〕

EJB:稱為Java企業(yè)(EnterpriseJavaBeansEJB)

POJO:簡

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論