20200424 前端开发日报

Vue3.0直播虚拟Dom总结(和React对比);Vue3.0 Beta笔记(侧重Performance提升原因和Composition API);Vue Cli 3 打包配置–自动忽略 console.log 语句;尤雨溪在 vue3.0 bate 上推荐的 no webpack 小工具 vite;尤雨溪谈Vue3.0新特性直播后的个人理解;这道易错js执行顺序的题,隐藏的点你get到了吗?;Vue源码探秘(十二)(生命周期);从零开始使用JavaScript制作自己的命令行(CLI工具)

  1. Vue3.0直播虚拟Dom总结(和React对比)

    整体尤大直播的过程,劝退大兄弟已经总结的贼棒了 ,直接移步 抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些… Vue3 核心的 Typescript , Proxy 响应式, Composition 解决代码反复横跳都有很棒的文章剖析了, 我总结一下虚拟 Dom 部分把,并对比一下 React , vdom 的重写也是 vue3 性能如此优秀的重要原因 …

  2. Vue3.0 Beta笔记(侧重Performance提升原因和Composition API)

    前言 昨晚(北京时间2020年4月22日),Vue作者Evan You(尤雨溪)在前端圈的B站直播间分享了关于’Vue3.0 Beta’的一些新的特性和进展。(在此附上B站录播链接: www.bilibili.com/video/BV1Tg… -此为b站个人up主录播,等官方录播发布会进行更改)  本文,是个人记录的一些笔记,更关注与侧重Performance…

  3. Vue Cli 3 打包配置–自动忽略 console.log 语句

    不过这时会有一个问题,就是在开发环境的时候编译会非常慢。例如修改了一个变量的值,我的电脑要编译 10 秒才能重新刷出来页面,一直卡在 92% chunk asset optimization。

  4. 尤雨溪在 vue3.0 bate 上推荐的 no webpack 小工具 vite

    前言 在4月21日晚,Vue作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta最新进展。 里面尤大大所提到他最近在做的这个小工具 vite ,一个实验性的no build的vue开发服务器。(这个小工具可以支持热更新,且不用预编译) 既然感兴趣那就着手试试,上手体验体验 一丶安装 命令行复制以下 mkdir vue-vite 新建…

  5. 尤雨溪谈Vue3.0新特性直播后的个人理解

    我个人对Vue3的体验感受是非常好的,RFC讨论新API(Composition得通过需要少量的API的学习成本,或许可以得到更好的体验。再此我是保持中立的,框架的更新改版我的理解就是:解决前代被人吐槽的地方,优化性能,缩小体积,更强大的功能。在此之前,通过这次直播,我来总结下 Composition API 和 Options API 之间究竟解决…

  6. 这道易错js执行顺序的题,隐藏的点你get到了吗?

    面试的时候经常碰到一些关于js执行顺序的题,涉及到Event-loop,微任务、宏任务、任务队列之类的,有的题比较简单,前段时间在交流群里,群友贴出来一题,我觉得蛮有意思,当时做了一下,给出了简单的解析 ,事后回想,解析的比较笼统,今天我们来扒衣扒皮,来我们直接上题, 上代码 console.log(‘script start’) …

  7. Vue源码探秘(十二)(生命周期)

    回顾我们之前学习的内容,在创建一个 Vue 实例的时候需要经过一系列的初始化过程,比如设置 数据监听 、 编译模板 、 挂载实例到 DOM 、在数据变化时 更新 DOM 等。 同时在这个过程中也会运行一些叫做 生命周期钩子 的函数,这给了用户在不同阶段添加自己的代码的机会。 下面引用官网的一张图,这张图展示了…

  8. 从零开始使用JavaScript制作自己的命令行(CLI工具)

    我们每天都使用CLI程序(例如Terminal,cmd,Powershell等)进行软件开发。你使用的每个工具本质上都是其他软件工程师的产品,我们也可以制作自己的CLI工具。 从零开始的简单CLI,让我们开始吧! 首先,让我们制作一个简单的CLI工具,该工具会打印“ HelloWord” 要制作CLI,您需要制作两个文件 package.json…

  9. JavaScript中的异步模式,我知道的都在里面了

    @ 前言:JS是单线程的语言,这意味着它同一时间只能做一件事,当碰到比较耗时的事情的时候,所有后面等待执行的任务就都得原地等待,为了解决这一问题,出现了异步,而异步的执行机制是主线程发送一个异步请求给相应的工作线程,然后主线程去处理其他事情,等到工作现成完成后,浏览器内部的线程会把工作线程的回…

  10. Gitflow 分支管理策略

    Gitflow存在两个记录项目历史的分支 Master分支:存储(官方的,正式的)项目发布历史记录的分支。 develop分支:充当功能的集成分支。 Develop分支将包含项目的完整历史记录,而master将包含简化版本。现在,其他开发人员应该克隆中央存储库,并为deve…

  11. node.js通过Error.prepareStackTrace获取上层调用函数的文件名地址和行数位置

    node.js中可以通过 __dirname 获取当前文件的目前。 那么如何在被调用函数中获取调用者的文件地址和函数名以及行数位置? 可使用Error.prepareStackTrace来获取StackTrace数组对象,获取调用者文件信息。 var getCallerPath = function() { var orig = Error.prepareStackTrace; Error.prepareStackTrace = funct…

  12. 基于 HTML5 WebGL 的高炉炼铁厂可视化系统

    前言 在当今 工业4.0 新时代的推动下,不仅迎来了 工业互联网 的发展,还开启了 5G 时代的新次元。而伴随着带宽的提升,网络信息飞速发展,能源管控上与实时预警在工业互联网中也占着举足轻重的地位,而对于高炉炼铁的发展上来看,目前已完成国内260座高炉的数字化和智能化落地,并推动炼铁大数据平台在俄罗斯、越南…

  13. 用什么策略把你的 JavaScript 迁移到 TypeScript

    每日前端夜话 第318篇 翻译: 疯狂的技术宅 作者:Dr. Axel Rauschmayer 来源:2ality 正文共: 1526 字 预计阅读时间:7 分钟 本文概述了将代码库从 JavaScript 迁移到 TypeScript 的策略。还提到了需要进一步阅读的材料。 三种迁移策略 这是用于迁移到TypeScript的三种策略…

  14. vue项目打包之减小包的体积

    默认情况下,凡是通过 import 方式引入的包,打包时都会被打包,这就会导致最后的包体积比较大,伴随而来的就是程序的加载速度慢 解决方法主要是两个 一个是使用CDN 一个是路由的懒加载 先说 CDN 核心思想就是将线上环境中用到一些依赖,比如 vue、vueRouter 、axios 等,使用 cdn 节点的方式引用,而不是打到…

  15. ESModule 和 commonjs module 混用

    在一些项目中,使用 webpack 打包,难免会有 ESModule 和 commonjs 混用的情况,当然,全部用 ESModule 是最好的,符合标准。但是,在不得已或偷懒情况下必须混用时,要注意混用时的一些模块逻辑。 babel 会将 ESModule 导入进行处理,也就是说 import 的目标文件是 module.exports 导出的 commonjs 文件是可以的。但是…

  16. 再过几天,就是一名3年开发经验的前端了

    日子过的真快,还记得3年前自己刚刚从培训机构学了4个月出来找工作的样子。每天睁开眼以后就是投简历,等电话,去面试,如此循环往复。那个时候住在城中村,每月280块钱的房租,代价就是村里没有移动的信号,每天要坐公交去市图书馆等面试邀请,令人沮丧的是,面试公司不是培训机构就是我不满足人家条件,终于有一家公司…

  17. 观察者模式(JavaScript实现)

    观察者模式中通常有两个模型,一个观察者( observer )和一个被观察者( Observed )。从字面意思上理解,即被观察者发生某些行为或者变化时,会通知观察者,观察者根据此行为或者变化做出处理。那么具体如何操作呢,下面:point_down:我们就用 JavaScript 代码实现一个观察者模式。 实现 观察者模式JS实现 let o…

  18. 关于vue的那些事儿

    vue框架是常用的框架,接下来总结一些关于vue的知识点 一、vue的生命周期 生命周期是什么? Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是Vue的生命周期。 同时在这个过程中也会运行一些叫做生命周期钩子的函数,…

  19. Rxjs防抖与节流在项目中的应用

    背景一:当前项目引用了tinyMce以及公式编辑器,在实际的使用中发现,有些题目可能需要较长的时候来填写。由于填写的时间超出了cookie的过期时间,所以当用户千辛万苦的填写完以后,点击保存按钮时发生了401。再…

  20. JavaScript数据类型及变量

    推荐: 《JavaScript高级程序设计》第三版 《你不知道的JavaScript》系列 刚开始看很苦涩,还不能体会到这两本书的厉害之处,随着学习深入渐渐体会到了这两本书的厚重,前者很详细;后者如序言所说从不同而角度带读者领略JavaScript难处。 1. JavaScript变量 JavaScript的变量是松散型变量,和之前在python…

  21. 使用Go开发前端应用

    我们知道,在目前各种容器化盛行的时代,Go在开发容器化应用当中,成为大家首选的后端开发语言。目前,最流弊的容器化管理编排系统k8s,几乎每个大的云厂商都在使用。而k8s就是Google使用go语言开发出来的。而现在,go已经可以用来开发前端语言了,有种“一切可以用go语言实现的功能,最终都会用go语言实现”的感觉。这篇…

  22. Flutter Web 网站之 Jetpack 成型

    往期 Flutter Web网站搭建教程 Flutter Web 网站之主页框架搭建 上期回顾 上期我们做了一个能兼容不同屏幕大小的主页,来适配Web、Android等平台。主要用到了MediaQuery来动态获取屏幕的宽度,来动态适配UI。 本期内容 好消息,我申请的域名jetpack.net.cn已经下来了,这…

  23. VolgaCTF 2020 Qualifier-Web

    首先大概一下浏览基本功能 登陆/注册 查看个人信息以及修改个人信息和头像 Report Bug将URL发送给admin进行xss 大概测试了一下,发现如下: 修改个人信息的地方会进行html实体编码没法xss,头像处试过传了下svg,发现不太行,网站对type做了限制,限制了svg以及xml等文件的上传,并且它是把网站上传…

  24. Vue3 使用学习

    前言 从去年开始就有 Vue3 各种消息,一直比较期待 V3 的版本,因为 V2 针对 TypeScript 不是太完善,支持不是太好,一直没用上。其次针对 React 来比, V2 又显然太死板,并且在大项项目构架上来看,复用性很差。所以在之前的 Vue3 PPT 讲到诸多特性,知道前几天的 Beta 版本出现,虽然 Alpha 版本尝鲜过,…

  25. JavaScript ES2020必知必会新特性

    该方法接收一个可迭代的对象,例如Array,其中每个成员都是Promise。仅在所有这些Promise状态都改变为rejected或resolved时,返回的promise的处理程序作为输入传递一个数组,每个promise的结果包含status字符创,…

  26. JavaScript隐式转换,js偷偷摸摸背着我们都做了些什么

    隐式转换中主要涉及到三种转换: 1.ToPrimitive()— 将值转换为原始值(截止到目前,原始值一共有7个, Null,Undefined,String,Number,Boolean,Symbol,BigInt) Tip: ① 转换结果一定是一个原始值 ② 若是不传参,对象为 Date 类型的,默认为 String ,其余的则为 Number,ToPrimitive(input, PreferredType) ③ Number…

更多内容请关注公众号【前端开发博客】每日更新


关注我

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

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

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