上个前端的交接文档 感觉真的不错
Web前端开发工作交接报告
一、项目总体逻辑及后续工作进展
本次项目为公司的网站开发。开发中使用的语言包括html，css，css3。使用到的前端框为angularjs。在整个开发过程中，使用了MVC的设计模式，其中Model层为index.js，由index.js进行路由分发。View层，是整个前端页面的展示层，其文件包含在views目录下的所有文件。Controller层，是整个开发的关键，其文件为所有以Ctrl结尾的js文件。
具体代码含义，见于开发中注释。
目前工作完成进度：目前工作的基本框架已经完成。主页面、产品展示部分页面等页面的前端设计已经完成。
后续工作进展：完成未完成的页面设计（具体页面设计的设计写在view层，页面的交互处理写在Controller层）。
项目完成之后工作进展：全景图设计（见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是制作全景图的一个工具。
使用规则：将需要的制作成全景图的图片选中（可多选），通过鼠标拖放放于krpano-1.19-pr8/MAKE VTOUR (NORMAL) droplet.bat文件上面，这时候会弹出一个正在处理的过程，等到处理完毕，按enter键完成操作。如下图3-1所示
图 3-1
在完成之后能够看见图片所在目录下会多出一个vtour目录，将vtour目录配置在服务器下面，打开tour.html就能查看制作好的初步全景图。
如何给全景图添加跳转的热点。此具体操作见于桌面/全景图/总结文档。
一、如何添加动态图
首要要有动态图
其次 修改主xml文件
第一步：在scene之后添加如下代码
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)); ); );
|
第二步：在要设置热点的图片中添加热点
找到对应的场景 scene 在其中加入如下代码
其中url是要动态图片的地址，图片是一个要动态显示的不同大小的图集。Onloaded是要执行的上面的action。至此就完成了。
二、使用导航条按钮
三、如何给热点添加文字
需要学习的网站：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文件下。
总结的这么详细 还是不会 简直了 唉 继续加油