我的大前端之旅

5,147 阅读8分钟

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.cn/user/308708…