CSS @font-face 性能优化；Webpack5.0 新特性尝鲜实战 ；Git 自救指南；Vue响应式原理-理解Observer、Dep、Watcher；jQuery源码解析之trigger()；前端进阶之 let、const、var；前端框架技术选型 React vs. Vue (vs. Angular)；公司要求会使用框架vue，面试题会被问及哪些？
-
CSS @font-face 性能优化 本文主要介绍字体加载优化的常用策略。
-
Webpack5.0 新特性尝鲜实战 在老袁写这篇文章的时候，v5版本仍然处于早期阶段，可能仍然有问题。而且作为一个 major 版本，其中有一些breaking changes，可能会导致一些配置和插件不工作。但这并无妨碍我们去开始对changelog上的新特性进行尝鲜实战。大家如果遇到什么问题可以 移步到这 进行反馈。另外有关于Webpack4的配置和Compiler->Compilat…
-
Git 自救指南Git 虽然因其分布式管理方式，不完全依赖网络，良好的分支策略，容易部署等优点，已经成为最受欢迎的源代码管理方式。但是一分耕耘一分收获，如果想更好地掌握 git，需要付出大量的学习成本。即使在各种 GUI 的加…
-
Vue响应式原理-理解Observer、Dep、Watcher 最近在学习Vue的源码，看了网上一些大神的博客，看起来感觉还是蛮吃力的。自己记录一下学习的理解，希望能够达到简单易懂，不看源码也能理解的效果:laughing: 如果有错误，恳求大佬们指点嘿:yum: Object.defineProperty 相信很多同学或多或少都了解Vue的响应式原理是通过 Object.defineProperty 实现的。被 Objec…
-
jQuery源码解析之trigger() 一、 $() .trigger()和 $() .triggerHandler() 的作用和区别 （1）trigger("focus") 触发被选元素上的指定事件（focus）以及事件的默认行为（比如表单提交）; triggerHandler(xxx) 不会引起事件（比如表单提交）的默认行为 （2）trigger(xxx) 触发所有匹配元素的指定事件； triggerHandler(xxx) 只触…
-
前端进阶之 let、const、var 首先我们来看一段代码 console.log(变量) // undefined var 变量 = 1 复制代码 从上面的代码来看，虽然变量还没有被声明，但是我们却可以使用，这种情况就叫做提升，并且是声明提升。 再来一段代码 console.log(变量) // ƒ 变量() {} function 变量() {} var 变量 = 1 复制代码 上面的代码叫做函数提升，函数…
-
前端框架技术选型 React vs. Vue (vs. Angular) 重新考虑前端技术选型需要大量思考，讨论，决策，规划，管理和实施。我们首先需要做出的决定之一是选择一个前端框架来重新设计我们的产品。 我们研究了几个月来保证我们得出一个的更好决策。进行讨论，建立概念证明，与其他公司相关经验的同事进行面谈，并阅读大量在线材料。 在本文中，我将比较选型过程中的入围者…
-
公司要求会使用框架vue，面试题会被问及哪些？ 如果你是一个已经在学习前端开发的初学者亦或者是一名在代码界纵横多年的程序员，那你一定知道现在最火的前端框架之一Vue.js。它相比于React与Angular上手更加容易，或许这也是很多初学者选择vue的原因之一。 我们看到很多招聘上都写着掌握vue开发项目，那么面试都会问什么呢？别急，下面是我给大家整理了一…
-
从零实现一个 Webpack Loader 参考： Webpack Book — Extending with Loaders。 Webpack Doc — Loader Interface Loader 是 Webpack 几大重要的模块之一。当你需要加载资源，就需要设置对应的 Loader，这样就可以对其源代码进行转换。 由于 Webpack 社区的繁荣，使得大部分的业务场景所使用的资源都有对用的 loader，可…
-
【JavaScript】数据结构与内存中的堆和栈 目录 前言 一 堆栈 二 堆栈与内存泄漏 前言 电脑中一个很重要的部件是内存条，绝大多数时候我们在操控一部分ram运行我们的程序，于是就涉及到了堆栈的概念，鉴于总是记不住要查，写一篇比较简单的来记一下堆栈。 一 堆栈 堆栈是一个计算机专用术语，在数据结构里它代表着两种数据…
-
前端培训-初级阶段-场景实战（2019-06-06）-Content-Type对照表及日常使用前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（…
-
JS数组的数据结构 当我们谈到栈和队列的时候，就会条件反射想起数据结构。在ECMAScript标准中，数组也是提供了类似于其他数据结构的方法，分别是 栈方法 和 队列方法 。 二、栈方法 1. 定义 栈是一种 后进先出 的数据结构，也就是最新添加的项会被最早移除，如同堆叠烙饼一般。 栈中项的插入（又叫推入）和移除（又叫弹出）只…
-
实用指南：编写函数式 JavaScript 原文：https://www.freecodecamp.org/news/a-practical-guide-to-writing-more-functional-javascript-db49409f71/ 译者：zhicheng 校对者：lily 提示：文中的蓝色字体大家可以点击文末“阅读原文”在 freeCodeCamp 中文论坛访问链接 一切都是函数。 函数式编程…
-
重回前端之Class 在学习了C#之后，回头再看JavaScript时，第一时间就想到关于Class和伪类，当初在看《JavaScript高程》和《JavaScript语言精粹》时，在关于原型和继承的相关章节，不止一次的提到了伪类，并阐述了使用的伪类的优点和缺点。“伪类”形式可以给习惯了使用基于类的语言编程的后端程序员提供方便书写JavaScript的便利，但是隐藏…
-
Vue核心50讲 | 第四回：Vue 官方赠送的橙色装备，岂能不要 书接上文，上一回咱们快速的了解了 Vue 的生命周期，知道了在 Vue 的生命周期中存在三个比较重要的阶段，分别是 Created、Mounted 和 Destroyed。接下来，咱们就来说一说 Vue 官方赠送的橙色装备 —— vue-devtools。 说到 vue-devtools，使用 Vue 开发的时候 Vue 官方推荐在浏览器安装 Vue Devtools 这个工具。这个时候…
-
六种组织CSS的方式Ben Frain曾经说过，写css代码很容易，但是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。
-
JavaScript进阶系列-原型继承与原型链 先上图 原型继承 原型继承实现 function Animal(name){ // 属性 this.name = name || ‘Animal’; // 实例方法 this.sleep = function(){ console.log(this.name + " 正在睡觉。"); } } // 原型方法 Animal.prototype.eat = function(food){ console.log(t…
-
那些年，我们一起踩过的坑（前端防翻车指南） javascript做为一门脚本语言，由于缺乏约束，以及各种自动容错机制和隐式转换，产生了很多容易误解和容易引发问题的地方， 《javascript语言精髓》一书中，有很大一部分篇幅介绍了javascript语言的糟粕和毒瘤部分，相信大部分问题有些人遇到过，有些人则通过学习知晓其原理而完美的躲过，随着ES规范的不断完善与发展，其…
-
配置Webpack4支持ES6/TypeScript/异步文件引用加载 由于Webpack以及它的周边工具babel等更新过快，在当前的时间线来看，很多相关的文章已被版本所淘汰，已经不足以借鉴来搭建一个可以正常使用的环境，所以打算写来记录一下。 在写这篇文章的时候我会同步搭建本地环境，尽量避免有略过的细节部分。 环境起步 熟悉初始化项目的亲可直接跳过。 首先请保证node与npm版…
-
谈谈JavaScript中装箱和拆箱 在 JavaScript 里面有个引用类型叫做 基本包装类型 ，它包括 String、Number和Boolean 。那么它和基本的类型 String、Number和Boolean 是啥关系呢？接着往下看:eyes: 装箱操作 所谓的 装箱 ，是指将基本数据类型转换为对应的引用类型的操作。而装箱又分为 隐式装箱和显式装箱 。 隐式装箱 …
-
通过什么途径能够深入了解 JavaScript 引擎是如何工作的？ 昨天收到一封来自深圳的一位前端童鞋的邮件，邮件内容如下（很抱歉，未经过他的允许，公开邮件内容，不过我相信其他人肯定也有同样的问题，所以，直接把问题原文抛出来）： “读了你的几篇关于JS（变量对象、作用域、上下文、执行代码）的文章，我个人觉得有点抽象，难以深刻理解。我想请教下通过什么途径能…
-
异步编程（1）：Promise 我们都知道，ES是单线程语言。所以异步编程对它来说，尤其重要。也可以说是他的核心功能。 我们常见的异步编程有很多，比如 回调函数 、 事件监听 发布订阅 Promise 等。 在早期的时候，我们使用的主要方式是回调函数，但是当我们有很多回调函数需要依赖的时候，一层套一层，就会形成 回调地…
-
一步步分析 Node.js 的异步I/O机制 它的优秀之处并非原创，它的原创之处并非优秀。 《深入浅出Node》 本文章节如下图所示，阅读时间大约为10分钟~15分钟，图少字多，建议仔细阅读。 背景 在计算机资源中， I/O 和 CPU计算 在硬件支持上是可以并行进行的。所以，同步编程中的I/O引起的阻塞导致后续任务（可能是CPU计算，也可能是其他I/O…
-
JavaScript 线性代数：向量 本文是“JavaScript 线性代数”教程的一部分。 向量是用于精确表示空间中方向的方法。向量由一系列数值构成，每维数值都是向量的一个 分量 。在下图中，你可以看到一个由两个分量组成的、在 2 维空间内的向量。在 3 维空间内，向量会由 3 个分量组成。 我们可以为 2 维空间的向量创建一个 Vector2D 类，…
-
Fundebug前端JavaScript插件更新至1.8.0，兼容低版本的Android浏览器 摘要：兼容低版本Android浏览器，请大家及时更新。 Fundebug前端BUG监控服务 Fundebug 是专业的程序BUG监控平台，我们JavaScript插件可以提供全方位的BUG监控，可以帮助开发者第一时间定位JavaScript执行错误、HTTP请求错误以及资源加载错误。并且，我们可以记录用户行为、“录制”用户操作视频，帮助开发者…
-
重学前端（8）封装ajax,http,跨域问题 HTTP协议，即超文本传输协议(Hypertext transfer protocol)。是一种详细规定了浏览器和服务器之间互相通信的规则 HTTP协议规定了 请求 和 响应 的标准 请求与请求报文 get请求的请求报文详解 //————————–请求行——————————– // GET 请求方式 // 01.ph…
-
提升javascript运行速度的编程实践（延迟加载、条件预加载和位运算） 在计算机领域中最主要的性能优化技术之一就是“避免无谓的工作”，避免无谓的工作有两层意思：第一是“别做无关紧要的工作”（废代码），第二是重复已完成的工作。无关紧要的工作在代码重构的过程中往往能够被发现，第二种经常难以发现和界定。 避免重复的工作，以浏览器探测为例： function addHandler(target,eventTyp…
-
面试官(8): React 强调的『不可变数据结构』怎么实现? 我们在学习 React 的过程中经常会碰到一个概念,那就是数据的不可变性(immutable),不可变数据是函数式编程里的重要概念,因为可变数据在提供方便的时候会带了很多棘手的副作用,那么我们应该如何处理这些棘手的问题,如何实现不可变数据呢? 文章目录 可变数据的副作用 不可变数据的解决方案 实现更简单的immut…
-
一周 GitHub 开源项目推荐 | Golang、Python、PHP、前端、机器学习、Linux 一周 GitHub 开源项目推荐 点击链接或图片即可阅读 喜欢请分享到朋友圈哦 深入 Go 并发编程研讨课 通过本次课程，你可以: 了解基本同步原语的具体实现、hack 同步原语进行扩展，了解它们的使用场景和坑，以及别人是怎么踩的 …
-
前端打包混编压缩js代码，如何不重新打包，修改js文件内部配置参数？ 利用worker多线程 实现基于vue打包后外置配置化操作 实际就是vue build打包文件都混编了 但是worker多线程 实现外部配置。 前端项目在build后，项目的代码通常进行混编、压缩等处理，我们的js代码最终会成为无序的js模块文件。若修改项目中业务的配置参数，通常可以通过接口服务来传达，但是有时候也需要外部的配置文…
-
webpck4.x系列-output 说过了entry， 与之相对应的便是output output出口 目录 配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。 output的配置项要比entry多 具体详细的配置，可以 参考 filename 打包输出的文件…
-
刚刚6月榜单：JS跌惨，Python又霸榜，C++再无翻身可能 Python勇者无敌！ 最近一份PYPL 6月报告了来了，通过半年的发展，Python基本已奠定2019年-2020的地位，持续称王就对了！ PLPY 6月榜单， JS跌惨 只见Python笑，哪闻C++哭 PYPL 发布 6 月编程语言指数榜啦。 毫无波澜，Python继续拿下 NO.1，赢得毫无悬念，毫无惊喜。 没记错…
-
手摸手教你搭一个前后端 React、Typescript、Koa、GraphQL 环境 项目选型与环境搭建 项目选型 三大框架里选哪个？ react 个人爱好。 react-router 定义路由。 react context 状态管理。 react hooks 组件化。 引入强类型语言？ typescript。为 js 提供类型支持，编辑器友好，增加代码…
-
Promise使用以及源码推理 Promise是什么 Promise是高版本浏览器自带的一个类，不兼容低版本浏览器。Promise对象有三个状态，等待态pending，成功态resolved，失败态rejected，默认为pending，成功或者失败后不可再变化状态。 我们为什么用Promise 在异步编程中可以帮助我们解决回调地狱的痛苦。方便有连带关系的异步请求编写，也可实现并发…
-
类似 GitHub 的 webhook 实现 Webhook是一种非常强大的推送机制，如果熟悉WordPress的同学可以类比构建WP生态的各类钩子函数。Githubt通过webhook让开发人员可以监听仓库的变化触发持续集成工具的运作，比如Travis CI。 需求 大家都看过Github上的webhook，可以对某一个repository设置webhook监听仓库变化，比如push，page_build等…
-
从setTimeout简单了解js事件模型 先从一个例子入手： (function() { console.log(‘开始执行’) setTimeout(function fun1() { console.log(‘第一个延时函数消息’) }) console.log(‘一条消息’) setTimeout(function fun2() { console.log(‘第二个延时函数消息’) }, 0) console.log(‘结束’) })(); 复制代码 输出结果很容…
-
基于vue-cli3多页面开发apicloud应用 之前开发项APP项目直接用APICloud+原生js的方式进行编写，整个项目下来发现开发慢，页面代码多且复杂，维护起来相对困难，而且文件大打包之后的APP会比较大，apicloud的框架也不好用，支持部分es67(像let、const、import等es6新特性不支持写的太难受了) 采用vue-cli+APIcloud的方式写解决以上痛点，开发灵活，并且打包…
-
#工具推荐#【CSS Grid 代码生成器：CSS Grid Generator】详见： CSS Grid Generator 是一款通过拖拽方式就可以生成 CSS Grid 代码的工具，帮助你快速进行动态布局。
-
如何压缩JS代码？ 当我们使用 JQuery 这样的库的时候，会发现通常会提供两个版本：开发调试就引入未压缩的开发版，正式发布就引入压缩后的生产版。那么要压缩自己的JS代码要怎么做呢？ 把如何压缩JS代码作为第二个例子，是因为我以前在刚开始学习前端知识的时候就疑惑什么事生产版和开发版~新童鞋可以先了解，后理解。 使用 Ug…
-
谈谈js点击之后发生了什么 之所以突然想写这个文章，主要是之前看到一篇有意思的博文， 《探究点击事件在JavaScript事件循环中的表现》 ，有趣的地方在于JS点击事件加入回调的 并不是点击事件的回调方法 ，而是点击事件本身 (点击位置等描述点击的) 。 点击不是加入回调而不是加入事件 <body style="height: 2000px"&…
-
什么时候不能在 Node.js 中使用 Lock Files[每日前端夜话0x7E] 每日前端夜话 0x7E 每日前端夜话，陪你聊前端。 每天晚上18:00准时推送。 正文共：3509 字 预计阅读时间： 10 分钟 翻译：疯狂的技术宅 来源： toptal When Not to Use Lock Files with Node.js “可是在我的机器上能工作啊！”这种场景可能是调试 bug 时最常…
-
Angular 8.0 正式发布：支持更多 Web 标准 “ Angular 8.0 版缩短了应用在现代浏览器上的启动时间，提供了用于访问 CLI 的新 API，并使 Angular 支持更多 Web 标准，追上了 Web 生态的前沿发展趋势。”
-
webpack 4.0 小记 其实之前也会看一些 webpack 脚手架的配置，但是使用的插件实在是太多了，不了解各个插件的左右是一个很大的瓶颈，所以着手认识认识各大插件。 项目地址 ，之前一直都是用脚手架工具，最近得闲就学习了花裤衩大佬的手摸手系列，自己按着实现一下，顺便记录一下知识点。 项目使用 yarn,之前用主要使用 cnpm，但是总…
-
vue实现录音功能（pc端） 录音功能一般来说在移动端比较常见，但是在pc端也要实现按住说话的功能呢？项目需求：按住说话，时长不超过60秒，生成语音文件并上传，我这里用的是recorder.js 1.项目中新建一个recorder.js文件，内容如下，也可在百度上直接搜一个 // 兼容 window.URL = window.URL || window.webkitURL navigator.getUser…
-
Web 漏洞防护指南 资料总结得还不错。
-
React Hooks 源码解析 译文一篇。
-
生产环境下的Node.js——开源监控工具 你认为Node.js应用程序可以拥有的最重要的功能是什么？ 是花哨的全文模糊匹配搜索，还是用socket进行实时聊天呢？ 你能告诉我可以添加到Node.js应用中的最高级，最惊人和最吸引人的功能是什么么？ 想知道我的么？ 高性能和不间断服务 。高性能应用程序需要做好以下三点： 最短的停机时间； 可预测的资源使…
-
在 Vue 应用中使用 Netlify 表单功能 Netlify 带有内置表单处理功能，可以用来存储表单数据，下载 csv 文件，同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求。 它是通过在部署应用时直接解析 HTML 文件，识别 html 中的 form 标签来实现的，本文记录如何在一个 Vue 应用中使用表单功能。 开发 首先使用@vue/cli 新建一个 Vue…
-
你用的那些 CSS 转场动画可以换一换了 “本文主要介绍 N 多种全新的动画过场效果，实现简单，体验俱佳，主要用到的技术是 clip-path 和 mask 遮罩，以及 CSS 变量和 animation 的创新实现方法。”
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
