20190610 前端开发周报-前端开发博客

CSS @font-face 性能优化；前端工程师如何成为全栈工程师?；前端框架技术选型 React vs. Vue (vs. Angular)；Webpack5.0 新特性尝鲜实战；Vue响应式原理-理解Observer、Dep、Watcher；你了解vue3.0响应式数据怎么实现吗？；Vue 实现前进刷新，后退不刷新的效果；Git 自救指南

CSS @font-face 性能优化本文主要介绍字体加载优化的常用策略。
前端工程师如何成为全栈工程师? 前端工程师如何成为全栈工程师? 这里有一个概念我们先要搞清楚，前端工程师做什么？全栈工程师又做什么? 人的精力是有限的，一个人不可能什么都懂。离开了项目本身，去谈全栈工程师还是前端工程师后端工程师，意义并不大。因为你会的再多，用不上也是没用的，技术更新很快，你一两年不用也就过时了。如果…
前端框架技术选型 React vs. Vue (vs. Angular) 重新考虑前端技术选型需要大量思考，讨论，决策，规划，管理和实施。我们首先需要做出的决定之一是选择一个前端框架来重新设计我们的产品。我们研究了几个月来保证我们得出一个的更好决策。进行讨论，建立概念证明，与其他公司相关经验的同事进行面谈，并阅读大量在线材料。在本文中，我将比较选型过程中的入围者…
Webpack5.0 新特性尝鲜实战在老袁写这篇文章的时候，v5版本仍然处于早期阶段，可能仍然有问题。而且作为一个 major 版本，其中有一些breaking changes，可能会导致一些配置和插件不工作。但这并无妨碍我们去开始对changelog上的新特性进行尝鲜实战。大家如果遇到什么问题可以移步到这进行反馈。另外有关于Webpack4的配置和Compiler->Compilat…
Vue响应式原理-理解Observer、Dep、Watcher 最近在学习Vue的源码，看了网上一些大神的博客，看起来感觉还是蛮吃力的。自己记录一下学习的理解，希望能够达到简单易懂，不看源码也能理解的效果:laughing: 如果有错误，恳求大佬们指点嘿:yum: Object.defineProperty 相信很多同学或多或少都了解Vue的响应式原理是通过 Object.defineProperty 实现的。被 Objec…
你了解vue3.0响应式数据怎么实现吗？从 Proxy 说起什么是Proxy proxy翻译过来的意思就是”代理“，ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层”拦截“，返回一个新的代理对象，之后所有在Proxy中被拦截的属性，都可以定制化一些新的流程在上面，先看一个最简单的例子 const target = {}; // 要被代理的原对象 // 用于描述代…
Vue 实现前进刷新，后退不刷新的效果在一个列表页中，第一次进入的时候，请求获取数据。点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。
Git 自救指南Git 虽然因其分布式管理方式，不完全依赖网络，良好的分支策略，容易部署等优点，已经成为最受欢迎的源代码管理方式。但是一分耕耘一分收获，如果想更好地掌握 git，需要付出大量的学习成本。即使在各种 GUI 的加…
2019年前端面试题-02px、em和rem的区别 px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；
编写一个webpack的loader（1）开始之前，先介绍一下loader，下面是 webpack中文网对 loader 的描述所谓 loader 只是一个导出为函数的 JavaScript 模块。 loader runner 会调用这个函数，然后把上一个 loader 产生的结果或者资源文件(resource file)传入进去。函数的 this 上下文将由 webpack 填充，并且 loader runner 具有一…
Vue 框架原理相关知识点 create和mounted 的区别参考 juejin.im/post/5afd7e… juejin.im/post/5c6d48… MVVM框架的设计理念为什么选择vue 为什么使用vue，首先要看和其他框架React/Angular的对比 React React 的特别是使用 JSX，有些人喜欢用，有些人不喜欢？看它的语法就知道一个rend…
13 种有用的 JavaScript DOM 操作 DOM（Document Object Model）是网页上所有对象的基础。它描述文档的结构，并且为编程语言提供操作页面的接口。它被构造成逻辑树。每个分支以节点结束，每个节点包含有子节点。DOM API 有很多，在本文里面，我仅介绍一些我认为最有用的 API。 document.querySelector / document.querySelectorAll document.que…
阿里巴巴前端暑期实习面经先说一下为什么要去面试，因为之前跟学长吃饭的时候聊起来，大三这时候找一个暑期实习是个好机会，并且我在学校拿的奖也都围绕着前端来的。作为一个想知道自己处于什么水平的人来说，肯定要投大厂了，于是选择了…
前端进阶之 let、const、var 首先我们来看一段代码 console.log(变量) // undefined var 变量 = 1 复制代码从上面的代码来看，虽然变量还没有被声明，但是我们却可以使用，这种情况就叫做提升，并且是声明提升。再来一段代码 console.log(变量) // ƒ 变量() {} function 变量() {} var 变量 = 1 复制代码上面的代码叫做函数提升，函数…
那些年，我们一起踩过的坑（前端防翻车指南） javascript做为一门脚本语言，由于缺乏约束，以及各种自动容错机制和隐式转换，产生了很多容易误解和容易引发问题的地方，《javascript语言精髓》一书中，有很大一部分篇幅介绍了javascript语言的糟粕和毒瘤部分，相信大部分问题有些人遇到过，有些人则通过学习知晓其原理而完美的躲过，随着ES规范的不断完善与发展，其…
【前端词典】 Vue 响应式原理其实很好懂这是十篇 Vue 系列文章的第三篇，这篇文章我们讲讲 Vue 最核心的功能之一 —— 响应式原理。如何理解响应式可以这样理解：当一个状态改变之后，与这个状态相关的事务也立即随之改变，从前端来看就是数据状态改变后相关 DOM 也随之改变。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。 …
深入理解JS中this关键字看个例子 function indetify() { retun this.name.toUpperCase() } var obj = { name: ‘zz’ } indetify.call(obj) // ‘ZZ’ 复制代码这里函数identify中的this指向变量me，如果不使用this的话，想实现这种效果，就需要显示的传入上下文对象，例如 function indetify(contex…
公司要求会使用框架vue，面试题会被问及哪些？如果你是一个已经在学习前端开发的初学者亦或者是一名在代码界纵横多年的程序员，那你一定知道现在最火的前端框架之一Vue.js。它相比于React与Angular上手更加容易，或许这也是很多初学者选择vue的原因之一。我们看到很多招聘上都写着掌握vue开发项目，那么面试都会问什么呢？别急，下面是我给大家整理了一…
前端应该知道的JavaScript浮点数和大数的原理不知道大家在平时的搬砖中有没有遇到过一些JavaScript数字相关的坑，比如比较经典的0.1+0.2=0.30000000000000004、JavaScript有一个Number.MAX_VALUE还有一个Number.MAX_SAFE_INTEGER等等问题。如果这些问题不了解清楚，业务开发中很有可能会出现一些很奇怪的问题。几个问题先抛出几个问题为什么…
你用的那些 CSS 转场动画可以换一换了 “本文主要介绍 N 多种全新的动画过场效果，实现简单，体验俱佳，主要用到的技术是 clip-path 和 mask 遮罩，以及 CSS 变量和 animation 的创新实现方法。”
如何在 JS 循环中正确使用 async 与 awaitasync 与 await 的使用方式相对简单。蛤当你尝试在循环中使用await时，事情就会变得复杂一些。
jQuery源码解析之trigger() 一、 $() .trigger()和 $() .triggerHandler() 的作用和区别（1）trigger("focus") 触发被选元素上的指定事件（focus）以及事件的默认行为（比如表单提交）; triggerHandler(xxx) 不会引起事件（比如表单提交）的默认行为（2）trigger(xxx) 触发所有匹配元素的指定事件； triggerHandler(xxx) 只触…
你真的会用 Promise 吗？前言：回调地狱试想一下，有 3 个异步请求，第二个需要依赖第一个请求的返回结果，第三个需要依赖第二个请求的返回结果，一般怎么做？ try{ // 请求1 $.ajax({ url: url1, success: function(data1){ // 请求2 try{ $.ajax({ url: url1, data: data1, …
了解js运行机制——微任务与宏任务由一道面试题引发的思考。 setTimeout(function() { console.log(4); }, 0); new Promise(function(reslove) { console.log(1); reslove(); }).then(function(data) { console.log(3); }); console.log(2); 复制代码会输出：1，2，3，4。我们来想一下为什么。浏览器中的事件循环 eventLoop，分为同步执行…
DVWA 黑客攻防演练（十三）JS 攻击 JavaScript Attacks 新版本的 DVWA 有新东西，其中一个就是这个 JavaScript 模块了。玩法也挺特别的，如果你能提交 success 这个词，成功是算你赢了。也看得我有点懵逼。初级如果你改成 “success” 提交一下会出现了这个，Invalid token。这是什么回事呢？你可以打开控制台（F12），看看情况。你会看到这个 token，不是后台…
刚刚6月榜单：JS跌惨，Python又霸榜，C++再无翻身可能 Python勇者无敌！最近一份PYPL 6月报告了来了，通过半年的发展，Python基本已奠定2019年-2020的地位，持续称王就对了！ PLPY 6月榜单， JS跌惨只见Python笑，哪闻C++哭 PYPL 发布 6 月编程语言指数榜啦。毫无波澜，Python继续拿下 NO.1，赢得毫无悬念，毫无惊喜。没记错…
玩转 JavaScript 面试：何为函数式编程？
从零实现一个 Webpack Loader 参考： Webpack Book — Extending with Loaders。 Webpack Doc — Loader Interface Loader 是 Webpack 几大重要的模块之一。当你需要加载资源，就需要设置对应的 Loader，这样就可以对其源代码进行转换。由于 Webpack 社区的繁荣，使得大部分的业务场景所使用的资源都有对用的 loader，可…
【JavaScript】数据结构与内存中的堆和栈目录前言一堆栈二堆栈与内存泄漏前言电脑中一个很重要的部件是内存条，绝大多数时候我们在操控一部分ram运行我们的程序，于是就涉及到了堆栈的概念，鉴于总是记不住要查，写一篇比较简单的来记一下堆栈。一堆栈堆栈是一个计算机专用术语，在数据结构里它代表着两种数据…
六种组织CSS的方式Ben Frain曾经说过，写css代码很容易，但是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。
Node 入门：一本全面的 Node.js 教程关于本书致力于教会你如何用Node.js来开发应用，过程中会传授你所有所需的“高级”JavaScript知识。本书绝不是一本“Hello World”的教程。状态你正在阅读的已经是本书的最终版。因此，只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时，才会进行更新。本书中的代码案例都在N…
万古云霄-JavaScript 自检手册 “你武功虽然花样不少，但博而不精，杂而不纯，你到底那样武功最为精湛，专门专研，炼到如火纯清，方有可能打败郭靖”。一直以来看了好多博客，大大小小的 Demo 也练习了不少，可是都没有系统的整理，习惯不好啊。恰好这段时间需要花费一番功夫好好学习一下前端，是时候梳理一下学习的东西了。JavaScript>Vue>CSS&gt…
前端答疑-chrome开发者工具正确食用-看网页源码写这个文章，是因为在今天早上，有两个兄弟找我要源码。有图有真相。我震惊于都 9102年了，身为了一个正（xie）经（xin）前端er，还不会看控制台？
【25年开发经验的大牛，写出了5本JavaScript好书全部免费开源】最近，猿哥在逛技术社区的时候偶然间发现一本关于JavaScript的好书——《JavaScript for Impatient Programmers》，搜索发现已经有许多人都读过这本书，而且评价都非常好。详见
配置Webpack4支持ES6/TypeScript/异步文件引用加载由于Webpack以及它的周边工具babel等更新过快，在当前的时间线来看，很多相关的文章已被版本所淘汰，已经不足以借鉴来搭建一个可以正常使用的环境，所以打算写来记录一下。在写这篇文章的时候我会同步搭建本地环境，尽量避免有略过的细节部分。环境起步熟悉初始化项目的亲可直接跳过。首先请保证node与npm版…
重学前端（8）封装ajax,http,跨域问题 HTTP协议，即超文本传输协议(Hypertext transfer protocol)。是一种详细规定了浏览器和服务器之间互相通信的规则 HTTP协议规定了请求和响应的标准请求与请求报文 get请求的请求报文详解 //————————–请求行——————————– // GET 请求方式 // 01.ph…
JS函数和参数 length 是函数对象的一个属性值，指该函数有多少个必须要传入的参数，即形参的个数。形参的数量不包括剩余参数个数，仅包括第一个具有默认值之前的参数个数。与之对比的是， arguments.length 是函数被调用时实际传参的个数。 demo1: function foo(a, b=1, c) { console.log(arguments.length); // 3 // …
尤大大 6 月 4 日的 Vue 技术分享尤大于 6 月 4 日，在深圳某科技公司做了一次 Vue 相关的技术分享。这里我讲 PPT 分享给大家。让大家了解 Vue 相关的最新进展。文章地址：[链接]
WebSocket，不再“轮询” 1. 前言本文先讲解WebSocket的应用场景和特点，然后通过前后端示例代码讲解，展示在实际的开发中的应用。 1.1. 应用场景 WebSocket是一种在单个TCP连接上进行全双工通信的协议, 是为了满足基于 Web 的日益增长的实时通信需求而产生的。我们平时接触的大多数是HTTP的接口，但是在有些业务场景中满足不了我们的需求…
【25年开发经验的大牛，写出了5本JavaScript好书全部免费开源】最近，猿哥在逛技术社区的时候偶然间发现一本关于JavaScript的好书——《JavaScript for Impatient Programmers》，搜索发现已经有许多人都读过这本书，而且评价都非常好。详见
基于WebSocket的web端IM即时通讯应用的开发功能列表：1、Web端的IM应用2、支持上线、下线、实时在线提醒3、单聊、群聊的建立4、普通文字、表情、图片的传输（子定义富文本）5、单人的顶级提醒，多对话的窗口的提醒6、调用图灵机器人的自动回复演示核心技术…
实用指南：编写函数式 JavaScript 原文：https://www.freecodecamp.org/news/a-practical-guide-to-writing-more-functional-javascript-db49409f71/ 译者：zhicheng 校对者：lily 提示：文中的蓝色字体大家可以点击文末“阅读原文”在 freeCodeCamp 中文论坛访问链接一切都是函数。函数式编程…
尤雨溪大大在 6 月 4 日的 Vue3.0 的技术分享尤大大于 6 月 4 日，在深圳某科技公司做了一次 Vue 相关的技术分享。这里我把现场的 PPT 分享给大家。让大家了解 Vue3.0 相关的最新进展。文章地址： [链接] [链接]
Vue核心50讲 | 第四回：Vue 官方赠送的橙色装备，岂能不要书接上文，上一回咱们快速的了解了 Vue 的生命周期，知道了在 Vue 的生命周期中存在三个比较重要的阶段，分别是 Created、Mounted 和 Destroyed。接下来，咱们就来说一说 Vue 官方赠送的橙色装备 —— vue-devtools。说到 vue-devtools，使用 Vue 开发的时候 Vue 官方推荐在浏览器安装 Vue Devtools 这个工具。这个时候…
介绍一个有趣的 Web 框架：Zero 名字就看着很有趣。所谓Zero的意思是零配置、零烦恼，就是说直接写业务代码即可，其他的事情都交给Zero来搞定。它的官网地址是Zero Server。 Hello World 依照惯例，总是先看Hello World。 npm install -g zero 这个框架需要全局安装。新建一个文件夹，然后在里面新建一个time.js…
JavaScript逻辑运算符的使用技巧 ! , && , || 三个运算符是JavaScript中重要的逻辑运算符，本文将介绍这三个运算符在JavaScript实际编程中的有趣使用技巧。取反运算符（!）如果对一个值连续做两次取反运算，等于将其转为对应的布尔值，与Boolean函数的作用相同。 !!x // 等同于Boolean(x) 复制代码两次取反就是将一个值转为布尔值的简…
[现场实录] VueConf 2019 尤雨溪演讲总结距离参加 VueConf 第一届大会已经很久了，yubo 的介绍一如既往地有意思 :heart:，是他的努力保持了大会热情的社区氛围！另一个彩蛋就是 Evan You 带了自己的亲人和孩子来到现场，真的是其乐融融！本文由【掘金开发者社区】授权转载作者：阴明尤雨溪 @ State of Vue 发展现状 Chrome DevTools 有约 …
Angular 6+依赖注入使用指南：providedIn与providers对比
JavaScript进阶系列-原型继承与原型链先上图原型继承原型继承实现 function Animal(name){ // 属性 this.name = name || ‘Animal’; // 实例方法 this.sleep = function(){ console.log(this.name + " 正在睡觉。"); } } // 原型方法 Animal.prototype.eat = function(food){ console.log(t…
在 Vue 应用中使用 Netlify 表单功能 Netlify 带有内置表单处理功能，可以用来存储表单数据，下载 csv 文件，同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求。它是通过在部署应用时直接解析 HTML 文件，识别 html 中的 form 标签来实现的，本文记录如何在一个 Vue 应用中使用表单功能。开发首先使用@vue/cli 新建一个 Vue…
前端培训-初级阶段-场景实战（2019-06-06）-Content-Type对照表及日常使用前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（…
2019 年了，为什么我还在用 jQuery？译者按：看来 jQuery 还是有一些用武之地的。原文: Why I’m Still Using jQuery in 2019 译者: Fundebug 为了保证可读性，本文采用意译而非直译。翻译仅供学习探讨，不代表 Fundebug 观点。许多人都在提倡: “…
2020 年你应该知道的 8 种前端 JavaScript 趋势和工具前端开发人员和技术人员的数量逐年增加，而整个生态系统渴望实现标准化。新技术和工具的出现已经改变了游戏规则。可以肯定地说，总体趋势将是 UI 标准化、基于组件的模块化和组合，这将影响从样式到测试甚至状态管理的所有方面，并在总体上实现更好的模块化。 JavaScript 世界日新月异。前端开发（和 web 开发）的…
Vue核心50讲 | 第一回：Vue 与 MVVM 之间那些事儿书接上文，上一回咱们说到了如今的前端江湖早已是框架三分天下的格局。接下来，咱们就要说到主角 Vue 了。在说真正的 Vue 内容之前，咱们还要先来说说 Vue 与 MVVM 之间的那些事儿。
重回前端之Class 在学习了C#之后，回头再看JavaScript时，第一时间就想到关于Class和伪类，当初在看《JavaScript高程》和《JavaScript语言精粹》时，在关于原型和继承的相关章节，不止一次的提到了伪类，并阐述了使用的伪类的优点和缺点。“伪类”形式可以给习惯了使用基于类的语言编程的后端程序员提供方便书写JavaScript的便利，但是隐藏…
你知道HTML、CSS、JS、Services、PHP、ASP.NET 是什么来头么？首先我们要知道访问网站的流程是什么?大家每天也访问。假设大家在浏览器地址栏输入这个问题的地址 https://www.头条.com/question/22689579 HTML 与 CSS 当自己的电脑得到一个 html页面 (图中HTTP 响应中 body 里的内容)之后，就会对它进行解析。HTML 就是一种超文本标记语言。给大家举一些实例…
掌握 Javascript 类型转换：从规则开始Javascript 里的类型转换是一个你永远绕不开的话题，不管你是在面试中还是工作写代码，总会碰到这类问题和各种的坑，所以不学好这个那是不行滴。关于类型转换我也看过不少的书和各种博客、帖子，也查过规范和做过…
nodejs 的 http.createServer 过程解析戳蓝字「高级前端进阶」关注我们哦！下面是nodejs创建一个服务器的代码。接下来我们一起分析这个过程。 var http = require(‘http’); http.createServer(function (request, response) { response.end(‘Hello World ‘); }).listen(9297); 首先我们去到lib/http.js模块看一下这个函数的代码…
Web 漏洞防护指南资料总结得还不错。
复习webpack4之如何编写loader 之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好…