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

JavaScript如何编写类；面试官(7): 聊一聊 Babel?；用100行代码，完成自己的前端构建工具；深入学习 JavaScript —— this 绑定；Vue 组件间通信方式；js为什么是单线程；30分钟用Node.js构建一个API服务器；canvas && CSS 两种实现仪表盘的方式

JavaScript如何编写类关于JavaScript编写类的方式，总结一下JavaScript编写类的几种写法以及这几种写法的优缺点。构造函数方式基本语法： function 类名(){ this.属性名;//公共属性 var 属性名;//私有属性 /*凡是定义类的公共属性和公共方法都要使用this*/ //定义类的公共函数 this.函数名=function(){ …
面试官(7): 聊一聊 Babel? Babel 是现代 JavaScript 语法转换器,几乎在任何现代前端项目中都能看到他的身影,其背后的原理对于大部分开发者还属于黑盒,不过 Babel 作为一个工具真的有了解背后原理的必要吗? 如果只是 Babel 可能真没有必要,问题是其背后的原理在我们开发中应用过于广泛了,包括不限于: eslint jshint stylelint css-in-js prettier…
用100行代码，完成自己的前端构建工具ES2017+，你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建工具，可以脑海中永远划掉。 100行代码，你将透视构建工具的本质。 100行代码，你将拥有一个…
深入学习 JavaScript —— this 绑定这里直接列出 this 绑定的四大规则，这些规则都是《你不知道的JavaScript》一书中提到的关键词，个人觉得比较好理解。因为这里只涉及常识性的介绍，如果已经了解的话可以快速跳过，进入下一小节。如果你还不熟悉，可能会碰到很多陌生又让你心痒的概念。这里建议你先暂时放下，我会在后文详细说明，或贴上我觉得不错的博…
Vue 组件间通信方式Vue 是数据驱动的视图框架，那么组件间的数据通信是必然的事情，那么组件间如何进行数据传递呢？首先组件间通信有父子组件、兄弟组件、堂兄弟组件、叔侄组件等，分类太多可能不好理解，我们暂且分为：父子组件…
js为什么是单线程进程就是一个公司，每个公司都有自己的资源可以调度；公司之间是相互独立的；而线程就是公司中的每个员工(你，我，他)，多个员工一起合作，完成任务，公司可以有一名员工或多个，员工之间共享公司的空间什么是进程？进程：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位）什么是线程？线程：…
30分钟用Node.js构建一个API服务器本教程是 Node.js，Express 框架和 MongoDB 的快速指南，重点介绍基本的 REST 路由和基本的数据库交互。你将构建一个简单的 API 框架模版，然后可以将其用作任何应用。
canvas && CSS 两种实现仪表盘的方式先上效果图：这种图形大家应该都见过，俗称仪表盘，当然，上图只是个最基本的仪表盘架子，可能在实际场景中还会其他很多花里胡哨的点缀，那些暂且不管，不是关键，这东西经常见到，但还没亲自上手在代码层面实现过，最近做的一个需求恰好有这个场景，这里归纳一下 canvas实现大部分情况下，对于这种…
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目前注册用…
Node.js 究竟是什么？[每日前端夜话0x72] 每日前端夜话 0x72 每日前端夜话，陪你聊前端。每天晚上18:00准时推送。正文共：1716 字预计阅读时间： 6 分钟翻译：疯狂的技术宅来源： freecodecamp Node.js 是一个 JavaScript 运行时环境。听起来还不错，不过这究竟意味着什么？它又是如何运作的？ Node 运行时环境包含执行…
金三银四的魔都两年半前端面经前言先介绍下个人基本情况，16届本科非计算机相关专业，毕业转行前端，过年后裸辞休息了半个月，然后到三月份开始准备面试，主要是过去做过的项目总结，刷算法题，巩固基础知识之类的。3月末开始面试。因为目前网上面经还是以1~3年居多，我投简历对标的3~5年岗位，考察点确实有些不一样，这里把接近3个星期的面试…
深入学习 JavaScript —— 闭包作者虽然不是第一次写学习笔记了，但是系统性的专栏确实是第一回写，所以对这篇文章难度的预估量不够，酝酿了蛮久时间的。写之前一直在纠结一个问题，这类问题网上已经有各类大神做出各种很详细的分解了，还有必要写吗？能让我有动力写的原因，一个是强烈的表达欲望，另一个是希望后来者能通过我这篇文章学到一点东西。…
使用vue自定义指令开发一个表单验证插件validate.js 这段时间在进行一个新项目的前期搭建，新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量，所以基本没有使用额外的ui组件，有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程。 1.vue插件开发关于vue的插件开发，官方文档…
开发 HTML5 小游戏 Html5小游戏在介绍小游戏之前，先看一个框架 Phaser 。 Phaser 框架是一个快速、免费且开源的 HTML5 游戏开发框架，它提供了Canvas 和WebGL 两种渲染方式，兼容 PC 端与移动端浏览器。一、Phaser 版本在启动 Phaser 游戏前，需要定义一个 Phaser.Game 对象实例，并同时将配置信息传至该…
《除了 async 速度翻 10 倍，2019 年 JavaScript 还会带来什么？》在前几天的 Google I/O 2019 上，V8 团队的 Mathias Bynens 与 Sathya Gunasekaran 分享了 JavaScript 的最新研发进展。（by 开源中国）
vue系列–vue.js框架原理浅析 vue.js是一个非常优秀的前端开发框架，不是我说的，大家都知道。首先我现在的能力，独立阅读源码还是有很大压力的，所幸vue写的很规范，通过方法名基本可以略知一二，里面的原理不懂的地方多方面查找资料，本文中不规范不正确的地方欢迎指正，学生非常愿意接受各位前辈提出宝贵的建议和指导。使用vue的版本是v2.5….
HTML5-焦点管理在开发TV web 应用时，发现在交互方式上和传统web开发很不一样。PC上的页面上都是通过鼠标进行交互，而TV则不同，它是通过遥控器按键进行交互，它有点击、移动(上下左右)、返回、主页等操作。移动的实质则是切换焦点，所以我们需要去理解什么焦点。 focusable元素: 能够被聚焦的元素，比如 button 、 in…
深入浅出node.js总结-模块机制（1） javascript先天就缺乏一项功能：模块 javasciprt 通过script标签引入代码的方式显得杂乱无章，语言自身毫无组织和约束能力。人们不得不用命名空间等方式人为地约束代码，以求达到安全和易用的目的。为了让javascript能在服务端有市场，社区为javascript制定了相应的规范——CommonJS CommonJS规范 Com…
前端必修课：ES2017+下的构建工具原理与实战 ES2017+，你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建工具，可以脑海中永远划掉。 100行代码，你将透视构建工具的本质。 100行代码，你将拥有一个现代化、规范、测试驱动、高延展性的前端构建工具。在阅读前，给大家一个小悬念：什么是…
【整理】18种推荐的CSS命名和书写规范选择器的命名规范 1.模块化命名例如：与布局相关的样式以“g”为开头。如“g-content”和“g-header”；与挂钩相关的样式以“j”为开头。如“j-open”和“j-request”；与元件相关的样式以“m”为开头。如“m-dropMenu”和“m-…
『互联网架构』软件架构-netty之websocket协议应用实践（59）今天所说的websocket是个文本协议，还是二进制协议呢？源码：https://github.com/limingios/netFuture/tree/master/源码/『互联网架构』软件架构-io与nio线程模型reactor模型（上）（53）/nio （一）websocket协议概述假设我们要实现一个WEB版的聊天室可以采用哪些方案？ 1.Ajax轮询去服务器取消息客…
CSS3 filter（滤镜）属性css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。
html5 head 标签以前我们常用的是 <html lang="zh-CN"> 或简写的 <html lang="zh"> ，但实际上W3 language tags 推荐使用 zh-Hans 简体中文、 zh-Hant 繁体中文，可以提高一致性和准确。二、meta 标签 1.声明文档使用的字符编码 <meta charset="utf-8"…
前端每日实战 168# 视频演示如何利用 Web Animation API 制作一个切换英语单词的交互动画效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [链接] 可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 [链接] …
#开源项目#【网址导航网站项目：WebStack-Laravel】详见： WebStack-Laravel 是一个开源的网址导航网站项目。它具备完整的前后台，可以帮助你打造专属于自己的网址导航。
关于cnode react的一比一实现本项目是学习react一个非常好的案例，不论是入门还是想进阶的人都能得到帮助。如果你觉得本项目确实给你带来了收获，记得分享给他人和 star 一下。通过本项目，你可以学到：一个合理的react项目应该是什么样子 react/redux项目的目录结构组织方式模块化开发以及管理数据的方式如何抽象容…
Angular Material Form field 校验详解概述在Material的官方文档中，我们可以看到Form field组件中提供了错误信息提示的封装，例子如下： 1<div class=”example-container”> 2 <mat-form-field> 3 <input matInput placeholder=”Enter your email” [formC…
11 种在大多数教程中找不到的JavaScript技巧当我开始学习JavaScript时，我把我在别人的代码、code challenge网站以及我使用的教程之外的任何地方发现的每一个节省时间的技巧都列了一个清单。
Vue生命周期总结这里主要记录在日常中对知识的学习，通过结合笔记与自身理解的方式尝试写下总结文章对细节可能不会一一介绍解释，内容仅作参考复制代码这些天在尝试开始对Vue源码的解读，一点一点去了解框架的设计以及实现思路。今天在编码时候想了有关生命周期的问题，刚好晚上就看到了相关知识。作为其中一小步记录一下一、生…
在 React 组件中使用 Refs 指南使用 React 时，我们的默认思维方式应该是不会强制修改 DOM ，而是通过传入 props 重新渲染组件。但是，有些情况却无法避免修改 DOM 。
你要了解的 JavaScript —— Scope 在JavaScript中，Scope（作用域）是一个非常重要的概念，对很多刚接触JavaScript的开发者来说，这个概念理解起来并不容易。本文的目的就是对JavaScript Scope的知识点做一次梳理，希望通过本文能帮助你更好的理解Scope。 #Scope到底是什么？在JavaScript中，Scope一般译为作用域，可以通俗易懂的理解为：作用…