我的大前端之旅

半年没有更新文章了，甚是惭愧

很荣幸，4月份我通过了高德地图的面试，加入了阿里大家庭。这段时间一直在忙着适应新的工作环境，学习新的技术栈，所以没有输出文章（PS:其实是懒）。

先明确一下写这篇文章的目的，相信 大前端 这个词大家都不陌生了。这个技术迭代越来越快的时代，市场对工程师的技术素质提出了新的要求。如果客户端的小伙伴只知道画界面，机械的调用各种Utils拉接口、填充数据的话一定会被市场淘汰。只有 拥抱变化，认清自己 才能立于不败之地。当前客户端最火的技术就是类RN开发了，想要学这块的技术就必须对JS有一定的理解。从广义的角度来说学好了JS就可以玩Node了，Node这个神器下可搞爬虫，上可做服务，可谓全栈必备。所以重点就来了，搞客户端的同学怎样快速入门JS呢？这篇文章就是分享一下我的转型经验。

2.怎样快速入门JS呢？

2.1 补充必要的基础知识

这一点非常重要，进入一个新的领域时总是要努力迈过最基本的门槛的。对于刚进入前端领域的客户端小伙伴们来说，ES6的基本语法就是大前端的“门槛”。入门时建议看下阮一峰的《ECMAScript 6 入门》，这本书是开源的，可以在线看也可以买纸质版的。个人不建议入门时就看《JavaScript 高级程序设计 》等进阶的书，毕竟路要一步一步走，刚开始识字的时候看《新华字典》不仅吸收不到营养还容易打击自己学习的积极性。

那基础知识要补充到什么样的程度呢？ 对于普通的开发者来讲，第一阶段知道这些足矣:Map、Set、Array的用法，以及什么是Promise、Generator。

2.2 找到可以让自己亢奋的技术点

这一条因人而异，相信每个工程师对技术方向的追求都不一样。有人热衷于前端比较酷炫的动画效果、有人热衷于算法... 而我对爬虫情有独钟。

我对自己的技术定位是全栈，所以一直想独立搞一个完整的项目（毕竟很多坑是需要亲自趟一下才知道水有多深），这套系统应该包含 Service(DB)、小程序、客户端(类RN开发)、爬虫系统。不管什么样的项目，总是需要数据来填充的，所以学习爬虫是升级打怪的第一步。

就是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的认识。

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感兴趣的同学也可以找我内推下