• 一个月的模拟项目总结


      这个月都没怎么更新博客,刚刚才把一直存在草稿箱里的有关闭包的文章修改完善好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到底怎么一回事。这一测试,果然感觉好多了,基本 对它的原理有个大致的了解,于是便直接开干,总算是写好了结构样式。再和后台一测试,妈蛋!问题又来了,我的图片是经过比例压缩的,给出的坐标当然也是比 例压缩后的,当然解决也就是算法的事,通过服务器返回图片的原始宽高,再计算比例,返回正确的坐标即可。现在想一想当时焦头烂额的感觉,也觉得非常有趣!

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

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

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

  • 相关阅读:
    setState 是异步吗?
    React优化点滴
    JS原型,作用域,this,闭包
    Webpack 模块化打包优化
    JS异步编程
    Web网络安全
    Http2.0和Http3.0
    Http协议基础
    Harris算子以及未来的规划...
    剑指offer 二维数组查找
  • 原文地址:https://www.cnblogs.com/YikaJ/p/4094190.html
Copyright © 2020-2023  润新知