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

深度介绍 Vue DevTools 5.0 新特性；如何构建大型的前端项目；谈，前端框架的『御剑之道』；HTML5 Drag and Drop 的一些总结；JS：对“this”的学习；处理 JavaScript 复杂对象：深拷贝、Immutable & Immer；JavaScript 的继承方式及优缺点；实现无缝兼容ajax/websocket网页应用和服务

深度介绍 Vue DevTools 5.0 新特性原文： Deep Dive Into The New Vue Devtools v5.0 作者： Brandon Lyons 发表时间：Oct 5, 2018 译者：西楼听雨发表时间： 2018/10/10 ( 转载请注明出处 ) 译注：下面这段为原文的开头语，除了“Vue DevTools 5.0 是这个月月初发布的”这个信息外，没什么有用的信息，暂不翻译，请直接看下文的干货。 Earl…
如何构建大型的前端项目一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。一般脚手架都应当有以下的几个功能：
谈，前端框架的『御剑之道』你在使剑，是的，但是你的目的是杀人，直追你的目标，忘记手中长剑，才能使出最高的剑法… 而这世上又有多少剑客，拘泥于手中快剑而落入俗套，终究无法到达登峰造极的境界… —-阿莱克西斯剑，是剑客的武器，而现代前端工程师的剑可以理解为前端框架(当然不止是前端框架，但今天我们只谈前端框架 )。所谓御…
HTML5 Drag and Drop 的一些总结参考本机 HTML5 拖放 HTML Drag and Drop API Beautiful react dnd from egghead Demo Demo Link Drag and Drop Life Cycle 注 1: onDragExit
JS：对“this”的学习更多笔记，请参看IT老兵驿站。有半个多月没有更新博客了，这半个多月一直在加班，实在没有精力更新，现在到了调整期，可以将前一段时间的工作进行一下整理。之前对JS的this的理解一直有点模糊，这次总结一下，因为在工作中总遇到this的问题，如果一直这么模模糊糊，将会在以后的工作中带来麻烦，而对于这种躲不…
处理 JavaScript 复杂对象：深拷贝、Immutable & Immer 我们知道 js 对象是按共享传递（call by sharing）的，因此在处理复杂 js 对象的时候，往往会因为修改了对象而产生副作用———因为不知道谁还引用着这份数据，不知道这些修改会影响到谁。因此我们经常会把对象做一次拷贝再放到处理函数中。最常见的拷贝是
JavaScript 的继承方式及优缺点JavaScript 原本不是纯粹的 “OOP” 语言，因为在 ES5 规范中没有类的概念，在 ES6 中才正式加入了 class 的编程方式，在 ES6 之前，也都是使用面向对象的编程方式，当然是 JavaScript 独有的面向对象编程，而且这…
实现无缝兼容ajax/websocket网页应用和服务为了让用户体验更好，页面前端往往是通过ajax来进行数据处理；由于浏览器的设计原因每个域名下的连接有限，这样导致了同时进行ajax数据请求效率无法得到有效地提升，为了提高效率和传统HTTP协议上的限制，因此websocket的应运而生。由于websocket是后期提供的升级协议，所以现有很多WEB服务逻辑无法同时兼容两种协议处理…
vue路由history模式刷新页面出现404问题vue hash模式下，URL中存在’#’，用’history’模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。在nginx的配置文件中修改
CSS魔法堂：那个被我们忽略的outline 前言在CSS魔法堂：改变单选框颜色就这么吹毛求疵！中我们要模拟原生单选框通过Tab键获得焦点的效果，这里涉及到一个常常被忽略的属性——outline，由于之前对其印象确实有些模糊，于是本文打算对其进行稍微深入的研究^_^ Spec是这样描述它的作用用
从一个 bug 看 javascript 的精度丢失的问题后端返回 { spaceObject: { objectId: ‘1049564069045993472’ } }
像 vuejs 一样，watch React组件props变化 A higher-order component that adds watch props features to the react component Install npm i –save watch-props
基于NodeJS的HTTP server Plus 6：加密（crypto）加密简介加密是以某种算法改变原有的信息数据，使得未授权用户即使获得了已加密信息，因不知解密的方法，无法得知信息真正的含义，通过这种方式提高网络数据传输的安全性，加密算法常见的有哈希算法、HMAC 算法、签名、对称性加密算法和非对称性加密算法，加密算法也分为可逆
图解一下啥是CSS堆叠上下文，啥是CSS堆叠层叠顺序，让你对css的疑惑少一点?CSS 堆叠上下文是啥？我们有一个基本样式的 div，样式如下： {代码…} 效果如下：这边有个问题是： border 和 background是什么关系？这边有两个选项：平行的 border 更靠近用户 background 更靠近用户你…
webpack loader和plugin编写 1 基础回顾首先我们先回顾一下webpack常见配置，因为后面会用到，所以简单介绍一下。 1.1 webpack常见配置 // 入口文件 entry: { app: './src/js/index.js', }, // 输出文件 ou
ES6关于Promise的用法摘录自：[链接]最近学习完ES5，又抓紧开始了ES6的学习，只为自己尽快踏进前端大神的行列，哈哈。ES6更新了不少东西，最近学习到Promise这里卡住了自己，拜读了一下大神的文章觉得很有用，转过来给大家分享。
JavaScript线程机制与事件机制一、进程与线程 1.进程进程是指程序的一次执行,它占有一片独有的内存空间,可以通过windows任务管理器查看进程(如下图)。同一个时间里，同一个计算机系统中允许两个或两个以上的进程处于并行状态，这是多进程。比如电脑同时运行微信，QQ，以及各种浏览器等。浏览
React HOC高阶组件详解 High Order Component（包装组件，后面简称HOC），是React开发中提高组件复用性的高级技巧。HOC并不是React的API，他是根据React的特性形成的一种开发模式。 HOC具体上就是一个接受组件作为参数并返回一个新的组件的方法 con
从 Dropdown 的 React 实现中学习到的 Demo Demo Link Note dropdown 是一种很常见的 component，一般有两种：展开 dropdown menu 后，点击任意地方都应该收起 menu。展开 dropdown menu 后，点击 menu 内部，不会收起 m
JavaScript也能玩机器学习――5个开源 JavaScript 机器学习框架 3个月前，公司AI团队给我们分享了关于如何利用机器学习帮助我们分析图片、视频中的明星以及地标等。作为一名Web的前端开发者，我很好奇机器学习是如何工作的。我并没计划要系统学习关于机器学习（ML）、神经网络、 NLP自然语言处理之类的知识，不过光看到这些概念就觉得很有意思，简直是打开了一个新的世界。 …
前端每日实战：153# 视频演示如何用 CSS 和 VanillaJS 创作一组 tooltip 提示框效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [链接] 可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 [链接] …
《如果非得了解下 git 系统… – 实践篇》本文旨在通过实践来介绍.git文件夹中的目录及文件功能，属git基础知识。但在此基础上可解决各git使用过程中可能遇到的问题，如“.git文件夹占用空间大”，“git如何找回丢失的对象(提交)”，”git diff 对比依据是什么”等。（by 野兽）
Next.js踩坑入门系列（六） —— 再次重构目录 Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 (四) Next.js中期填坑 (五) 引入状态管理Redux (六) 再次重构目录 (七) 其
《渐进式Web应用程序（PWA）的深入概述》本文将深入概述渐进式Web应用程序的实现原理，以及它们在现代Web开发中的重要程度。（by 葡萄城官网）
浅析Vue源码（九）——VirtualDOM与path 今天来讲讲VirtualDom与path之间到底存在什么关系？ VNode (VirtualDom) 在未出现双向绑定之前，我们需要在各个触发事件方法中直接操作DOM节点来达到修改相应视图的目的。但是当应用一大就会变得难以维护，reflow(回流)很影响性能的
一篇帮你彻底弄懂NodeJs中的Buffer 前言：遇见前端，应该是今年最幸运的事情了。然而，幸运并未就此打住。 5月自己的第一份实习与唯品会邂逅 7月自己在掘金的两篇文章点赞数过千 10月自己拿到了腾讯的offer 现在，我在准备自己的毕设，准备下一个阶段的到来。掘金社区的确是一个让人成长的地方，我也愿