個人大前端之旅
1.寫在前面
半年沒有更新文章了，甚是慚愧前端
很榮幸，4月份我經過了高德地圖的面試，加入了阿里你們庭。這段時間一直在忙着適應新的工做環境，學習新的技術棧，因此沒有輸出文章（PS:實際上是懶）。node
先明確一下寫這篇文章的目的，相信大前端這個詞你們都不陌生了。這個技術迭代愈來愈快的時代，市場對工程師的技術素質提出了新的要求。若是客戶端的小夥伴只知道畫界面，機械的調用各類Utils拉接口、填充數據的話必定會被市場淘汰。只有擁抱變化，認清本身才能立於不敗之地。當前客戶端最火的技術就是類RN開發了，想要學這塊的技術就必須對JS有必定的理解。從廣義的角度來講學好了JS就能夠玩Node了，Node這個神器下可搞爬蟲，上可作服務，可謂全棧必備。因此重點就來了，搞客戶端的同窗怎樣快速入門JS呢？這篇文章就是分享一下個人轉型經驗。git
2.怎樣快速入門JS呢？
2.1 補充必要的基礎知識
這一點很是重要，進入一個新的領域時老是要努力邁過最基本的門檻的。對於剛進入前端領域的客戶端小夥伴們來講，ES6的基本語法就是大前端的「門檻」。入門時建議看下阮一峯的《ECMAScript 6 入門》，這本書是開源的，能夠在線看也能夠買紙質版的。我的不建議入門時就看進階的書，畢竟路要一步一步走，剛開始識字的時候看《新華字典》不只吸取不到養分還容易打擊本身學習的積極性。es6
那基礎知識要補充到什麼樣的程度呢？ 對於普通的開發者來說，第一階段知道這些足矣:Map、Set、Array的用法，以及什麼是Promise、Generator。github
2.2 找到可讓本身亢奮的技術點
這一條因人而異，相信每一個工程師對技術方向的追求都不同。有人熱衷於前端比較酷炫的動畫效果、有人熱衷於算法... 而我對爬蟲情有獨鍾。面試
我一直在籌劃着獨立搞一個完整的項目，畢竟不少坑是須要親自趟一下才知道水有多深，這個項目應該包含 Service(DB)、小程序、客戶端(類RN開發)、爬蟲系統。無論什麼樣的項目，老是須要數據來填充的，因此學習爬蟲是升級打怪的第一步。算法
2.3 由點到面發散本身的知識
接下來一塊兒看看我是怎麼經過學爬蟲來加深對ES6的理解的。chrome
2.3.1 掌握最基本的API
這裏有份 cherrio 的中文文檔，3-4小時就能夠通讀一遍，方便接下來搞事情。個人經驗學新技術必定要動手寫出來，立刻觀花還不如去打一局農藥。其中選擇器一欄值得重點關注一下，這塊是接下來實戰的理論依據。小程序
2.3.2 實戰-爬取「電影天堂」的數據
1. 案例一
電影天堂官網地址:www.dytt8.net/ ，接下來咱們練習爬取首頁左側欄「最新發布168部影視」的電影數據。c#
- 分析頁面元素打開 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。不少小夥伴必定會看的一臉懵逼。
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 |
|---|---|
| weixinjie1993@gmail.com | |
| W2006292 | |
| github | github.com/weixinjie |
| blog | juejin.im/user/57673c… |
- 1. 個人前端找工做之旅
- 2. 分享個人前端學習之旅
- 3. 個人大創之旅
- 4. 個人前端之路
- 5. 2018--個人前端之路
- 6. 個人前端之路（上）
- 7. 個人前端之路（中）
- 8. 前端測試-大醬的冬季前端之旅第一遊
- 9. 前端學習之旅——HTML
- 10. 前端之旅【目錄】
- 更多相關文章...
- • Docker 命令大全 - Docker教程
- • WSDL 端口 - WSDL 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • JDK13 GA發佈：5大特性解讀
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 個人前端找工做之旅
- 2. 分享個人前端學習之旅
- 3. 個人大創之旅
- 4. 個人前端之路
- 5. 2018--個人前端之路
- 6. 個人前端之路（上）
- 7. 個人前端之路（中）
- 8. 前端測試-大醬的冬季前端之旅第一遊
- 9. 前端學習之旅——HTML
- 10. 前端之旅【目錄】