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()
         ....
     }
     

首先贴出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写的文档超级详细，easywebpack的配置简单，而且还有基于vue的项目，还有例子看，简直贴心。这个项目算是打通前后端的入门项目，完全没有后台支持，数据保存用mongoose，也理解了很多后台的概念，什么controller啊，定时任务、多进程、负载均衡等。平台主要功能如下：

支持客户端渲染和服务端渲染

微信登录鉴权

页面组件增删改查，复制、移动等

图片上传

微信文章一键复制

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

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

总结下来，恍如隔世，自己在这半年多中，收获了技术，肯定了自己，但自己还是有比较大的进步空间，在独自发现问题和解决问题上，有时还是需要依靠同事解决，未来肯定还是在前端这条路走到黑，越往后走，就是性能和稳定的方面的知识了。写这篇文章，希望与大家共勉。

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

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