事情是这个样子的，我们要说道年前了~
是的没错，我要开始讲故事了~
年前产品经理说想把我们的随便网站改个版~~
不是什么大的网站，就是一个功能复杂，提交应用的往助手上推的面向10万+cp，每天PV也就斤百万的小网站而已~
而这个简单的改版，我竟然在上周四才全部上线，你敢信？作为一个因为各种原因拖延至此的改版，及其需要总结一下经（jiao）验（xun）~
首先，产品规划一定要确定要尽量准确细致~
我不是（gan）说我们最最亲爱的好朋友产品经理的需求写的经常变~反正到我手里的也就三个版本而已~
先看下旧版：
第一版，年前版~
产品经理想用左导的方式实现一个后台，也是现在比较流行的，把功能全部列在左侧，右侧展示详细功能~这样把功能就完全展示出来，入口不会那么深了，于是他们大概想要一个这样的页面：
于是问了产品大概想要的效果之后，只是想把功能都放在左侧，里面的功能页还维持原貌，又要快速的实现且尽量不改动后端内容，于是我提出方案一。
方案一：iframe嵌套页面~
通过父页面调用并把功能页作为子页面嵌套进父页面--功能展示页中，这样，点击左导，右侧功能页刷新。
作为前端的我自我觉得这个方案，low爆了~可是又不能用div重写吧？先不要说react单页应用这种高端玩家的工具，作为在前端的海洋里才游了1年多点的人来说，我之前并没有用过且部门项目也没有用过~
为什么不尝试使用呢？这就要提到后来男票给我的建议了，一个比较复杂的新技术，如果你想使用，请在课外的时候自己研究使用，等上手了再用在工作中，不然如果遇到了坑，又没有人带你，你会影响整个项目的进度，我觉得他说的对，所以分享一下。
我当时为什么没有用呢？我胆小，不敢~而且项目急呀，并且我还肩负了另一个急得不要不要，难的不要不要的团队的项目，我只能用我最熟悉的工具去完成这个任务~
具体方案：改动目前的功能页，然后把各个功能各自的详情页以iframe的方式放进功能框里~功能的详情页几乎不动~
估计时间：1周~
于是需求评审之后，开始设计具体样式，准备开发~但是过年了，于是放到年后做~这个时候，我们最最亲爱的产品经理看到了一个新产品：模版！！模板似乎比自己做的高端大气很多~
接着年后，我就接到了第二版需求……
方案二：基于套模板的后台改版~
产品千挑万选之后，选择了一套合适的~于是再次进行需求评审，由于这套模板是基于bootstrap的，在这里要说一下，本菜鸟是一个jquery+css+html玩家~从来没有用bootstrap开发过，并一度认为对于长期做后端的人来讲，特别好用，但是对于前端，就觉得特别鸡肋，虽然在自适应上做的很好，但是会引入很多奇怪的class，而且如果不看一遍css源码的话，很容易自定义重复的css，我并不是洁癖处女座，但是也觉得这样很不爽~所以我到现在也一直能不用它就不用它，不过它的设计思路还是很赞的，值得借鉴的，这个另说~
菜鸟也有一颗想变成老鹰的心，也想用下流行的新的前端框架，于是，在比较了各种前端框架后，我决定使用require.js在需要的时候引入相应的js，暂时不使用angular.js学习曲线略高~，当然，这个方案也是能不改后端就不改，于是还是使用熟悉的jquery以及其模板里的各种插件~
具体方案：所有功能页都要套用模板样式，统一换一下头尾（其实这样是有问题的，因为不同的APP左导不同，不能这么做），require.js+bootstrap+各种jquery插件
估计时间：2个月~他们不乐意，非要1个月，我不同意~于是大家说到1个半月~
这里，我锻炼了估时间和沟通的能力~（这是菜市场吗？！！）
于是产品先写方案，我就先被另一个项目抓去做一些奇怪的需求~同时，这边愉快的搭着框架~然后，这边暂时先搁置着~于是我们的新老板，跟产品经理一起讨论后，换模板了！！
来，我们讲一下第三个方案~此时已经4月了~
方案三：模板+iframe~
先来看一下模板，
这个模板有一个特点，就是会有一个tab页，就是蓝框里的~可以切换相应的iframe~我就觉得，这种东西我自己都能做一个啊~但是，要快嘛~
具体方案：模板+require.js+bootstrap+各种jquery插件+iframe，里面的页面全部去掉头部，后端尽量不动~
估计时间：尽快~
好了，到此时，方案算是曲曲折折的定下来了~我们开始谈坑吧：
1.框架本身不完美，需要二次开发。
不要太迷恋于以及信赖框架了，它只是用来解决通用问题的，很多地方并不能完全满足需求。
比如，我们买的这款框架，并不具备刷新功能，在我看了源码之后并不想在这里吐槽没这个功能的原因。我去源码里加入了这个功能--点左导可以刷新内容页面（子页面），还有，当前子页面中，新打开页面新建tab的功能，原来的框架里也是没有的，都要自己二次开发~
2.替换插件时引发的与旧版不兼容问题。
既然新改版，当然希望把旧的框架换成新的样式，使用新技术了~比如，我们的旧版上传还在使用flash的插件，会有一些安全问题以及不兼容的问题，比如chrome浏览器上，就会出现一些奇怪的现象~
我们的flash上传插件是fix过的。想xss的同学，请绕行，别浪费时间了~
然后框架里的用的dropzone，样式好看而且用了html5的一些事件，看起来就很高端~但是坑也很多~
首先，样式问题。
这个插件给了我们充足的设计样式的空间，但是，要改的地方太多了，而且，有些地方比如，只上传一个文件的时候，设置好了之后，还是可以drop文件上去，不走进度条，然后报错，但是后面的框还是那么大~
而且产品会想修改样式，所以，插件这里就需要花时间去调整，覆盖样式，而不仅仅是配置一下，那么简单~并且，在调试的时候，这款插件可以并行上传，是非常赞的一个功能，然后，我们的后端并没有这样的功能，还要重新开发，于是就很尴尬的看到，你选了4个文件，同时在待上传框中出现，但是是一个一个传的，太傻了~于是，我果断的换回了原插件~
再次，功能问题。
要提到另一个插件，就是编辑器~这个插件仍然不能直接用。根据产品的要求，写了一大堆正则，改了一大堆样式，它亲妈可能都不认识它了~然后后台服务之间，又各种复杂的逻辑和限制~这里也调了许久~
做技术的人都知道，正则是一个多么繁琐的事情，所以有个会正则的男票是什么体验？各种奇葩的产品需求，正则都分分钟搞定~
还有，我们用的新编辑器它和之前用的Ueditor之间的数据格式不兼容，所以用新版编辑的文档，用Ueditor打开，会很牛的看到一大堆html源码~
3.新旧版本的同时保留问题。
由于这次改版比较大，所以要求新旧版本同时存在，于是在我几乎要改完的时候，当然我是机智的新建，然后改后端调用的路径~快要改完的时候，后端给我开了新的环境，需要把所以的代码搬过去。简单吗？你错了~你考虑过js调用接口的路径问题了吗？
于是，原来并不需要改的页面，现在，几乎所有的都要再查一下，改一下路径了。所以，开发构架时，一定要想好，怎样把改动降到最小，尽量不做重复性的苦力工作~
4.有些东西前端实现会很麻烦的问题。
左导。后来提测的时候，我们发现，因为以尽量不改后端为前提，左导做了好几版，来对应不同种类的APP以及APP不同的状态，这是非常不智能的~其实这里后端去渲染左导会比较好~以后优化吧~
5.时间问题。
做需求之前，产品的需求一定要确定好，一定要确定好，一定要确定好，边出边做虽然快，但是会有很多坑~所以，作为开发，也是我这段时间一直在反省的问题，一定要问清楚产品逻辑，不要以为你把页面搞定就行， 逻辑清晰，才能更好更优雅的实现前端的构架和代码结构，而且产品真的不是神仙哥哥，也会出一些错误的~所以，才要一起讨论~~
6.不要迷信框架。
因为时间问题，我还是沿用了jquery+bootstrap的方法，并没有用高端的require.js等等，因为我发现，目前的代码，如果仅仅用它引用js，跟script引用几乎没区别；但是如果用模块的方式，改动会特别大~时间真的不允许。项目还是以稳为主，新的东西自己玩玩好了~而且现在的jquery实现简单方便快速，没什么不好啊~项目就是为了服务用户，用户不关心什么技术实现的。但是要是为了追求新技术，而影响了用户体验，就本末倒置了~
所以有了框架，就不需要很多的开发工作，别闹了~确实减少了切图的工作，减少了设计规范和设计的工作，但是开发的工作是不是能减少，真的要看需求了~目前我觉得，能减少开发工作的情况就是，你别新增模板功能，插件什么样你就怎么用，这样就能减少了~可是，怎么可能啊~！！
最终，我们的改版并没有在技术上高端起来，但是我get了很多经验~这比在项目中勉强用上新技术，可重要多了~