20200421 前端开发日报

js、css对web页面解析、渲染的影响;前端面试·Vue.js;Web应用调试利器:queryObjects;从剖析Vue-cli源码出发完整的React业务脚手架实践(一)——脚手架架构基础搭建;整理了一些常用的JS开发小技巧;JavaScript 的内存世界与原型链;[深入19] 手写Promise;web API(1) JS组成

  1. js、css对web页面解析、渲染的影响

    这张图描述了页面解析渲染的整体流程,但是凭这张图还看不出js、css具体如何阻塞页面解析和渲染的。 需要注意的是,这个流程是会执行很多次的,不是等到HTML全部解析完,css全部解析完再去合成渲染树、布局、绘制,一次执行完。根据这张整体流程图,有一种错误的认识是,css没有加载解析完,DOM树无法结合样式生成渲染...

  2. 前端面试·Vue.js

    Web界面由DOM树(树的意思是数据结构)来构建,当其中一部分发生变化时,其实就是对应某个DOM节点发生了变化, 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。 如前,若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性attch到D...

  3. Web应用调试利器:queryObjects

    queryObjects 是Chrome 62新增的一个 Command Line API 。 官网这样介绍该API A new API for querying heap objects Call queryObjects(Constructor) from the Console to return an array of objects that were created with the specified constructor. For example: queryObjects(Promise). ...

  4. 从剖析Vue-cli源码出发完整的React业务脚手架实践(一)——脚手架架构基础搭建

    随着公司业务线增加了以后,基础脚手架已经满足不了需求,于是开始着手业务线的脚手架开发,我基于vue cli源码和自己的业务实践,吸取vue-cli插件模式的开发优势和业务结合,做一套关于React的项目脚手架。 写在前面 这是一篇长期持续更新的React脚手架实践,为的是吸取Vue Cli的脚手架经验,通过我们习惯的 插件-...

  5. 整理了一些常用的JS开发小技巧

    下面整理了一些js开发常用的小技巧,没有顺序之分,可以跳着看,会持续补充~~~ 一,数值型 求数字数组最小值 let list = let min = Math.min(...list) // 1 复制代码 二,字符型 字符串倒序 字符串倒序就是把字符串倒着排序,可以用下列方法 .split('').reverse().join('') let str = 'abc' le...

  6. JavaScript 的内存世界与原型链

    内存世界 上图我们可以简单的看作电脑内存,我们的JS代码就存放在代码区,变量存放在不知道什么区,而数据则专门存放在Stack(栈区),Heap(堆区)中。 stack与heap的区别 stack存放对象(string number booleans),顺序存放 heap存放非对象,随机存放 对象的篡改 var person = ...

  7. [深入19] 手写Promise

    Hooks Nginx Docker 部署vue项目 gitlab-CI AST抽象语法树 Tapable 手写webpack - compiler简单编译流程 前置知识 一些单词 race:比赛,竞赛 Settled...

  8. web API(1) JS组成

    ECMAScript(JavaScript语法) DOM(页面文档对象模型) BOM(浏览器对象模型) Web APIs阶段 JS基础学习ECMAScript基础语法为后面做铺垫,Web APIs是JS的应用,大量使用JS基础语法做交互效果 API(Application Programing Interface应用程序编程接口):是一些预先定义的函数,目的是提供应用程序与开...

  9. 图解javascript核心知识点—原型链

    要理解原型链,绕不开constructor、prototype、__proto__这几个核心的知识点,它们的关系如下: 上面的图是一个最简单的原型链,先有一个直观的认识。下面将围绕上面3个点一步步对原型链抽丝剥茧,最后在来总结究竟什么是原型链,自然就清晰了。 2. 课前预习 再正式进入主题之前,先了解几个知识点 2.1...

  10. Angular学习前期准备

    Angular(通常是指 " Angular 2+ " 或 " Angular v2 及更高版本 ")是一个基于 TypeScript 的开源 Web 应用框架 由 Google 的 Angular 团队以及社区共同领导。Angular 是由 AngularJS的同一个开发团队完全重写的。 Angular 8 于2019年5月28日发布。特性包括:为所有应用代码进行差异化加载、针对惰...

  11. 挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter

    先说两句 上一讲 「Vuex 到底是个什么鬼」 ,已经完美诠释了 Vuex 的牛逼技能之所在(纯属自嗨)。如果把 Vuex 比喻成农药里面的刘备,那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄,而且他打的枪还是双排量的,认识到这一点后,那么接下来就是要了解他到底是如何打枪的,是左手打,还是右手打,还是双...

  12. VueX的模块你知道多少?

    VueX的模块你知道多少? 为什么会出现VueX的模块呢?当你的项目中代码变多的时候,很难区分维护。那么这时候Vuex的模块功能就这么体现出来了。 那么我们就开始吧! 一、模块是啥? /* eslint-disable no-unused-vars */import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.St...

  13. 利用Github webhook 自动部署VUE项目之乞丐版

    用VUE写了个小项目,每次更新了都要在本地 build 好了后打包再上传到服务器上,再解压。 这就很麻烦,一开始想要的用 jenkins 来自动集成,但是操作起来很麻烦,且没必要。但是我注意到了 github 提供了一个 webhook 钩子,当 push 了代码后,github 会向指定的 Url 发起一个 POST 请求。 那么,我就想到了可以用 fl...

  14. JavaScript系列之作用域与闭包

    在进入作用域的讨论之前先明什么是作用域,通过一句话简单描述就是: 一组明确定义的规则,它定义如何在某些位置存储变量,以及如何在稍后找到这些变量 词法作用域 作用域的工作方式有两种占统治地位的模型。其中的第一种是最最常见,在绝大多数的编程语言中被使用的。它称为 词法作用域 ,我们将深入检视它。另...

  15. 视图模板引擎——Vue【双向绑定】原理剖析

    首先我们来了解一下 MVC 、 MVP 、 MVMM 这三大架构模式在前端角度上的理解。 MVC分别是 Model(模型)、View(视图)、Controller(控制器)三个模块。View(视图层)最主要完成前端的数据展示,Controller(控制层)是对数据的接收和触发事件的接收和传递,Model(模型层)则是对数据的储存和处理,再传递给视图层...

  16. vue3 reactive 思路引导

    首先这是一个精简版,所以有很多缺陷。但这篇文章仅仅是用来理清 为什么 ,而不是去实现一个完备的reactive 模块。 如果对reactive 比较熟悉,这篇文章大可不必浪费时间。 假设设计一个 晚餐价格计算的功能。 total 总价 = dinnerPrice 晚餐费用 + tip 小费 待改造代码 render函数 function paint(){ document.ge...

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

原文:20200421 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20200421.html)