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.堅持作有成就感和有意義的事