写在工作半年后

今天是1月28日，上班半年了，从开始来的时候啥都不懂，培训的时候学得写html，上班时看到一溜的jsp文件一脸懵逼。连个eclipse都不太会弄，到现在我居然用它写所有前端代码，想想还是很奇妙（当然现在还是不太会用它）。这半年的改变现在看来在刚来公司的那两个月最大，到后面加班一多学习的视觉就少了（手动惭愧）。所以想在此总结下这半年的坑和感悟，梳理下未来一段时间的努力方向，文档新手，想到哪是哪，没有逻辑，没有顺序。当然如果能够给看官们一些启发，那是最好^-

目录

• 1.一些坑

• 2.一些小感悟

• 3.对于后面的学习

• 1.一些坑

1.1不懂jsp的坑

上班第一个坑，上文也说了，随着前端在社会上的流行，越来越多的想我这样的非技术行业人员通过培训转行转过来，在学校学的东西始终和工作始终不一样，特别是在前端这个领域。我们项目是传统的Javaweb项目，没有啥html页面，都是jsp，所以当一上手想要改写页面时，在陌生的eclipse里按下Ctrl+F寻找html文件发现0零个文件的时候，我是很慌的，到后面才发现者jsp文件才是我要改的页面，费了半天时间，得亏当时新来，领导对新手容忍度还比较高才没说我。

第二个坑还是当时对jsp不了解，只当做一个html页面，其他很多功能逻辑都在js里实现，了解得多了，发现很多与服务器有关的功能，在jsp页面里用Java语句获取比js获取更简单。举个栗子

我第一个特性，说起来蛮简单，当时需要将用户名显示在页面上，但是没有后台给我接口让我请求，没办法，我只能从发来的cookie里取，代码如下：

function getCookie(c_name)
{
    if (document.cookie.length>0)
      {
      c_start=document.cookie.indexOf(c_name + "=")
      if (c_start!=-1)
        { 
        c_start=c_start + c_name.length+1 
        c_end=document.cookie.indexOf(";",c_start)
        if (c_end==-1) c_end=document.cookie.length
        return unescape(document.cookie.substring(c_start,c_end))
        } 
      }
    return ""
}

然后把取得的值放到显示用户名那地方，写完了还是美滋滋的，后来发现可以直接用jsp取session中的userID：

用户名：<%=session.getAttribute(userId) %>

就能够直接服务端取到用户名，发给浏览器的页面就已经在这个节点里有了这个信息，直接渲染就可以，还避免了页面生成后操作html元素造成的页面抖动，简直完美╰(°▽°)╯；

再比如：我们经常会遇到需要获得地址栏的信息来操作，按照正常逻辑我们需要写一个函数，先用window.location.href获得url，再通过字符串操作获得对应的数据，但jsp，或者说Java天生就能获取这些信息，比如我当前的地址为：http://localhost:8080/testjsp/main.jsp?name=xxxx&url=http://xxx，我要获取name的参数，一个方法就行了：

<%= request.getParameter("name")%>

你可以把这个值放在一个隐藏域里，操作的时候直接取就行。

当然这是由于这是从服务器一次性发过来的页面，所以只能取一次的信息，后面你用history.pushState()等方法改变地址栏，这个值也是变不了的……

所以到后面给我的新特性，我会想着这个是不是能服务器返回数据的时候直接给我，不事后请求我尽量不请求（本来页面加载后的xhr请求就要有50多个了，实在是不能再多了……），还有啥错404页面跳转啥的，不懂Java和jsp不要紧，咱不是还有菜鸟教程么。

1.2某些插件的坑

大家都是知道，编程这玩意总是有很多造好的轮子。我们工作的时候肯定是希望能有一个现成的插件啥的能够直接用上，又快又方便不是。但是并不是任何一个轮子一引入到项目中就能直接用上的，有可能对数据格式或者环境或者用法都有一定的规范性。在使用的时候都需要注意一下。

