请教大牛们该怎样优化自己的代码现在用jq那样写代码

在前端工作快半年了，感觉在目前的这家公司没有一丁点进步的空间了，反而觉得在下滑。。。这家公司他很少涉及到H5和css3的一些新知识，用的还都是很原始的东西。而且现在感觉做一位前端好多东西得学。。不再是当初单纯的学学js,css,html，感觉还得要会网络通信，还得懂后台语言。。。突然觉得没有方向感了不知道怎样着手。。。感觉思绪好乱不知道怎样去进一步提高了。大牛们你们都是怎样经历过来的，可不可以给我指点一二。我想知道前端的各个阶段应当具备哪些技能哪些知识；如果说要学习有关于网络数据交换那得了解学习哪方面的知识，这方面有什么好的资料吗？而且是不是还得懂数据库操作的一些知识？至于后端语言学习哪一门更好一些是Java？c++？还是PHP？node.js？还是说别的什么后端语言。还有一些框架要知道哪些，我目前就对JQ比较熟悉一些，像angular.js，Bootstrap就不怎么了解了，现在突然感觉要学的太多太杂不知道该怎么一步一步的进行。。。
最后还想请教大牛们该怎样优化自己的代码现在用jq那样写代码一多感觉自己都要吐了。

var dwid=dwid ? dwid : '';
            var data={
                "dwid":dwid
            }
            var brx=JSON.parse(localStorage.getItem('brxx'));
            var url={
              "dwbk_cx":"/service?wdService=dwbk_cxSpt"
            }
            axs(url.dwbk_cx,data,bklm_fn,'post');
            var href_bk=window.location.href;
            var oHref=getParams(href_bk);
            function bklm_fn(data){
              console.log(data)
              if(data.msg=='10004'){
                var obj=data.data,str='<li class="nav-item"><a href="index.html">首页</a></li>',str_more='',child_str='';
                 if(obj.length>=8){
                   var obj_length = 8;
                 }else{
                   var obj_length = obj.length;
                 }

                for(var i=0;i<obj_length;i++){
                  child_str='';
                      if(obj[i].bkbm=='ZXFU'){
                        console.log('fgf')
                      $('.conts p:lt(3) a').attr('href',obj[i].bkurl+'?dwbkid='+obj[i].dwbkid+'&bk=bk')
                   }
                  if(oHref.hasOwnProperty('dwbkid')&&oHref.dwbkid==obj[i].dwbkid){
                       var ms='<div style="margin: 1px 0px 4px 0px;"><p style="padding: 6px 4px;border-bottom: 1px dashed #ccc;line-height: 150%;font-size: 14px;color: #666;"><span style="color:#D22E71">栏目说明：</span>'+obj[i].ms+'</p></div>';
                       $(ms).insertBefore('.ss');
                   }
                   var cHild = obj[i].childList;
                   console.log(cHild.length)
                   if(cHild.length>0){
                      for(var j=0;j<cHild.length;j++){
                          child_str+='<li class="nav-item"><a href="'+cHild[j].bkurl+'?dwbkid='+cHild[j].dwbkid+'&bk=bk">'+cHild[j].mc+'</a></li>';
                      }
                      child_str='<ul class="child">'+child_str+'</ul>';
                   }
                      str+='<li class="nav-item"><a href="'+obj[i].bkurl+'?dwbkid='+obj[i].dwbkid+'&bk=bk">'+obj[i].mc+'</a>'+child_str+'</li>';
                }

感受一下吧，我自己都觉得好乱。。大牛们有什么好的方法让代码优雅起来！
而且我觉用js拼装成字符串再在页面打印出来感觉好低级移植性又差。。。虽然知道有这样的问题不知道怎么可以解决。。。
希望大神们能给我指点迷津，在下不胜感激！！