前端资源以及相关文章整理

前端资源

gulp 是一个 js 自动化工具。

GRUNT js 自动化工具

谷歌字体

MDN 学习 Web 开发

掘金 是真的挺不错的一个社区。好多干货文章。

现代 JavaScript 教程

codesandbox(相当好用的web编辑器,可以快速创建不同框架的项目)

MCN Mozilla 出的 Web 文档

W3C W3C 的官网

Element-UI Element-ui 组件库

Jquery Jquery 官网

staticfile CDN staticfile CDN 官网

Iconfont 阿里的矢量图标库官网

NODESCHOOL 一个教程网站。包含 Web、Node 等

w3cplus 前端文章网站(会有付费阅读的情况)

Frontend Knowledge Structure githubs 上整理的前端工程师的知识框架

Can i use 非常好用的 CSS 兼容查询网站。通过这个网站可以查到某些 CSS 特性在不同浏览器上的兼容情况(想去找 vscode 的版本,但是没找到好用的

learnlayout 一个入门 CSS 布局的网站,互动性很高。

Bootstrap Bootstrap 的官网

Sass Sass 的官网,Sass 是一个预编译 CSS 处理器,比原生 CSS 提供了更多功能。

Less Less 的官网,和 Sass 一样,不过具体差别我还在看文档。

webpack webpack 的官网,webpack 是一个功能强大的打包工具,使用 webpack 可以更快、更小、更有针对性的打包项目文件。

Boot CDN 另一个 CDN 的官网(其实 CDN 就两个作用,一个是让你更快的访问,另一个是给钱让用户更快的访问加载

WebGL 中文网 非官方,但是可以参考文档,WebGL、three.js 等都是在前端可视化上具有很重要地位的技术。

Vant 轻量、可靠的移动端 Vue 组件库

微信官方文档 微信的小程序、小游戏、甚至公众号都是目前行业的一个趋势。

TweenMax 性能很高的动画插件

Babel JavaScript编译器,帮助你了解 JavaScript 的标准以及新一代的语法。

渲染树构建、布局及绘制 只是之前找文档时找到的,详细介绍了浏览器的工作原理。顺藤摸瓜也就有了 Google 的 Web 文档,与 MCN 的文档相比,一个是更加细致,但是对应的翻译少了很多,需要你英文阅读水平足够。

ES6 入门教程 阮一峰教程

木易杨前端进阶 木易杨的博客主页

技术胖 技术胖的博客主页

cssgg 纯 CSS 图标。

Express Express官网

mpvue 一个基于 Vue 的小程序框架

Nightwatch 一个测试用的 js 库。

Jest 也是测试用。

CSS参考手册 一个很好用的CSS查询手册

Mint UI 基于 Vue 的移动端组件库

View UI 基于 Vue 的组件库

three.js Three.js 的官网

v8 Google 浏览器所用的 V8引擎官网

dafont 一个字体网站

undersource 是一个实用的 js 工具库。

Flutter Flutter 官网,是谷歌的移动UI框架,

ZRender ZRender 是一个二维绘图引擎,也是 ECharts 使用的渲染器。

ECharts Echarts 是一个强大的可视化库。

Ant Design 有蚂蚁金服出品的企业级组件库(主要用于 React,但也有社区伙伴制作了 Vue 版

UmiJS 企业级前端应用框架

飞冰 一个快速搭建前端应用的框架

Cube UI 基于 Vue 的移动端组件库

Swiper 基于 JavaScript 的滑动特效插件

Flow Flow 是一个 JS 类型检查工具(其实用 Typescript 就好了

Typescript 入门教程 一个 Typescript 的入门教程

regexper 强烈推荐,帮助你读那些复杂又繁琐的正则表达式。并且还能生成图片。

LayUI 一个前端 UI 框架。

劼哥舍(>﹏<) 劫哥舍的博客

Lodash JavaScript 实用工具库(话说这些工具库都还行,但是为什么都没有 JQuery 火呢

Axios 很实用的 js http 库。

SVG.js 创建和使用 SVG 的库。

React Router 中文文档 Gitbook,用于了解 React 的路由相关知识。

DClound dclound 旗下的 Hbuilder、uni-app、uniCloud都是非常不错的产品。对于已 Vue 作为主要开发框架的公司来说很适用。

LOLCOLORS 是一个配色的网站,可以根据自己的喜好进行配色。

Font Awesome 一个非常好用的图标库

koa 基于 Node.js 的下一代 Web 开发框架。

Animate.css CSS 动画库,提供各种动画的实现。

D3 非常强大的 JavaScript 可视化库

React Native中文网 使用JavaScript和React编写原生移动应用

Redux Redux 是 JavaScript 状态容器,提供可预测化的状态管理。适用于 React,提供 Vuex 类似的功能。

Vue

2020年大厂面试指南 - Vue篇

看大厂面试题对于理解相关知识也是很有用的。重要的是不要死记硬背,因为很多答案并不是从原理讲起,或者讲了看不懂,需要结合官方文档和实际上手去理解。

非常感谢这位作者,关于 Vue 的实现原理可以参考上面的连载专栏。不需要去深入算法,但是需要去了解一些基本的原理。同时自己可以尝试做一个类似的例如双重绑定、响应式等等。

vue 248个知识点(面试题)为你保驾护航

了解 Vue 的相关知识点和原理。

深入vue响应式原理(包含vue3. 0)

看这个是想了解关于 Vue 2. 0 和 3. 0 之间的变化。

「 如何优雅的使用VUE? 」不可不知的VUE实战技巧

Vue 的实战技巧。

vue 组件通信看这篇就够了(12种通信方式)

详细介绍了不同的父子组件间的通信方式。

Vue3响应式系统源码解析-单测篇

关于 Vue3 的响应式实现。

实战技巧,Vue原来还可以这样写

Vue 技巧。

Vue(v2.6.11)万行源码生啃,就硬刚!

够狠!

学会使用Vue JSX,一车老干妈都是你的

JSX 其实不管 react 还是 vue 都是因为他们会用到 Virtual DOM,react 提供了 React.createElement,Vue 也提供了createElement。相对来说我其实是更喜欢 Vue 的风格的,template、script、style很分明,相对来说更易读一些吧。不过 JSX 更强大的灵活性也是其优势。

快速在你的vue/react应用中实现ssr(服务端渲染)

关于ssr

Vue相关面试知识点

检测一下自己的熟练程度吧。

vue 路由 按需 keep-alive

讲解了一些 keep-alive 的实战用法,include 的作用。

JavaScript

一文完全吃透 JavaScript 继承(面试必备良药)

这篇文章详细讲解了原型相关的知识,包括原型链、ES5 ES6中的继承实现以及原理。帮助理解 JavaScript 面向对象方向的继承原理和构造器相关概念。

[译] 在 async/await 中更好的处理错误

这篇文章详细介绍了在 JavaScript 中的异步问题,介绍了回调地狱、Promise、async/await,以及他们的错误处理机制。

理解Javascript的正则表达式

正则表达式是在应用中相当重要的一部分,需要去理解记忆并多加练习。

轻松理解JS中的面向对象,顺便搞懂prototype和proto

理解 JavaScript 中的原型、原型链、构造器等相关概念。

深入理解JS的原型和原型链

深入理解原型和原型链之间的关系,然后引申出执行上下文和 this 的相关概念。

🔥(已更新3. 1w字)《大前端吊打面试官系列》 之 ES6 精华篇(2020年)

深入理解 ES6 。

面试题:说说事件循环机制(满分答案来了)

关于事件循环机制。

前端工程师的自我修养-关于 Babel 那些事儿

Babel 是可以对代码进行向后兼容性编译的编译器,使得代码在不同环境下依然可以稳定运行。

记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

ES6 相关的对于实际问题的解决办法。

🔥 动画:《大前端吊打面试官系列》 之原生 JavaScript 精华篇

关于 JavaScript 相关的基础知识理解。

【建议星星】要就来45道Promise面试题一次爽到底(1. 1w字用心整理)

关于 Promise 的各种面试题型。加深对于异步的理解和处理。

从手写Promise到async/await(接近6千字, 建议看一下)

关于异步和生成器、构造器的原理讲解和一些组合方法。

【建议👍】再来40道this面试题酸爽继续(1. 2w字用手整理)

关于 this 的相关题型。

【译】Async/await和Promise的不为人知的秘密

关于 Async 和 Promise 的性能上的区别。

【面试篇】寒冬求职季之你必须要懂的原生JS(上)

经典面试题和解析

【面试篇】寒冬求职季之你必须要懂的原生JS(中)

经典面试题和解析

「进击的前端工程师」浏览器中JavaScript的事件循环

深入了解 JavaScript 引擎的事件机制,后面的例题也很值得思考。

详解JS函数柯里化

介绍了柯里化的详细原理和实现过程

柯里化与反柯里化

详细解释柯里化的用法

浅谈js防抖和节流

了解防抖和节流的思想以及实现方法

函数防抖和节流

可以参考上面的文章一起看,我感觉这个实例代码写的更好一些。

手写源码系列(三)——JSON.parse和JSON.stringfy

有同学被问到这个了。感觉挺有意思的,需要考虑到对象的类型、递归。

24个ES6方法,用来解决实际开发的JS问题!!

与其说是JS问题,不如说是前端实际案例问题,

想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS

除了一些基础的知识,还有很多实际操作的多种方法解析。

javascript篇–1.6万字带你回忆那些遗忘的JS知识点

基础知识点

【JavaScript】从入门到深入了解AJAX

Ajax 是一个比较基本的东西吧,例如 Axios 也是使用 Promise 封装后的 Ajax,除了 XML 格式比较落后,其实其他的网络请求方法什么的还是挺不错的。

JS数组奇巧淫技

JS 数组的小知识。

带你了解路由的底层原理,用原生js手写一个路由

路由原理

Css

剖析一些经典的CSS布局问题,为前端开发+面试保驾护航

跟着某些作者看可以找到一些没有推荐过的文章。有的还没看过,先留着。

学习 BFC (Block Formatting Context)

了解在 CSS 中的 BFC 的相关概念。

前端基础篇之CSS世界

总算找到CSS的教程了。

CSS Grid 网格布局教程

阮一峰

Grid网格布局实例

互相对照着看。

CSS知识点总结

CSS 基础知识点

css篇–100道近两万字帮你巩固css知识点

复习题

【收藏】你不知道的css技巧

CSS 技巧

历时4个多月,学习了这 66 个CSS 特效

CSS特效实例。

最强大的 CSS 布局 —— Grid 布局

可以和前面两篇对照着看,这篇在一些细节上写的比较好。Grid 布局在某些情况下确实好用。

React

React Router 中文文档

React Router 的路由模块。

我对 React V16.4 生命周期的理解

这个我当然不是我,不过生命周期是每一个前端框架都需要去了解的东西,关系到整个项目的组成和渲染顺序。

30分钟精通React Hooks

算了解决了我对于Hooks的疑惑,因为我觉得class还是挺好用的,更加易读。可能是因为没有实际的项目经验吧。实际上的react开发者更加倾向于使用function组件,更加简单、可复用。

reactrouter

这个网站做的太棒了,我以后的博客也要照着这么改。

Redux

React的状态管理容器。和 Vuex 有一些理念上的不同。

面试文

中高级前端面试题(万字长文)

面试题以及知识框架整理。

前端下载文件的5种方法的对比

关于前端的一些典型下载文件实现案例。

前端面试常考的手写代码不是背出来的!

这篇文章是对于代码规范和一些功能函数的实例研究,很基础但也很有用。

2020 前端面试 | 第一波面试题总结

实际面试题。

【面试篇】寒冬求职之你必须要懂的Web安全

关于 Web 安全的相关面试题和解析

2万字 | 前端基础拾遗90问

深入理解基础,大多都是需要去看代码思考代码的问题。

一位前端小姐姐的五万字面试宝典

经典例题以及代码实现

由浅入深,66条JavaScript面试知识点

经典基础知识点

这些前端基础题你能答对几道?(测试你的基础掌握,附答案解析)

复习题

BAT前端经典面试问题:史上最最最详细的手写Promise教程

手写 Promise

其他

2020年你不能不知道的webpack基本配置

了解 webpack 工具,官方文档 https://www.webpackjs.com/concepts/

作为计算机相关行业人员对于数据结构和算法是必须要掌握一些的。

你再不知道怎么解决跨域, 我就真的生气了

关于跨域相关的知识点。跨域指的是由于浏览器出于安全考虑所设置的同源策略,如果协议、域名、端口有一项不同就会产生跨域问题,而跨域问题所带来的是安全问题,解决跨域不仅仅是让前端可以成功访问到跨域资源,更重要的是理解背后的安全隐患。

前端也能学算法:由浅入深讲解贪心算法

关于贪心算法的讲解。

2020年了, 再不会webpack敲得代码就不香了(近万字实战)

webpack 相关知识。

【第1250期】彻底理解浏览器的缓存机制

了解浏览器的缓存机制

learnVue

github 上的 Vue 学习文章

图解浏览器的基本工作原理

了解浏览器的工作原理

前端常见跨域解决方案(全)

关于跨域以及解决方案。

Canvas的基本用法

MDN 关于 Canvas 的文档

Web Worker 使用教程

阮一峰的教程

WebSocket 教程

关于 Websocket

前端算法渣的救赎之路🚀

算法实例。

JQuery 源码

JQuery虽然很老但是确实相比于原生更加简单好用,学习源码可以提升对 CSS、JS 的认识。

组件化页面:封装el-form

比较实战的一个教程,里面的一些思路可以参考一下。

前端性能优化总结

前端性能优化也是一个好前端必备的技能

2020年这些🍔”正则”应该被收藏(更新, 64条)

🍔正则

🚨Web开发者需要知道的CSS Tricks

这个主页的图片资源1000多个加载不上,有点吓人,其他都还好,挺实用的。本来以为是自己写的网站,结果还是hexo。该不会是自己写的主题吧。

如何搭建前端异常监控系统

原来try/catch不能捕捉语法错误和异步错误。这样一来处理异常确实比较重要。

DD每周前端七题详解-第七期

之前也遇到过里面的Chrome字体问题。找到的也只有 -webkit-text-size-adjust:none 但是没用,博主用 transform 将字体变小我是没想到的,天才啊。这个题目也是一个周刊。可以看看以前的文章。

「1.4万字」玩转前端 Video 播放器 | 多图预警

对于网页视频的解析和相关知识。

树酱的前端知识体系构建(上)

知识体系相关推荐。