上個前端的交接文件 感覺真的不錯
Web前端開發工作交接報告
一、專案總體邏輯及後續工作進展
本次專案為公司的網站開發。開發中使用的語言包括html，css，css3。使用到的前端框為angularjs。在整個開發過程中，使用了MVC的設計模式，其中Model層為index.js，由index.js進行路由分發。View層，是整個前端頁面的展示層，其檔案包含在views目錄下的所有檔案。Controller層，是整個開發的關鍵，其檔案為所有以Ctrl結尾的js檔案。
具體程式碼含義，見於開發中註釋。
目前工作完成進度：目前工作的基本框架已經完成。主頁面、產品展示部分頁面等頁面的前端設計已經完成。
後續工作進展：完成未完成的頁面設計（具體頁面設計的設計寫在
專案完成之後工作進展：全景圖設計（見Krpano操作）。上線前的優化工作（見專案優化）。
二、各檔案具體含義說明
圖1.1 專案檔案
表1-1 css目錄介紹
lib目錄 | 所有的外部css檔案 |
global.css | 專案中需要使用的公共css樣式 |
living.css | view裡面的living.html檔案樣式 |
newproduct.css | view裡面的newproduct.html檔案樣式 |
productdetail.css | view裡面的productdetail.html檔案樣式 |
sofa.css | view裡面的sofa.html |
fonts目錄，為此次開發所需使用的字型檔案。
img目錄，為此次開發所需的圖片檔案。
表1-2 js資料夾介紹
lib目錄 | 所有的外部js檔案 |
xx目錄 | 存放指令檔案 |
Index.js | 註冊angular及路由分發機制 |
mainCtrl.js | 包含各view的各個controller檔案 |
其他檔案 | 對應於單個view介面的檔案 |
testImg資料夾為先前測試的img檔案，在最後專案上架的時候建議刪掉。
views資料夾是包含又有前端的展示頁面的html檔案。在書寫頁面的時候，需要將頁面放在這個目錄下。
三、Krpano操作
krpano是製作全景圖的一個工具。
使用規則：將需要的製作成全景圖的圖片選中（可多選），通過滑鼠拖放放於
圖 3-1
在完成之後能夠看見圖片所在目錄下會多出一個vtour目錄，將vtour目錄配置在伺服器下面，開啟tour.html就能檢視製作好的初步全景圖。
如何給全景圖新增跳轉的熱點。此具體操作見於桌面/全景圖/總結文件。
一、如何新增動態圖
首要要有動態圖
其次 修改主xml檔案
第一步：在scene之後新增如下程式碼
<action name="do_crop_animation"> <!-- 為熱點註冊屬性 --> registerattribute(xframes, calc((imagewidth / %1) BOR 0)); registerattribute(yframes, calc((imageheight / %2) BOR 0)); registerattribute(frames, calc(xframes * yframes)); registerattribute(frame, 0); set(crop, '0|0|%1|%2'); setinterval(calc('crop_anim_' + name), calc(1.0 / %3), if(loaded, inc(frame); if(frame GE frames, if(onlastframe !== null, onlastframe() ); set(frame,0); ); mod(xpos, frame, xframes); div(ypos, frame, xframes); Math.floor(ypos); mul(xpos, %1); mul(ypos, %2); calc(crop, xpos + '|' + ypos + '|%1|%2'); , clearinterval(calc('crop_anim_' + name)); ); ); </action> |
第二步：在要設定熱點的圖片中新增熱點
找到對應的場景 scene 在其中加入如下程式碼
<hotspot name="spot2" url="skin/new_spotd1_gif.png" onloaded="do_crop_animation(64,64, 60);" ath="-15" atv="-12" onclick="loadscene(get(linkedscene))" linkedscene="scene_01"/> |
其中url是要動態圖片的地址，圖片是一個要動態顯示的不同大小的圖集。Onloaded是要執行的上面的action。至此就完成了。
二、使用導航條按鈕
三、如何給熱點新增文字
<hotspot name="spot2" style="skin_hotspotstyle" ath="112.376" atv="37.536" linkedscene="scene_studyroom" text="書房"/> text就是顯示的文字
需要學習的網站：http://www.krpano360.com/yihuajiemu-10/
已完成的Dome,請參考HBuilder裡面的testKrpano檔案，裡面有初步的完成的全景圖設計。
四、專案優化
專案上架之前需要進行的部分優化：
css壓縮：利用cssmin進行壓縮，原使用主機已經配置完成。只需要配置要壓縮的檔案目錄即可。
cssmin:{ options:{ stripBanners:true, banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, my_target: { files: [{ expand:true, cwd:'src/', src:'*.css', dest : 'test/css', ext: '.min.css' }] } }, |
將上面程式碼的cwd對應的目錄改成你所需要壓縮的css檔案目錄，將dest對應後面的目錄，修改成為你需要儲存的壓縮後的檔案目錄，最後在命令列輸入grunt就能進行壓縮操作。
Js壓縮：利用uglify進行壓縮，原使用主機已經配置完成。只需要配置要壓縮的檔案目錄即可。
uglify:{ options:{ stripBanners:true, banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, my_target: { files: [{ expand:true, cwd:'src/', src:'*.js', dest : 'test/js' }] }, }, |
將上面程式碼的cwd對應的目錄改成你所需要壓縮的js檔案目錄，將dest對應後面的目錄，修改成為你需要儲存的壓縮後的檔案目錄，最後在命令列輸入grunt就能進行壓縮操作。
圖片壓縮：在你使用的電腦上有一個圖片壓縮.exe的可執行檔案，他在本機的桌面上，你需要雙擊來開啟大，會發現需要填寫要壓縮的檔案目錄和壓縮後生成的檔案目錄，按照你要壓縮的檔案和你要生成的檔案填寫即可。生成目錄下的檔案就是壓縮後的圖片檔案。
圖片壓縮工具只能對圖片進行壓縮，如果存在其他檔案，會報錯，但是並不影響你自己的圖片壓縮。另外對於圖示檔案，不需要進行壓縮，圖示檔案在壓縮後會失真明顯。
專案上架後需要進行的優化：
CSS整合:有部分頁面的css存在冗餘，需要多餘的css 刪除，減少css檔案大小。
按需載入js：頁面js在讀檔案中非同步載入，待專案上架後需要考慮按需來載入js。按需載入js可以考慮使用requireJS來完成。
互動優化：部分頁面在特效上不夠炫酷，上架以後望考慮使用原生js進行優化操作。
五、前端輔助工具說明
取色器：見於桌面下側導航欄最左側位置。開啟後滑鼠移動到UI所給的頁面上進行取色。
Google各外掛介紹：各外掛安裝在google瀏覽器上。
1.ie7相容性外掛 使用者測試開發的網站是否能夠相容ie7。網頁訪問網站，在訪問成功後開啟外掛，這時候你所訪問的網站就是ie7下的網站，如果有些相容性不能適配，就需要進行修改適配。
2.Window Resizer外掛 用於測試開發的網站在不同的解析度下顯示的效果。開啟開發的網站，網站載入完成後開啟外掛，選擇不同的解析度進行測試。
3.Web Deloper外掛，主要用於對所開發網站的除錯。可以去除cookie，去除圖片，去除和修改css進行除錯，便於整個網站在上架前測試工作的進行。
Grunt介紹：對於grunt的配置，已經在webStorm中配置完成。在檔案gruntTest中能夠進行前端所需要的grunt操作。具體操作寫在gruntTest目錄下的GruntFile.js檔案下。
總結的這麼詳細 還是不會 簡直了 唉 繼續加油