w3cfed (Martin Ager Adams)

只推荐一本 JavaScript 书，你推荐哪本？

w3cfed — Sun, 05 Jul 2020 12:44:50 +0800

嗨，我是 Martin。最近为了统一社区称谓，都换成 Martin Ager Adams。前端老王就是 Martin 啦.

前言

前端世界，技术层数不穷。尽管更新速度已经放缓，刚入门的票友总还是鸭梨山大。

前端三剑客 —— HTML、CSS、JavaScript 中面试问的最多的就是 JS。

全网的资料浩如烟海，我们如何学习 JS 呢？别急，今天 Martin 给大家介绍一必看的网站。

首先说一句，它不是 MDN，但是它的确和 MDN 一样重要。

把它、MDN、红宝书列为前端必看的资料。

知乎

如果只能推荐一本 JavaScript 的书，你会推荐哪本？

这个教程解决了现存 JavaScript 书籍最大的痛点：实时性。这是本教程的第一大特色。

《现代 JavaScript 教程》以最新的 JavaScript 标准为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。保证了内容能够与最新的 ECMAScript 保持同步。

第二大特色是，为读者搭建了良好的学习路线，由浅入深，内容足够详细也足够全面。当然，这里的全面是指在 JavaScript 语言层面的，不包括 React，Vue 等框架的教学。

这个教程主要分为三个部分：

入门： 主要为 JavaScript 语言方面的内容，包括数据类型，循环，对象，闭包，Class，原型，继承，Promise，ES Module 等基础知识。
提升： 包括 BOM 和 BOM 的相关内容。
进阶： 包括网络请求，Web Components，正则，动画，浏览器缓存等相关内容。

第三大特色是：每节内容后，都给出了高质量的课后习题和解析。通过做题可以帮你检验自己的学习效果，并巩固新学到的知识。

教程

第 1 部分 JavaScript 编程语言

第 2 部分浏览器：文档，事件，接口

第 3 部分其他文章

参考

如果只能推荐一本 JavaScript 的书，你会推荐哪本？

关注

欢迎小伙伴，在评论区写出你最新喜欢的一本 JavaScript 的书。

[目前不招人了，帖子作废] 深圳风变科技招聘前端开发

w3cfed — Fri, 12 Jun 2020 16:52:25 +0800

[目前不招人了，帖子作废] 深圳风变科技招聘前端开发

分享一个神奇的网站。前端、设计、后端、产品都可以进来看一下

w3cfed — Tue, 26 May 2020 07:23:35 +0800

分享理由

这些插画太美了，放到自己的网站，B 格一下子提升很多倍。

网站地址

https://undraw.co/illustrations

网站截图

版权信息

可以免费使用啦。

Puppeteer 爬取豆瓣小组公开信息

w3cfed — Mon, 25 May 2020 12:59:23 +0800

题外话

老王，最近取了笔名。不仅仅是笔名，字、号也统统安排。

上官追风，字追风，号追风居士。

非要给它一个解释的话，那就是「追风少年宅家里」。

老王的行文路线其实就是他的思维路线路。

Puppeteer

面对未知的事物，最好的老师显然是搜索引擎，而搜索引擎中公认最好的又是 Google 搜索。

Puppeteer 文档

Github: https://github.com/puppeteer/puppeteer

英文文档：https://pptr.dev

中文文档：https://zhaoqize.github.io/puppeteer-api-zh_CN

Puppeteer 简介

以下介绍摘录自中文文档。

Puppeteer 读作 /puh·puh·teer/，是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行，但是可以通过修改配置文件运行 “有头” 模式。

生成页面 PDF。
抓取 SPA「单页应用」并生成预渲染内容（即 SSR「服务器端渲染」）。
自动提交表单，进行 UI 测试，键盘输入等。
创建一个时时更新的自动化测试环境。使用最新的 JavaScript 和浏览器功能直接在最新版本的 Chrome 中执行测试。
捕获网站的 timeline trace，用来帮助分析性能问题。
测试浏览器扩展。

