20200116 前端开发日报

小蝌蚪传记:60行代码实现nodejs线上模块热部署;带你了解 vue-next(Vue 3.0)之 炉火纯青;核心版vue-router, 仅仅只需80行代码;用Node.js编写内存效率高的应用程序;【小小前端】浅谈浅拷贝与深拷贝;响应式编程入门指南:通俗易懂 RxJS;TS下基于Vue Composition API的表单组件化实践;JavaScript 中的 NaN

  1. 小蝌蚪传记:60行代码实现nodejs线上模块热部署 晚十二点,床上 富婆:这是给你的500元,辛苦了 小蝌蚪:不辛苦,主人 富婆:我老公要回来了,你走吧 小蝌蚪:是,主人 说完小蝌蚪从三楼别墅跳了下去 。。。 小蝌蚪是一名程序员,也是一个技师 白天敲代码,晚上捏脚 由于常年敲代码,所以指法高超 时常把客户按到上天日龙 。。。 富婆年轻、有钱,但是缺爱…
  2. 带你了解 vue-next(Vue 3.0)之 炉火纯青 看完上两章 初入茅庐 小试牛刀 之后,大家应该对 vue-next(Vue 3.0) 的 API 使用已经了如指掌了。好奇的同学一定对 vue-next 响应式的原理充满好奇,本章就带你解密! 前言 最新 vue-next 的源码发布了,虽然是 pre-alpha 版本,但这时候其实是阅读源码的比较好的时机。在 vue 中,比较重要的东西当然要数它的响…
  3. 核心版vue-router, 仅仅只需80行代码 vue-router作为vue全局桶的一个核心类库, 其实现方式, 有着很多巧妙之处, 你是否真正了解呢? 使用一个vue-router的正确姿态. 最简单的是通过cli安装一个vue-router插件, 会自动的修改我们项目的代码, 正确的使用vue-router. 一条命令搞定. vue add router 复制代码 正确的姿态. 新建一个路由配置文件. import…
  4. 用Node.js编写内存效率高的应用程序软件应用程序在计算机的主存储器中运行,我们称之为随机存取存储器(RAM)。JavaScript,尤其是 NodeJS (服务端 JS)允许我们为终端用户编写从小型到大型的软件项目。处理程序的内存总是一个棘手的问题,因为糟糕…
  5. 【小小前端】浅谈浅拷贝与深拷贝 最近做项目遇到一个问题,后台没有做查看列表详情的接口,于是乎只能从已获取的数据里面查找展示。但是问题来了,在一次编辑的时候,把手机号清空之后,就关了dialog,并没有修改数据。按照正常思维,此时列表中的数据应该不变的,但是邪门的事情出现了,刚刚编辑的那行数据的手机号不见了!!天啦,怎么回事,我也没有…
  6. 响应式编程入门指南:通俗易懂 RxJS 全文篇幅较长,建议选取一段独立的时间来阅读此文。 RxJS 是 Reactive Extensions for JavaScript 的缩写,起源于 Reactive Extensions,是一个基于可观测数据流 Stream 结合观察者模式和迭代器模式的一种异步编程的应用库。RxJS 是 Reactive Extensions 在 JavaScript 上的实现。 按照正常的节奏,听到 RxJ…
  7. TS下基于Vue Composition API的表单组件化实践 Vue Composition API RFC 这名字太长了,一下都以3.0API或者hook代称。 3.0在API层面发生了非常大的变动,大部分对开发是友好的,也有一些看起来比较扯淡的地方,后面专门写一篇文章来唠。 在这里列举一些我认为比较核心的变动要点,看完应该就能有一个宏观的认识。 废弃Options API 3.0API中不会有, data …
  8. JavaScript 中的 NaN另外还有 2 个特殊的数字值:Infinity(比其他任何数字都大的数字)和 NaN(表示“Not A Number”概念):
  9. VUE:如何把slot从父组件传到子组件 有A、B、C三个component,分别包含不同的slot: const A = { template: `<div><slot name="a">Default A Content</slot></div>` } const B = { template: `<div><slot name="b">Default B Content</slot></div>` } const C = { template: …
  10. 全网最详bpmn.js教材-properties-panel篇(上) 前言  Q: bpmn.js是什么? ️ ” bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.  Q: 我为什么要写该系列的教材? ️ ” 因为公司业务的需要因而要在项目中使用到 bpmn.js ,但是由于 bpmn.js 的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很…
  11. Vue 3.0实践:使用Vue 3.0做JSX(TSX)风格的组件开发 前言 我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后。 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方,让我难以接受。所以在很长一段时间,我都在尝试寻找React的替代品,我尝试过不少别的前端框架,但都有各种各样的问题或限制。 在看到…
  12. 带你了解 vue-next(Vue 3.0)之 小试牛刀 看完上一章 初入茅庐 之后,相信大家已经对 vue-next(Vue 3.0) 有所了解了。本章带你掌握 vue-next 函数式的API,了解这些的话,无论是对于源码的阅读,还是当正式版发布时开始学习,应该都会有起到一定的辅助作用。 基本例子 直接拷贝下面代码,去运行看效果吧。推荐使用高版本的chrome浏览器,记得打开F12调试…
  13. 带你了解 vue-next(Vue 3.0)之 初入茅庐 这几天,陆续学习了解了关于 vue-next(Vue 3.0) 的一些新特性,尤其是新的 Composition API 的用法。这套新的API中最重要、最核心的部分,恐怕就是实现响应式功能的这一块了。而且,这套响应式API不仅可以在 vue-next 环境下使用,也可以独立使用。 笔者在阅读源码看到, vue-next 已全部由 TypeScript 构建,看来…
  14. 在生产环境运行 PM2 & Node.js 原文: medium.com/hackernoon/… 维护你的代码库并保持其相关性确有难度;但与之相比我们会发现,维护一个应用时最大的挑战来自于保持其存活和运行。不仅如此,随着 Node.js 变成大部分后端 API 的核心语言,单线程程序的伸缩也变得困难;这就是 PM2 出现并受到欢迎的原因了。 有很多进程管理工具,广为人知的如…
  15. 用 JavaScript 实现基于类的枚举模式 每日前端夜话 第269篇 翻译: 疯狂的技术宅 作者:Dr. Axel Rauschmayer 来源:2ality 正文共:1596  字 预计阅读时间:7分钟 在本文中,我们将会研究在 JavaScript 中实现基于类的枚举模式。还会研究一下 Enumify 这个能够帮助我们使用枚举模式的库。 实现枚举:…
  16. Promise(2):手动实现Promise Promise对象初始状态为 Pending,在被 resolve 或 reject 时,状态变为 Fulfilled 或 Rejected resolve接收成功的数据,reject接收失败或错误的数据 Promise对象必须有一个 then 方法,且只接受两个可函数参数 onFulfilled、onRejected const REJECTED = ‘rejected’; const RESOLVED = ‘resolved’; const PENDING…
  17. Vue vant引入,tabbar封装使用示例 Vant tabbar使用教程:https://youzan.github.io/vant/#/zh-CN/tabbar 关于基本的安装、引入组件就不再详细讲解,请自行按照文档安装章节进行。 封装Tabbar 在不同页面显示tabbar,如果tabbar修改,则需要变动多个页面 封装成组件后,统一引用组件,修改tabbar则只需要改动组件文件 封装后引用代码 active代表要…
  18. 一个白学家眼里的 WebAssembly 在知乎 如何看待 WebAssembly 这门技术? 这个问题里,可以看出大家普遍对浏览器、WASM 和 JS 之间的三角关系有不少误解。因此这里作为一个开 (bai) 发 (xue) 者 (jia),我就来尝试纠正些常见的问题吧。 WASM == 汇编级性能? 这显然不对,WASM 里的 Assembly 并不意味着真正的汇编码,而只是种新约定的字节码,…
  19. 捕获 React 异常韩国某著名男子天团之前在我们平台上架了一张重磅数字专辑,本来是一件喜大普奔的好事,结果上架后投诉蜂拥而至。部分用户反馈页面打开就崩溃,紧急排查后发现真凶就是下面这段代码。
  20. 在 Vue CLI 生成的项目里更改 eslint 风格 生成项目时选择的 eslint 风格可能并不是最终想要的代码风格 误选 Prettier 规则 开始的时候,使用 vue craete myProject 创建项目 选择了 prettier 规则 进到项目写代码的时候,发现它要求使用双引号! 就去 Google 找 切换 eslint 规则 的方法,没有找到很明确的方式 Airbnb 规则 在一个 Github is…
  21. 小蝌蚪传记:nodejs线上模块热部署原理与实现晚十二点,床上 富婆:这是给你的500元,辛苦了 小蝌蚪:不辛苦,主人 富婆:我老公要回来了,你走吧 小蝌蚪:是,主人 说完小蝌蚪从三楼别墅跳了下去 。。。 小蝌蚪是一名程序员,也是一个技师 白天敲代码,晚上…
  22. webpack 4 源码主流程分析(十四):webpack 优化 原文首发于blog.flqin.com。如有错误,请联系笔者。分析码字不易,转载请表明出处,谢谢! 前面一至十一章,介绍了在 development 的模式下,整个完整了构建主流程。在了解构建流程的基础上,本章整理一些与 webpack 优化相关的知识点。 production 模式 我们参考 production 模式里,里面已经做了大部分的优…
  23. 2020年前端学习的新路径 原本想写个更加标题党的: 《2020年你为什么还在用10年前的思路学习前端?》 不过本文更多的还是想给大家带来下一个时代前端开发学习和进阶的思考,而不是纯标题党。就像今年前端领域发生了很多事情,却没有了前几年的热闹非凡的感觉: Angular & React & Vue三大框架稳定发展,不再有刻意吸引眼球…
  24. 我是如何把 GitHub 开源项目做到 5300+ star 的 前言 我开发的开源文档工具在github上上升到了5300+的star ,受到了部分开发者的欢迎。于是便想写文章与大家分享一下我在整个创作过程中所用到的技术以及相关技能。 任务管理 无论是做自己规划的产品功能,还是做用户反馈过来的bug,最终都需要把这些点细化成一个个单独的小任务,串联执行(毕竟自己…
  25. 基于 RBAC 的 Web 应用权限管理的思考 写在最前 仅针对单一应用, 如果需要多应用的统一权限管理, 可能还需要加上「应用」这个层级的范围 以类似「白名单」的形式来计算权限, 保持的是一种累加的方式, 没有考虑权限互斥的情况, 也没有加入「黑名单」的设置 如果不需要特别针对某一个用户授权, 可以在角色绑定时, 只使用组id …
  26. 如何全方位优化你的超大型 React 应用? React为了大型应用而生,Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力,Taro则赋予了它一次编写,生成多种平台小程序和React-native应用的能力,这里特意说下 Taro,它是国产,文档写得比较不错,而且它的升级速度比较快,有issue我看也会及时解决,他们的维护人员还是非常敬业的! …
  27. Vue高级指南-01 Vue源码解析之手写Vue源码 现在前端面试Vue中都会问到响应式原理以及如何实现的,如果你还只是简单回答通过Object.defineProperty()来劫持属性可能已经不够了。 本篇文章通过学习文档及视频教程 实现手写 一个简易的Vue源码实现数据双向绑定,解析指令等。 几种实现双向绑定的做法 目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所…

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

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


关注我

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

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

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