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

为什么越来越少的人用jQuery；前端工程工作流规范；尤雨溪：React 是不是比 Vue 牛，为什么？；前端 SPA（单页面应用）性能优化，交互体验加成；Html5 Canvas动画基础（碰撞检测）；基于 Nginx 的 HTTPS 性能优化实践；vue3.0尝鲜 — 摒弃Object.defineProperty，基于 Proxy 的观察者机制探索；彻底弄懂JS原型与继承

为什么越来越少的人用jQuery 摘要：jQuery该退役了。最早期的开发，大多都使用jQuery，它给我们带来了很多的便利：快速选取元素，方便操作DOM元素的API，各个浏览器之间完美的兼容性，链式操作，动画、ajax等等都是jQuery为前端开发人员来带的好处。为什么现在越来越少人用了呢？我来分以下几点，阐述我的想法：一、JS更新带来的冲击 1. …
前端工程工作流规范在日常开发过程中，前端工程工作流程规范主要包括代码检查规范以及代码提交规范。而代码检查主要两个部分：语法检查及类型检查；代码提交规范主要是Git Commit Log规范。本文主要分享日常工作中，实现自动化工作流规范的几种工具： 1、JavaScript语法检查 – ESLint 2、JavaScript类型检查 – Flow 3、自动化代码…
尤雨溪：React 是不是比 Vue 牛，为什么？这个问题下面的很多回答太偏激了，其实我淡出知乎就是因为这类破事… 但是作为作者还是认真地说一说吧，希望能以后别再有这种问题了。这里我可以大方地承认，如果多年以后要论历史地位，React 肯定是高于 Vue 的。事实上，我作为一个开发者，也是由衷地佩服 Jordan Walke, Sebastian Markbage 这样的，能从开发模式…
前端 SPA（单页面应用）性能优化，交互体验加成 SPA简介：单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA 不会因为用户的操作…
Html5 Canvas动画基础（碰撞检测）在Canvas中进行碰撞检测，大家往往直接采用游戏引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)内置的碰撞检测功能，好奇的你有思考过它们的内部运行机制吗？下面将针对基本的碰撞检测技术进行讲解： 1、基于矩形的碰撞检测所谓碰撞检测就是判断物体间是否发生重叠，这里我们假设讨论的碰撞体都是矩形物体。下面示…
基于 Nginx 的 HTTPS 性能优化实践摘要：随着相关浏览器对HTTP协议的“不安全”、红色页面警告等严格措施的出台，以及向 iOS 应用的 ATS 要求和微信、支付宝小程序强制 HTTPS 需求，以及在合规方面如等级保护对传输安全性的要求都在推动 HTTPS 的发…
vue3.0尝鲜 — 摒弃Object.defineProperty，基于 Proxy 的观察者机制探索写在前面： 11月16日早上，Vue.js的作者尤大大在 Vue Toronto 的主题演讲中预演了 Vue.js 3.0的一些新特性，其中一个很重要的改变就是Vue3 将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。我相信许多同学深有体会，许多面试中Object.defineProperty是vue这个框架一个出现率很高的考察点，…
彻底弄懂JS原型与继承本文由浅到深，循序渐进的将原型与继承的抽象概念形象化，且每个知识点都搭配相应的例子，尽可能的将其通俗化，而且本文最大的优点就是：长（为了更详细嘛）。一、原型首先，我们先说说原型，但说到原型就得从函数说起，因为原型对象就是指函数所拥有的 prototype 属性(所以下文有时说原型，有时说 prototype ，…
初探 Vue3.0 中的一大亮点——Proxy 不久前，也就是11月14日-16日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 Vue3.0 Updates 的主题演讲，对 Vue3.0 的更新计划、方向进行了详细阐述（感兴趣的小伙伴可以看看完整的 PPT ），表示已经放弃使用了 Object.defineProperty ，而选择了使用更快的原生 Proxy !! 这将会消除了之前 Vue2.x …
Node.js Streams 基础总结前段时间遇到项目上需要请求资源方获取opus编码的音频文件，然后置入ogg容器中传输给前端标准化播放器进行播放的需求。流程模式是，通过服务上建立的socket连接不断接收资源方传送的文件块。而前端请求中层服务是HTTP请求。一个简单的需求，在Node.js服务中，比较适合处理方式是使用Stream，通过pipe不同的加解密流以…
Promise之Promise.all、Promise.race Promise.all 可以将多个 Promise 实例包装成一个新的 Promise 实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被 reject 失败状态的值 let p1 = new Promise((resolve, reject) => { resolve(‘成功了’) }) let p2 = new Promise((reso…
React代码开发规范一般在团队开发中每个人的代码习惯都不太一样，这样就会导致代码风格不一致，以致于维护和修改bug的时候看别人的代码成为一种痛苦…这种情况尤其在前端开发中尤为明显。因为关于前端的开发规范貌似也没有行业权…
immer.js 实战讲解Immer 是 mobx 的作者写的一个 immutable 库，核心实现是利用 ES6 的 proxy，几乎以最小的成本实现了 js 的不可变数据结构，解决了许多日常开发中的棘手问题。 Immer 极易上手，常用 api 就那么几个，使用方式也…
【进阶1-4期】JavaScript深入之带你走进内存机制本期的主题是调用堆栈，本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划，文末点击查看全部文章。如果觉得本系列不错，欢迎点赞、评论、转发，您的支持就是我坚持的最大动力。 JS内存空间分为栈(stack) 、堆(heap) 、池(一般也会归类为栈中) 。其中栈存放变量，堆存放复杂对…
JavaScript 遍历、枚举与迭代的骚操作（下篇） JavaScript 遍历、枚举与迭代的骚操作（上篇）总结了一些常用对象的遍历方法，大部分情况下是可以满足工作需求的。但下篇介绍的内容，在工作中95%的情况下是用不到的，仅限装逼。俗话说：装得逼多必翻车！若本文有翻车现场，请轻喷。 ES6 迭代器（iterator）、生成器（generator）上一篇提到，for of循环是依靠…
MakaJs：基于 React, Redux 的轻量级前端框架 README.md maka Introduction What is maka? ‘Maka’ comes from the Chinese word ‘码咖'(mǎkā), which means code guru. A front-end framework that you can understand at a glance, simplicity does not mean simple. …
详谈js防抖和节流本文由小芭乐发表 0. 引入首先举一个例子：模拟在输入框输入后做ajax查询请求，没有加入防抖和节流的效果，这里附上完整可执行代码： {代码…} 效果：在输入框里输入一个，就会触发一次“ajax请求”（此处是cons…
使用 JavaScript 实现 SkipList 这种数据结构代码的实现参考了SkipList.java 前言为什么想到使用JavaScript把跳表这种数据结构来实现一遍呢？这个主要是因为我女朋友最近在学习数据结构和算法，然后遇到了这个问题；非要拉着我跟她一起来研究一下，然后，然后就有了下面的文章。这种数据结构在Redis中使用的比较多，有兴趣的朋友可以看…
轻量级配置中心Nodejs版项目地址单项目的时候只需要一个简单的配置文件即可完成配置管理。假如多个项目多个环境同时配置就会产生非常复杂的配置管理情况。这个时候就需要用到配置中心了，它的原理其实类似于redis缓存这种。不同之处在于配置中心只关注配置，并且有更多的有利于配置的功能。大概的功能如下：同时这些功能也…
使用 rollup 打包 JS rollup 采用 es6 原生的模块机制进行模块的打包构建，rollup 更着眼于未来，对 commonjs 模块机制不提供内置的支持，是一款更轻量的打包工具。rollup 比较适合打包 js 的 sdk 或者封装的框架等，例如，vue 源码就是 rollup 打包的。而 webpack 比较适合打包一些应用，例如 SPA 或者同构项目等等。创建项目目录结构…
vue中的computed的this指向问题今天在写vue项目时，用到了computed计算属性，遇到了使用箭头函数出现this指向问题，这里记录下
Webpack 项目优化杂记之前公司的官网项目静态文件都是放在静态服务器中，这其中的弊端就不赘述了。简单说一下 CDN 的好处:
#前端技术#【只用 CSS 就能做到的像素画或像素动画】详见：在本文，作者将会介绍只用 CSS 就能制作像素画或像素动画的方法。虽说纯 CSS 就能做到，但是为了更高的可维护性，也会顺便介绍使用 Sass 的制作方法。（译者：ssshooter）这篇文章将会介绍只用 CSS 就能制作像素画·像素动画的方法。虽说纯 CSS 就能做到，但是为了更高的可维护性，也会顺便介绍使用 Sass 的制作方法。
HTTPS 优化必须了解 ChaCha20-Poly1305 算法前几天看到某个公众号发的一遍关于HTTPS优化的文章，进去一看，全是错误的观点，给自己的感觉非常不好。这篇文章下的留言完全文不答题，可见大家都是走马观花，看的文章越多，就很难去辨别真假和实践了。 HTTPS优化其实没有太多的技巧，大家在网络上看到一篇优化文章，一定…
(译)React是如何区分Class和Function？一起来看下这个 function 类型的 Greeting 组件： function Greeting() { return <p>Hello</p>; } 复制代码 React 同样支持将它定义为 class 类型: class Greeting extends React.Component { render() { return <p>Hello</p>; } } 复制代码 (直到最近 hooks-intro，这…
Promise深入探索如果向Promise.resolve()传递一个非promise非thenalbe的立即值，就会得到一个用这个值填充的promise。如果向Promise.resolve()传递一个promise,就只会返回同一个promise 如果向Promise.resolve()传递了一个非Promise的thenable值，前者会试图展开这个值，而且展开过程中会持续到提取出一个具体的非类Promise的…
我从HTML的meta中学到了什么meta中有这样几个常用属性：http-equiv，name，content，包括html5新增的charset。
《Vue 进阶系列（一）之响应式原理及实现》Reactivity表示一个状态改变之后，如何动态改变整个系统，在实际项目应用场景中即数据如何动态改变Dom。（by 木易杨）
浅谈JavaScript代码预解析最近与同学交流关于js代码预解析的问题，想想自己当时学的时候也没有太过注意这个事，所以特意研究了一下，如有不正确的地方敬请各位指教。为了便于理解，文中部分用可能不够准确，请大家多包涵。知识点 var 声明的变量在预解析的时候只执行声明，不会执行定义，默认值是 undefined 。 …
【20181206 前端开发日报】了解JavaScript中的Memoization以提高性能,再看React的应用；vue中async-await的使用误区；通用、封装、简化 webpack 配置；快速利用 vue 或者 react 开发 chrome 插件；…详情→