项目背景

老王开始了电鸭社区「征稿」板块的事务，需要大量联系征稿人来电鸭社区发征稿贴。

偶然发现一个豆瓣小组有征稿人签到帖，那怎么办？手动复制粘贴是不可能的，马上动手写小爬虫。

代码实战

第一步：创建项目

创建douban.js文件
粘贴官网的示例代码

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://douban.com');
    await page.screenshot({path: 'example.png'});
    await browser.close();
})();

npm安装Puppeteer

别急，还不能运行代码呢。开启终端到项目根目录npm安装Puppeteer

npm i puppeteer

需要等待Chromium安装完，网络不好的小伙伴，自己想想办吧。

修改package.json文件

{
  "name": "douban",
  "version": "1.0.0",
  "scripts": {
    "start": "node ./douban.js"
  },
  "dependencies": {
    "puppeteer": "^3.1.0"
  }
}

第二步：模拟登陆

访问目标页面，发现需要登陆。

分析登陆页面结构

我选择了密码登录，降低复杂度。

我们需要干什么呢?

打开页面
点击密码登录
输入账号
输入密码
点击登陆

代码示例

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: true,
        timeout: 50000
    })

    const page = await browser.newPage()

    // 去豆瓣那个页面
    await page.goto('https://accounts.douban.com/passport/login', {
        waitUntil: 'networkidle2'  // 网络空闲说明已加载完毕
    });

    // 点击搜索框拟人输入
    const clickPhoneLogin = await page.$('.account-tab-account')

    await clickPhoneLogin.click()

    const name = 'xxxxxxxxxx'
    await page.type('input[id="username"]', name, {delay: 0})

    const pwd = 'xxxxxxxxxx'
    await page.type('input[id="password"]', pwd, {delay: 1})

    // 获取登录按钮元素
    const loginElement = await page.$('div.account-form-field-submit > a')

    await loginElement.click()

    await page.waitForNavigation()

    await browser.close()
})();

最终效果

第三步：爬取数据

有了前面的基础，后面我就不详细讲啦。

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        timeout: 50000
    })

    const page = await browser.newPage()

    // 去豆瓣登陆页面
    await page.goto('https://accounts.douban.com/passport/login', {
        waitUntil: 'networkidle2'  // 网络空闲说明已加载完毕
    });

    // 点击搜索框拟人输入
    const clickPhoneLogin = await page.$('.account-tab-account')

    await clickPhoneLogin.click()

    const name = 'xxxxxxxx'
    await page.type('input[id="username"]', name, {delay: 0})

    const pwd = 'xxxxxxxx'
    await page.type('input[id="password"]', pwd, {delay: 1})

    // 获取登录按钮元素
    const loginElement = await page.$('div.account-form-field-submit > a')

    // 点击按钮，开始登陆
    await loginElement.click()

    await page.waitForNavigation()


    // 目标页面 url
    let url = 'https://www.douban.com/group/topic/112565224/?start='
    // 翻页参数
    let pages = [0, 100, 200, 300, 400, 500]

    // 定义爬取函数
    async function next(url) {
        await page.goto(url, {
            waitUntil: 'networkidle2'  // 网络空闲说明已加载完毕
        })

        return await page.$$eval("div.reply-doc.content > p", e => {

            let a = []

            e.forEach(element => {
                a.push(element.innerText)
            })

            return a
        })
    }

    // 拼接文本字符串
    let data = ''

    for (const index of pages) {
        let res = await next(url + index)
        data = res.join('\n\n\n-----------------------------------------------------------\n\n') + data
    }

    // 查看一下数据
    console.log(data)  

    await browser.close()
})();

最终效果

