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

教你如何用 JS 强行装逼，有些想都想不到；45个有用的JavaScript技巧，窍门和最佳实践；28岁裸辞转行前端是怎样的一种体验；一张图弄明白 Vuex 里该存放什么样的数据；js 防抖实战讲解；你必须知道的Git命令；基于 Jenkins、Gitlab、Harbor、Helm 和 Kubernetes 的 CI/CD（二）；前端如何赋能业务

教你如何用 JS 强行装逼，有些想都想不到文/北妈阅读本文需要 3.5分钟一今天北妈来点收藏干货，以下代码部分来自网络总结，我们总追求简短有效的方式，有时候一行代码的奇技淫巧能带来很多代码篇幅减少单行简洁的代码很难维护（有时甚至难以理解），但这并不能阻止广大攻城狮们脑洞，在编写简洁的代码后获得一定的满足感。当然有的…
45个有用的JavaScript技巧，窍门和最佳实践变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。 2. 使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。 === 10 // is false == 10 // is true ’10’ == 10 // is tr…
28岁裸辞转行前端是怎样的一种体验本来题目是没有年龄的。只是在网上常看到“已经25岁是否还适合转行当程序员”之类的问题，就觉得有必要暴露下我的年龄。
一张图弄明白 Vuex 里该存放什么样的数据原文： markus.oberlehner.net/blog/should… 大多数人刚上手 Vuex 的时候，首先都想知道，应该往其中存放什么样的数据呢？在对这个问题给出答案的过程中，很多人（包括我）先是来到了“一股脑放进去”的阶段。但是在遭遇了首次障碍后，你很快就会领悟到：这可不是在 Vue.js 应用中管理数据的完美方案啊。在本文中我…
js 防抖实战讲解在前端开发中会遇到一些频繁的事件触发，比如： window 的 resize、scroll mousedown、mousemove keyup、keydown …… 为此，我们举个示例代码来了解事件如何频繁的触发： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>频繁…
你必须知道的Git命令这篇笔记是为了学习Git知识而收集总结的，主要是看受一篇帖子《你可能不知道的15条Git命令》的影响，才想记录这篇笔记的，如有雷同，纯属巧合。
基于 Jenkins、Gitlab、Harbor、Helm 和 Kubernetes 的 CI/CD（二）上节课我们完成了最基本的流水线流程，接下来的工作就是来实现之前的具体 Pipeline 脚本了。 Pipeline 第一个阶段：单元测试，我们可以在这个阶段是运行一些单元测试或者静态代码分析的脚本，我们这里直接忽略。第二个阶段：代码编译打包，我们可以看到我们是在一个maven的容器中来执行的，所以我们…
前端如何赋能业务你是否头疼于，每天做不完的需求和改不完的bug？你是否发愁，每天撸业务代码，是否能获得技术成长？而追求成就感的你是否想过，你所编写的一行行代码，是在反复的变化中迅速成为遗留代码，还是助公司插上腾飞的翅膀，在你死我活的战场上脱颖而出？因此本文会将业务和前端关联起来讨论，探讨业务发…
你再也不用使用 Redux、Mobx、Flux 等状态管理了这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能。看完这个库的说明后，没有想到代码可以这个玩。短短几行代码，仅仅使用 React Hooks ，就实现了状态管理的功能。看完之后，第一想法就是翻译成中文，分享给其他人。提交 Pull Request 后，库作者将我的翻译合并了。同时作者欢迎将 README 翻译成其他语…
谈谈JavaScript中创建对象(Object) 在这篇文章中我将会着重说明如何创建和调用JavaScript里的对象（Object）。对象（Object）是什么？在开始介绍如何创建对象前，我们要知道对象是什么。对象（ Object ）简单地来说，就是一堆「名称- 值」的配对（key – value pairs）。至于可以放入哪些值呢？第一种是原生的值（ primitive ），像是布尔值（ …
2019“寒冬”前端面试必备（持续更新…）最近也在准备面试，就把前端面试中常考的知识点梳理了出来，为了复习起来更方便，更有针对性，也希望能够帮到寒冬面试的一些朋友。本文包括 CSS，JS，ES6，浏览器，服务端与网络，VUE，HTTP，webpack 和算法十个部分。如果按照本文的思路来准备面试，您定会有所收获。 1. CSS 1、怎么实现三栏…
HTML5 Audio & Video – 兼容性总结（一）工作中的总结和记录，第一次写，有问题烦请指出，会持续记录更新… 一、audio 1、监听播放完成监听 ended 事件不准确，可以监听 timeupdate 事件，判断当前播放进度 currentTime 大于等于总时长 duration 时，就是播放完成； var oAudio = document.getElementById(‘audio_player’); oAudio.addEven…
《JS 函数的 6 个基本术语》让我们谈谈什么是：lambdas（匿名函数）、 first-class functions（头等函数）、higher-order functions（高阶函数）、unary functions（一元函数）、currying（柯里化）和pure functions（纯函数）。（by reahink）
ES6—扩展运算符和rest运算符（6）1、扩展运算符简介扩展运算符（ spread ）是三个点（…），可以将一个数组转为用逗号分隔的参数序列。说的通俗易懂点，有点像化骨绵掌，把一个大元素给打散成一个个单独的小元素。基本用法：拆解字符串与数组…
js数字计算丢失精度问题解决方案计算机世界里，数字的计算，所有语言都会丢失精度，所以没有万全之策，但在人力范围内，尽量解决。网上找了一部分代码，发现是有问题的，比如: {代码…} 在计算一些特殊的数字时，仍然有问题：比如加法： {代码…
CSS的Transition与Animation博客链接：CSS的Transition与Animation本文总结CSS3中两个用来做动画的属性，一个是transition，另一个是animation。
VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（上）可以看到，在整个项目中，没有页面的跳转只有前后端的数据交换，所有的页面更新都是组件更新和数据更新后端只对数据库进行增删查改，以及接受前端的异步请求返回数据所以本质上这是一个单页面应用所有的重心全部…
基于 Github API 的图床 Chrome 插件开发全纪录最近基于 Github API 开发了一款图床 Chrome 插件 Picee，现在已经开源并上架 Chrome 应用商店。当中的过程涉及到一些有趣的知识点，故将其记录下来。
了解 JavaScript 函数式编程 — 什么是纯函数 DRY（不要重复自己，don’t repeat yourself）高内聚低耦合（loose coupling high cohesion） YAGNI （你不会用到它的，ya ain’t gonna need it）最小意外原则（Principle of least surprise）单一责任（single responsibility）等等。看一个纯函数的例子纯函数不改变原始的输入值…
html5之canvascanvas是html5新加的标签，主要有2D和3D，2D的应用是动画和图像，3D的应用是游戏渲染。
Node.js 12 值得关注的新特性摘要：期待 LTS！原文：Node.js 12 值得关注的新特性作者：天猪 Fundebug经授权转载，版权归原作者所有。前言时隔一年，Node.js 12 如约而至，正式发布第一个 Current 版本。该版本带来了诸如： V8 更新送的好多特性。 …