2017前端技术总结：收获非浅，但仍需进步

2017年算是踏入真正的前端的一年，从实习到去年，说是前端的岗位，但却由于实习生的身份、公司技术不够等缘由，一直停留在传统的html+css+jq，那时候感受前端的世界在翻天覆地地变化，什么nodejs、react、vue、gulp、webpack什么的，都是据说过没见过的东西，感受那些特别高大上特别遥远。而后，我就毅然的辞职了，到了深圳工做，来到了如今这家公司。才真正的接触到了上面那些高大上的东西。

接下来就用项目穿插着技术讲解和新的来讲说吧

活动项目：

传统html+css+js,由于公司基本是移动端开发，因此移动端适配的方案是使用淘宝团队的rem方案，而后由于平常活动开发的交互比较少，页面要求不能太大（影响加载时间），因此就用了传统的html+css+js开发，顶多引用一个Zepto，可是里面能学习到东西仍是很多，从页面布局css（rem）编写方法，到js规范写法（让人一看就懂的写法，好比实现定义好dom变量，绑定事件统一用bind()等），另外造了一个抽奖的轮子，算是增长了传统页面开发的经验（以前自学过一段vue，而后就一直很鄙视传统的开发模式哈哈哈）。后来有几回活动真的习惯用vue，就把zepto改为了vue（开发效率大大的提升啊，后来别人也用这个方式开发，算是开创了一个比较方便的开发模式（自豪脸））。
页面就不能贴了，贴了大概就能知道我在哪家公司了哈哈哈

var form={
        $phone:$("#phone"),
        $sendCapture: $("#verify")
    }
 var api = {
        //定义正式环境仍是测试环境
        _domain:’api.exapmle.com',

        //定义ajax(POST)的方法
        _post: function (url, params, callback) {
            var request = new XMLHttpRequest();
            request.open('POST', url);
            request.onreadystatechange = function(){
                try {
                    if (!request.response) return
                    var response = JSON.parse(request.response);
                    if(request.readyState === 4 && request.status === 200){
                        callback && callback(response);
                    }
                } catch (e) {
                    console.log('throw:', e);
                }
            };
            //post send()
            request.send(JSON.stringify(params));
        },
      //公共方法定义
        login: function () {
            var url = location.href;
      
            }
            //weChat login api 微信登录接口
            location.href = this._domain + 'api/wx/login?state=' +
                btoa(unescape(encodeURIComponent(url)));//转义url
        }
     }
     function bingEvent(){
         form.$phone.click(function(){
             ....
         })
     }
     //初始化
     init()
     function init(){
         bindEvent()
         api.login()
         ....
     }

vue-nuxt服务端渲染项目：

首先贴出nuxt官网，有中英文翻译，能够事先了解一下
这个项目是为了seo而重构页面的，也是头一次接触到服务端渲染的概念，虽然模糊，可是这个框架带来的思想冲击也是不小的。科普一下，浏览器页面渲染分为客户端渲染和服务端渲染，客户端渲染是页面在打开加载的时候才拉去数据，而后拼凑页面；服务端渲染就是服务端（俗称后台）先拉取好数据，拼凑在js或者html里面，而后页面加载的时候直接渲染。服务端渲染的目的是便于搜索引擎爬虫抓取页面，增长流量，也就是服务于seo。这个项目主要的一个服务端渲染的思想就是：在前端vue组件中，加入一个asyncData的方法，能够在里面拉去数据，而后会自动在服务端调用，至关于在服务端拼凑好数据。
举个栗子：

async asyncData({ params, error ,query}) {
    const opt = {
      'id': params.id
    }
    let { data } = await axios.post(api.url, opt)
    return { readData: data} //注入this,直接调用this.readData

再往下走就看文档啦。

egg+vue+easywebpack运营配置系统项目

这个算是惟一一个从零探索开发到如今能够做为工具给运营人员使用的平台项目。不得不说，egg写的文档超级详细，easywebpack的配置简单，并且还有基于vue的项目，还有例子看，简直贴心。这个项目算是打通先后端的入门项目，彻底没有后台支持，数据保存用mongoose，也理解了不少后台的概念，什么controller啊，定时任务、多进程、负载均衡等。平台主要功能以下：

1. 支持客户端渲染和服务端渲染
2. 微信登陆鉴权
3. 页面组件增删改查，复制、移动等
4. 图片上传
5. 微信文章一键复制

等等
动态组件的配置原理以后专门用一篇文章详细写吧

jenkins持续集成

这个其实也不算是项目，算是前端的工具。也是我主管来的时候才带来了这个。这个工具主要是用jenkins来搭建，而后用各类插件来完成提早编译、发布、回滚代码的功能。说说主要思路：jenkins部署在一台发布机上，发布机先拉去git代码，执行项目编译命令，编译成功后，ssh服务器，再执行服务器上的脚本命令。这当中学习到了很多服务器的知识和命令。直到最后，前端的小伙伴的都已经忘了以前是怎么发布代码的了哈哈

总结下来，恍如隔世，本身在这半年多中，收获了技术，确定了本身，但本身仍是有比较大的进步空间，在独自发现问题和解决问题上，有时仍是须要依靠同事解决，将来确定仍是在前端这条路走到黑，越日后走，就是性能和稳定的方面的知识了。写这篇文章，但愿与你们共勉。

在这里以个人经验给一些建议给前端初学者

1.原声js不能忘记，尤为是不能局限于dom操做，要对数据的操做方法也要熟练，犀牛书多去看看2.vue和react我这里就不说孰好孰坏，每一个人使用感受不一样，但若是你想往前端工程化方向走，在国内，vue会比较容易入门。3.遇到没作过的事，没碰过的技术，不要惧怕，多上网找资料，即便跟同事主管沟通，这个过程你会成长不少。4.坚持作有成就感和有意义的事