第四步：写入数据

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        timeout: 50000
    })

    const page = await browser.newPage()

    page.setViewport({
        width: 1920,
        height: 1080
    })

    // 去豆瓣登陆页面
    await page.goto('https://accounts.douban.com/passport/login', {
        waitUntil: 'networkidle2'  // 网络空闲说明已加载完毕
    });

    // 点击搜索框拟人输入
    const clickPhoneLogin = await page.$('.account-tab-account')

    await clickPhoneLogin.click()

    const name = 'xxxxxxxx'
    await page.type('input[id="username"]', name, {delay: 0})

    const pwd = 'xxxxxxxx'
    await page.type('input[id="password"]', pwd, {delay: 1})

    // 获取登录按钮元素
    const loginElement = await page.$('div.account-form-field-submit > a')

    // 点击按钮，开始登陆
    await loginElement.click()

    await page.waitForNavigation()


    // 目标页面 url
    let url = 'https://www.douban.com/group/topic/112565224/?start='
    // 翻页参数
    let pages = [0, 100, 200, 300, 400, 500]

    // 定义爬取函数
    async function next(url) {
        await page.goto(url, {
            waitUntil: 'networkidle2'  // 网络空闲说明已加载完毕
        })

        return await page.$$eval("div.reply-doc.content > p", e => {

            let a = []

            e.forEach(element => {
                a.push(element.innerText)
            })

            return a
        })
    }


    // 拼接文本字符串
    let data = ''

    for (const index of pages) {
        let res = await next(url + index)
        data = res.join('\n\n\n-----------------------------------------------------------\n\n') + data
    }

    // 写入文件
    fs.writeFile('douban.txt',data,'utf8',function(error){
        if(error){
            console.log(error);
            return false;
        }
        console.log('写入成功');
    })

    await browser.close()
})();

实战反思

代码还需要优化，尤其是翻页写的很差。
能不能分模块来实现。这段代码中，模拟登陆、爬取目标、写入文件都是揉在一起的。
暂时就这些啦。

完整代码

https://gist.github.com/w3cfed/75217423f86cc9106976d5beffca745b

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        timeout: 50000
    })

    const page = await browser.newPage()

    // 去豆瓣登陆页面
    await page.goto('https://accounts.douban.com/passport/login', {
        waitUntil: 'networkidle2'  // 网络空闲说明已加载完毕
    });

    // 点击搜索框拟人输入
    const clickPhoneLogin = await page.$('.account-tab-account')

    await clickPhoneLogin.click()

    const name = 'xxxxxxx'
    await page.type('input[id="username"]', name, {delay: 0})

    const pwd = 'xxxxxxxx'
    await page.type('input[id="password"]', pwd, {delay: 1})

    // 获取登录按钮元素
    const loginElement = await page.$('div.account-form-field-submit > a')

    // 点击按钮，开始登陆
    await loginElement.click()

    await page.waitForNavigation()


    // 目标页面 url
    let url = 'https://www.douban.com/group/topic/112565224/?start='
    // 翻页参数
    let pages = [0, 100, 200, 300, 400, 500]

    // 定义爬取函数
    async function next(url) {
        await page.goto(url, {
            waitUntil: 'networkidle2'  // 网络空闲说明已加载完毕
        })

        return await page.$$eval("div.reply-doc.content > p", e => {

            let a = []

            e.forEach(element => {
                a.push(element.innerText)
            })

            return a
        })
    }


    // 拼接文本字符串
    let data = ''

    for (const index of pages) {
        let res = await next(url + index)
        data = res.join('\n\n\n-----------------------------------------------------------\n\n') + data
    }

    // 写入文件
    fs.writeFile('douban.txt',data,'utf8',function(error){
        if(error){
            console.log(error);
            return false;
        }
        console.log('写入成功');
    })

    await browser.close()
})();

项目二 | 在线 Markdown 简历

w3cfed — Mon, 04 May 2020 05:44:51 +0800

名称

1024 RESUME

地址

https://resume.1024.cool

Github

https://github.com/1024-cool/markdown-resume

背景

Jack Wang 要开始新的求职生涯哟。求职大概几件事情得做。

简历
面试
合同

但是市面上符合程序员的求职简历模板真的太少了。我就没找到啊。 功夫不负有心人。找到了一个哟。

