20200628 前端开发日报

Vue Router自动化路由;vite 与 react 的结合;Vue3 的 Proxy 能做到哪些精确的拦截操作?原理揭秘;JavScript中解析 super 关键字;JS 函数的执行时机;手摸手,带你探究Javascript异步编程;babel最详细解读;JavaScript中准确判断数据类型的方法

  1. Vue Router自动化路由

    在开发vue项目时,需要创建路由时都需要手动到指定目录文件配置,如果只是小项目可能还好,但是如果是中大型项目,这个未免会显得枯燥繁琐,有没有一种可以简化路由配置的方法呢?就像 Nuxt.js 服务端会依据  pages 目录结构自动生成  vue-router 模块的路由配置。接下来将由本人带大家如何在非服务端渲染...

  2. vite 与 react 的结合

    vite, 法语词, 快的意思. 读音为 /vit/ 先来看看之前的先驱: parcel, rollup, webpack.这些工具的目的便是为了打包, 为了前端能有模块化. 为了前端能承担更复杂的逻辑, 不被后端瞧不起.为了证明js是宇宙第一的语言, 为了.... 简单总结下: 配置项 parcel最方便, 几乎不需要任何配置, install之后build即可. ...

  3. Vue3 的 Proxy 能做到哪些精确的拦截操作?原理揭秘

    前言 大家都知道,Vue2 里的响应式其实有点像是一个半完全体,对于对象上新增的属性无能为力,对于数组则需要拦截它的原型方法来实现响应式。 举个例子: let vm = new Vue({ data() { return { a: 1 } } }) // ❌ oops,没反应! vm.b = 2 let vm = new Vue({ d...

  4. JavScript中解析 super 关键字

    在写 React 中,用类 class 声明的组件,常常看到,React 组件内数据初始化往往放在 constructor 构造器函数里面,而子类继承 React.Component ,如果想要接收父组件的数据 那么必须要调用 super(props) ,同时还需要让 constructor 构造器函数接收一个 props 参数,否则的话,在当前组件内是无法获取到外部组件传过来...

  5. JS 函数的执行时机

    调用时机是JS函数的一个很重要的要数,调用时机不同,得到的结果就会不同。 首先示例一段代码: let a =1 functon fn(){ console.log(a) } a = 2 fn() 复制代码 打印出2,因为a=2后函数fn()才调用。 又有如下代码: let a =1 functon fn(){ console.log(a) } fn() a = 2 复制代码 打印出1,因为先调用函...

  6. 手摸手,带你探究Javascript异步编程

    话不多说,首先我们肯定要实现红绿灯的展示,这部分比较基础,直接上代码 // CSS部分 div { background-color: gray; display: inline-block; margin: 30px; height: 100px; width: 100px; border-radius: 50%; } .green.light { background-color: green; } .yellow.light { background-color: yellow; } .red...

  7. babel最详细解读

    新鲜出炉的babel全解。看了文档还有很多其他博客,说法不一,都把我整蒙了,亲自实践了一把,消除了很多盲点,如有错误,欢迎指出 babel是什么? 浏览器的发展永远跟不上语言的发展,es6+虽然很普及了,但也不是所有浏览器都可以支持es6+语法。babel的诞生就源于此。 官方定义: Babel 是一个工具链,主要用...

  8. JavaScript中准确判断数据类型的方法

    js中准确判断数据类型的方法 强烈推荐的Markdown编写工具Markdown Nice,点击该链接详细琢磨 1: typeof 返回数据类型,包含这7种: number、boolean、symbol、string、object、undefined、function。 typeof null 返回类型错误,返回object 引用类型,除了function返回function类型外,其他均返回obj...

  9. 还在迷茫于前端如何入门和进阶?万字指南让你不再迷茫

    我经常会看到很多同学在学习前端的时候比较迷茫,不知道到底应该以怎样的学习路线来入门和进阶前端领域。每次遇到这种问题我也会分享一下自己的学习经验,但是发现这是一个问得非常多的一个共性问题。 作为程序员,肯定是不能容忍重复无味的劳动的,因此我就系统地总结分享一下我的前端学习路线,希望对你能够有所帮助...

  10. 一次微前端的探索实践之旅

    这几年“微服务”的讨论甚嚣尘上,那么“微前端”又是什么硬核技术呢? 微前端 最早由ThoughtWorks 2016年提出,目前社区有很多关于微前端的介绍,也有一些落地的具体实践方案,对于微前端的概念感兴趣或不熟悉的同学,可以在知乎上看到很多相关内容,本文不再做过多介绍。 微前端的核心价值: 技术栈无关 主体应...

  11. 从零开始初尝Three.js(大量案例、简单入手)

    不经意间看到了某个官网的动态效果~ 实在是太帅啦!十分地友好 查了查实现该效果地技术 —— 原来是 Three.js 那就让我来从零初尝Three.js动态3D效果吧:sparkles: :sparkles:有大量案例和找寻源码的方法噢:sparkles: 背景 随着当今时期前端地愈来愈普及,页面实现的效果真的是越来越棒! 随着数字图像处理...

  12. Node.js 深度调试指南

    在 Node.js 项目开发过程中,随着项目的发展,调用关系越来越复杂,调试工具的重要性日益凸显。 Node(v6.3+)集成了方便好用 V8 Inspect 调试器,允许我们通过 Chrome DevTools 进行图形化的调试和性能分析。同时,我们也可以使用 VS Code,Webstorm 等支持的编辑器对 Node.js 程序进行调试。 Node Inspect 要想启...

  13. 顺藤摸瓜:用单元测试读懂 vue3 watch 函数

    在 Vue 3.x 的 Composition API 中,我们可以用近似 React Hooks 的方式组织代码的复用;ref/reactive/computed 等好用的响应式 API 函数可以摆脱组件的绑定,抽离出来被随处使用了。 传统上在 Vue 2.x Options API 的实践中,不太推荐过多使用组件定义中的 watch 属性 -- 理由是除了某些新旧值比较和页面副作用以外,...

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