前端必看的书籍（附：码农长寿指南）；三年渣渣前端面试总结(留给以后的自己)；让前端开发者失业的技术，Flutter Web初体验；前后端真正分离，网线被拔，也能请求数据（mock.js）；每个前端工程师都应该了解的图片知识；VUE防抖与节流的最佳解决方案——函数式组件；重学JavaScript深入理解系列（四）；面试官(7): 聊一聊 Babel?
-
前端必看的书籍（附：码农长寿指南） README.md fe-necessary-book 前端开发者必读的精品pdf集合(小声逼逼: 附精品开发工具) 前置 书不在多, 读了才灵 些许资源以链接形式给出, pdf均为网上搜集而来, 如果侵犯到作者的利益, 请联系我删除(WeChat: dzy13538391627). …
-
三年渣渣前端面试总结(留给以后的自己) null 和 undefined 的区别 let 、 const 、 var 比较 push 、 slice 、 filter 、 map 等常用API的使用和内部实现(面试题见①) 必须掌握 __proto__ 和 prototype 并能画出原型图(面试题见②) 闭包的理解，闭包带来的好处和影响以…
-
让前端开发者失业的技术，Flutter Web初体验Flutter是一种新型的“客户端”技术。它的最终目标是替代包含几乎所有平台的开发：iOS，Android，Web，桌面；做到了一次编写，多处运行。掌握Flutter web可能是Web前端开发者翻盘的唯一机会。
-
前后端真正分离，网线被拔，也能请求数据（mock.js） 做了一回标题党 （别吐槽，说的大实话，真的可以不用后台，就能拿数据，快！，向下看…） 一、mock.js 是什么？ 官网机票 简单的描述一下， mock.js 可以在后台接口没有更新时，来本地模拟数据达到测试界面功能的一个很方便的工具库，mock.js 可以拦截ajax 请求， 重指向并返回你定义的模板数据。更多细节，可…
-
每个前端工程师都应该了解的图片知识随着web的发展，网站资源的流量也变得越来越大。据统计，60% 的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。
-
VUE防抖与节流的最佳解决方案——函数式组件 有echarts使用经验的同学可能遇到过这样的场景，在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的，resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的。还有一个常见的场景在input标签的input事件里请求后端接口，input事件也是连续触发的，假设我输入了“12”就会请求两次…
-
重学JavaScript深入理解系列（四） 在第二章变量对象的时候，已经介绍过执行上下文的数据是以变量对象的属性的形式进行存储的。 还介绍了，每次进入执行上下文的时候，就会创建变量对象，并且赋予其属性初始值，随后在执行代码阶段会对属性值进行更新。 本文要与执行上下文密切相关的另外一个重要的概念——作用域链（Scope Chain）。 定义 …
-
面试官(7): 聊一聊 Babel? Babel 是现代 JavaScript 语法转换器,几乎在任何现代前端项目中都能看到他的身影,其背后的原理对于大部分开发者还属于黑盒,不过 Babel 作为一个工具真的有了解背后原理的必要吗? 如果只是 Babel 可能真没有必要,问题是其背后的原理在我们开发中应用过于广泛了,包括不限于: eslint jshint stylelint css-in-js prettier…
-
JavaScript如何编写类 关于JavaScript编写类的方式，总结一下JavaScript编写类的几种写法以及这几种写法的优缺点。 构造函数方式 基本语法： function 类名(){ this.属性名;//公共属性 var 属性名;//私有属性 /*凡是定义类的公共属性和公共方法都要使用this*/ //定义类的公共函数 this.函数名=function(){ …
-
学习-ES6基础知识点 本篇文章介绍面试中经常问的ES6基础知识点。文章中的关联问题可以在面试官问了问题后自己进行引申这些相关话题，从而引导面试官询问自己擅长的部分。后续会持续推出HTML知识点、CSS知识点、JS进阶知识点、webpack知识点、react知识点、组件设计相关知识点、浏览器相关知识点、网络相关知识点、算法相关知识点等文章进行…
-
【前端词典】Vuex 注入 Vue 生命周期的过程 这篇文章是【前端词典】系列文章的第 13 篇文章，接下的 9 篇我会围绕着 Vue 展开，希望这 9 篇文章可以使大家加深对 Vue 的了解。当然这些文章的前提是默认你对 Vue 有一定的基础。如果一点基础都没有，建议先看官方文档。 第一篇文章我会结合 Vue 和 Vuex 的部分源码，来说明 Vuex 注入 Vue 生命周期的过程。 说到…
-
单页面(如react，vue)网站的服务器渲染 SSR 之 SEO 大杀器 Rendertron vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态…与可以部署在任何静态文件服务器上的完全静态单页面…react(6) SEO(23) UI设计(8) vuejs(64)…
-
优化JavaScript总结分享（上）本来想整理一篇完整的JavaScript优化知识点出来跟大家讨论分享一下的，但是由于最近个人的时间比较少，所以先整理了两个知识点，之后有时间了再继续整理后面的。不喜欢勿喷，有错误的欢迎大佬指点。
-
【请停止学习框架】我们了解的现代开发工具越多越好，比如Angular，React，Riot，Vue，Ember，Knockout，和这些新技术保持同步真是一件很有意思的事情。但是….我们却是在浪费时间！全文=>
-
没有规矩不成方圆，前端代码规范指南 js文件, vue文件, 及jsx文件都遵循eslint规范, 而且在.eslintrc.js 对eslint进行一些配置, 我们遵循业界通用代码规范, 去除一些鸡肋的限制, 详情可见 (https://eslint.org/docs/rules/) 注意: 我们本地开发时候, 会有eslint进行预检查, 如果有不符合规范的代码, 是不能进行开发的, 我们需统一代码风…
-
js为什么是单线程 进程就是一个公司，每个公司都有自己的资源可以调度；公司之间是相互独立的；而线程就是公司中的每个员工(你，我，他)，多个员工一起合作，完成任务，公司可以有一名员工或多个，员工之间共享公司的空间 什么是进程？ 进程：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位） 什么是线程？ 线程：…
-
用于业务的精炼js工具函数（浏览器环境） github : github.com/Javison666/… 引用库，后续 $fn 直接当作全局进行使用 import $fn from ‘jj-browser-fn’ 复制代码 js工具函数（浏览器环境） 默认处理非数值的内容为0 默认处理空字符串为’–‘ 将编…
-
前端VUE：开发环境搭建 在安装目录创建如下文件夹: node_cache node_global 环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径;cmd 执行如下命令： npm config set prefix "D:Developnodejsnode_global" npm config set cache "D:Developnodejsnode_cache" 复制代码 …
-
金三银四的魔都两年半前端面经 前言 先介绍下个人基本情况，16届本科非计算机相关专业，毕业转行前端，过年后裸辞休息了半个月，然后到三月份开始准备面试，主要是过去做过的项目总结，刷算法题，巩固基础知识之类的。3月末开始面试。因为目前网上面经还是以1~3年居多，我投简历对标的3~5年岗位，考察点确实有些不一样，这里把接近3个星期的面试…
-
Webpack入门到精通（1）什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模…
-
JavaScript数据结构与算法-Array-(leetcode原题)例如：1 ^ 1 = 0 、 2 ^ 2 = 0、 0 ^ 1 = 1 、1 ^ 1 ^ 2 ^ 3 ^ 2 ^ 4 ^ 3 = 4
-
如何在零JS代码情况下实现一个实时聊天功能❓前段时间在 github 上看到了一个很“trick”的项目：用纯 CSS（即不使用 JavaScript）实现一个聊天应用 —— css-only-chat。即下图所示效果。
-
用100行代码，完成自己的前端构建工具ES2017+，你不再需要纠结于复杂的构建工具技术选型。 也不再需要gulp,grunt,yeoman,metalsmith,fis3。 以上的这些构建工具，可以脑海中永远划掉。 100行代码，你将透视构建工具的本质。 100行代码，你将拥有一个…
-
❤520，就用CSS给你的她（他）送颗心❤今天是520。一句温柔的问候，一束美丽的鲜花，一段真情的告白。但是作为一名与众不同的程序员，我们可不仅仅拥有上面的传情方法，别忘了每个人的手上可是都有其他人不具备的神奇技能，就是我们每天辛辛苦苦敲下的…
-
前端工具函数将一级的数据结构处理成树状数据结构 处理成树状结构，一般就是需要节点和父节点标识，或者需要考虑以哪个节点为根节点生成树结构数据 {代码…} {代码…} 数组去重 数组去重方法有许多，还分为普通数组和对象数…
-
Serverless Node.js Puppeteer 渗透测试爬虫实践 本文归纳于微服务与云原生 https://github.com/wx-chevalier/Backend-Series系列文章，其相关的参考资料声明于 Awesome Serverless List。 ServerlessNode.js Puppeteer 渗透测试爬虫实践 参考 CNCF 的定义，Serverless 是指构建和运行不需要服务器管理的应用程序的概念；而 AWS 官方对于 Serverless 的介…
-
ES6—项目小练习-TodoList(15)其实ES6难的不是技术，而是实际工作环境的搭建。比如我们想写一个简单的ES6版本的TodoList.
-
浅析JavaScript异步一直以来都知道JavaScript是一门单线程语言，在笔试过程中不断的遇到一些输出结果的问题，考量的是对异步编程掌握情况。一般被问到异步的时候脑子里第一反应就是Ajax，setTimseout…这些东西。在平时做项目过程…
-
函数劫持能做啥？前端黑科技揭秘 啥是函数劫持？其实就是给调用的函数加一层包装函数，在包装函数里调用一下原函数，有点像代理服务器的作用， 拦截一些全局对象和方法， 能实现一些非常便利的全局功能，今天我就抛砖引玉跟大家分享一下。 人生苦短，苦中做乐的console.log 美化 前段时间看到emoji图标在地址栏的动画应用，挺有趣的，很娱乐，我就试…
-
php只能做网站？基于swoole+websocket开发双向通信应用 众所周知，PHP用于开发基于HTTP协议的网站应用非常便捷。而HTTP协议是一种单向的通信协议，只能接收客户端的请求，然后响应请求，不能主动向客户端推送信息。因此，一些实时性要求比较高的应用，如实时聊天、直播应用、在线网页游戏等，就不适合采用HTTP协议。即使采用客户端主动轮询的方式来间接实现双向通信，也会较大…
-
webpack精简总结 WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用 与gulp和grunt区别 Gulp/Grunt是一种能够优化前端的开发流程的工具， 而WebPack是一种模块化的解决方案， Webpack…
-
用惰性加载优化 React 程序惰性加载是一种优化 Web 应用和移动应用的旧技术。非常直截了当 —— 如果在某一时刻资源没有被查看或需要，就不要渲染它们。例如，如果我们有一个要显示的文章列表，开始时应该只渲染视口上的内容。这意味着其他元…
-
重新巩固JS（三）——JavaScript语句 重新巩固JS系列，都是比较基础的东西，可以进行查漏补缺，很快看完，这是第三篇。 其他JS重新巩固系列 ： 重新巩固JS（一）——JavaScript基本类型 重新巩固JS（二）——JavaScript操作符与表达式 1. 条件语句 1.1 if else语句 //当条件为真时，执行语句1，条件为假时，执…
-
Vue 组件间通信方式Vue 是数据驱动的视图框架，那么组件间的数据通信是必然的事情，那么组件间如何进行数据传递呢？ 首先组件间通信有父子组件、兄弟组件、堂兄弟组件、叔侄组件等，分类太多可能不好理解，我们暂且分为： 父子组件…
-
9012年，当我们讨论js深浅拷贝时我们在说些什么？ 前言： 本文主要阅读对象：对深浅拷贝印象模糊对初级前端，想对js深浅拷贝聊一聊的中级前端。 如果是对这些有完整对认知体系和解决方法对大佬，可以不用再浪费时间了 复制代码 正文：讨论深浅拷贝，首先要从js的基本数据类型说起： 根据 JavaScript 中的变量类型传递方式，分为值类型和引用类型， 值类型变量包括 …
-
当我开始使用React 时，我希望我知道这些知识自2013年5月29日首次发布以来，React.js已经占领了互联网。我和许多其他开发人员将他们的成功归功于这个了不起的框架，这已经不是什么秘密了。
-
浅析JavaScript中原型及constructor、__proto__、prototype的关系先说一说为什么要搞清楚JavaScript的原型，因为这就是JS的根。JavaScript虽然不是一门传统的面向对象语言，但它有自己的类和继承机制，最重要的就是它采用了原型的概念。与其说JS是面向对象，不如叫面向原型。JS…
-
nuxt.js基于ssh的vue通用框架 Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织， Nuxt.js 主要关注的是应用的 UI渲染。 SSR ，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。 Nuxt.js是特点（优点）： 基于 Vue.js 自动代码分层 服务端渲染 强大…
-
前端中台系统常见问题剖析与解决方案 干货高能预警，此文章信息量巨大，大部分内容为对现状问题的思考和现有技术的论证。 感兴趣的朋友可以先收藏，然后慢慢研读。此文凝结了我在中台领域所有的思考和探索，相信读完此文，能够让你对中台领域的常见业务场景和解决方法有着全新的认知。 此文转载请注明出处。 在2019年5月11日的那个周末，我在FD…
-
CSS3实现炫酷的切片式图片轮播效果今天我们学习如何使用CSS创建一个炫酷的图片轮播组件。它的原理简单的说就是通过单击标签元素（label）来切换背景图像和动画效果。核心是使用与标签关联的单选按钮和使用通用兄弟选择器来定位每张图片。
-
怎样阅读 ECMAScript 规范？Ecmascript 语言规范 The ECMAScript Language specification（又名：Javascript 规范 the JavaScript specification 或 ECMA-262）是学习 JavaScript 底层工作原理的非常好的资源。 然而，这是一个庞大的专业文…
-
webpack4 SplitChunks实现代码分隔详解 代码均放在 git仓库 Webpack 4给我们带来了一些改变。包括更快的打包速度，引入了SplitChunksPlugin插件来取代（之前版本里的）CommonsChunksPlugin插件。在这篇文章中，你将学习如何分割你的输出代码，从而提升我们应用的性能。 SplitChunks插件( webpack 4.x以前使用CommonsChunkPlugin )允许我们将公共依赖项提…
-
JavaScript 发布-订阅模式发布-订阅模式，看似陌生，其实不然。工作中经常会用到，例如 Node.js EventEmitter 中的 on 和 emit 方法；Vue 中的 $on 和 $emit 方法。他们都使用了发布订阅模式，让开发变得更加高效方便。
-
用 JavaScript 实现链表单链表是表示一系列节点的数据结构，其中每个节点指向链表中的下一个节点。 相反，双向链表具有指向其前后元素的节点。
-
CSS3 中关于 *-of-type 和 *-child的差异性及适用场景原文地址，排版更好 [链接] [链接] CSS3 中有很多表示元素序号的选择器，有以下几种 :first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-ty…
-
vue源码阅读之数据渲染过程 一、概述 vue已是目前国内前端web端三分天下之一，也是工作中主要技术栈之一。在日常使用中知其然也好奇着所以然，因此尝试阅读vue源码并进行总结。本文旨在梳理初始化页面时data中的数据是如何渲染到页面上的。本文将带着这个疑问一点点“追究”vue的’思路’。总体来说vue模版渲染大致流程如图1所示： 图1:v…
-
GitHub 平台最有价值的 100 个项目 原文翻译自：https://hackernoon.com/githubs-top-100-most-valuable-repositories-out-of-96-million-bb48caa9eb0b 灵魂翻译者：https://github.com/chai2010 自从老牌的Sourceforge堕落、Google Code服务关闭之后，Github已经开始制霸整个开源领域，成为开发人员的首选代码管理和社交平台。Github目前注册用…
-
在javascript中使用纯函数处理副作用 今天给大家带来一片译文, 详情请点击这里. 可能在墙内哦 开始了, 如果你点开这篇文章, 就证明你已经开始涉及函数式编程了, 这距离你知道纯函数的概念不会很久. 如果你继续下去, 你就知道纯函数是真重要, 没有它你将寸步难行.你可能听过这样的话: "纯函数让你理清你的代码", "纯函数不可能会引起…
-
简单梳理Redux的源码与运行机制前几天写了一篇react另一个状态管理工具Unstated的源码解析。开启了我的看源码之路。想一想用了好长时间的redux，但从没有深究过原理，遇到报错更是懵逼，所以就啃了一遍它的源码，写了这篇文章，分享我对于它的…
-
#前端技术#【7 个有用的 Vue 开发技巧】详见： 一些常用的 Vue 开发技巧分享，涉及状态共享、长列表性能优化、去除多余的样式、作用域插槽等内容。（作者：skinner） 1 状态共享 随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是vue.js 2.6新增加的Observable API ，通过使用这
-
webpack4 sideEffects实战轻松搞懂 函数副作用是指函数在正常工作任务之外对外部环境所施加的影响。具体地说，函数副作用是指函数被调用，完成了函数既定的计算任务，但同时因为访问了外部数据，尤其是因为对外部数据进行了写操作，从而一定程度地改变了系统环境。函数的副作用也有可能是发生在函数运行期间，由于对外部数据的改变，导致了同步运行的外部…
-
从零开始写一个 Babel 插件 相信目前常与 ES6 代码打交道的同学对 Babel 应该不会陌生，在 ES6 代码被编译转化为 ES5 代码的过程中，Babel 插件显得尤为重要，我们最后经由 Babel 生成的代码取决于插件在这一层中做了什么事，在探索这其中的过程之前，我们先来了解下一些所需的基础知识。 抽象语法树 Babel 的工作流可以用下面一张图来表示，…
-
为什么https要使用证书最近看了一本关于网络的书，叫做《图解http》，觉得这本书写的很好，看完之后印象比较深的是这本书的https的解释，为此在此总结一下自己的理解。文中的很多截图出自http图解，在此表示感谢。
-
css1：盒模型最近工作中有机会复习一下css的基本知识，那么先从css的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题：怎么把IE盒模型变成标准盒模型？嗯，有办法，box-sizing: border-box;就可以啦。嗯，过关啦，那么…
-
深入学习 JavaScript —— this 绑定 这里直接列出 this 绑定的四大规则，这些规则都是《你不知道的JavaScript》一书中提到的关键词，个人觉得比较好理解。因为这里只涉及常识性的介绍，如果已经了解的话可以快速跳过，进入下一小节。如果你还不熟悉，可能会碰到很多陌生又让你心痒的概念。这里建议你先暂时放下，我会在后文详细说明，或贴上我觉得不错的博…
-
30分钟用Node.js构建一个API服务器本教程是 Node.js，Express 框架和 MongoDB 的快速指南，重点介绍基本的 REST 路由和基本的数据库交互。你将构建一个简单的 API 框架模版，然后可以将其用作任何应用。
-
实用的 Web 布局技巧：Flex 主轴上的自动外边距实现的方法有很多，我们这里要讨论的是：如何简洁地使用 Flex 布局来实现？我这里采用的方法是：使用自动的外边距在主轴上对齐。
-
使用 TypeScript 开发 HapiJS 应用要在开发中使用 TypeScrip，同时至少需要有一个工具，可以一直监听项目文件的变更，并实时的将变更更新至启动的服务中，我选择使用 Nodemon，首先添加以下几个开发依赖
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