冷熊简历 http://cv.ftqq.com

前辈做的真不错。索性，我照抄一个项目。代码都是我写的，前辈是 React，我就搞一个 Vue。说干就干！

预览

技术栈

Vue
Vue eventsBus
vue-editor
localStorage
Node
Express

剩余任务

Markdown or HTML To PDF
PDF 下载
配色修改

欢迎大家 PR 哟。觉得不错的话，给一个 Star 吧。

项目一 | 远程工作信息收集站 yuancheng.works

w3cfed — Fri, 17 Apr 2020 17:13:09 +0800

小插曲

开始很纠结，买了一个 yuancheng.works 域名会不会冒犯到 yuancheng.work 站长。

还在群里咨询了 @Phodal 等前辈。重新搞一个新域名，yuancheng.works 重定向到那个域名上。

后来，我仔细想了一下。

我仅仅是搜集远程工作信息，不求啥利益，最多网站有流量了，挂点儿谷歌广告，养活自己的服务器。

思考再三，我还是用了这个域名，目前穷，裸辞在家学习。

远程.works 的初衷

给大家提供一个了解远程工作的窗口。

远程工作是一种选择，不是逃避，不是不想上班的接口，

以下内容，摘录自电鸭社区

远程不是终极奥义，工作与生活，现实与理想的平衡才是。

不是所有企业，也并非所有个人都适合远程工作。任何事物都有两面性，远程自然也不例外。关于远程的优劣，已经有太多人分享，我不在此赘述。

远程、兼职、外包、临时雇佣、斜杠青年、共享员工等高自由度的工作方式，都是对朝九晚五主流工作方式的一种良性补充，不可能完全替代，也没必要全盘替代。

自由的本质并非随心所欲，而是可以自我选择。

「只工作，不上班」并非 “不工作，不上班”，别拿清闲当自由。

在抱怨备受压迫，苦不得志之前，想想自己为此付出过多少真正的努力？！

不是朝九晚五没意义，而是你把它过成了没意义。

为自己内心所要而工作，而不是为应付朝九晚五而上班。

远程.works

计划任务

增加信息源 (目前只有电鸭社区的信息)
中文远程工作、英文远程工作
远程工作公司列表
......

技术栈（用到的轮子）

Egg
axios
cross-env
egg-bin
egg-cors
egg-scripts
egg-validate
egg-view-vue-ssr
cheerio
sync-request
moment
vue
vue-router
vue-hot-reload-api
vuex
vuex-router-sync 如图：

【电鸭社区发起】与子同袍！是时候该我们支援海外华人了

w3cfed — Mon, 23 Mar 2020 19:01:30 +0800

我是电鸭社区的共建者，老王。原贴地址：https://eleduck.com/posts/6XNfOL

我是大灰，是一枚远程工作多年的老司机，是国内自由工作社区 - 电鸭社区的站长。

有个大家都熟悉的段子：这场疫情国内打上半场，国外打下半场，海外华人打全场。社区里有个共建者@Char，是加拿大的华人开发者。从他的嘴里我知道：

"在国内疫情最严重的时候，很多海外华人发动身边资源几乎把本地市面上的口罩、护目镜和防护服全部买空，还要夜里一个一个电话打通国内物流通道，一路确保物资送到前线的医护人员手中。但是等轮到自己所在的国家和地区疫情日益严重的时候，却已经什么都买不到了"

▲知道我们要提供帮助，加拿大 - 曼省的华人谢谢刷屏。

看得我既心酸又庆幸。庆幸为自己，面对同样的疫情灾难，我可以在自己国家的土地上，安心且自信的面对；心酸为他们，在异国土地上，在"CHINESE VIRUS"的有色眼镜甚至暴力威胁下，他们承受的，远比我们想象的要多。

国内疫情爆发的时候，海外华人对国内的支援大家都看到了，能捐的大多给了我们，现在他们自己反而物资匮乏。是时候，该我们来支援他们了。

