一个月的模拟项目总结

　　这个月都没怎么更新博客，刚刚才把一直存在草稿箱里的有关闭包的文章修改完善好push了上去。其实这个月我都在忙着我的第一个模拟团队项目，为了团队的第三轮考核。

　 　先说说这个模拟项目吧，考核时间不到一个月，也就20来天吧，期间还要上课，时间是非常的紧，让我们模拟一个电影售票网站+APP，大家都知道完美完成 不太可能的，只能尽力去做。分出的小组四个人，组长涛哥做后台，服务器和数据库。然后两个做安卓APP，我是做网站前端。在我们讨论完需求分析，和功能结 构图后，队长就开工了，他是有过项目实战经验的，所以后台服务器搭建的速度很快，各种接口参数都写成了文档发给我。当时UI在做APP的图，所以我一直在 等设计图，期间我就用阿当老师在慕课网里教的前端组件（鼎力推荐），开始自己写一些常用的组件，比如轮播图，回到顶 部，弹窗组件之类的。等了快一个多星期，才得到通知说，前端自由发挥。当时也挺郁闷的，因为自己对设计这一块确实力不从心。后来我就上网找了各家电影网 站，最后选定了淘宝电影网进行仿站。（仅仅是仿站而已啊~~!希望不会侵权。。。）

　　第一天做HomePage的时候，就遇到了一个很 尴 尬的问题，就是之前我写的轮播图组件，是固定宽度的。而淘宝电影网的轮播图是宽度百分百居中自适应的，而且它的图片是1920px的。其实解决这个问题很 简单啦，哈哈。可是对于我一个没有经验的人，当时一瞬间发现自己的轮播组件不适用了，觉得那是非常的蛋疼！于是本着前端最重要的精神——开源精神，我打开 了开发者工具，看了一下，background-position: center center，于是大概心里有数了，当时还做了IE7的测试（忽略IE6人人有责），非常痛快的通过了。于是用了一天重新写了专门的1920px的宽度百分百自适应轮播图组件，那是非常的高大上的说！

　 　然后做了几天的页面，最基本的页面大概做完了。就是主页，电影列表页，电影详情页，影院列表页，影院详情页。期间为了兼容IE7也是下足了功夫，积累了 各种BUG，比如浮动元素前面要是有非浮动元素，就会换行。z-index里的，父元素要是没有z-index，子元素的就会失效。还有就是浮动阶梯。这 些都算是挺好解决的哈。

　　很快就到了逻辑层了，我选择了基于Jquery开发的（兼容性和API接口真的好用的不得了），还有就是阿当老师在 慕课网里教的，requireJS的模块依赖，可以很好的解决脚本文件引用顺序的问题。第一个就是做的登录注册。涛哥要求我做登录注册的测试。我个人是倾 向于弹窗组件进行登录和注册的，但为了严谨，在安全方面也是用了Jquery.md5加密，这个md5加密也是让我学习到了 input[type=hidden]这个绝妙的东西。因为浏览器会记住密码，如果直接加密，会造成连续加密，这样密码就会有错误。当然解决办法就是将加密后的密码存储到隐藏的Input里，然后用disabled禁止密码的传输，防止拦截泄密。

　　还有就是用validate进行表单基本验证和远端的验证（最近在张鑫旭老师那里发现了一个html5Validate的 组件，他介绍非常优秀，还未尝试呢）。这一块现在说起来轻松呀，当时却什么都不清楚，要为了md5脚本写require来支持AMD，还要学习 validate的API，然后AJAX，JSON当时也是真正意义的第一次用，各种一头雾水。(特别是Jquery的Ajax封装的特别好，自己写原生 的话，看起来又长又复杂，哈哈。) 后来真正完成后，心里也是很开心的，和涛哥一起实现各种在平时生活中很常见的功能。有了第一次的AJAX的尝试后，后面越来越多的逻辑需要用到它，来和后 台进行交互。

　　接下来，登录注册写完后，就开始写网站后台发布系统。根据功能结构图大概知道要写什么东西后，鉴于时间紧迫，我申请用 Bootstrap框架搭建后台发布系统，想不到涛哥非常之前就挺喜欢Bootstrap的风格，并且在我学习Bootstrap框架的时候也会给我一些 指导。对栅格系统有个大致了解后，我就立刻开工了，当然这个不是面向用户的，就没有适配IE浏览器了。做到了一个预览图的地方，我又开始出现了我零经验的 短板了。我发现，Ajax无刷新上传图片，难以实现，在我百度后，最后还是决定先用着别人的插件（小白的无奈，总是用别人的东西T.T），这个我是用的 AjaxFileUploader插件，是穿门用来异步传输文件的，（异步传输文件的原理我现在也不是很懂，惭愧惭愧，留个坑，以后探究一下）。后来学习 了一下API，发现和Jquery的非常像，也非常好上手，所以就迅速的做好了预览图那块。

　　接下来就开始做影院合作开发系统里的排期发布系统，在那里也是学到了很多东西呀，最深刻的便是动态生成的DOM元素的绑定行为必须要有事件代理，通过冒泡来处理，而不是直接绑定。在Jquery里就是用 $(document).on(type, selector, function(){}) , 现在真算是体会到时间冒泡配合事件代理的优良用处了，可以通过在父节点绑定事件来处理子节点的冒泡事件。

　 　最后说一说学习Jcrop插件的事吧，Jcrop是我在项目开发中，感觉最艰难的。因为我个人感觉API和其它人的解读不是特别友好，造成了很大的困 扰，而且它的DEMO在实际开发中也是非常的不适用。比如它的DEMO固定了结构样式，还有就是没有考虑到切换图片和限制图片宽高，出现了各种问题，非常 让人烦躁和懊恼。后来自己索性抛开了自己的项目实例，自己写DEMO，浏览它的源码，测试这个Jcrop到底怎么一回事。这一测试，果然感觉好多了，基本 对它的原理有个大致的了解，于是便直接开干，总算是写好了结构样式。再和后台一测试，妈蛋！问题又来了，我的图片是经过比例压缩的，给出的坐标当然也是比 例压缩后的，当然解决也就是算法的事，通过服务器返回图片的原始宽高，再计算比例，返回正确的坐标即可。现在想一想当时焦头烂额的感觉，也觉得非常有趣！

　　然后时间关系，我们最重要的购票环节也就停工了，如果还有时间，接下来应该就是做那一块吧。

　　大概就讲到这里吧，明天还要考计算机英语呢，睡个午觉就要复习去啦。

　　第一个处女项目虽然是模拟的，自然带来的压力没那么大，可以让我更好的去总结和学习。接下来的博文，我会针对我第一次开发项目出现的问题和经验进行探索，希望以后可以帮到更多像我一样的小白，可以快速清楚的发现问题并解决问题。