个人大前端之旅
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. 前端之旅【目录】