20181207 前端开发日报

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

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

    只用 CSS 就能做到的像素画或像素动画
  24. HTTPS 优化必须了解 ChaCha20-Poly1305 算法 前几天看到某个公众号发的一遍关于HTTPS优化的文章,进去一看,全是错误的观点,给自己的感觉非常不好。 这篇文章下的留言完全文不答题,可见大家都是走马观花,看的文章越多,就很难去辨别真假和实践了。 HTTPS优化其实没有太多的技巧,大家在网络上看到一篇优化文章,一定...
  25. (译)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,这...
  26. Promise深入探索 如果向Promise.resolve()传递一个非promise非thenalbe的立即值,就会得到一个用这个值填充的promise。 如果向Promise.resolve()传递一个promise,就只会返回同一个promise 如果向Promise.resolve()传递了一个非Promise的thenable值,前者会试图展开这个值,而且展开过程中会持续到提取出一个具体的非类Promise的...
  27. 我从HTML的meta中学到了什么meta中有这样几个常用属性:http-equiv,name,content,包括html5新增的charset。
  28. Vue 进阶系列(一)之响应式原理及实现》Reactivity表示一个状态改变之后,如何动态改变整个系统,在实际项目应用场景中即数据如何动态改变Dom。 (by 木易杨) ​​​

    Vue 进阶系列(一)之响应式原理及实现
  29. 浅谈JavaScript代码预解析 最近与同学交流关于js代码预解析的问题,想想自己当时学的时候也没有太过注意这个事,所以特意研究了一下,如有不正确的地方敬请各位指教。为了便于理解,文中部分用可能不够准确,请大家多包涵。 知识点 var 声明的变量在预解析的时候只执行声明,不会执行定义,默认值是 undefined 。 ...
  30. 20181206 前端开发日报】了解JavaScript中的Memoization以提高性能,再看React的应用;vue中async-await的使用误区;通用、封装、简化 webpack 配置;快速利用 vue 或者 react 开发 chrome 插件;...详情→ ​​​

    20181206 前端开发日报

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

原文:20181207 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20181207.html)

发表评论

请登录后发表评论: