20200324 前端开发日报-前端开发博客

提升你react和js编码的5个技巧；从 Event Loop 到 Promise (常见问题分析)；Emitter | 每天读一点Vue源码；2020前端面试，你准备好了吗？；关于 Babel 你必须知道的基础知识；如何实现一个React水印组件；手写JS系列:手写一个REACT SSR框架(未完结)；Vue Router原理

提升你react和js编码的5个技巧原文地址： dev.to/adancarrasc… 原文作者：Adán Carrasco 译者：花花小仙女为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。转载请联系作者。两周前，我开始做一个新项目，有些代码已经写好了。然而，没有最佳实践可遵循。当你开始做一个新项目时，重要的是一起…
从 Event Loop 到 Promise (常见问题分析) 一、同步和异步二、单线程和多线程三、evet loop 四、实战，promise 题目分析 Promise 什么是 promise？我们先明确：Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值. 什么是 async 和 await async/await 使得异步代码看起来像 ·同步…
Emitter | 每天读一点Vue源码面试的时候经常被问一些Vue源码相关的问题，通常情况下，我会在面试前恶补掘金上的面筋来对付面试，什么双向绑定的原理呀，什么虚拟dom树呀，实际上我压根儿就没仔细研究过，其一是自己真的比较菜，其二工作上也用不上，别自己给自己添堵。但后面想一下，很多事情，为之则易，不为则难，给自己设立困难（负重）才能进步…
2020前端面试，你准备好了吗？求职季又到了，最近也面试了不少web开发同学，本文也希望对正在找工作的同学有所帮助吧。请大家见谅哈。后面会持续更新，欢迎点赞~~~
关于 Babel 你必须知道的基础知识前言我第一次打开搜索引擎查询关于 Babel 的资料时，出现的竟然是关于 Babel 的传说。后来我花了小一天的时间去了解这个传说（来自《旧约圣经》）。 Babel Tower 是全人类联手建造的一个建筑，人们决心合力修建一座通天高塔。因为人们心里少了对上帝的敬畏，多了为自己歌功颂德的功利。上帝不希…
如何实现一个React水印组件前阵子通过前端水印生成方案(网页水印+图片水印) 这篇文章学习了一下水印的生成方案，对其中使用 Canvas 实现网页水印的方案十分感兴趣，于是对相关代码加以修改，实现了一个 React 水印组件并发布到 :point_right: npm 。该组件是通过 Canvas 生成水印，并使用 MutationObserve （可以监听DOM结构变化的接口）监…
手写JS系列:手写一个REACT SSR框架(未完结) 在介绍SSR之前，我们可以先了解CSR。那什么是CSR呢？CSR即Client Side Render在我们传统的REACT/VUE项目中采取的是单页(SPA)方式，即只有一个html,结构大致如下: <html> <head> <title>传统spa应用</title> </head> <body> <script src="bundle.js"></script…
Vue Router原理我们能在同一个网址上访问不同的页面正是用到了路由功能，这个路由地址能通过 window.location.hash 得到，以Vue官网为例，打开一个页面查询此属性可以得到 window.location.hash "#router-start-replaced" 复制代码这个值是自带一个 # 号的那么我们如何监听到route的变化呢，有一个api， hashcha…
一名合格前端人员必须知道的 this 用法和陷阱（JS系列之三） this 关键字是 JavaScript 中最复杂的机制之一。它是一个很特别的关键字，被自动定义在所有函数的作用域中。作为一名前端攻城狮对它再熟悉不过了，然而正是因为熟悉它所以很容易忽略它，以至于用它时踩了不少的坑，甚至在面试时还因为它挂了。所以学习和掌握 this 的用法和一些陷阱对于进阶成名一名合格前端攻城狮很有必…
【JS启示记】—闭包之争可休矣 “闭包”，可以排进JavaScript最难理解概念的前三，连那些正在从事“前端”职业的人，可能都没懂。这么说不是吓唬人，它并不难，但它的名字本身有点不友好，“闭”什么？“包”什么？“闭什么包”？（此处自行脑补马某梅~）技术圈儿里从不缺少这类一部分人很懂，一部分人很不懂的晦涩概念。所以，在此先把名字的意思重塑一…
小白也能听懂的前端工程化前端工程化最近也是被很多公司或者企业都用起来了，变成了一个很火的名词，所以我就好奇一下中间的前因后果是怎么样的
Vuejs响应式流程前记：今天重温vuejs的响应式，发现在看源码（2.5.17-beta.0版本）的时候会被某些流程绕晕，特此记下今日所得。
如何在不同项目中共用前端资源，从此不加班随着公司前端项目的增多, 大家会发现各个项目中很多资源都是是大同小异的，这就引发了一个话题，如何跨项目共用前端资源, 这里的资源泛指前端涉及到的所有静态资源, 常见的有 HTML/CSS/JS/图片等等. 所谓共用前端资源, 就是将公共的前端资源提取出来, 例如公共样式/公共逻辑/公共组件/公共图片资源等等, 让多个项目来…
vscode 配置vue+vetur+eslint+prettier自动格式化功能该配置用于vue开发，最终效果是保存时自动根据eslint对js、html和css代码进行格式化。 vscode Vetur插件 Vetur插件用于识别vue文件，原本vetur自带格式化功能，但是和eslint会有冲突，所以没用上。 vscode ESlint插件 Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示，…
webpack 从基础到进阶 2 依赖图的入口是 entry 对于非代码比如：图片、字体依赖也会不断的加入到依赖图中 Entry 的用法单入口： entry是一个字符串 module.exports = { entry: ‘./path/to/my/entry/file.js’ } 复制代码多入口： entry 是一个对象 module.exports = { entry: { app: ‘./src/app.js’, …
学习JavaScript数据结构与算法（一）— 数组本人是一个刚入行的菜鸡前端程序员，写这个文章的目的只是为了记录自己学习的笔记与成果，如有不足请大家多多指点。数组数组是最简单的内存数据解构，数组存储一系列同一种数据类型的值。虽然在JavaScript里，也可以在数组中保存不同类型的值，但多数时候我们还是遵守最佳实践，要避免这么做。创建和初始化数组 …
GitHub Pages 背后的 Jekyll Jekyll 项目结构网页模板中的变量 page: Markdown 的元信息 site: 网站元信息与数据文件使用现成的 Jekyll 主题本地使用 Jekyll 其它资源 References 在代码仓库 settings 中开…
从零开始使用 Koa2+Vue-SSR 开发博客前台(附上成品) 开始之前先附上我的成品项目地址（喜欢的话点个小星星）： github.com/1912820899/… 开始教程之前需要先说明一下，由于博客前台之前使用SPA写的，现在拿来重构，所有本教程将不会借助vue-cli 和 nuxt.js来进行开发vue-ssr。一.前置知识储备 1.webpack安装配置打包，还不懂的请先最少要看一遍官方文档，手动跟着…
Dan(React 核心开发，Redux 作者) <Just Javascript>(不就是js) | 01.思维模型阅读以下代码： let a = 10; let b = a; a = 0; 复制代码在进一步阅读之前，请先弄清楚运行后a和b的值是什么？如果你已经写有JavaScript的基础，你可能会反问：“这段代码比我每天编写的代码简单得多。重点是什么？” 假设你已经熟悉它们，这段代码的目的不是要向你介绍变量，而是让你注意到并反思你的心理模型…
HTML meta 标签看这篇就够了<meta> 元素提供有关页面的元信息，放在文档的头部，不包含内容，属性定义了与文档相关的键值对，不会显示在页面上，但对于机器是可读的。
Gitlab 中 CI/CD 自动化部署与使用今天给大家介绍一下Gitlab中CI/CD的自动化部署安装与使用。 1. docker方式安装安装文档：[链接] {代码…} 1.1 设置信息 {代码…} 2. 非docker方式安装 2.1 安装GitLab Runner 安装环境：Linux 其他环境参考：[…
vue ssr + koa2 构建服务端渲染之前做了活动投放页面在百度、360等渠道投放，采用 koa2 + 模版引擎的方式。发现几个问题相较于框架开发页面效率较低，维护性差兼容性问题，在页面中添加埋点后发现有些用户的数据拿不到，排查后发现通过各个渠道过来的用户的设备中仍然包含大量低版本的浏览器。服务端渲染服务端渲染和单页面渲染区…
JSON Serialization/Deserialization in C# 因为对C#不是特别熟悉，但是最近写个c#的demo，需要对获取的的json字符串进行解析，其实Newtonsoft.Json也可以达到效果，具体方法请见评论。另外了解到System.Web.Script.Serialization支持想要的功能（http://procbits.com/2011/04/21/quick-json-serializationdeserialization-in-c）首先，在工程中增加…
[推荐] 前端高级进阶：网站的缓存控制策略最佳实践及注意事项对于一个网站来讲，性能关乎用户体验，你在更短的时间内打开网站，你将会留住更多的用户。如果你的页面十秒才能打开，那再好的用户交互也是徒然。缓存控制是网站性能优化中至为常见及重要的一环，好的缓存控制，除了使网站在性能方面有所提升，在财务方面也有重要提升: 更好的缓存策略意味着更少的请求，更…
重读 vue 文档 — keep-alive keep-alive 是 vue 内置的抽象组件 ,可以用于包裹需要缓存的组件。保存组件状态，避免重新渲染，增强性能。 Props keep-alive 组件接收三个参数，分别为 include 、 exclude 、 max include – 数组、字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude – 数组、字符串或正则表达式。任何名称匹…

更多内容请关注同名公众号【前端开发博客】每日更新

关注我

我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。

回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「加群」进入500人前端精英群
回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识，加我微信:caibaojian89 交流