目前前端最流行的代码规范；前端开发如何包装可重用的JavaScript代码；Webpack loader 之 url-loader；仅用38行代码，教你用node.js打造一个简单的Twitter机器人；KOA + egg.js 集成 kafka 消息队列；loading动画的性能优化-摒弃Canvas，拥抱CSS3-实现点击特效；前端调试入门；详解leetcode146题【LRU (最近最少使用) 缓存机制】(附js最优解法)
-
目前前端最流行的代码规范 良好的代码规范，不仅能够让代码简洁清晰，还可以减少 bug 的出现，更能够让看代码的人赏心悦目。今天，在浏览 GitHub 的时候，偶然看到别人翻译的一份 JavaScript 代码规范（中文版）。 这份规范是：Airbnb 出品，目前非常流行。其内对各种 js 范式的写法进行了详细的规定与说明，按照此规范写出的代码将会更加合理。 …
-
前端开发如何包装可重用的JavaScript代码 在日常工作中，你可能写过很多JavaScript代码，有些基础性的功能，甚至那些需要重复使用的业务功能，总不愿意重复再写上一遍。 如果是通过复制的方式来达到重用目的话，暂不说复制来复制去容易出错，一旦使用该功能的业务达到上十个之多时，任何一个重用的基础功能出现BUG，都要在各个业务同步修复，费时费力，最后把…
-
Webpack loader 之 url-loader npm install –save-dev url-loader 用法 url-loader 功能类似于 file-loader ，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。 import img from ‘./webpack-logo.png’ webpack.config.js module.exports = { mo…
-
KOA + egg.js 集成 kafka 消息队列 Egg.js ： 基于KOA2的企业级框架 Kafka：高吞吐量的分布式发布订阅消息系统 本文章将集成egg + kafka + mysql 的日志系统例子 系统要求：日志记录，通过kafka进行消息队列控制 思路图： 这里消费者和生产者都由日志系统提供 λ.1 环境准备 ①Kafka 官网下载kafka后，解压 启动zookeeper： b…
-
loading动画的性能优化-摒弃Canvas，拥抱CSS3-实现点击特效 click-colorful 项目中有个活动页加载时有个loading动画，效果如上图，连续绽放小球，问题就是太卡，经常出现一堆小球抱团卡住，遂进行优化 注意：（仅在页面加载时卡顿，加载完毕，点击的时候不卡顿） 查看代码发现改动画时借用的animejs 官网中的效果，通过canvas实现的，按理说canvas应该时性能很好的，…
-
前端调试入门这里的控制台特指PC端浏览器进入开发者模式之后新打开的操作界面。常见的控制台有Chrome的控制台，Firefox的firebug。这些都能帮助我们调试前端问题。本手册将以Chrome浏览器控制台为例进行讲解。
-
详解leetcode146题【LRU (最近最少使用) 缓存机制】(附js最优解法) 运用你所掌握的数据结构，设计和实现一个 LRU (最近最少使用) 缓存机制。它应该支持以下操作： 获取数据 get 和 写入数据 put 。 获取数据 get(key) – 如果密钥 (key) 存在于缓存中，则获取密钥的值（总是正数），否则返回 -1。 写入数据 put(key, value) – 如果密钥不存在，则写入其数据值。当缓存容量达到上限时，它…
-
几种常见的CSS布局 本文概要 本文将介绍如下几种常见的布局： 单列布局 两列自适应布局 圣飞布局和双飞翼布局 伪等高布局 粘连布局 一、单列布局 常见的单列布局有两种： header,content和footer等宽的单列布局 header与footer等宽,conten
-
CSS三角的写法（兼容IE6） 目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框。 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样的原因是： 最简单的解决办法：(后面添加) 其他的解决
-
从头开始学习vue-router要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题。
-
让 Vuepress 支持图片放大功能 前两天接触到了 Vuepress ，颜值很高，界面简洁，容易上手。于是打算把博客从 hexo 迁移过去。 但是发现图片是不能点击的。 Markdown 在渲染的时候连 a 标签都没有添加，不仅不能直接点，也不能放大。然而我的博客中是有很多大图的，所以这个功能是刚需。 我试了下最新版本 1.x alpha 还是没有…
-
10月前端面试题目汇总上家公司经营问题，无奈导致技术团队解散，又再一次奔赴找工作的大潮。谨以此文记录一下面试过程中遇到的问题。（不定时更新）
-
深入理解CSS选择器优先级 什么是选择器优先级（Specificity） 直接复制了 MDN对优先级的定义 ： 浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。 这句话也是很抽象，暂且先不管它了。但是我们可
-
js:Array对象常用方法介绍new Array()创建数组有一个需要注意的地方。只传一个参数时，如果这个值是非数字。会被当做数组的第一个参数，生成一个长度为1的数组。如果是数字，就会创建一个这个数字长度的空数组。
-
浅谈关于react router4 权限那些事 背景 近期做了一个 spa的单独项目中,有个需求就是希望根据登录人来看下,这个人是不是有权限进入当前页面。虽然服务端做了进行接口的权限，但是每一个路由加载的时候,都要去请求这个接口太浪费了。 需要考虑的 登录授权，用户没有登录只能访问登录页面，如果处于登录
-
Vue 进阶系列（三）之Render函数原理及实现 Vue进阶系列汇总如下，欢迎阅读，欢迎加高级前端进阶群一起学习（文末）。 Vue 进阶系列（一）之响应式原理及实现 Vue 进阶系列（二）之插件原理及实现 Render函数原理 根据第一篇文章介绍的响应式原理，如下图所示。 在初始化阶段，本质上发生在auto
-
Everyday-FE-Articles 8~11月前端文章日推 [持续更新] 由来自@阿里马跃的每日文章推荐，于是顺手整理，以便学习… — By Ale-cc /* 注：序号不准确 */ 八月份 8月7日 星期二，农历六月廿六 Scriptswitch: Conditional Script Loading Manager for Browsers github.com/anywhichway… 三十分钟掌握Webpack性能优化supermaryy.com/ 前端…
-
「前篇」JavaScript如何获取一个元素的样式信息 关于JavaScript如何获取一个元素的所有样式值，及设置一个元素的样式值，所有相关知识点，看这两篇够了。记住了，都很简单的。来来来… 想要获取一个元素的一个或者多个CSS样式设置，这应该是搞前端的都碰到过的一件事。如果你平时用JavaScript实现过一些动画效果什么的。肯定就会知道一个问题：元素内联样式和动态设…
-
zanePerfor 一款完整，高性能，高可用的前端性能监控系统，不要错过 HI!，你好，我是zane，zanePerfor是一款最近我开发的一个前端性能监控平台，现在支持web浏览器端和微信小程序段。我定义为一款完整，高性能，高可用的前端性能监控系统，这是未来会达到的目的，现今的架构也基本支持了高可用，高性能的部署。实际上还不够，在
-
这就是所谓的JavaScript异步 ECMAScript 6(简称ES6)将 JavaScript 异步编程带入了一个全新的阶段。这篇文章的主题，就是介绍更强大、更完善的 ES6 异步编程方法。 首先我们回顾一下javascript异步的发展历程。 ES6 以前： 回调函数(callback)：nodejs express 中常用，ajax中常用。 ES6： promise对象：nodejs最早有bluebird promise的雏…
-
React Hook 介绍 — React 系列教程 Part 1 原文地址：Introducing Hooks 原文作者：reactjs.org 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/gold-m… 译者：Sam 校对者：Raoul1996 Hook 介绍 Hook 是一项新的功能提案，可
-
WebAssembly完全入门——了解wasm的前世今身 前言 接触WebAssembly之后，在google上看了很多资料。感觉对WebAssembly的使用、介绍、意义都说的比较模糊和笼统。感觉看了之后收获没有达到预期，要么是文章中的例子自己去实操不能成功，要么就是不知所云、一脸蒙蔽。本着业务催生技术的态度，这边
-
从React Redux的实际业务场景来看有限状态机 写在前面 上一篇：从Promise的实现来看有限状态机 上一篇讲到了一个简单的，利用了有限状态机的前端实现Promise。Promise的有限状态机除了start以及finish两个状态，其核心的三个状态其实就是一个异步行为的三种状态：PENDING、FULF
-
前端质量监控之页面性能相关最近有幸参与一个前端质量监控类项目的重构，算是个人初次接触到前端质量监控相关的知识，对于其中的性能统计部分很感兴趣，查询资料之后写了文章，作为个人学习记录，如有错误，敬请斧正
-
Vue源码学习（三）——数据双向绑定在Vue中我们经常修改数据，然后视图就直接修改了，那么这些究竟是怎么实现的呢？其实Vue使用了E5的语法Object.defineProperty来实现的数据驱动。那么Object.defineProperty究竟是怎么实现的呢？我们先来看一下一…
-
http cache 在 Dragonfly 中的应用 阿里开源的Dragonfly对k8s集群上多副本应用的镜像分发有很大帮助，通过p2p网络，可以很好的解决docker registry的压力。 有关蜻蜓的介绍，请参见直击阿里双11神秘技术：PB级大规模文件分发系统“蜻蜓” 首先，docker pull命令，会被dfget proxy截获。然后，由dfget proxy向super node（即cluster man…
-
Typescript 入门构建一个 react 组件 TypeScript 入门，写一个 react 进度条组件 写在最前面 如果你写过 react 的组件， 这篇文章对与你来说基本没有什么难度。纯粹的是加上了一点 ts 的知识。 我完全是以学习者的姿态来描述我写组件的过程，很多不严谨的地方请大家指出来哈哈。
-
在 vue-test-utils 中 mock 全局对象 原文：https://itnext.io/mocking-global-objects-in-vue-test-utils-a8822df013a8 vue-test-utils 提供了一种 mock 掉 Vue.prototype 的简单方式，不但对测试用例适用，也可以为所有测试设置默认的 mock。 mocks 加载选项 mocks 加载选项 是一种将任何属性附加到 Vue.prototype 上的方式。…
-
一文读懂 Vue 响应式系统实现过程 和众多前端框架一样，vue的数据驱动系统是它的核心，很多人都大概知道它是通过Object.defineProperty将普通属性变成get,set实现的，但知道这一点其实没啥用，因为实际情况远比这个复杂、精巧，本文尝试对整个响应式系统做一个简短、清晰、全面而不失深度的总结。以我自己这两年来使用vue的经验，了解这个系统是如何运作…
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