需要帮助的人很多，我们只能先从我们能做的开始：

海外求助信息搜集：社区里有一些熟识海外开发者，我们会委托他们作为海外支援者，收集他们当地需要支援的华人家庭的求助信息。发布在 github.com/eleduck/mas… 国内物/资募集邮寄：发动国内的朋友捐口罩和资金，成立志愿者团队，邮寄给海外华人。 OK，如上所说，如果你也想帮助海外华人，那么你可以：

给我们捐口罩

目前只需要正规的一次性外科医用口罩或者 N95 口罩接收地址：广州市天河区黄埔大道西 122 号星辉中心 17 楼黄金健 13002001175 为了方便跨国寄送，志愿者给我们提供的地址，我本人已核实，可放心邮寄：）所有捐赠我们将一一记录，公开在社区，接受监督；给我们捐款：

这些捐款将被我们用来就近采买口罩、支付邮费；为统计方便，暂只接受¥20 以上捐款；所有款项将一一记录，公开在社区，接受监督；收款微信：大灰个人微信，提现手续费等，我自行承担

加入志愿者团队，我们目前需要：

base 在海外的华人开发者，牵头收集当地华人的求助信息，push 到 Github 上; 推广组：完善并推广我们的行动，影响更多人，帮助更多人；信息组：对接海外华人的求助信息，核实地址，明确需求；输出邮寄 list；物资组：接收国内捐赠者的快递；按信息组的名单向国外邮寄物资；最好在北上广等方便发国际快递的地方；帮助我们扩散这次行动：

去 follow and star 我们在 github 上的项目 https://github.com/eleduck/maskhero

在朋友圈，或者其他群转发扩散你现在看到的这个链接。行动时间线：（持续更新）

3 月 21 日

电鸭社区共建小组决定发起这次行动； @ 大湿@LPY开始在 Github 上搭建项目； @ 大灰开始撰写行动方案；@Char开始梳理海外求助信息提交流程； 3 月 22 日

新增@Jack@Kevin 两位志愿者； @Jack开始搜集国内的扩散 list； 3 月 23 日

比利时华人开发者@HelloWorld加入志愿小组，开始收集当地华人求助信息；

@Char 开始在当地华人群扩散我们能提供的帮助

中午 12 点（加拿大 - 温尼伯当地时间 12 点），我们开始收到海外华人的求助信息：

1 点左右：当地华人也开始集资捐赠，响应我们的行动

一位温哥华的华人联系到我们，捐赠 1000 个口罩给我们

也有朋友找来，做志愿快递员，666！

备注：我们的 Github,两位开发志愿还没完全做好，比较简陋，有熟悉 PYTHON 的同学可以来联系 @greatghoul 参与贡献。

w3cfed (Martin Ager Adams)

只推荐一本 JavaScript 书，你推荐哪本？

前言

推荐

知乎

教程

第 1 部分 JavaScript 编程语言

第 2 部分 浏览器：文档，事件，接口

第 3 部分其他文章

参考

关注

[目前不招人了，帖子作废] 深圳风变科技招聘前端开发

分享一个神奇的网站。前端、设计、后端、产品都可以进来看一下

分享理由

网站地址

网站截图

版权信息

Puppeteer 爬取豆瓣小组公开信息

题外话

Puppeteer

Puppeteer 文档

Puppeteer 简介

项目背景

代码实战

第一步：创建项目

第二步：模拟登陆

第三步：爬取数据

第四步：写入数据

实战反思

完整代码

项目二 | 在线 Markdown 简历

名称

地址

Github

背景

预览

技术栈

剩余任务

欢迎大家 PR 哟。觉得不错的话，给一个 Star 吧。

项目一 | 远程工作信息收集站 yuancheng.works

小插曲

远程.works 的初衷

远程.works

计划任务

技术栈（用到的轮子）

【电鸭社区发起】与子同袍！是时候该我们支援海外华人了

第 2 部分浏览器：文档，事件，接口