20200320 前端开发日报

【朝花夕拾】手写 Promise 你也可以；继 NPM 被收购后，微软宣布推出 Github 口袋版；谈谈vue3.0要更新的内容相关笔记；基于 HTML5 WebGL 的发动机 3D 可视化系统；如何理解vue中的v-model？；基于Koa（Node）搭建websocket链接redis实现即时通信；图文并茂捋清JS OOP；Vue脚手架实现试卷页面—更新试题库页面及excel导出

1. 【朝花夕拾】手写 Promise 你也可以 最近这段时间由于疫情的原因，在家实在闷得慌，所以看了下 js 的一些基础知识，从前不是很了解的 Promise 突然豁然开朗了不少，于是就赶紧趁热打铁写下来（这就是温故而知新的感觉吗，哈哈哈:grin:）。 确实是待久了，:cherry_blossom:樱花:cherry_blossom:都开了。 为什么要用 Promise 一个很显然的原因就是…
2. 继 NPM 被收购后，微软宣布推出 Github 口袋版昨天除了 NPM 被微软收购的消息外，微软旗下的 Github 也正式发布了 GitHub 移动版 ，它是 iOS 和 Android上对 GitHub 网页桌面版的完全体验版。现在，我们可以随时随地在移动设备上与我们的团队保持联系，分类问…
3. 谈谈vue3.0要更新的内容相关笔记 从去年就一直说的沸沸扬扬的vue3.0发布，虽然到现在还没有正式发布的事件，但做为前端开发，我们还是要去了解的，那么vue3.0会更新什么内容呢，早在2018年11月尤大就在远程演讲中说到了，vue3.0会带来 更 快 更 小 更 易于维护 更好的 多端渲染支持 新功能（新的API） 下面就…
4. 基于 HTML5 WebGL 的发动机 3D 可视化系统工业机械产品大多体积庞大、运输成本高，在参加行业展会或向海外客户销售时，如果没有实物展示，仅凭静态、简单的图片说明书介绍，无法让客户全面了解产品，不仅工作人员制作麻烦，客户看得也费力。如果能在 Web …
5. 如何理解vue中的v-model？说到v-model，就想到了双向数据绑定，而且往往最常见的是在表单元素<input>,<textarea>,<select>中的使用。
6. 基于Koa（Node）搭建websocket链接redis实现即时通信 账户扫码登录，微信扫码授权，消息实时提醒，配置结果响应，客户端同步数据。。。 之前项目里做即时通信都是用的轮循，轮询的效率低，非常浪费资源，后面好几个项目都开始用的websocket配合koa和redis来实现，现在整理整理深入了解下整个即时通信实现的过程。 前提：需要安装的包 koa== 由 Express 幕后的原班…
7. 图文并茂捋清JS OOP OOP 相关概念复习 封装：将数据与方法封装在类的内部, 作为一个整体对外 继承：两个类建立父子关系, 子类获取父类部分成员 多态：继承而产生的相关的不同的类，其对象对同一方法可以做出不同响应 重写: 子类重新编写实现继承来的方法 重载: 一个类拥有多个同名方法 JavaScript 没有真正意义上的…
8. Vue脚手架实现试卷页面—更新试题库页面及excel导出 在之前的代码 Vue脚手架实现试卷页面 基础上新增了如下细节 当题目加入试题库的同时，在state的getters中放四个对象，分别代表单选题，多选题，判断题，简答题将购物车数组进行分类，对象的tilte为单选题，多选题，判断题，简答题 在试题库中删除单个题目时，通过filter更新试题库，于此同时分类的题库也会同…
9. 面试高频JS考查点手写实现 Function.prototype._call = function(ctx = window, …args) { const fnKey = ‘tmp_’ + Date.now(); ctx = this; const result = ctx (…args); delete ctx ; return result; }; // 第二个参数是数组 Function.prototype._apply = function(ctx = window, args = []) { const fnKey …
10. [推荐] 前端路由实现原理 何为前端路由？ 路由（Router）这个概念最先是后端出现的，是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。 前端随着 ajax 的流行，数据请求可以在不刷新浏览器的情况下进行。异步交互体验中最盛行的就是 SPA —— 单页应用。单页应用不仅仅…
11. Vue源码探秘（二）（从入口开始） 引言 在上一篇文章中，我们大概了解了 Vue.js 的构建过程，在平时使用 Vue 时，要先使用 new 运算符调用 Vue ，也就是说 Vue 是一个构造函数。 本篇文章，我会从入口开始，带大家深入了解 Vue 构造函数的真实模样以及它是如何初始化的。 Vue入口 在 web 应用下，我们来分析 Runtime + Compiler 构建出来…
12. 撸一个自动压缩工具（nodejs） 针对这个场景，作为一名合格的前端工程师，应该可以有一些自己的想法，提高工作效率；使用 NODEJS 撸一个自动压缩工具，减少这些冗余的无意义的工作。 使用到哪些内容 tinify cluster path fs events chalk process 如果有同学对这些模块不知道的话，可以去官网学习一下 封…
13. JS 的类型转换 深夜十一点，刷着朋友圈，突然刷到这么一张图，内心：怎么样，我 JS 厉害吧 手动滑稽。 然而，在我仔细把所有的 JS 语句都看完之后，发现自己还有几个不知原因…. emmmm，应该不只有我一个人吧！ 看了下，不知道原因的大部分都是 JS 的类型转换相关的问题，所以就了解了一下 JS 类型转换相关的内容。 要想搞明白…
14. 104道 CSS 面试题，助你查漏补缺最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题，本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的可以来一次全方位的检漏…
15. Vue源码之虚拟DOM 上一篇我们讲了一下 Vue 的双向数据绑定原理，今天我们开始讲一下 Vue 的 虚拟DOM 。 本文会先分析一下 Vue 的 虚拟DOM ，然后下一篇文章会带大家撸一个简易的 虚拟DOM Vue虚拟DOM 创建虚拟DOM https://github.com/wclimb/vue/blob/dev/src/core/vdom/vnode.js export default class VNode { …
16. （最新版）如何正确移除 Pyppeteer 中的window.navigator.webdriver 在 《在Pyppeteer中正确隐藏window.navigator.webdriver 》 一文中，我们介绍了修改源代码使Pyppeteer 打开的 Chrome 隐藏 window.navigator.webdriver 的方法。 然而时过境迁，随着 Chrome 版本升级，这一方法也宣告失效。 在前几天的文章 《（最新版）如何正确移除Selenium中的 window.navigator.webdriver 》 …
17. （最新版）如何正确移除Selenium中的 window.navigator.webdriver 在 《一日一技：如何正确移除Selenium中window.navigator.webdriver的值》 一文中，我们介绍了在当时能够正确从Selenium启动的Chrome浏览器中移除 window.navigator.webdriver 的方法。 后来时过境迁，Chrome升级了版本，导致当时的方法已经失效。如下图所示： 针对最新版本的Chrome，我们应该如何正确隐…
18. JavaScript代码是怎么执行的？ 众所周知，JavaScript是单线程语言。所以JavaScript是按顺序执行的！本文完（狗头） 先编译再执行 变量提升 请看下面的例子： console.log(cat) catName("Chloe"); var cat = ‘Chloe’ function catName(name) { console.log("我的猫名叫 " + name); } 复制代码 按照得出的结论：&quot…
19. Vue Template 修饰符和简写，让开发效率有所提高点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
20. Vue cli3 lib模式封装汽车业务组件库支持按需引入（有组件效果演示） 前段时间看到懂车帝app有几个效果非常好的汽车展示方面的模块，再加上前年在公司写过一个关于汽车售后业务选择汽车部位的组件，就开始着手把这几个组件编写成一个组件库发布出去供大家使用，当然提供按需引入方式，使用的依然是vuecli3工具其中的vue-cli-service build –target lib做为打包工具，下面会讲如何把打包成…
21. VUE响应式系统的基本原理 这篇文章主要了解vue是如何实现数据的响应式以及这种方式的优缺点并探索更好的响应式方式 Object.defineProperty 在vue中，实现响应式的主要方式就是 Object.defineProperty ，关于 Object.defineProperty 的更多内容，可以参考 MDN 下面看一下这个方法具体如何使用 /** * obj 需要操作的目标对象 * key 需…
22. 怎样取消 JavaScript 中的异步任务有时候执行异步任务可能是很困难的，尤其是在特定的编程语言不允许取消被错误启动或不再需要的操作时。幸运的是 JavaScript 提供了非常方便的功能来中止异步活动。在本文中，你可以学到如何创建可中止的函数。
23. （开源）从0打造H5可视化搭建系统 – 易动（vue+ts+egg）
24. vue进阶之路|vue+vue-i18n+element实现多语言 安装 多语言配置 element 内置语言国际化 踩到的坑以及解决方案 安装 npm install vue-i18n 复制代码 配置 i18n.js import Vue from ‘vue’; import locale from ‘element-ui/lib/locale’; import VueI18n from ‘vue-i18n’; import en from ‘./langs/en’; import sc from ‘./langs/cn’; import tc fro…
25. 使用 React Testing Library 和 Jest 完成单元测试在2020的今天，构建一个 web 应用对于我们来说，并非什么难事。因为有很多足够多优秀的的前端框架（比如 React，Vue 和 Angular）；以及一些易用且强大的UI库（比如 Ant Design）为我们保驾护航，极大地缩短了应…
26. 从编译后的js代码看typescript中的面向对象 众所周知，ts目前是不能直接编译成机器码运行的 需要转换成js代码后运行 由于js的动态特性，所以我也很好奇编译后的代码是怎么样的呢 废话不多说，直接切入正题 注：(ts版本为:3.1,编译的js版本为：ES5) 封装 public/private/protected 首先写一个基类 class Person { public name: string; pri…
27. Webpack4不求人(5)——编写自定义插件 Webpack通过Loader完成模块的转换工作，让“一切皆模块”成为可能。Plugin机制则让其更加灵活，可以在Webpack生命周期中调用钩子完成各种任务，包括修改输出资源、输出目录等等。 今天我们一起来学习如何编写Webpack插件。 构建流程 在编写插件之前，还需要了解一下Webpack的构建流程，以便在合适的时机插入合适的插…
28. Go 语言 Web 编程：数据库应用方法 今天我们继续接着前几篇关于GoWeb编程的文章往下延伸。在Web应用程序中几乎每个应用场景都需要存储和检索数据库中的数据。当你处理动态内容，为用户提供表单以输入数据或存储登录名和密码凭据以供用户进行身份验证时，都需要用到数据库。MySQL数据库是整个互联网中最常用的数据库。MySQL已经存在了很长时间，还在不停的…
29. 爬虫管理平台 Crawlab 新功能介绍：用 Git 做 CI/CD 前言 相信爬虫（网络爬虫）是开发者们耳熟能详的数据采集技术。其中基于 Python Twisted 异步框架的 Scrapy，是灵活且强大的爬虫框架。而 Scrapyd 是 Scrapy 默认的爬虫管理服务，能够简单的执行、监控爬虫任务，除此之外，Scrapyd 还支持爬虫版本管理功能。后来基于 Scrapyd 的爬虫平台如雨后春笋般涌现出来，…

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多