單頁開發web app項目中使用的技術點總結

標籤：span   blog   npm   min   nodejs   zha   監視   md5   動態載入   

首先項目中需要的技術依賴於業務，所以先說下業務概述

1.業務概述

個人使用者線上申請房源

2.技術分解

2.1 項目布局結構

2.2 開發環境

   2.2.1安裝NodeJS環境

@echo off
rem ======= 如何安裝handlebars編譯器 =======
rem 1.到https://nodejs.org/下載並安裝nodejs
rem 2.開啟cmd並定位到項目目錄
rem 3.執行npm install handlebars -g命令
rem 4.執行npm install grunt-cli -g命令
rem 5.執行npm install命令
rem 6.執行grunt watch命令
rem ========================================

grunt watch

2.2.2 每次開發之前開啟先行編譯監視
        開啟Cmd視窗（以管理員的許可權），執行下面命令：grunt watch
        目的：自動將模板編譯產生js指令碼（產生到release檔案夾），用於頁面展現

2.3 總體思路採用mobilebone.js-mobile移動web APP單頁切換骨架

    以下是js說明：

2.3.1 js：儲存核心js檔案，包括項目業務js檔案

js\biapi.js :api資料通訊(jsonp跨域)

js\biui.js: Handlebars.js(js模板引擎)

js\bifile.js:上傳檔案

js\birouter.js:路由

js\dispatcher.js:js設定檔

------------------------------------

第三方引用：

lib:jquery.min.js:JavaScript 庫

lib\md5.min.js:md5加密

lib\fastclick.min.js：大家可能都知道的，在行動裝置上，click具有較長時間的延遲，使用者在操作的時候總會有點怪怪的不順暢的感覺

lib\mobilebone.min.js：mobilebone.js-mobile移動web APP單頁切換骨架

lib\LAB.min.js：LABjs裡的動態載入指令檔

2.3.2.templates：儲存頁面模板檔案，由node自動編譯為js產生到release目錄下；

2.3.3.release：產生後的js檔案，用於頁面展現

 

單頁開發web app項目中使用的技術點總結