【正文】 前端開發(fā)技術(shù)：其中包括 CSS， HTML， DOM， Ajax 等，在掌握這些技術(shù)的同時，還要清楚的了解他們在不同瀏覽器的兼容情況，渲染原理和存在的 Bug。 （ 3）開發(fā)工具： 必須學(xué)會使用 各種工具進(jìn)行輔助開發(fā)。該規(guī)范定義了第五次重大版本，第一次要修訂 萬維網(wǎng) 的核心語言：超文本標(biāo)記語言（ HTML）。 本次草案的發(fā)布，從 20xx 年 12 月 27 日至今，進(jìn)行了多達(dá)近百項的修改，包括 HTML 和 XHTML 的標(biāo)簽，相關(guān) API、 Canvas 等，同時 HTML5 的圖像 img 標(biāo)簽及 svg 也進(jìn)行了改進(jìn)，性能得到進(jìn)一步提升。 CSS 以其對 HTML web 頁面的樣式化而知名，但是他同樣使用于在 web 和其他媒介上表示 XML 文檔。 JavaScript JavaScript 是一種基于對象 (Object)和事件驅(qū)動 (Event Driven)并具有安全性能的腳本語言。從而可以開發(fā)客戶端的應(yīng)用程序等。它的出現(xiàn)彌補了 HTML 語言的缺陷，它是 Java 與 HTML 折衷的選擇，具有以下幾個基本特點 : 1 是一種腳本編寫語言 2 基于對象的語言。許多組件需要Javascript 才能產(chǎn)生神奇的效果，盡管通常組件不需要編碼，通過框架擴展可以很容易地使用，比如我們的 AngularIonic 擴展。通過 SASS 構(gòu)建應(yīng)用程序，它 提供了很多 UI 組件來幫助開發(fā)者開發(fā)強大的應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動開發(fā)者的共同選擇。它可通過 script 標(biāo)簽添加到 HTML 頁面。 AngularJS 通過 ngdirectives 擴展了 HTML。 ngmodel 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。 關(guān)于 angularjs 的特點 ：這可能是其最激動人心的特性吧， view 層的數(shù)據(jù)和 model層的 數(shù)據(jù) 雙向綁定的，其中之一發(fā)生更改，另一方會隨之變化，這不用你寫任何代碼！ ，每個模塊的代碼獨立擁有自己的作用域， model， controller等。 3 web 應(yīng)用的主題內(nèi)容和架構(gòu)設(shè)計 應(yīng)用的結(jié)構(gòu)設(shè)計 下面開始制作 webAPP 的框架了，我要制作的 web 應(yīng)用是一個金融 APP，根據(jù) web 應(yīng)用所需的組 成元素，本應(yīng)用 主要有首頁、理財、個人中心 等 web 頁面 組成。首頁內(nèi)容包括登錄注冊功能， banner 輪播功能，理財列表內(nèi)容。 4 web 應(yīng)用的實現(xiàn)步驟 ionic 配置理由 準(zhǔn)備工作：使用 Hbuilder編輯器編輯程序，新創(chuàng)建一個 web項目 wd， 具體的 CSS、js、和各個子頁面存放位置以及命名如下圖所示： Script 目錄內(nèi)新建一個 的 js 文件，用來存放主要的 js 文件。 Template 目錄內(nèi)再創(chuàng)建一個 pages 目錄，再 pages 目錄內(nèi)創(chuàng)建四個 HTML 文檔，分別表示首頁，產(chǎn)品頁面，個人中心頁面 ，和用來切換的 tabs。 步驟二： 在 html 標(biāo)簽內(nèi)引入 ngapp=” wdApp” ,ngcontroller=” wdCtrl” 。 程序如下： 當(dāng)點擊底部的三個 tabs 切換按鈕時，頁面會根據(jù)路由的配置準(zhǔn)確的切換到內(nèi)容頁面。例如首頁的簡單事例： 5 完成首頁內(nèi)容 簡介 是一款模擬數(shù)據(jù)生成器，旨在幫助前端攻城師獨立于后端進(jìn)行開發(fā)，幫助編寫單元測試。它也可用于創(chuàng)建圖片特效和動畫。 如下定義 canvas 標(biāo)簽： canvas id=canvas瀏覽器不支持 html5canvas 我們也可以給 canvas 添加 style 屬性，添加 canvas 的寬和高， canvas 就好像一快畫布，我們可以用 css 向操作 div 一樣來操作這塊畫布的起始狀態(tài)，只有先確定 canvas 畫布的狀態(tài)，才可以用 js 在這塊畫布上創(chuàng)作畫作。display:block。 這樣我們就準(zhǔn)備好了一張長寬都為 400 的畫布。//獲取 Canvas var context=(39。)。 完成首頁內(nèi)容 由于本 web 應(yīng)用要實現(xiàn)動態(tài)加載數(shù)據(jù)，所以要有一門后端語言，而且需要搭建服務(wù)，本 web 應(yīng)用沒有用到后臺語言，而是用到上文提到的 來提供假數(shù)據(jù)，實現(xiàn)動態(tài)加載。 其中首頁內(nèi)容的加載用到了 angularjs 的遍歷方法 ngrepeat=” item in data” , Data 是一組 json 數(shù)據(jù)，用來填充頁面內(nèi)容。 當(dāng) LoadProduceList 函數(shù)傳入的參數(shù)是 2 時，實現(xiàn)上拉 加載更多。 實現(xiàn)下拉刷新功能 在 頁面引用 ionic 組件 ionrefresher/ionrefresher實現(xiàn)下拉刷新功能。 具體實現(xiàn)代碼如下： 7 注冊登錄模塊的實現(xiàn) 實現(xiàn)注冊登錄功能 首先，進(jìn)來首頁先檢測是否登錄。登錄失敗， 顯示錯誤提示信息。具體實現(xiàn)用到了 HTML5 的新特性localstorage。產(chǎn)品頁面用到 Tab 切換功能，引用 iontabs 標(biāo)簽， tab 切換功能寫在 iontabs 標(biāo)簽內(nèi)。實現(xiàn)頁面的加載。 在 te mp late 文件夾中創(chuàng)建 文檔，編寫詳情頁內(nèi)容 。 詳情頁顯示如下： 9 完成風(fēng)險評估 點擊立即購買按鈕，顯示開始評估模態(tài)框， 顯示模態(tài)框需要引入 $ionicModal。 點擊開始評估，進(jìn)入評估頁面。 當(dāng)點擊到最后一題時，會出現(xiàn)警告框顯示風(fēng)險等級。 參考文獻(xiàn) [1]美． Nichols C． Zakas《 javascript 高級程序設(shè)計（第三版）》 [2]Adam Freeman 《 Angularjs 高級程序設(shè)計》 [3]ionic 實戰(zhàn)基于 Angularjs 的移動混合應(yīng)用開發(fā) [4]Eric 《 CSS 權(quán)威指南》