前端内存优化的探索与实践；web前端性能优化（2）；学习vue源码（17）再探生命周期之初始化实例属性及事件；JS基础知识总结（三）：原型、原型链；JavaScript类型判断的四种方法；WebGL学习（一）– 使用WebGL绘制一个点；你不知道的 TypeScript 泛型（万字长文，建议收藏）；几道面试题理解JavaScript运行机制
-
前端内存优化的探索与实践 引 言 标注是地图最基本的元素之一，标明了地图每个位置或线路的名称。在地图 JSAPI 中，标注的展示效果及性能也是需要重点解决的问题。 新版地图标注的设计中，引入了 SDF （ signed distance field）重构了整个标注部分的代码。新的方式需要把标注的位置偏移，避让，三角拆分等全…
-
相比于对小图进行iamge sprite，在模块化开发模式下，当前更主流的方案是将小图转化为DataURLs。 什么是Data URLs? Data URLs是一种以 data: 为前缀的协议（scheme）。通过这个协议，内容创作者可以向文档中嵌入小文件。所以，Data URLs也被称为“文件中的文件”。Data URLs之前被称为“Data URIs”, 后来这个名字被WHATW…
-
在前一篇文章 学习vue源码（16）初探生命周期各阶段都在干嘛 Vue.js生命周期可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段、卸载阶段。 而初始化阶段又可分为 在Vue.js实例上初始化一些属性、事件以及响应式数据，如props、methods、data、computed、watch、provide和inject等。 这一次，我们就来探究第…
-
“ 关注 前端开发社区 ，回复”1″即可加入 前端技术交流群，回复 “2”即可免费领取 500G前端干货！ 上一篇 JS基础知识总结（二）主要了介绍深拷贝、浅拷贝的基础知识，本文将介绍JS原型、原型链的有关内容。 1.原型 …
-
JavaScript有八种内置类型，除对象外，其他统称为“基本类型”。 空值（null) 未定义(undefined) 布尔值（boolean) 数字（number) 字符串（string) 对象 (object) 符号（symbol, ES6中新增) 大整数（BigInt, ES2020 引入） Symbol： 是ES6…
-
WebGL，是一项用来在网页上绘制和渲染复杂三维模型，并允许用户与之交互的技术。 传统意义上，只有高配置的计算机或者专用的游戏机才能渲染三维图形，WebGL技术结合了HTML5和JavaScript，允许开发者在网页上创建和渲染三维图形。 从传统意义上，为了显示三维图形，开发者需要使用C或者C++语言，辅以专业的计算机图形库…
-
你不知道的 TypeScript 泛型（万字长文，建议收藏）
泛型是 TypeScript（以下简称 TS） 比较高级的功能之一，理解起来也比较困难。泛型应用场景非常广泛，很多地方都能看到它的影子。平时我们阅读开源 TS 项目源码，或者在自己的 TS 项目中使用一些第三方库（比如 R…
-
文章中若有错误的地方，欢迎指出。 我们先来看看下面:point_down:几道面试题： // example1 let a = {}, b = ‘0’, c = 0; a = ‘堆栈’; a = ‘内存’; console.log(a );//内存 —————————————————————– // example 2 let a = {}, b = Symbol(‘1’), c = Symb…
-
对于实习招聘（甚至校招）来说，项目经历可能是获得面试的敲门砖，但是基础绝对是赢得面试的通天索。 (互联网侦察注：校招就是考基础和潜力，基础扎实潜力不错的一般都会收) 即使是实习招聘，白板写代码也很可能逐渐成为主流面试的标配，平时要有意识地锻炼这方面能力，要不然面试时没有IDE真的是做不下去。 (互联网侦…
-
学习vue源码（18）三探生命周期之初始化provide与inject
上篇文章 学习vue源码（17）再探生命周期之初始化实例属性及事件 讲解了初始化阶段的 initLifecycle(vm) initEvents(vm) initRender(vm) 复制代码 即beforeCreate钩子函数触发前对实例 属性和事件的初始化。 // src/core/instance/init.js Vue.prototype._init = function (options?: Object) { …
-
作者： Marc Backes 翻译：张全玉 这是从头开始创建 Vue.js 系列文章的第二部分，在这里我教您如何创建诸如 Vue.js 之类反应式框架的基础。 在第一部分中，描述了我们需要的部分以及遵循的路线图。 如果您还没有阅读过，建议您在阅读本文之前先阅读。 我只有1年的 Vue.js 工作经验，但是我参加了 Evan You 本人…
-
图解JavaScript——代码实现【2】（六种异步方案,重点是Promise、Async、发布/订阅原理实现，真香）
本节主要阐述六种异步方案:回调函数、事件监听、发布/订阅、Promise、Generator和Async。其中重点是发布/订阅、Promise、Async的原理实现，通过对这几点的了解，希望我们前端切图仔能够在修炼内功的路上更进一步。
-
基本类型：number string boolean null undefined symbol bigint 引用数据类型:object (包含，Date,RegExp,Function,Array,Math..) 二、symbol的作用 首先说明symbol是基本类型之一，symbols 是一种无法被重建的基本类型。这时 symbols 有点类似与对象创建的实例互相不相等的情况，但同时 symbols又是一种无法被改…
-
往期回顾 从零开始的Flutter之旅: StatelessWidget 从零开始的Flutter之旅: StatefulWidget 从零开始的Flutter之旅: InheritedWidget 在上篇文章中我们介绍了InheritedWidget，并在最后引发出一个问题。 虽然Inhe…
-
在没有CommonJS，AMD，CMD等规范的时候，人们为了让代码模块化，采用了下面这个链接里的方法： www.ruanyifeng.com/blog/2012/1… CommonJS NodeJS 是 CommonJS 规范的实现，webpack 也是以 CommonJS 的形式来书写。CommonJS 是一种只适用于 JavaScript 的静态模块化规范。只适用于 Node.js 开发，…
-
之前在项目中写了定时器来做循环播放，但是总是会有越走越快的问题，开始是以为前后的HTML代码拼接的有问题，时间紧急的情况下反复改了很多也没什么效果，后来发现是js定时器的问题，在这里记录一下。 （setinterval）多次初始化 使用js定时器（setinterval）首要的问题就是要记得清除，即调用（clearInterval）方法，…
-
SplitChunks插件是什么呢，简单的来说就是Webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。 提到前端优化，提取公共代码是必不可少的手段。在Webpack出现前，提取公共代码是人为去处理，而SplitChunks插件的作用就是通过配置让Webpack去帮你提…
-
部署流程：（执行 zr-deploy 后） 选择部署环境 配置文件 zr-deploy-config.json 打包：执行配置文件的 打包命令 buildCommand 打包项目 压缩：打包完成后将文件压缩 local.distDir -> local.distZip 连接服务器： node-ssh 连接服务器 上传代码：上传文件到项目目录（ server.distDir …
-
上一篇搭建了基本的webpack项目，可以支持react，less的基本使用，但是没有考虑到项目中的实际情况，例如生产环境的代码混淆，代码压缩，开发环境的热启动等。 下面我们就针对开发与生产环境的不同需求，对webpack进行下一步的配置 生产环境的配置与开发环境的配置有很多的不同点，所以我们需要分别建对应的配置文件…
-
js中万物皆对象？其实这并不是完全正确的，js中的简单基本类型（ string ， number ， boolean ， undefined ， null ， symbol ）本身并不是对象。但对象确实是js的基础。 js还有很多特殊的对象子类型，我们可以称之为复杂基本类型。如常见的函数和数组就是对象的子类型。它们的本质和普通的对象一样，只有多了…
-
作者： Andy Li 翻译：张全玉 以 ES6 模块的形式编写 JavaScript 代码已经成为一种常见的行业实践。现在的浏览器已经支持 ES6 模块，但正如 web 开发中的大多数其他问题一样，…
-
除了我们能自定义函数外，js中还具有一些原生函数，如 String ， Number ， Boolean ， Object ， Function ， Array ， Date ， RegExp ， Error ， Symbol 等。可以看到有些内置类型和简单基本类型名字和很相似。 使用这些原生函数构造出来的对象，对其使用 typeof 时返回的都是 object 。 const str…
-
替代 webpack？一文带你了解 snowpack 原理，你还学得动么
近期，随着 vue3 的各种曝光，vite 的热度上升，与 vite 类似的 snowpack 的关注度也逐渐增加了。目前（2020.06.18）snowpack 在 Github 上已经有了将近 1w stars。
-
带你了解 acorn 内部的实现。
-
JavaScript中一个最重要的概念,定义了变量或者函数有权访问的其他数据,决定了他们各自的行为.每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中 每个函数都有自己的执行环境,当执行流进入一个函数时.函数的环境对象就会被压入一个环境栈中.在函数执行完成之后将其环境弹出 …
-
项目背景 源于 2019 年 11 月 16 日 FCC 成都社区主办的 Web 全栈大会上尹吉峰老师的 GraphQL 的分享，让我产生了浓厚的兴趣。GraphQL 是一个用于 API 的查询语言，是使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。一个 GraphQL 服务是通过定义类型和类型上的字段来创建的，然后给每个…
-
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 的值是多…
-
前言 Vue 的响应式原理一直都在被人解析，每个人都有不同的理解，在这里我只是记录自己所学的知识，以及尽可能写的清晰，并且希望能帮到还没有理解的同学。 响应式原理 vue响应式原理关系图 Observer 劫持 data 内的所有数据进行响应处理 Compile 编译模版，只要模版内引用了 data…
-
webpack loader 是用于编译源文件为目标文件，默认情况， webpack 只能编译打包 JavaScript 文件，其他文件则需要特定 loader 进行加载，如： css 文件模块，加载器为 css-loader (配合 style-loader 或者 MiniCssExtractPlugin.loader ) less 文件模块，加载器为 less-loader （配合预处…
-
为了方便描述，本文会将“web前端性能优化”简称为“性能优化”。 在阅读英文文章时，偶尔会发现有小标题显示 TL;DR 或者 tl;dr。网上英文解释有两种，一种是Too long;Don’t read，另一种是Too long;Didn’t read。意思是：“文章太长了，读不下去了”。常用在英文长文中的摘要标题，显示整篇文章的精华或总结。 什么是性能…
-
今天在看vue-composition-api文档的时候，突然发现多出来个Languages选项： 咦奇怪，我记得以前好像没有这个选项的呀。赶紧点开看看有没有中文： 太棒了！还是尤大对咱好，感动得我热泪盈眶，虽然有可能压根就不是他翻译的。 因为在知乎，我曾看他发布过这么一段话： 当然是不是他…
-
原生javascript组件开发之Web Component实战
前言 作为一名前端工程师，我们每天都在和组件打交道，我们也许基于 react/vue 使用过很多第三方组件库，比如 ant design ， elementUI ， iView 等，或者基于它们进行过组件的二次开发，比如 业务组件 ， UI组件 等，亦或者觉得团队能力很强，可以不依赖第三方而独立开发属于自己的组件库。无论何种形式，组件开发已…
-
JavaScript之深入理解立即调用函数表达式（IIFE），你对它的理解，决定了它的出镜率（系列六）
立即调用函数 本篇文章，主要讲解的立即执行函数或自执行匿名函数的含义、用法、以及使用它的主要场景。系列的前面几篇文章主要讲解了作用域、原型、执行上下文，本篇文章一样起到了承上启下的作用，如果您感兴趣，不妨去看看哦～ 传送门 目录 一、了解立即调用函数表达式 二、立即调用函数表达式报错…
-
[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…
-
Node.js概述 2008年，google的Chrome发布，随后就以极快的速度占领市场，超过IE成为浏览器市场的主导者。 2009年，Ryan Dahl在在谷歌的Chrome V8引擎基础之上，打造了基于事件循环的异步IO框架：Node.js。 基于事件循环的异步IO 单线程运行，避免多线程的变量同步问题 js可以编写后台代码前后台同一编程…
-
作者： Marc Backes 翻译：张全玉 从头开始创建自己的Vue.js-第3部分（构建 VDOM ） 这是从头开始创建Vue.js的系列文章的第三部分，我将在这里教您如何创建诸如Vue.js之类的反应式框架的基础。 要关注此博客文章，我建议您阅读本系列的第一部分和第二部分。 这篇文章起初可能很长，但可能不像它看起来那样…
-
“ “You know nothing Jon Snow” this关键字 “ “你不知道的JavaScript学习笔记02” 概念 定义：当一个函数被调用时，会创建一个执行上下文。这个执行上下文会包含函数在哪里被调用（调用栈）、函数的调用方式、传入的参数等信息。this就是这个记录的一个属性，会在函数执行的过程中用到 …
-
最近原创文章回顾： 《了不起的 tsconfig.json 指南》 《了不起的 Webpack HMR 学习指南（含源码分析）》 《《你不知道的 Blob》番外篇》 《《你不知道的 WeakMap》番外篇》 Webpack 是前端很火的打包工具，它本…
-
数组作为JS的基础，是每个前端程序员都需要掌握的基础。本人作为前端小白，不管是刚起步的时候，还是现在接触项目，或者练习简单的数组算法题的时候，就一看到代码或题目，脑子里经常只会想起for循环，逻辑晦涩难懂，代码庞大冗余，上手及其困难。很大的原因就是数组方法使用的不熟练，有时候一大串的代码，只需要借用数…
-
无论现在的你处于什么状态，是时候对自己说：不为模糊不清的未来担忧，只为清清楚楚的现在努力。 复制代码 由于小编时间经历有限，所了解所有VUE的知识分为私企与大家分享，内容如有处处还请您点拨，指正。TEL/V：15200025778 本期主要内容 什么是VUE 如何使用VUE MVVM 绑定语法 指令 一. 什…
-
前两天尤大在 vue 3.0 beta 直播中提到了一个 vite 的工具，而且还发推表示再也回不去 webpack 了, 还引来了 webpack 核心开发人员肖恩的搞笑回复, 那就让我们一起来看一下 vite 到底有啥魔力？ evernotecid://F8C40634-B31F-4F08-81FD-EE7189DF2F84/appyinxiangcom/4070474/ENResource/p1713 什么是 Vit…
-
Hello，大家好！我是Cathy海希。 接下来终于就要正式进入JavaScript（以下简称JS）的学习，想想还有些小激动呢！俗话说得好，“知己知彼，百战百胜”，在学习JS之前，让我们一起来看看它的发展过程中那些重要的事件吧！ 诞生 1995年，由美国程序员布兰登创造。他当时正在为网景（NetScape）工作，公司让他为浏览器开发…
-
之前我曾写过如何将canvas图形转换成图片和下载canvas图像的方法，这些都是在为这个插件做技术准备。 技术路线很清晰，将网页的某个区域的内容生成图像，保持到canvas里，然后将canvas内容转换成图片，保存到本地，最后上传到微博。 我在网上搜寻到html2canvas这个能将指定网页元素内容生成canvas图像的javascript工具…
-
「JS-Learning」事件循环机制，微任务和宏任务的关系
JavaScript（后面简称 JS）是单线程的，同一时间只能做一件事情。如果碰到某个耗时长的任务（比如一个需要 3s 的网络请求），那么后续的任务都要等待，这种效果是无法接受的，这时我们就引入了异步任务的概念。 所以 JS 执行主要包括同步任务和异步任务： 同步任务：会放入到执行栈中，他们是要按顺序执行的任务；…
-
在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现，而带角度的渐变就复杂很多；就好像下面这样，假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。
-
const mysql = require(‘mysql’) 复制代码 3.书写数据库的匹配项 // 数据库的配置选项 const options = { host: ‘localhost’,//主机名 user: ‘root’,//用户 password: ‘123456’,//密码 port: 3306,//端口号 database: ‘student’//要操作的数据库 } 复制代码 详细参数配置见 4.实例链接数据…
-
译文：2020的十大JavaScript图像处理库【渡一教育】
原文翻译自： https://blog.bitsrc.io/image-manipulation-libraries-for-javascript-187fde1ad5af，作者：Mahdhi Rezvi 。 如有翻译不准确，请多指正！ 使用JavaScript处理图像可能非常困难且繁琐，但值得庆幸的是，有许多可以使处理变得简单的库，以下是我最喜欢的不同类别的库。 如果你在其中发现有用的东西…
-
2.（译）图说前端-ArrayBuffers 和 SharedArrayBuffers
在 上一篇文章 ,我解释了像JavaScript这样的自动内存管理语言如何与内存一起工作，我还解释了像C语言这种手动内存管理如何工作。 当我们谈论 ArrayBuffers 和 SharedArrayBuffers 的时候，为什么花了大篇幅介绍内存管理呢？ 这是因为Arraybuffer为您提供了一种手动处理某些数据的方法，即使您使用的是具有自动内…
-
我们在开发 iOS App 内的前端页面时，有一个很大的痛点，页面无法使用 Safari Inspector 等工具调试。遇到了问题，我们只能想办法加 vConsole，或者注入 Weinre，或者盲改，实在不行就找客户端同学手动打包调试，…
-
尤雨溪表示，“ 标题应该叫深入理解… 这个是基础要吓跑一大批人了[捂脸]”
-
JS中，调用Number()主要有两种方式，一是作为一个 function 将任意类型的数据转换成数值，二是作为一个类，通过new 生成一个数值对象。 其中第一种方式更常用。 用法一：function Number(value) 将一个任意类型的数据转换成数值，无法转换的则返回 NaN，转换规则类似于类型隐式转换，与 parseFloat 略有差异。 …
-
HTML 转 PDF 工具 Wkhtmltopdf 安装使用
空心菜 读完需要 5分钟 速读仅需 2 分钟 在这里推荐一款比较好用的 HTML 转换为 PDF 的工具 Wkhtmltopdf，安装使用介绍如下。 1 Centos7 下安装 系统信息: 系统: Centos7.6 CPU架构: X86 系统架构: 64位 在版…
-
Deno 1.0 发布：为 JavaScript 和 TypeScript 提供安全运行时环境
经过了为期 2 年的开发，Deno 终于在 2020 年的 5 月份完成了 1.0 版本 。其 官方网站 宣称，Deno 为 JavaScript 和 TypeScript 提供了一个安全的运行时环境。听起来是不是和 Node.js 类似？没错，就是这样，因为 Deno 是由 Node.js 的原班人马开发的。Ryan Dahl（Deno 和 Node.js 作者）之前发表过一篇文章—— “关于 …
-
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 + …
-
Vue 阻止事件冒泡 by: 授客 QQ ： 1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 事件冒泡简介 如下图，当我们点击页面某个元素时，会产生点击事件，事件由外到内，逐层递进（事件捕获阶段，途中的1->2->3->4），当目标元素捕捉到目标事件时，会响应事件，并…
-
公司有个单位项目，需要读取语音文件并进行播放，其实用audio引入个播放链接即可，不需要太多功能后来想到网站是不是也可以放个小播放器插件，索性查了audio相关api，也学习其中相关技巧，分享给大家
-
本届前端早早聊由刘芳(宋小菜)，Jim(滴滴)，子洋(政采云)，晟怀(阿里巴巴)，保哥(DCloud)，JJ(京东)，别针(天猫精灵)进行分享 随着互联网商业形式愈加多元，前端形态也愈加丰富。例如在移动端跨平台上有RN、Flutter、uni-app、taro、ionic等，桌面端跨平台有electron。 前置背景 VUE.js 是一套用于构…
-
“面向对象”有三个基本特性，即”封装，继承，多态“。一般来说，三个特性都完全满足的话，我们称为“面向对象语言”，而称满足其中部分特性的语言为“基于对象语言”。 “对象系统 ”的继承特性，有三种实现方案，包括基于类（class-based）、基于原型（prototype-based）和基于元类（metaclass-based ）。 JavaScript 没有采用…
-
NodeJS全栈开发一个功能完善的Express项目（附完整源码）
一. 前言 Node.js 对前端来说无疑具有里程碑意义，与其越来越流行的今天，掌握Node.js技术已经不仅仅是加分项，而是前端攻城师们必须要掌握的一项技能。而Express基于Node.js平台，快速、开放、极简的Web开发框架，成为Node.js最流行的框架，所以使用Express进行web服务端的开发是个不错且可信赖的选择。但是Express…
-
作为一个从未接触过实时流（直播流）的人，我之前对实时视频一直没有概念，而最近参与的项目刚好有视频监控的需求，在参与技术选型之前，我对前端实时流的展示进行了一下摸底。
更多内容请关注公众号【前端开发博客】每日更新
