1. 写在前面
半年没有更新文章了, 甚是惭愧
很荣幸, 4 月份我通过了高德地图的面试, 加入了阿里大家庭. 这段时间一直在忙着适应新的工作环境, 学习新的技术栈, 所以没有输出文章 (PS: 其实是懒).
先明确一下写这篇文章的目的, 相信大前端这个词大家都不陌生了. 这个技术迭代越来越快的时代, 市场对工程师的技术素质提出了新的要求. 如果客户端的小伙伴只知道画界面, 机械的调用各种 Utils 拉接口, 填充数据的话一定会被市场淘汰. 只有拥抱变化, 认清自己才能立于不败之地. 当前客户端最火的技术就是类 RN 开发了, 想要学这块的技术就必须对 JS 有一定的理解. 从广义的角度来说学好了 JS 就可以玩 Node 了, Node 这个神器下可搞爬虫, 上可做服务, 可谓全栈必备. 所以重点就来了, 搞客户端的同学怎样快速入门 JS 呢? 这篇文章就是分享一下我的转型经验.
2. 怎样快速入门 JS 呢?
2.1 补充必要的基础知识
这一点非常重要, 进入一个新的领域时总是要努力迈过最基本的门槛的. 对于刚进入前端领域的客户端小伙伴们来说, ES6 的基本语法就是大前端的 "门槛". 入门时建议看下阮一峰的《ECMAScript 6 入门》 http://es6.ruanyifeng.com/ , 这本书是开源的, 可以在线看也可以买纸质版的. 个人不建议入门时就看《JavaScript 高级程序设计 》等进阶的书, 毕竟路要一步一步走, 刚开始识字的时候看《新华字典》不仅吸收不到营养还容易打击自己学习的积极性.
那基础知识要补充到什么样的程度呢? 对于普通的开发者来讲, 第一阶段知道这些足矣: Map,Set,Array 的用法, 以及什么是 Promise,Generator.
2.2 找到可以让自己亢奋的技术点
这一条因人而异, 相信每个工程师对技术方向的追求都不一样. 有人热衷于前端比较酷炫的动画效果, 有人热衷于算法... 而我对爬虫情有独钟.
我一直在筹划着独立搞一个完整的项目, 毕竟很多坑是需要亲自趟一下才知道水有多深, 这个项目应该包含 Service(DB), 小程序, 客户端 (类 RN 开发), 爬虫系统. 不管什么样的项目, 总是需要数据来填充的, 所以学习爬虫是升级打怪的第一步.
那怎么快速搞定这一群拦路虎呢? 学 Node https://Node.JS.org/en/ , 当然学习 Node 的前提是对 JS 有了基本的了解. 非常好用的 cherrio https://GitHub.com/cheeriojs/cheerio 就是 Node 的一个模块.
2.3 由点到面发散自己的知识
接下来一起看看我是怎么通过学爬虫来加深对 ES6 的理解的.
2.3.1 掌握最基本的 API
这里有份 cherrio 的中文文档, 3-4 小时就可以通读一遍, 方便接下来搞事情. 我的经验学新技术一定要动手写出来, 马上观花还不如去打一局农药. 其中选择器一栏值得重点关注一下, 这块是接下来实战的理论依据.
2.3.2 实战 - 爬取 "电影天堂" 的数据
1. 案例一
电影天堂官网地址: http://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( 这是 Node.JS 里一个非常方便的客户端请求代理模块), 他的作用是把页面的源数据拉下来交给 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 的基础知识 http://es6.ruanyifeng.com/#docs/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 http://es6.ruanyifeng.com/#docs/generator 与 语法糖 async http://es6.ruanyifeng.com/#docs/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 |
---|---|
mailto:weixinjie1993@gmail.com | |
W2006292 | |
GitHub | https://GitHub.com/weixinjie |
blog | juejin.im/user/57673c… |
来源: https://juejin.im/post/5ba4e22f5188255c6140ca66