2017前端技術總結：收穫非淺，但仍需進步

weixin_33840661發表於2018-01-14
前端

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

相關文章