前言
在我写这篇文章的时候，我回想起来，我在前端开发这条路上已经摸爬滚打超过一年的的时间了。这一年的时间里，因为还要上课和考试的原因，加上平时放假了想跟朋友去玩玩，聚会一下。因此，期间的学习总是断断续续。
在去年十月份的时候，我开始毛遂自荐，想跟专业老师（php、java方向）学习，跟着他做一些项目。其实老师一开始对我是不信任了，因为他会觉得我是那种突然感兴趣，又不会坚持下去的同学。经过老师一个多月猜测与怀疑，给我的任务我都会完成，而且会主动的联系老师。渐渐的，猜疑慢慢的褪去，信任感慢慢的增强。因此获得了实际开发的机会。到目前为止，产品开发周期已经超过半年的时间了。
整个团队四个人，两个老师负责后端开发，我负责前端开发和php部分，另外一个老师负责营销同推广。
我们的产品是一款服务于淘宝卖家的产品，具体是什么产品就不细说了。下面想谈谈我在开发产品过程中的收获与感悟吧。
过程
- 产品前端方面，使用jQuery作为前端框架，Webpack作为项目打包工具
- 在前几月，将产品雏形开发出来了，今年过年的年后产品如期上线。
- 一段时间之后，开始review自己的代码，因为之前没有具体的产品开发的经验。因此，在代码方面出现了很严重的问题。
- 几乎整个js文件都是全局变量
- 修改一个功能，其他功能都手动修改，改动其他页面的过程中很容易出错，效率低。
- 针对上面的两个问题。做了以下修改。
- 使用JS中的单例模式，立即执行一个函数，返回一个单例对象。在其内部定义一些局部变量，在函数内部返回一个对象，向外提供API接口。
- 将某些通用函数全部做了抽象，使用模块化开发方式，将一些功能抽象成一个个模块，通过import的方式引入。因为是多页应用，每个页面实现的一些功能基本相同，模块化开发方式极大提高了开发效率。
- 在Ajax方面，在其外部封装了一层Promise对象，通过then方法链式调用，并且使用catch方法捕获在promise对象、成功回调和失败回调中出现的错误，以这种方式debugger code非常友好
- 在数据方面，因为在产品中有大量的数据是通过jsonp的方式获取的，因此在返回数据时通过template引擎对数据进行渲染。
- 在DOM方面，通过离线操作DOM的改变减少DOM的重排和重绘
- 通过webpack的htmlwebpackplugin插件，自动生成HTML文件。
- 使用webpack将CSS、JavaScript模块压缩合并，抽离公共代码，并给每个模块添加chunkhash，每次更新，浏览器都会重新加载CSS、JavaScript模块，避免了浏览器缓存；
- 将一些常用的小图标都换成了iconfont，减少图片带来的部分http请求。
- 由于项目是属于多页应用，因此使用Web Storage对一些数据进行储存，以便其他页面使用。
- 因为需求需要添加广告，因此写了一个jQuery插件。但是扩展性不怎么好，最近在优化。
通过以上的优化，JS模块大小至少减少一半，项目改动也快捷了许多。当然，效率自然也就上来了。
通过这次的产品开发，学到了很多。但是仍然有一些不足。比如说PHP方面，我负责后端数据的部分，什么数据库查询，返回JSON对象给我自己调用都是自己写。可能接触JS比较多的原因吧，PHP写起来会稍微生疏一些。
最后
接下来的学习中，我会不断的去review代码，不断的优化，并不断的查漏补缺吧。
另外，说说现在的一些状况。
- 使用vue2.0写了一个web app，双向数据绑定、组件化开发、父子组件通过props或自定义事件通信、transtion动画。比jQuery方便很多很多。
- 虽然出现了MVVM框架，极大提高了前端开发效率的。但是jQuery好歹也是风靡很长一段时间的产物，因为最近在阅读一些jQuery源码。