20190817 前端开发日报

从异步概念到callback回调函数到promise;Vue 项目性能优化 — 实践指南(网上最全 / 详细);JS 中创建自定义排序方法;你理解错误的Vue nextTick;56 道高频 JavaScript 与 ES6+ 的面试题及答案;Vue 3.0 RFC API 的实现;大规模应用TypeScript「2019 JSConf -Brie Bunge」(上);如何用 GitHub 免费在线播放你的幻灯?

  1. 从异步概念到callback回调函数到promise javascript语言的执行环境的’单线程’的. 所谓’单线程’,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。 (实际上我认为计算机从微观上讲都是单线程的,因为一台机器在同一时间只能做一件事情。然而从宏观上讲,在我们人的对时间的感知范围内,认为机器…
  2. Vue 项目性能优化 — 实践指南(网上最全 / 详细) Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。…
  3. JS 中创建自定义排序方法 为了保证的可读性,本文采用意译而非直译。 想阅读更多优质文章请 猛戳GitHub博客 ,一年百来篇优质文章等着你! 一般情况咱们排序大都按数字或字母顺序,但也有一些情况下,咱们可能需要自定义排序顺序。 在此之前先简单介绍一下 reduce 方法: 语法: arr.reduce(callback(accumulator, currentValue[, in…
  4. 你理解错误的Vue nextTick 使用过Vue的小伙伴们都知道,Vue里的nextTick可以获取到更新后的DOM, 今天我就来讲解下nextTick里面究竟做了什么? 开始讲解前,我们需要知道了解一个概念,那就是Event Loop Event Loop Event Loop翻译过来就是 事件循环 , 一个Event Loop会包括一个或多个task队列,持续线程会从队列中取出最早进入队列的任务进…
  5. 56 道高频 JavaScript 与 ES6+ 的面试题及答案前言 本文讲解 56 道 JavaScript 和 ES6+ 面试题的内容。 复习前端面试的知识,是为了巩固前端的基础知识,最重要的还是平时的积累! 注意:文章的题与题之间用下划线分隔开,答案仅供参考。 前端硬核面试专题的…
  6. Vue 3.0 RFC API 的实现 想复用逻辑和状态,关键在于如何创建一个可以被 Vue 观察的对象(响应式对象)。当响应式的对象发生了变化时,Vue 会开始它的更新逻辑,至于它是怎么更新了,这里不作讨论。其次就是,怎么将这个状态绑定到 vm 上,除了使用 computed 来手动绑定之外,还可以用什么方法。 Ovservable 在 Vue 2.6 之前,想创建一个…
  7. 大规模应用TypeScript「2019 JSConf -Brie Bunge」(上) 这是一个由simviso团队进行的关于Airbnb大规模应用TypeScript分享的翻译文档,分享者是Airbnb的高级前端开发Brie Bunge 视频链接: 大规模应用TypeScript「2019 JSConf -Brie Bunge」(上) 或点击文章底部阅读原文观看视频 视频翻译文字版权归 simviso所有,未经授权,请勿转载!!! 本次参与翻译人…
  8. 如何用 GitHub 免费在线播放你的幻灯? 王树义 读完需要 17分钟 速读仅需6分钟 让你从此摆脱优盘和连接线,潇洒从容走向讲台。 1 需求 曾经,我们对于“放幻灯”的刻板印象,是拿着一个优盘,或者举着自己的笔记本电脑走向讲台。经过识别优盘或者连线成功之后,开始播放…
  9. webpack 高级概念 Tree Shaking Tree Shaking的中文意思是:摇树,它可以移除JavaScript上下文中的未引用代码(dead-code)。它只支持es6中的import和export语法,所以并不会应用到require语法中。 我们先通过一个简单的例子来简单理解下Tree Shaking到底有什么作用: // math.js const add = () => { console.log(‘…
  10. 用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果 旋转叠加 平移 前段时间做Hybrid App,UI设计湿要求某一个页面的展示要实现滑动轮播效果,选中的内容卡片居中显示,上一个内容卡片和下一个内容以小一倍的大小显示在选中的卡片后头,而且要高斯模糊等等。。最骚的是滑动特效要是一个个旋转叠加。(摔! 当时用的是vue-cli…
  11. ReactNative在Android上的通信机制的底层实现 com.facebook.react:react-native:0.60.4 initialization // ReactAndroid/src/main/jni/react/jni/CatalystInstanceImpl.cpp void CatalystInstanceImpl::initializeBridge( jni::alias_ref<ReactCallback::javaobject> callback, // This executor is actually a factory holder. JavaScr…
  12. Vue原理解析(七):全面深入理解响应式原理(下)-数组篇 上一篇: 全面深入理解响应式原理(上)-对象篇 sayHi(friend) function sayHi(friend) { if(friend.status === ‘不太理解响应式且还没有看过上一篇’) { console.log(` 建议看下上一篇,因为算是响应式的基础了, 不然可能这篇看起来会费点劲。 `) } else if(friend.status …
  13. 基于 Laravel + Swoole + Vue 搭建实时在线聊天室(一):环境准备篇 项目概述 今天开始,学院君将带领大家基于 Swoole 搞个「大项目」 —— 开发在线聊天室,当然还是在 Laravel 框架中,前端 UI 还是基于 Vue 组件实现,本项目主要涉及以下技术: 基于 Laradock 本地开发环境进行演示和测试 后端基于 Laravel 5.8 + LaravelS 扩展包引入对 Swoole 的支持 基于 Swoole 提供的 …
  14. JavaScript写不写分号情景分析 加不加分号争论已久,最初的设计是为了降低编译器的工作负担。 自动插入分号规则 规则1: 要有换行符,且下一个符号是不符合语法的,那么就尝试插入分号。 规则2: 有换行符, 且语法中规定此处不能有换行符,那么自动插入分号。 规则3: 源代码结束处,不能形成完整的脚本或者模块结构,那么就自…
  15. 【重学前端专栏学习笔记】建立系统的知识架构体系 明确你的前端学习路线 自己特别喜欢屯课,看着自己买的课,有种满足感,仿佛知识都是我的了,翻看极客时间买的课,决定这段时间把重学前端专栏学习一遍。 从周六到今天,一共学习了 5 篇文章,这个专栏的信息量是非常大的,特别是第一章《前端的学习路线与方法》给我的启发特别大。 首先一上来就分享了两个学习方…
  16. HTTP缓存和浏览器的本地存储http请求做为影响前端性能极为重要的一环,因为请求受网络影响很大,如果网络很慢的情况下,页面很可能会空白很久。对于首次进入网站的用户可能要通过优化接口性能和接口数量来解决。但是,对于重复进入页面的用户…
  17. 非常规 – VUE 实现特定场景的主题切换 本文作者:刘文涛 原创声明:本文为阅文前端团队 YFE 成员出品,请尊重原创,转载请联系公众号 (id: yuewen_YFE) 获取授权,并注明作者、出处和链接。 实现页面皮肤切换,常见的方案有几种:替换 css 链接、替换 className、改变 css 原生变量值、使用 less.modifyVars、props 参数下发等; 不同的业务场景,我们一…
  18. 深入理解Node.js 进程与线程(8000长文彻底搞懂)进程与线程是一个程序员的必知概念,面试经常被问及,但是一些文章内容只是讲讲理论知识,可能一些小伙伴并没有真的理解,在实际开发中应用也比较少。本篇文章除了介绍概念,通过Node.js 的角度讲解进程与线程,…
  19. 使用 MongoDB,React,Node 和 Express(MERN)构建一个全栈应用例如对数据库的了解,熟悉一门后端语言,如何将前后端整合,这些对于我来说,还有些陌生。这就是促使我完成这篇文章的原因:解决这个问题,以帮助我自己和其他前端工程师。
  20. JS设计模式-单例模式单例模式,也叫单子模式,是一种常用的软件设计模式。在应用这个模式时,单例对象的类必须保证只有一个实例存在。 ———来自维基百科
  21. 在Vue 使用 TinyMCE 编辑器 TinyMCE插件安装 tinymce 官方为 vue 项目提供了  tinymce-vue 组件  npm install @tinymce/tinymce-vue -S复制代码 如果有购买 tinymce 的服务,可以参考 tinymce-vue 的说明,通过 api-key 直接使用 tinymce 。 我没有注册、购买过服务,就直接下载TinyMCE。 npm install tinymce -S复制代码…

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

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


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流