我的大前端之旅

weixinjie發表於2019-03-01
前端

1.寫在前面

半年沒有更新文章了，甚是慚愧

很榮幸，4月份我通過了高德地圖的面試，加入了阿里大家庭。這段時間一直在忙著適應新的工作環境，學習新的技術棧，所以沒有輸出文章（PS:其實是懶）。

先明確一下寫這篇文章的目的，相信大前端這個詞大家都不陌生了。這個技術迭代越來越快的時代，市場對工程師的技術素質提出了新的要求。如果客戶端的小夥伴只知道畫介面，機械的呼叫各種Utils拉介面、填充資料的話一定會被市場淘汰。只有擁抱變化，認清自己才能立於不敗之地。當前客戶端最火的技術就是類RN開發了，想要學這塊的技術就必須對JS有一定的理解。從廣義的角度來說學好了JS就可以玩Node了，Node這個神器下可搞爬蟲，上可做服務，可謂全棧必備。所以重點就來了，搞客戶端的同學怎樣快速入門JS呢？這篇文章就是分享一下我的轉型經驗。

2.怎樣快速入門JS呢？

2.1 補充必要的基礎知識

這一點非常重要，進入一個新的領域時總是要努力邁過最基本的門檻的。對於剛進入前端領域的客戶端小夥伴們來說，ES6的基本語法就是大前端的“門檻”。入門時建議看下阮一峰的《ECMAScript 6 入門》，這本書是開源的，可以線上看也可以買紙質版的。個人不建議入門時就看進階的書，畢竟路要一步一步走，剛開始識字的時候看《新華字典》不僅吸收不到營養還容易打擊自己學習的積極性。

那基礎知識要補充到什麼樣的程度呢？ 對於普通的開發者來講，第一階段知道這些足矣:Map、Set、Array的用法，以及什麼是Promise、Generator。

2.2 找到可以讓自己亢奮的技術點

這一條因人而異，相信每個工程師對技術方向的追求都不一樣。有人熱衷於前端比較酷炫的動畫效果、有人熱衷於演算法... 而我對爬蟲情有獨鍾。

我一直在籌劃著獨立搞一個完整的專案，畢竟很多坑是需要親自趟一下才知道水有多深，這個專案應該包含 Service(DB)、小程式、客戶端(類RN開發)、爬蟲系統。不管什麼樣的專案，總是需要資料來填充的，所以學習爬蟲是升級打怪的第一步。

目標
那怎麼快速搞定這一群攔路虎呢？學Node，當然學習Node的前提是對JS有了基本的瞭解。非常好用的cherrio就是Node的一個模組。

2.3 由點到面發散自己的知識

接下來一起看看我是怎麼通過學爬蟲來加深對ES6的理解的。

2.3.1 掌握最基本的API

這裡有份 cherrio 的中文文件，3-4小時就可以通讀一遍，方便接下來搞事情。我的經驗學新技術一定要動手寫出來，馬上觀花還不如去打一局農藥。其中選擇器一欄值得重點關注一下，這塊是接下來實戰的理論依據。

2.3.2 實戰-爬取“電影天堂”的資料

1. 案例一

電影天堂官網地址:www.dytt8.net/ ，接下來我們練習爬取首頁左側欄「最新發布168部影視」的電影資料。

我的大前端之旅

  • 分析頁面元素開啟 chrome 的開發者工具，動動你的小手找到我們想要抓取的這塊 div。如下圖: 通過分析，我們知道這是一個 class 為 co_content2 的div，它的內部包含著「ul」標籤，「ul」標籤內部則是我們希望抓取的「a」標籤。

我的大前端之旅

  • 開始動手寫抓取程式碼，經過2.3.1的學習，可以輕而易舉的寫出爬蟲程式碼。
//開始爬取首頁
function getHomePageResource(){
    let resultArray = [];
    superagent.get("http://www.dytt8.net/")
        .charset('gb2312') //解決編碼問題
        .end(function (error, data) {
            if (error) {
                console.log("error exception occured !");
                return ;
            }
            let $ = cheerio.load(data.text);    //注意傳遞的是data.text而不是data本身
            let result = $('.co_content2 ul a');
            let length = result.length;
            for(let i=1;i<length;i++){
                let text = result.eq(i).text();
                let href = result.eq(i).attr('href');
                let obj = {'名稱':text,'連結':'http://www.dytt8.net'+href};
                resultArray.push(obj)
            }
             console.log(JSON.stringify(resultArray));
        });
}
複製程式碼

注意這裡用到了 Node 的另外一個模組 superagent ( 這是 nodejs 裡一個非常方便的客戶端請求代理模組)，他的作用是把頁面的源資料拉下來交給 cherrio 進行拆分。執行了上述程式碼，Node會用 Log 輸出一個陣列，這個陣列就是我們想要的資料（程式碼寫的比較爛哈，大家湊合著看～）。

2. 案例二

爬取首頁「迅雷電影資源」的資料

我的大前端之旅
步驟跟 案例一 是一樣的，這裡直接貼程式碼。

function getXLResource(){
    //開始爬去迅雷電影資源
    superagent.get("http://www.dytt8.net/")
        .charset('gb2312') //解決編碼問題
        .end(function (error, data) {
            if (error) {
                console.log("error exception occured !");
                return next(error);
            }
            let $ = cheerio.load(data.text);    //注意傳遞的是data.text而不是data本身
            let result = $('.co_area2 .co_content8 ul table tbody').eq(1);
            let length = result.children().length;
            for(let i=0;i<length;i++){
                let text = result.children().eq(i).children().eq(0).children().eq(1).text();
                let href = result.children().eq(i).children().eq(0).children().eq(1).attr('href');
                console.log(text,'http://www.dytt8.net'+href);
            }
        });
}
複製程式碼

2.3.3 進階——發散自己的知識面

經過 2.3.2 的實戰，最起碼的加深了對這些知識點的用法

  • 函式的呼叫
  • Array Set Map等資料型別
  • for等迴圈語句
  • Object
  • 其他...

在2.1章節時，提到了Promise Generator。很多小夥伴一定會看的一臉懵逼。

我的大前端之旅
接下來，我們使用Promise對上述的案例一進行重構，只求能多增加一點對Promise的認識。

2.3.2.1 使用Promise重構

先來溫習一下 Promise 的基礎知識。 簡單來說，Promise 是來解決回掉函式巢狀太多的問題的。 直接貼程式碼：


/**
 * 使用Promise重構
 */
function getHomePageResourceByPromise(){
    let promise = new Promise(function(resolve, reject){
        superagent.get("http://www.dytt8.net/")
            .charset('gb2312') //解決編碼問題
            .end(function (error, data) {
                if (error) {
                    reject(error)
                }
                let $ = cheerio.load(data.text);    //注意傳遞的是data.text而不是data本身
                let result = $('.co_content2 ul a');
                let length = result.length;
                for(let i=1;i<length;i++){
                    let text = result.eq(i).text();
                    let href = result.eq(i).attr('href');
                    let obj = {'名稱':text,'連結':'http://www.dytt8.net'+href};
                    resultArray.push(obj);
                }
                resolve(resultArray);
            });
    });

    promise.then(function (value) {
        console.log(value);
    },function (error) {
        console.log(error)
    });
}
複製程式碼

2.3.2.2 使用Generator重構

溫習一下Generator 與 語法糖async的用法。重構之後你會知道什麼是Thunk函式，什麼是星函式... 這裡直接貼程式碼了。

/**
 * 使用Genertor重構
 */
function getHomePageResourceByPromise(){
        let promise = new Promise(function(resolve, reject){
            superagent.get("http://www.dytt8.net/")
                .charset('gb2312') //解決編碼問題
                .end(function (error, data) {
                    if (error) {
                        reject(error)
                    }
                    let $ = cheerio.load(data.text);    //注意傳遞的是data.text而不是data本身
                    let result = $('.co_content2 ul a');
                    let length = result.length;
                    for(let i=1;i<length;i++){
                        let text = result.eq(i).text();
                        let href = result.eq(i).attr('href');
                        let obj = {'名稱':text,'連結':'http://www.dytt8.net'+href};
                        resultArray.push(obj);
                    }
                    resolve(resultArray);
                });
        });
        return promise;
    }

    async function getDataByGenertor(){
        let v1 = await getHomePageResourceByPromise();
        // let v2 = await getHomePageResourceByPromise();
        return v1;
    }

    getDataByGenertor().then(function (value) {
        console.log(value);
    },function (error) {
        console.log(error)
    });

複製程式碼

2.3.4 展望——未來的計劃

通過自己寫爬蟲，加深了對JS的認識。接下來準備進軍Node服務端的知識，然後繼續基於JS搞RN 快應用 小程式等技術棧。當然學習新的技術並不能只知道怎麼用，原理類的東西也是不可少的，所以還是要看一看Google的V8引擎相關的知識。

3.最後

最後想寫一點這段時間的工作體會。記得之前很多人告訴我，在大廠就是幹著擰螺絲的活，不如小公司接觸的全面。這裡我想說下我的觀點，不管是大廠還是小廠，能match上自己的點才是最好的。一個人能成長到什麼樣的長度與在什麼公司沒有關係，與在什麼崗位也沒關係。只要足夠自律並且朝著既定方向不斷的努力，最終都會成長為自己想要的模樣。我個人比較感謝阿里這個平臺:

  • 技術功底 高德地圖作為一款全民應用，由於使用者量夠多、機型種類覆蓋全面，所以很多產品細節會被放大，這就要求從技術方案、技術細節上進行優化。這個過程會反向推動自己的技術積累。
  • 軟實力 與一群優秀的人共事會潛移默化的改變自己的做事風格、看事情的角度。相信這些軟實力會幫助我走的更遠。

綜上 個人感覺，這個平臺值得大家來嘗試一下。不為別的，只為讓自己走的更快、更遠。

低頭走路，抬頭看天，共勉～

注:下面是公司的部分職位，感興趣的小夥伴可以看一下(想找我內推下的同學可以把簡歷發我郵箱 chenmu.wxj@alibaba-inc.com )。不感興趣的就可以結束本文的閱讀了哈

注:表格中的是高德的部分客戶端職位(base北京)，如果對其他職位或者BU感興趣的同學也可以找我內推下

部門 職位
引擎研發部 高階C++開發工程師
應用開發部 移動端架構師TX
定位研發部 定位引擎高階C++工程師/專家（地圖匹配）
定位研發部 定位演算法高階工程師/專家（大資料網路定位）
定位研發部 vSLAM演算法工程師/專家（視覺定位）
引擎研發部 資深引擎開發工程師/專家
定位研發部 高精定位演算法專家
定位研發部 VSLAM資深（高階）演算法專家

About Me

contact way value
mail weixinjie1993@gmail.com
wechat W2006292
github github.com/weixinjie
blog juejin.im/user/57673c…

相關文章