20200627 前端开发周报

前端内存优化的探索与实践;web前端性能优化(2);学习Vue源码(17)再探生命周期之初始化实例属性及事件;JS基础知识总结(三):原型、原型链;JavaScript类型判断的四种方法;WebGL学习(一)– 使用WebGL绘制一个点;你不知道的 TypeScript 泛型(万字长文,建议收藏);几道面试题理解JavaScript运行机制

  1. 前端内存优化的探索与实践

    前端内存优化的探索与实践 引 言 标注是地图最基本的元素之一,标明了地图每个位置或线路的名称。在地图 JSAPI 中,标注的展示效果及性能也是需要重点解决的问题。 新版地图标注的设计中,引入了 SDF ( signed distance field)重构了整个标注部分的代码。新的方式需要把标注的位置偏移,避让,三角拆分等全...

  2. web前端性能优化(2)

    相比于对小图进行iamge sprite,在模块化开发模式下,当前更主流的方案是将小图转化为DataURLs。 什么是Data URLs? Data URLs是一种以 data: 为前缀的协议(scheme)。通过这个协议,内容创作者可以向文档中嵌入小文件。所以,Data URLs也被称为“文件中的文件”。Data URLs之前被称为“Data URIs”, 后来这个名字被WHATW...

  3. 学习vue源码(17)再探生命周期之初始化实例属性及事件

    在前一篇文章 学习vue源码(16)初探生命周期各阶段都在干嘛 Vue.js生命周期可以分为4个阶段:初始化阶段、模板编译阶段、挂载阶段、卸载阶段。 而初始化阶段又可分为 在Vue.js实例上初始化一些属性、事件以及响应式数据,如props、methods、data、computed、watch、provide和inject等。 这一次,我们就来探究第...

  4. JS基础知识总结(三):原型、原型链

    “ 关注 前端开发社区 ,回复"1"即可加入 前端技术交流群,回复 "2"即可免费领取 500G前端干货! 上一篇 JS基础知识总结(二)主要了介绍深拷贝、浅拷贝的基础知识,本文将介绍JS原型、原型链的有关内容。 1.原型 ...

  5. JavaScript类型判断的四种方法

    JavaScript有八种内置类型,除对象外,其他统称为“基本类型”。 空值(null) 未定义(undefined) 布尔值(boolean) 数字(number) 字符串(string) 对象 (object) 符号(symbol, ES6中新增) 大整数(BigInt, ES2020 引入) Symbol: 是ES6...

  6. WebGL学习(一)– 使用WebGL绘制一个点

    WebGL,是一项用来在网页上绘制和渲染复杂三维模型,并允许用户与之交互的技术。 传统意义上,只有高配置的计算机或者专用的游戏机才能渲染三维图形,WebGL技术结合了HTML5和JavaScript,允许开发者在网页上创建和渲染三维图形。 从传统意义上,为了显示三维图形,开发者需要使用C或者C++语言,辅以专业的计算机图形库...

  7. 你不知道的 TypeScript 泛型(万字长文,建议收藏)

    泛型是 TypeScript(以下简称 TS) 比较高级的功能之一,理解起来也比较困难。泛型应用场景非常广泛,很多地方都能看到它的影子。平时我们阅读开源 TS 项目源码,或者在自己的 TS 项目中使用一些第三方库(比如 R...

  8. 几道面试题理解JavaScript运行机制

    文章中若有错误的地方,欢迎指出。 我们先来看看下面:point_down:几道面试题: // example1 let a = {}, b = '0', c = 0; a = '堆栈'; a = '内存'; console.log(a );//内存 ----------------------------------------------------------------- // example 2 let a = {}, b = Symbol('1'), c = Symb...

  9. 字节前端岗位面试经历,我从里面得到了什么?

    对于实习招聘(甚至校招)来说,项目经历可能是获得面试的敲门砖,但是基础绝对是赢得面试的通天索。 (互联网侦察注:校招就是考基础和潜力,基础扎实潜力不错的一般都会收) 即使是实习招聘,白板写代码也很可能逐渐成为主流面试的标配,平时要有意识地锻炼这方面能力,要不然面试时没有IDE真的是做不下去。 (互联网侦...

  10. 学习vue源码(18)三探生命周期之初始化provide与inject

    上篇文章 学习vue源码(17)再探生命周期之初始化实例属性及事件 讲解了初始化阶段的 initLifecycle(vm) initEvents(vm) initRender(vm) 复制代码 即beforeCreate钩子函数触发前对实例 属性和事件的初始化。 // src/core/instance/init.js Vue.prototype._init = function (options?: Object) { ...

  11. 从头开始创建自己的Vue.js—第2部分(虚拟DOM基础)

    作者: Marc Backes 翻译:张全玉 这是从头开始创建 Vue.js 系列文章的第二部分,在这里我教您如何创建诸如 Vue.js 之类反应式框架的基础。 在第一部分中,描述了我们需要的部分以及遵循的路线图。 如果您还没有阅读过,建议您在阅读本文之前先阅读。 我只有1年的 Vue.js 工作经验,但是我参加了 Evan You 本人...

  12. 图解JavaScript——代码实现【2】(六种异步方案,重点是Promise、Async、发布/订阅原理实现,真香)

    本节主要阐述六种异步方案:回调函数、事件监听、发布/订阅、Promise、Generator和Async。其中重点是发布/订阅、Promise、Async的原理实现,通过对这几点的了解,希望我们前端切图仔能够在修炼内功的路上更进一步。

  13. 面试必备JS高频面试题汇总

    基本类型:number string boolean null undefined symbol bigint 引用数据类型:object (包含,Date,RegExp,Function,Array,Math..) 二、symbol的作用 首先说明symbol是基本类型之一,symbols 是一种无法被重建的基本类型。这时 symbols 有点类似与对象创建的实例互相不相等的情况,但同时 symbols又是一种无法被改...

  14. 从零开始的Flutter之旅: Provider

    往期回顾 从零开始的Flutter之旅: StatelessWidget 从零开始的Flutter之旅: StatefulWidget 从零开始的Flutter之旅: InheritedWidget 在上篇文章中我们介绍了InheritedWidget,并在最后引发出一个问题。 虽然Inhe...

  15. 前端工程化之js模块化

    在没有CommonJS,AMD,CMD等规范的时候,人们为了让代码模块化,采用了下面这个链接里的方法: www.ruanyifeng.com/blog/2012/1… CommonJS NodeJS 是 CommonJS 规范的实现,webpack 也是以 CommonJS 的形式来书写。CommonJS 是一种只适用于 JavaScript 的静态模块化规范。只适用于 Node.js 开发,...

  16. JavaScript定时器越走越快的问题

    之前在项目中写了定时器来做循环播放,但是总是会有越走越快的问题,开始是以为前后的HTML代码拼接的有问题,时间紧急的情况下反复改了很多也没什么效果,后来发现是js定时器的问题,在这里记录一下。 (setinterval)多次初始化 使用js定时器(setinterval)首要的问题就是要记得清除,即调用(clearInterval)方法,...

  17. Webpack之SplitChunks插件用法详解

    SplitChunks插件是什么呢,简单的来说就是Webpack中一个提取或分离代码的插件,主要作用是提取公共代码,防止代码被重复打包,拆分过大的js文件,合并零散的js文件。 提到前端优化,提取公共代码是必不可少的手段。在Webpack出现前,提取公共代码是人为去处理,而SplitChunks插件的作用就是通过配置让Webpack去帮你提...

  18. Node.js写一个前端项目部署脚本

    部署流程:(执行 zr-deploy 后) 选择部署环境 配置文件 zr-deploy-config.JSON 打包:执行配置文件的 打包命令 buildCommand 打包项目 压缩:打包完成后将文件压缩 local.distDir -> local.distZip 连接服务器: node-ssh 连接服务器 上传代码:上传文件到项目目录( server.distDir ...

  19. 从零搭建一个react-hooks项目(二)

    上一篇搭建了基本的webpack项目,可以支持react,less的基本使用,但是没有考虑到项目中的实际情况,例如生产环境的代码混淆,代码压缩,开发环境的热启动等。 下面我们就针对开发与生产环境的不同需求,对webpack进行下一步的配置 生产环境的配置与开发环境的配置有很多的不同点,所以我们需要分别建对应的配置文件...

  20. 对象 — Javascript基础探究篇(2)

    js中万物皆对象?其实这并不是完全正确的,js中的简单基本类型( string , number , boolean , undefined , null , symbol )本身并不是对象。但对象确实是js的基础。 js还有很多特殊的对象子类型,我们可以称之为复杂基本类型。如常见的函数和数组就是对象的子类型。它们的本质和普通的对象一样,只有多了...

  21. 在Vue开发过程中使用Vite更快的热加载

    作者: Andy Li                                    翻译:张全玉 以 ES6 模块的形式编写 JavaScript 代码已经成为一种常见的行业实践。现在的浏览器已经支持 ES6 模块,但正如 web 开发中的大多数其他问题一样,...

  22. 原生函数 — Javascript基础探究篇(3)

    除了我们能自定义函数外,js中还具有一些原生函数,如 String , Number , Boolean , Object , Function , Array , Date , RegExp , Error , Symbol 等。可以看到有些内置类型和简单基本类型名字和很相似。 使用这些原生函数构造出来的对象,对其使用 typeof 时返回的都是 object 。 const str...

  23. 替代 webpack?一文带你了解 snowpack 原理,你还学得动么

    近期,随着 vue3 的各种曝光,vite 的热度上升,与 vite 类似的 snowpack 的关注度也逐渐增加了。目前(2020.06.18)snowpack 在 Github 上已经有了将近 1w stars。

  24. webpack 与 rollup 背后的 acorn

    带你了解 acorn 内部的实现。

  25. JavaScript–执行环境和对象

    ​ JavaScript中一个最重要的概念,定义了变量或者函数有权访问的其他数据,决定了他们各自的行为.每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中 ​ 每个函数都有自己的执行环境,当执行流进入一个函数时.函数的环境对象就会被压入一个环境栈中.在函数执行完成之后将其环境弹出 ...

  26. GraphQL + Koa + React 项目实践

    项目背景 源于 2019 年 11 月 16 日 FCC 成都社区主办的 Web 全栈大会上尹吉峰老师的 GraphQL 的分享,让我产生了浓厚的兴趣。GraphQL 是一个用于 API 的查询语言,是使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。一个 GraphQL 服务是通过定义类型和类型上的字段来创建的,然后给每个...

  27. this — Javascript基础探究篇(8)

    this 应该是js中最为复杂的机制之一。搞懂 this 某种程度上意味着一次重生。 我们先通过一段代码来看看 this 有多么让人琢磨不透: function foo(num) { console.log(`foo: ${num}`); this.count++; } foo.count = 0; foo(1); foo(2); console.log(foo.count); // ? 复制代码 此时的 foo.count 的值是多...

  28. Vue1.x 2.x 3.x 的响应式实现

    前言 Vue 的响应式原理一直都在被人解析,每个人都有不同的理解,在这里我只是记录自己所学的知识,以及尽可能写的清晰,并且希望能帮到还没有理解的同学。 响应式原理 vue响应式原理关系图 Observer 劫持 data 内的所有数据进行响应处理 Compile 编译模版,只要模版内引用了 data...

  29. 实现自定义 Webpack Loader

    webpack loader 是用于编译源文件为目标文件,默认情况, webpack 只能编译打包 JavaScript 文件,其他文件则需要特定 loader 进行加载,如: css 文件模块,加载器为 css-loader (配合 style-loader 或者 MiniCssExtractPlugin.loader ) less 文件模块,加载器为 less-loader (配合预处...

  30. web前端性能优化(1)

    为了方便描述,本文会将“web前端性能优化”简称为“性能优化”。 在阅读英文文章时,偶尔会发现有小标题显示 TL;DR 或者 tl;dr。网上英文解释有两种,一种是Too long;Don't read,另一种是Too long;Didn't read。意思是:“文章太长了,读不下去了”。常用在英文长文中的摘要标题,显示整篇文章的精华或总结。 什么是性能...

  31. 好消息,Vue3官方文档出中文版的啦

    今天在看vue-composition-api文档的时候,突然发现多出来个Languages选项: 咦奇怪,我记得以前好像没有这个选项的呀。赶紧点开看看有没有中文: 太棒了!还是尤大对咱好,感动得我热泪盈眶,虽然有可能压根就不是他翻译的。 因为在知乎,我曾看他发布过这么一段话: 当然是不是他...

  32. 原生javascript组件开发之Web Component实战

    前言 作为一名前端工程师,我们每天都在和组件打交道,我们也许基于 react/vue 使用过很多第三方组件库,比如 ant design , elementUI , iView 等,或者基于它们进行过组件的二次开发,比如 业务组件 , UI组件 等,亦或者觉得团队能力很强,可以不依赖第三方而独立开发属于自己的组件库。无论何种形式,组件开发已...

  33. JavaScript之深入理解立即调用函数表达式(IIFE),你对它的理解,决定了它的出镜率(系列六)

    立即调用函数 本篇文章,主要讲解的立即执行函数或自执行匿名函数的含义、用法、以及使用它的主要场景。系列的前面几篇文章主要讲解了作用域、原型、执行上下文,本篇文章一样起到了承上启下的作用,如果您感兴趣,不妨去看看哦~ 传送门 目录 一、了解立即调用函数表达式 二、立即调用函数表达式报错...

  34. [GitHub] JavaScript 趋势榜项目(第26周)

    1. tobspr/shapez.io 项目地址: https://github.com/tobspr/shapez.io :star::642 | forks:180 | 218 stars this week shapez.io 是一个受 factorio 启发的开源的用于构建游戏的基础平台! 在网络和桌面上可用。 2. twbs/bootstrap 项目地址: https://github.com/twbs/bootstrap :star::141874 | fork...

  35. Vue_手把手入门就那个不谈

    Node.js概述 2008年,google的Chrome发布,随后就以极快的速度占领市场,超过IE成为浏览器市场的主导者。 2009年,Ryan Dahl在在谷歌的Chrome V8引擎基础之上,打造了基于事件循环的异步IO框架:Node.js。 基于事件循环的异步IO 单线程运行,避免多线程的变量同步问题 js可以编写后台代码前后台同一编程...

  36. 从头开始创建自己的Vue.js-第3部分(构建VDOM)

    作者: Marc Backes 翻译:张全玉 从头开始创建自己的Vue.js-第3部分(构建 VDOM ) 这是从头开始创建Vue.js的系列文章的第三部分,我将在这里教您如何创建诸如Vue.js之类的反应式框架的基础。 要关注此博客文章,我建议您阅读本系列的第一部分和第二部分。 这篇文章起初可能很长,但可能不像它看起来那样...

  37. 深入JavaScript系列02–this关键字

    “ “You know nothing Jon Snow” this关键字 “ “你不知道的JavaScript学习笔记02” 概念 定义:当一个函数被调用时,会创建一个执行上下文。这个执行上下文会包含函数在哪里被调用(调用栈)、函数的调用方式、传入的参数等信息。this就是这个记录的一个属性,会在函数执行的过程中用到 ...

  38. 了不起的 Webpack 构建流程学习指南

    最近原创文章回顾: 《了不起的 tsconfig.json 指南》 《了不起的 Webpack HMR 学习指南(含源码分析)》 《《你不知道的 Blob》番外篇》 《《你不知道的 WeakMap》番外篇》 Webpack 是前端很火的打包工具,它本...

  39. 你需要知道的JS数组

    数组作为JS的基础,是每个前端程序员都需要掌握的基础。本人作为前端小白,不管是刚起步的时候,还是现在接触项目,或者练习简单的数组算法题的时候,就一看到代码或题目,脑子里经常只会想起for循环,逻辑晦涩难懂,代码庞大冗余,上手及其困难。很大的原因就是数组方法使用的不熟练,有时候一大串的代码,只需要借用数...

  40. 轻松掌握纯前端js框架—VUE

    无论现在的你处于什么状态,是时候对自己说:不为模糊不清的未来担忧,只为清清楚楚的现在努力。 复制代码 由于小编时间经历有限,所了解所有VUE的知识分为私企与大家分享,内容如有处处还请您点拨,指正。TEL/V:15200025778 本期主要内容 什么是VUE 如何使用VUE MVVM 绑定语法 指令 一. 什...

  41. 有了 vite,还需要 webpack 么?

    前两天尤大在 vue 3.0 beta 直播中提到了一个 vite 的工具,而且还发推表示再也回不去 webpack 了, 还引来了 webpack 核心开发人员肖恩的搞笑回复, 那就让我们一起来看一下 vite 到底有啥魔力? evernotecid://F8C40634-B31F-4F08-81FD-EE7189DF2F84/appyinxiangcom/4070474/ENResource/p1713 什么是 Vit...

  42. JavaScript重要事件大回顾

    Hello,大家好!我是Cathy海希。 接下来终于就要正式进入JavaScript(以下简称JS)的学习,想想还有些小激动呢!俗话说得好,“知己知彼,百战百胜”,在学习JS之前,让我们一起来看看它的发展过程中那些重要的事件吧! 诞生 1995年,由美国程序员布兰登创造。他当时正在为网景(NetScape)工作,公司让他为浏览器开发...

  43. JavaScript网页截屏方法,你get到了嘛?

    之前我曾写过如何将Canvas图形转换成图片和下载canvas图像的方法,这些都是在为这个插件做技术准备。 技术路线很清晰,将网页的某个区域的内容生成图像,保持到canvas里,然后将canvas内容转换成图片,保存到本地,最后上传到微博。 我在网上搜寻到html2canvas这个能将指定网页元素内容生成canvas图像的javascript工具...

  44. 「JS-Learning」事件循环机制,微任务和宏任务的关系

    JavaScript(后面简称 JS)是单线程的,同一时间只能做一件事情。如果碰到某个耗时长的任务(比如一个需要 3s 的网络请求),那么后续的任务都要等待,这种效果是无法接受的,这时我们就引入了异步任务的概念。 所以 JS 执行主要包括同步任务和异步任务: 同步任务:会放入到执行栈中,他们是要按顺序执行的任务;...

  45. 图形处理:给 Canvas 文本填充线性渐变

    在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。

  46. nodejs中使用mysql

    const mysql = require('mysql') 复制代码 3.书写数据库的匹配项 // 数据库的配置选项 const options = { host: 'localhost',//主机名 user: 'root',//用户 password: '123456',//密码 port: 3306,//端口号 database: 'student'//要操作的数据库 } 复制代码 详细参数配置见 4.实例链接数据...

  47. 译文:2020的十大JavaScript图像处理库【渡一教育】

    原文翻译自: https://blog.bitsrc.io/image-manipulation-libraries-for-javascript-187fde1ad5af,作者:Mahdhi Rezvi 。 如有翻译不准确,请多指正! 使用JavaScript处理图像可能非常困难且繁琐,但值得庆幸的是,有许多可以使处理变得简单的库,以下是我最喜欢的不同类别的库。 如果你在其中发现有用的东西...

  48. 2.(译)图说前端-ArrayBuffers 和 SharedArrayBuffers

    在 上一篇文章 ,我解释了像JavaScript这样的自动内存管理语言如何与内存一起工作,我还解释了像C语言这种手动内存管理如何工作。 当我们谈论 ArrayBuffers 和 SharedArrayBuffers 的时候,为什么花了大篇幅介绍内存管理呢? 这是因为Arraybuffer为您提供了一种手动处理某些数据的方法,即使您使用的是具有自动内...

  49. 构建基于 iOS 模拟器的前端调试方案

    我们在开发 ios App 内的前端页面时,有一个很大的痛点,页面无法使用 Safari Inspector 等工具调试。遇到了问题,我们只能想办法加 vConsole,或者注入 Weinre,或者盲改,实在不行就找客户端同学手动打包调试,...

  50. 深入理解 Vue3 Reactivity

    尤雨溪表示,“ 标题应该叫深入理解... 这个是基础要吓跑一大批人了[捂脸]”

  51. JS中 Number()方法的两种用法

    JS中,调用Number()主要有两种方式,一是作为一个 function 将任意类型的数据转换成数值,二是作为一个类,通过new 生成一个数值对象。 其中第一种方式更常用。 用法一:function Number(value) 将一个任意类型的数据转换成数值,无法转换的则返回 NaN,转换规则类似于类型隐式转换,与 parseFloat 略有差异。 ...

  52. HTML 转 PDF 工具 Wkhtmltopdf 安装使用

    空心菜 读完需要 5分钟 速读仅需 2 分钟 在这里推荐一款比较好用的 HTML 转换为 PDF 的工具 Wkhtmltopdf,安装使用介绍如下。 1 Centos7 下安装 系统信息: 系统: Centos7.6 CPU架构: X86 系统架构: 64位 在版...

  53. Deno 1.0 发布:为 JavaScript 和 TypeScript 提供安全运行时环境

    经过了为期 2 年的开发,Deno 终于在 2020 年的 5 月份完成了 1.0 版本 。其 官方网站 宣称,Deno 为 JavaScript 和 TypeScript 提供了一个安全的运行时环境。听起来是不是和 Node.js 类似?没错,就是这样,因为 Deno 是由 Node.js 的原班人马开发的。Ryan Dahl(Deno 和 Node.js 作者)之前发表过一篇文章—— “关于 ...

  54. Vue 3.x 项目环境搭建

    ​ 1.全局安装 Vue-CLI npm install -g @vue/cli@3.10.0 //后面去掉版本号 安装的就是最新版 复制代码 ​ 2.查看版本 vue -V //注意:大写V 复制代码 1.1.2 Vue CLI 创建项目 ​ 1.创建项目命令 vue create demo // vue create 项目名 复制代码 ​ 2.启动项目测试 npm run serve // 退出指令 ctrl + ...

  55. Vue 阻止事件冒泡

    Vue 阻止事件冒泡 by: 授客 QQ : 1033553122 开发环境 Win 10 element-ui  "2.8.2" Vue 2.9.6 事件冒泡简介 如下图,当我们点击页面某个元素时,会产生点击事件,事件由外到内,逐层递进(事件捕获阶段,途中的1->2->3->4),当目标元素捕捉到目标事件时,会响应事件,并...

  56. 用vue简单写一个音乐播放组件

    公司有个单位项目,需要读取语音文件并进行播放,其实用audio引入个播放链接即可,不需要太多功能后来想到网站是不是也可以放个小播放器插件,索性查了audio相关api,也学习其中相关技巧,分享给大家

  57. 第十届|前端跨端跨平台开发

    本届前端早早聊由刘芳(宋小菜),Jim(滴滴),子洋(政采云),晟怀(阿里巴巴),保哥(DCloud),JJ(京东),别针(天猫精灵)进行分享 随着互联网商业形式愈加多元,前端形态也愈加丰富。例如在移动端跨平台上有RN、Flutter、uni-app、taro、ionic等,桌面端跨平台有electron。 前置背景 VUE.js 是一套用于构...

  58. 一文搞懂JavaScript原型链与继承

    “面向对象”有三个基本特性,即”封装,继承,多态“。一般来说,三个特性都完全满足的话,我们称为“面向对象语言”,而称满足其中部分特性的语言为“基于对象语言”。 “对象系统 ”的继承特性,有三种实现方案,包括基于类(class-based)、基于原型(prototype-based)和基于元类(metaclass-based )。 JavaScript 没有采用...

  59. NodeJS全栈开发一个功能完善的Express项目(附完整源码)

    一. 前言 Node.js 对前端来说无疑具有里程碑意义,与其越来越流行的今天,掌握Node.js技术已经不仅仅是加分项,而是前端攻城师们必须要掌握的一项技能。而Express基于Node.js平台,快速、开放、极简的Web开发框架,成为Node.js最流行的框架,所以使用Express进行web服务端的开发是个不错且可信赖的选择。但是Express...

  60. RTSP?不存在的 -> 前端实时流探索记

    作为一个从未接触过实时流(直播流)的人,我之前对实时视频一直没有概念,而最近参与的项目刚好有视频监控的需求,在参与技术选型之前,我对前端实时流的展示进行了一下摸底。

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

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