20191230 前端开发日报

基于vue的海量数据tree组件(20w+);开源 | 12306 购票助手,支持集群、多账号、多任务购票以及 Web 页面管理;JavaScript进阶-内存机制(表情包初探);前端面试必备 | 5000字长文解释千万不能错过的原型操作方法及其模拟实现(原型篇:下);TS in JS 实践指北;Vue 原生右键菜单组件;Vue如何实现双向绑定(上);你不需要 passport.js — node.js认证指南

  1. 基于vue的海量数据tree组件(20w+) elementUI 里的 tree 组件在数据量为 1k+ 的的时候卡顿。 没有找到基于 vue 的海量(20w+) tree 插件。 1. 为啥卡顿。 简单分析说下为啥卡顿( 具体查看参考文章 ): elementUI 递归实现 tree,dom 量大。 海量的 data 会被依赖收集,内存开销大,会卡顿,甚至提示内存不足浏览器奔溃。 2. 实现方案 …
  2. 开源 | 12306 购票助手,支持集群、多账号、多任务购票以及 Web 页面管理 免费加入「头条君的圈子」 项目介绍 功能 多日期查询余票 自动打码下单 用户状态恢复 电话语音通知 多账号、多任务、多线程支持 单个任务多站点查询 分布式运行 Docker 支持 …
  3. JavaScript进阶-内存机制(表情包初探) 距离上一次更《 JavaScript 进阶系列》的文章已经一个月了, 抱歉请原谅我最近工作是有那么点小忙:sweat_smile:, 而且主要是去写 《全网最详bpmn.js教材》 系列了. 并不是我三心二意哈:flushed:, 而是想着自己在捣鼓 bpmn.js 这东西的时候累死累活的, 所以捣鼓完之后就急切的想出一系列教材来降低大家的 脱发率 … …
  4. 前端面试必备 | 5000字长文解释千万不能错过的原型操作方法及其模拟实现(原型篇:下) 这篇文章主要讲解原型的查找、变更、判断和删除,附带着对原型的作用方式做一下回顾。 instanceof instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 即通过下面的操作来判断: object.__proto__ === Constructor.prototype ? object.__proto__.__proto__ === Constr…
  5. TS in JS 实践指北 不知道有多少 TS 爱好者哀叹过这个问题:虽然我很想用 TS,奈何老大只让用 JS。今天我,告诉你,在 JavaScript 中也可以很流畅的使用 TypeScript ,而且你的老大不会找你的麻烦。 写在前面 往期文章:《ts安利指南》 很多同学在看了《ts安利指南》后,评论说道:"TS 虽然香,奈何我们老大没兴趣…
  6. Vue 原生右键菜单组件vue-contextmenujs Vue 原生实现右键菜单组件, 零依赖 项目地址 [链接] 在线演示 快速安装 npm 安装 {代码…} CDN {代码…} 使用 测试中使用的是element-ui图标 {代码…} {代码…} 参数说明 Menu 属性 描述 …
  7. Vue如何实现双向绑定(上) Vue的双向绑定特性一直广受人们欢迎,但是大家知道实现双向绑定的原理吗?这篇文章将给大家介绍实现双向绑定的原理。 原文戳我 为什么会出现MVVM 什么是MVC MVC即Model-View-Controller的缩写,就是模型-视图-控制器 , 也就是说一个标准的Web 应用程序是由这三部分组成的。 Model:管理数据。 V…
  8. 你不需要 passport.js — node.js认证指南 诸如 Google Firebase,AWS Cognito 以及 Auth0 这样的第三方认证服务越来越流行,类似于 passport.js 这样的一站式解决方案也成为了业界标准,但是一个普遍情况是,开发者们其实并不清楚完整的认证流程到底涉及那些部分。 这一系列关于 node.js 认证的文章,旨在让你搞清楚一些概念,比如 JSON Web Token (JWT)、社交…
  9. JavaScript 那些写出来会被同事揍的骚操作 曾经,我接手了一份大佬的代码,里面充满了各种“骚操作”,还不加注释那种,短短几行的函数花了很久才弄懂。 这世上,“只有魔法才能对抗魔法”,于是后来,翻阅各种“黑魔法”的秘籍,总结了一些比较实用的“骚操作”,让我们装X的同时,提升代码运行的效率(请配合健身房一起使用)。 正文 位运算 …
  10. Vue的组件通信之Provide与Inject机制 Vue中父组件到子组件的通信主要由子组件的props属性实现。但是在一些情况下,父组件无法直接向子组件的props传值。比如子组件通过父组件的slot进入父组件,父组件根本不知道子组件是谁,更不用说用子组件的props了。这时应该怎么办呢?Vue在2.2.0版本引入了provide与inject,正好适合处理这一情况。 什么是provide与inj…
  11. web端嵌入界面的常用方法 前言:最近遇到一个大屏嵌入云词图的场景,所以写篇文章记录下,你都遇到了哪些嵌入页面的方法,可以评论区探讨 场景 大屏上某一块区域,展示动效的云词图,云词图内容可以通过数据请求获取 方法 在对应的模板中嵌入脚本,脚本像这样 <script type="text/javascript"> function getInnerH…
  12. 你的web应用支持离线访问和策略缓存吗? 沉醉在生命的优美。看着星,想象你自己跟它们在奔驰。——哲学家,马克·奥勒留 微信公众号 《 JavaScript全栈 》 掘金 《 合一大师 》 Bilibili 《 合一大师 》 性能始终在时间与空间上相互权衡取舍,计算机系统的优化需要借助各种缓存策略,从CPU到内存,从接口到外设。如果有一天,硬件成…
  13. 前端工程化下一站: IDE “我们期望能通过 IDE 项目,凝聚合力,形成生态环境,借助集体的力量,一步一个脚印迭代完成从轻量级研发到主要研发模式的逐步替换,形成未来日常工作的基础设施。”
  14. 从实现讲解vue的原理 首先我们上一张图 由图可知,MVVM是由两大块构成, Observer 劫持监听响应式 以及 Compile 指令解析。 下面我们就从这两方面来组合实现Vue。 响应式 Observer的实现 class Vue { constructor(options) { this.$options = options this.$data = options.data this.observ…
  15. JS跳出循环的三种方法(break, return, continue) break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句。 由于它是用来退出循环或者switch语句的, 所以只有当它出现在这些语句的时候, 这种形式的break语句才是合法的。 如果一个循环的终止条件非常复杂, 那么使用break语句来实现某些条件比用一个循环表达式所有的条件容易得多。 for(let i …
  16. 我们如何抛弃了 Redux 而选用 MobX 在 Skillshare 我们拥抱改变;不仅因为把它写在公司的前景宣言中很酷,也因为改变确实有必要。这是我们近期将整个平台迁移至 React 并利用其所有优势这一决定背后的前提。执行这个任务的小组仅仅是我们工程师团队的一小部分。尽早做出正确的决定对于让团队其他成员尽可能快而顺畅地切换平台来说至关重要。 顺畅的开发…
  17. Nodejs + Websocket 指定发送及群聊 通过nodejs + ws (Websocket) 实现点对点发送及群聊发送 项目搭建直接跳过,这里列举一下用到的插件 yarn add ws 复制代码 WebSocket 话不多说,直接上码 对比上一篇文章 << Nodejs+MongoDB 搭建服务( demo ) >> server.js 主要是增加了ws的引用, webSocket 点对点也好,群聊也好,主…
  18. 从 Fetch 到 Streams:以流的角度处理网络请求 你不知道的 JavaScript:浏览器里的 Stream。
  19. 从 React 历史的长河来聊如何理解虚拟 DOM最近我发现很多面试题里面都有「如何理解虚拟 DOM」这个题,我觉得这个题应该没有想象中那么好答,因为很多人没有真正理解虚拟 DOM 它的价值所在,我这篇从虚拟 DOM 的诞生过程来引出它的价值以及历史地位,帮助…
  20. Git 工程化最佳实践 1. 本文导读 本文对应的 git-standardize 项目地址 https://github.com/vimerzhao/git-standardize 1.1. 问题背景 大部分程序员对于Git的理解还停留在 git add . git commit -m “update” git pull git push 的阶段,但这在实际项目开发中是远远不够的。 举一个简单的例子…
  21. React hooks 入门和进阶 React hooks可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性,它的出现提供了一种新型可复用组件间状态逻辑的途径,替换以往采用的HOC和Render Props的形式. 新增该特性的原由: https://zh-hans.reactjs.org/docs/hooks-intro.html#motivation …
  22. 基于webpack的应用治理 随着应用的不断迭代,webpack应用最常见的两个问题就是: 构建速度慢 构建体积大 有一个很简单的划分方式,就是以构建(build)为分界线,分成前向治理和后向治理: 前向治理:提升构建速度 后向治理:保证构建结果质量 我们的治理方向,就是围绕前向治理和后向治理。 2.前向治…
  23. VS Code 调试 Node.js 代码 作为前端开发者,在日常工作过程中,我们已经习惯了使用 Chrome 等浏览器去调试代码。但是随着目前前端工作流越来越复杂,距离我们的代码运行在浏览器之前,会在本地进行一套复杂的构建过程,通常是运行在 Node 环境下的 JS 代码。如果这一过程出现了问题,我们需要找到一定的办法去调试代码,查找问题。另外当你去研究…
  24. Viz.js 之二分图 BiPartite(一) 本文对于 Viz.js 的二分图示例进行简单分析,并介绍图论中关于二分图的一些简单知识。 前置知识 图 在计算机科学中,图 Graph 是 顶点(Vertex) 集合及顶点间的关系集合(称为 边Edge ) 组成的一种数据结构。一个图 G 可表示为: 。 二分图 二分图是图论中一种特殊的图。二分图的顶点 V 可分成两个独立的集合…

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

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


关注我

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

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

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