在上班两个月的时候我开发个特性需要做一个能够点击的树状结构，当时我们用的都是ztree这个插件，确实不错，但是在我用的时候却是到处踩坑。比如我需要做一个搜索框，搜索模糊匹配的节点再显示为一个新的树，我也成功建立了一个新的树了，但是奇迹出现了：点击父节点展开子节点的时候，会把子节点全部复制一遍，平白增加一倍的节点。找了很多方法和都没用，没办法，我只能用一个函数手动清除所有重复字节点，导致性能浪费太多。这个问题到现在也没法解决，不知道各位ztree的用户有没有遇到过这个问题，求解决方案（手动跪求）。

当然还有一个bootstrap-fileinput的上床上传插件，有一个上传失败但是还是显示上传成功的bug我到现在都不知道咋解决。只能换一个插件用了，其他功能完全手写。

大家在用插件的时候多了解些用户量多，流行的插件，起码bug都有大部分人帮我们找到了修改了，别找个小而美的轮子到时候出了问题，解决方案都找不到（当然ztree是很多人使用啦，只是我太渣）。

1.3IE的坑

只要是做前端，就一定避不开这尊大神，，甚至有些面试题就专门为IE兼容开一个专题来说，很多同学对它也是恨得牙痒痒。话说IE还是第一个支持js的浏览器呢，咋这么不思进取呢。

第一次遇到IE的坑就是我要改变一个iframe的路径，正常看来就是

window.frames["name"].src

但是在ie没用，得用

window.frames["name"].location

搞到晚上10点钟。

还有就是上个月的做一个导入文件的特性，用的一个插件，一开始在谷歌上，点击上传，选择文件，上传，获得服务器传来的上传成功，完美。

换了IE，点击上传，选择文件，上传，获得服务器传来的上传成……咦，卧槽怎么没有后台传来的信息，仔细一看IE提示你下载一个文件，下载了打开，居然就是服务器传来的上传成功！！！惊不惊喜？？？意不意外？？？本来应该是js里ajax的回调函数获得的json数据，IE精心做成了一个文件给你下载，Isn't it amazing？当时的感觉就是日了狗。

后来解决了，前台传参数的时候编码一下，后台不能指定传回的数据位json。这在chrome都没啥问题，在我们脆弱的IE就是问题。

还有啥样式问题，IE低版本不支持的一些js方法，坑多了去了，幸亏我们只支持11以上的IE，不知道那些要支持到IE8的大佬们日子是咋过的（手动花鸡）。

当然还有很多坑我还没有说，更多的坑没有踩，当然想要一劳永逸解决这个问题也很简单的。

说服你的老板允许你在用户手册上加上一段话：不支持IE浏览器！

• 2.一些小感悟

在公司里面前端总是特殊的存在，作为一个连接用户和服务的边界地，你能够接触到的东西总是最多的。我这项目组，没有美工和UI，所有的交互和原型图都是我自己设计然后给别人看看，再加上本来前端就比后端人员少很多（反正我们公司是这样的），每一个后台都能够接触到，这使得前端能够串联起整个组所有的人员，这对于一个人的成长是很重要的，你得和用户交流，得和后台对齐，得和产品经理对喷，还需要和UI撕逼，所有的一切都是你来做，怎么样，你拿着一份前端的工资是不是和项目经理每天干的事情一样？（误）

所以我觉得前端工作的时候总是得有大局观，可谓夜观天象，结果天下大事全TM知道了。得知道实现成啥样，哪个后台同事哪段时间有时间。就连出bug了都是先给前端看看是前台还是后台的锅，毕竟测试只知道页面炸了，然后就找前端甩锅。

前端真的不容易。

• 3.对于后面的学习

前端的学习真的比较蛋疼，这个领域每周都有新的框架出来，在你还没学会的时候就已经过气了都有，当然我们也不需要学ZARA走快时尚的道路，那些流行的掌握就行了，我后面的计划是学vue和node.js，还有es6（别吐槽，我想上学……），然后我们领导又希望我们能做前后台都懂得，意思是我还得学Java？？？想想就头大，不过目标明确了就好了。

最后，明天又是周一，开启我职业生涯的第一个下半年，加班吧加油吧！